CSS 타이포그래피 속성

HTML의 타이포그래피를 위한 기본 속성은 다음과 같이 구성됩니다.

글꼴 속성(Font properties)

font-family – 글꼴
font-size – 글꼴 크기
font-weight – 글꼴 굵기
font-style – 글꼴 스타일
font-variant – 글꼴 변형

텍스트 속성(Text properties)

text-align – 텍스트 정렬
text-decoration – 텍스트 장식
text-indent – 텍스트 들여 쓰기
text-shadow – 텍스트 그림자
text-transform – 텍스트 변환

기타 여러 가지(Miscellaneous)

letter-spacing – 글자 간격
word-spacing – 단어 간격
white-space – 화이트 스페이스
line-height – 행간

아래의 CSS 예제를 통해 이미지를 상상해 보세요. 그리고 미리 보기로 확인하세요.

.typography-example-1 {
	background-image: linear-gradient(135deg, #723362, #9d223c);
    background-color: #9d223c;
    color: #fff;
    padding: 1em 0;
    font-weight: 300;
    font-size: 1.8em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .4em;
    padding-left: .4em
}

.typography-example-2 {
    background: #fff;
    color: #000;
    border: .5em solid;
    font-size: 1.5em;
    padding: 1em 0;
    text-align: center
}

.typography-example-2 .title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4em;
    padding-left: .4em
}

.typography-example-2 .author {
    color: #888;
    font-size: .7em;
    font-weight: 300;
    font-style: italic;
    letter-spacing: .12em;
    padding-left: .12em
}

.typography-wrapper {
	width: 520px;
}
.typography-example-3 {
	border: .2em solid #ff4136;
	font-size: 3em;
	text-align: center;
	padding: .2em;
	color: #fff
}

.typography-example-3 span {
	display: inline-block;
	width: 15%;
	padding: .8125rem;
}

.typography-example-3 span:nth-child(1) { background: #ff4136 }
.typography-example-3 span:nth-child(2) { background: #ff851b }
.typography-example-3 span:nth-child(3) { background: #2ecc40 }
.typography-example-3 span:nth-child(4) { background: #0074d9 }
.typography-example-3 span:nth-child(5) { background: #b10dc9 }