CSS 강좌 / 글꼴, 글자 크기, 굵기, 줄 간격 설정하기

CSS에서 글꼴은 font-family, 글자 크기는 font-size, 굵기는 font-weight, 줄 간격은 line-height로 설정합니다. 읽기 쉬운 본문을 만들려면 글꼴만 고르는 것이 아니라 글자 크기·한 줄의 길이·줄 간격을 함께 조절해야 합니다.

font-family는 후보 글꼴을 순서대로 지정합니다

body {
  font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
}

브라우저는 지정한 순서대로 사용할 수 있는 글꼴을 찾습니다. 글꼴이 없거나 특정 문자를 지원하지 않으면 다른 글꼴로 대체할 수 있어 한 문장 안에서도 실제 사용 글꼴이 여러 개일 수 있습니다. 끝의 sans-serif는 특정 제품명이 아니라 삐침이 없는 글꼴 계열이며, 실제 글꼴은 환경에 따라 달라집니다. 공백이 들어 있는 글꼴 이름은 따옴표로 묶어 두면 구분하기 쉽습니다.

font-family에 이름을 적는 것만으로 글꼴 파일이 내려받아지지는 않습니다. 위 예제는 기기에 설치된 글꼴을 우선 사용하며 별도의 웹폰트를 불러오지 않습니다. 웹폰트를 사용하려면 @font-face나 제공자의 스타일시트 등으로 실제 파일을 연결해야 하고, 파일 경로와 사용 권한도 확인해야 합니다. 후보 목록의 의미는 MDN의 font-family 설명에서 확인할 수 있습니다.

크기와 굵기는 본문과 제목의 역할에 맞춥니다

rem은 html의 글자 크기를 기준으로 합니다. 브라우저 기본 설정이 다르면 같은 1rem의 픽셀 값도 달라질 수 있습니다. 글자가 작아 보인다고 본문을 고정 px로 바꾸기 전에 루트 값과 실제 글꼴을 확인하세요. 같은 크기라도 글꼴의 디자인에 따라 시각적인 크기와 줄바꿈 위치가 달라집니다.

400은 보통 normal, 700은 bold에 대응합니다. 글꼴이 제공하는 굵기에 따라 결과가 달라지고 없는 굵기는 가까운 값으로 대체되거나 합성될 수 있습니다. 문서에서 중요한 의미는 HTML의 strong으로 표현하고, 시각적인 굵기 조절은 CSS로 합니다. 모든 굵은 글자가 의미상 중요 표시가 되는 것은 아닙니다.

단위 없는 line-height가 상속에 편리한 이유

줄 간격은 줄과 줄 사이의 빈 공간만을 뜻하는 속성이 아닙니다. line-height는 한 줄을 배치하는 높이에 관여하며, 글꼴의 실제 글자 높이와 같지는 않습니다. 문단 사이 간격은 다음 강의에서 다룰 margin으로 구분해서 조절합니다.

부모의 글자 크기가 16px이고 자식의 글자 크기가 32px일 때를 비교해 보세요. 부모의 line-height: 1.6은 배수 자체가 상속되어 자식의 줄 높이가 51.2px이 됩니다. line-height: 1.6em은 부모에서 계산한 길이 25.6px이 상속됩니다. 자식의 큰 글자가 여러 줄로 이어지면 줄이 빽빽하거나 겹쳐 보일 수 있습니다.

이 계산은 예제처럼 자식이 별도의 line-height를 지정하지 않는 조건입니다. 자식에 직접 다른 값을 지정하면 그 값이 적용됩니다. 본문에는 단위 없는 값을 기본으로 두면 글자 크기가 달라지는 제목과 강조문에서도 조절하기 쉽습니다. 계산과 상속 규칙은 MDN의 line-height 설명를 참고하세요.

한 줄의 길이도 함께 조절하기

