Learn HTML & CSS타이포그래피
웹에서 사람들이 읽는 것은 대부분 텍스트이고, 페이지가 주는 느낌 역시 그 텍스트가 어떻게 짜여 있느냐에서 나옵니다. 서체를 바꾸고, 줄 간격을 살짝 조정하고, 한 줄의 길이를 제한하는 것만으로도 같은 문단이 답답하고 거부감 드는 느낌에서 편안하고 읽기 좋은 느낌으로 바뀝니다. 이건 단순한 꾸미기가 아닙니다. 바로 타이포그래피, 즉 글이 얼마나 읽기 편한지를 결정하는 몇 가지 CSS 속성들이며, 이 장에서는 매일 마주하게 될 속성들을 하나씩 살펴봅니다.
서체 선택하기
폰트를 지정하는 속성은 font-family이고, 여기에는 하나의 폰트가 아니라 목록을 넘겨줍니다. 이 목록을 **폰트 스택(font stack)**이라고 부르는데, 브라우저는 목록의 첫 번째 폰트를 시도하고, 그 폰트를 쓸 수 없으면 다음 폰트로, 그다음 폰트로 차례차례 넘어갑니다.
body {
font-family: "Helvetica Neue", Arial, sans-serif; /* Helvetica를 먼저 시도하고, 없으면 Arial, 그다음 아무 sans-serif */
}목록의 마지막 이름은 항상 sans-serif나 serif 같은 제네릭 계열(generic family)이어야 합니다. 이것이 일종의 안전망이 되어줍니다. 지정한 폰트 중 어느 것도 사용자 기기에 없더라도, 브라우저가 임의로 고른 기본값이 아니라 그래도 무난한 폰트를 보여주게 됩니다. 이름에 공백이 있는 폰트는 따옴표로 감싸야 하고, 한 단어짜리 이름은 그럴 필요가 없습니다.
font-family는 폰트 하나가 아니라 목록을 받고, 브라우저는 그중 찾을 수 있는 첫 번째 폰트를 사용합니다. 안전한 대체 폰트가 있도록 목록은 항상 sans-serif 같은 제네릭 계열로 끝내세요. 공백이 들어간 폰트 이름은 따옴표로 감싸주세요. 텍스트 크기 정하기
텍스트 크기는 font-size로 지정합니다. 픽셀 값을 줄 수도 있지만, 실제로 사용해야 할 단위는 **rem**입니다. 이 단위는 페이지의 기본 폰트 크기에 연결되어 있습니다. 1rem은 브라우저의 기본 텍스트 크기와 같은데, 보통 16px이므로 1rem은 일반적인 읽기 크기이고 1.25rem은 그보다 조금 큰 크기가 됩니다.
body {
font-size: 1rem; /* 기본 읽기 크기, 보통 16px */
}
h1 {
font-size: 2rem; /* 기본 크기의 두 배 */
}font-size는 텍스트가 얼마나 큰지를 정하고, rem이 그때 사용할 단위입니다. 1rem은 브라우저의 일반적인 텍스트 크기이므로 1rem은 보통 크기, 2rem은 두 배 크기입니다. 본문 텍스트를 px로 정하는 건 피하세요. 다음 레벨에서 그 이유를 더 자세히 다룹니다. 굵기와 스타일
글자의 모양을 바꾸는 속성은 두 가지입니다. font-weight는 텍스트가 얼마나 굵은지를 정하고, font-style은 **이탤릭(italics)**을 켭니다.
strong {
font-weight: bold; /* 더 무겁고 두꺼운 획 */
}
em {
font-style: italic; /* 기울임 */
}bold와 normal은 일상적으로 쓰는 굵기 키워드입니다. 이탤릭의 경우 italic은 텍스트를 기울이고 normal은 그대로 세워둡니다.
font-weight는 텍스트를 더 굵거나 가늘게 만들고, font-style: italic은 텍스트를 기울입니다. bold와 normal 키워드만으로도 일상적인 필요는 대부분 해결됩니다. 이탤릭은 전체 문단이 아니라 강조에만 사용하세요. 전체에 쓰면 읽기 어려워집니다. 텍스트를 읽기 좋게 만드는 간격
편안한 텍스트는 대부분 간격에서 나옵니다. line-height는 줄 사이의 간격을 조절하고, 여기에 여유를 조금만 줘도 문단을 훨씬 읽기 편하게 만들 수 있습니다.
p {
line-height: 1.5; /* 폰트 크기의 1.5배 */
}1.5처럼 단위 없는 순수한 숫자를 사용하세요. 이는 "폰트 크기의 1.5배"라는 뜻이므로, 텍스트가 커지면 간격도 함께 커집니다. 답답한 줄 간격은 페이지가 읽기 어렵게 느껴지는 가장 흔한 원인 중 하나인데, 이 값 하나로 대부분 해결됩니다.
line-height는 줄 사이의 간격을 정하고, 1.5 정도의 값을 주면 텍스트가 훨씬 읽기 쉬워집니다. 단위 없는 순수한 숫자로 써서 텍스트와 함께 간격이 커지게 하세요. 답답한 줄 간격은 페이지가 읽기 어렵게 느껴지는 대표적인 원인인데, 이걸로 대부분 해결됩니다. 정렬과 장식
정렬과 마무리 작업은 세 가지 속성이 담당합니다. text-align은 텍스트를 왼쪽, 오른쪽, 또는 가운데로 옮깁니다. text-transform은 대소문자를 바꾸는데, 예를 들어 텍스트를 전부 대문자로 만들 수 있습니다. 그리고 text-decoration은 밑줄 같은 줄을 추가하거나 제거합니다.
h1 {
text-align: center; /* 제목을 가운데로 */
}
.button {
text-transform: uppercase; /* 전부 대문자로 표시 */
text-decoration: none; /* 링크 밑줄 제거 */
}text-transform: uppercase는 다시 입력할 필요 없이 텍스트를 대문자로 보여주므로, 원래 내용은 여전히 평범한 단어로 남아 있습니다. 밑줄은 text-decoration으로 추가하거나 제거합니다.
text-align은 텍스트를 왼쪽, 오른쪽, 가운데로 옮기고, text-transform: uppercase는 대문자로 보여주고, text-decoration은 밑줄 같은 줄을 추가하거나 제거합니다. CSS로 대문자를 만들면 실제 텍스트는 평범한 단어로 남아 있어서 다시 입력할 필요가 없습니다. 링크의 밑줄을 없애고 싶을 때는 text-decoration: none을 사용하세요. font 축약형과 상속
폰트 속성에는 편리한 특성이 있습니다. 아래로 전달된다는 점이죠. <body>에 font-family를 지정하면 그 안의 모든 문단, 제목, 링크가 이를 물려받으므로, 같은 걸 반복해서 쓸 일이 거의 없습니다.
body {
font-family: system-ui, sans-serif; /* 안의 모든 요소가 이를 물려받음 */
line-height: 1.5;
}이 덕분에 타이포그래피 설정 대부분은 스타일시트 위쪽 한 곳에 모여 있고, 각 요소는 달라야 할 부분만 재정의합니다.
body에 font-family를 한 번만 지정하면 모두가 이를 물려받습니다. 그러면 타이포그래피 설정이 스타일시트 위쪽 한곳에 모여 있게 됩니다. 각 요소는 달라야 할 부분만 재정의합니다.