글꼴과 텍스트

읽기 좋게 만드는 것

화면의 대부분은 글자입니다. 글자를 다루는 속성 몇 가지만 정해도 읽는 느낌이 크게 달라집니다.

글꼴 정하기

font-family 에는 여러 개를 쉼표로 나열합니다. 앞에서부터 찾아 있는 것을 사용합니다.

<p class="sys">시스템 글꼴로 그립니다. 홍길동</p>
<p class="serif">바탕 계열로 그립니다. 홍길동</p>
<p class="mono">고정폭으로 그립니다. code 1234</p>

/* 앞에서부터 찾아 있는 것을 사용합니다.
   마지막에는 계열 이름을 두어 없을 때를 대비합니다. */
.sys   { font-family: "Pretendard", "맑은 고딕", sans-serif; }
.serif { font-family: "바탕", serif; }
.mono  { font-family: Consolas, monospace; font-size: 14px; }

마지막에는 계열 이름을 둡니다 — sans-serif(고딕), serif(바탕), monospace(고정폭). 앞의 글꼴이 하나도 없을 때 브라우저가 그 계열에서 고릅니다.

글꼴 이름에 빈칸이나 한글이 들어가면 따옴표로 감쌉니다. 계열 이름에는 따옴표를 붙이지 않습니다.

크기·굵기·줄 간격

<h3 class="title">도서관 이용 안내</h3>
<p class="body">평일은 오전 9시부터 오후 6시까지 문을 엽니다.
주말과 공휴일은 쉽니다. 대출은 한 번에 다섯 권까지 할 수 있고,
기간은 2주입니다.</p>

.title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.body {
  font-size: 1rem;
  /* 단위 없이 적으면 글자 크기의 배수입니다 */
  line-height: 1.8;
  color: #3b4252;
}

line-height 는 단위 없이 적습니다. 그러면 글자 크기의 배수가 되어, 글자를 키우면 줄 간격도 함께 커집니다. 28px 처럼 고정으로 적으면 글자만 커지고 줄은 그대로라 글이 겹쳐 보입니다.

본문은 1.6~1.8 이 읽기 좋습니다. 제목은 1.2~1.3 정도로 좁힙니다.

정렬과 꾸밈

<p class="c">가운데로 맞췄습니다</p>
<p class="r">오른쪽으로 맞췄습니다</p>
<p class="u">밑줄을 그었습니다</p>
<p class="s">가운데 줄을 그었습니다</p>
<p><a href="/" class="plain">밑줄을 뗀 링크</a></p>

.c { text-align: center; }
.r { text-align: right; }
.u { text-decoration: underline; }
.s { text-decoration: line-through; color: #686c78; }

/* 링크의 밑줄을 뗍니다 */
.plain { text-decoration: none; }

링크의 밑줄을 뗄 때는 다른 표시를 남기십시오. 색만으로는 색을 구분하기 어려운 사람이 링크를 알아볼 수 없습니다. 5.1 에서 다시 다룹니다.

세 가지

• line-height 에 단위를 붙입니다. 글자 크기를 바꿔도 줄 간격이 따라오지 않아 글이 겹치거나 지나치게 벌어집니다.
• 계열 이름을 빠뜨립니다. font-family: "Pretendard" 만 적으면 그 글꼴이 없는 장치에서 브라우저 기본 글꼴로 떨어집니다. 의도한 계열을 마지막에 적어 두십시오.
• 본문을 가운데 정렬합니다. 여러 줄이 되면 줄 시작이 들쭉날쭉해 읽기 어려워집니다. 제목이나 짧은 문구에만 사용하십시오.

직접 해보기

정리

• font-family 는 여러 개를 나열하고 마지막에 계열 이름을 둡니다.
• line-height 는 단위 없이 적어 글자 크기의 배수로 둡니다.
• 본문 줄 간격은 1.6~1.8 이 읽기 좋습니다.
• 링크의 밑줄을 떼면 다른 표시를 남겨야 합니다.