예제의 max-width: 65ch는 본문이 지나치게 길게 펼쳐지는 것을 제한합니다. ch는 사용하는 글꼴의 숫자 “0” 너비를 기준으로 하는 단위이며, 한국어 65글자가 정확히 들어간다는 뜻은 아닙니다. 글꼴·굵기·문자 구성과 화면 너비에 따라 실제 줄바꿈은 달라집니다. 고정된 글자 수 목표보다 실제 긴 문단을 읽으며 길이를 조절하세요.

ch를 비롯한 글꼴 기준 단위의 정의는 MDN의 CSS 길이 단위 설명에서 확인할 수 있습니다.

실행하고 실제 글꼴과 계산값 확인하기

아래 전체 코드를 fonts.html에 UTF-8로 저장하고 브라우저에서 엽니다. 작은 글자 문단과 32px 비교 문단이 모두 들어 있어 크기와 줄 간격의 관계를 확인할 수 있습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>글꼴과 줄 간격 비교</title>
  <style>
    html { font-size: 100%; }
    body { margin: 24px; color: #333; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; }
    main { max-width: 65ch; }
    h1 { font-size: 2rem; font-weight: 700; }
    .copy { font-size: 1rem; font-weight: 400; line-height: 1.6; }
    .compare { font-size: 16px; margin-block: 24px; padding: 16px; background: #eef6f2; }
    .unitless { line-height: 1.6; }
    .length { line-height: 1.6em; }
    .large { margin: 0; font-size: 32px; }
  </style>
</head>
<body>
  <main>
    <h1>작은 정원의 글꼴</h1>
    <p class="copy">정원에는 햇빛을 좋아하는 식물과 그늘에서 자라는 식물이 함께 있습니다. 식물마다 필요한 환경이 다르므로 이름표를 읽고 알맞은 자리를 찾아주세요. 긴 문단의 줄 간격을 바꾸면 같은 내용도 얼마나 편하게 읽히는지 비교할 수 있습니다.</p>
    <h2>단위 없는 줄 간격</h2>
    <div class="compare unitless"><p class="large">글자 크기가 커져도 줄 간격이 그 크기에 비례합니다.</p></div>
    <h2>em으로 지정한 줄 간격</h2>
    <div class="compare length"><p class="large">부모에서 계산한 줄 간격을 그대로 물려받습니다.</p></div>
  </main>
</body>
</html>

1. 개발자 도구에서 본문 문단을 선택합니다. Computed의 font-family는 후보 목록이며 실제 사용 글꼴 이름이라고 단정하지 않습니다. Chrome·Edge에서는 Computed 아래의 Rendered Fonts에서 실제 사용된 글꼴을 확인할 수 있습니다. 다른 브라우저는 글꼴 전용 패널 등 메뉴 구성이 다를 수 있습니다.
2. 두 .large 문단의 계산된 line-height를 비교합니다. 단위 없는 값은 51.2px, em 값은 25.6px입니다. 두 번째 부모의 1.6em을 1.6으로 바꿔 차이가 사라지는지 확인한 뒤 되돌립니다.
3. .copy의 line-height를 1.2와 1.8로 각각 바꿉니다. 글자 크기는 유지되면서 줄의 배치가 달라지는지 확인하세요. 짧은 한 줄 문장만 보면 차이를 판단하기 어려우므로 긴 문단을 사용합니다.
4. main의 max-width를 45ch로 바꿉니다. 문단이 더 일찍 줄바꿈되는지 확인한 뒤 65ch로 되돌립니다. 창 너비가 이미 충분히 좁으면 상한값을 바꾸어도 차이가 작을 수 있습니다.

Rendered Fonts에서 실제 글꼴을 확인하는 과정은 Chrome DevTools의 로컬 글꼴 확인 안내에서도 볼 수 있습니다. 예상한 글꼴이 보이지 않으면 설치 여부와 지원 문자를 먼저 확인합니다. 웹폰트를 별도로 연결한 경우에는 Network에서 글꼴 파일의 응답과 차단 오류를 확인하세요. 기기에 설치된 글꼴은 네트워크 요청 없이 사용될 수 있으므로 Network에 요청이 없다는 사실만으로 글꼴 적용 실패라고 판단하지 않습니다.