실행 가능한 CSS 문서: 글자 크기

Q: CSS에서 글자 크기는 어떻게 바꾸나요?

요소에 font-size 속성을 지정해요. p { font-size: 18px; } 길이(px, rem, em), 퍼센트, large 같은 키워드를 받아요.

Q: HTML에서 글자 크기는 어떻게 바꾸나요?

스타일시트나 style 속성에서 CSS로 바꿔요. 옛 태그는 HTML5에서 폐기되었으니 쓰지 마세요.

Q: 브라우저의 기본 글자 크기는 얼마인가요?

사용자가 브라우저 설정에서 바꾸지 않았다면 본문 텍스트는 16px이에요. 기본적으로 1rem과 키워드 medium이 이 값과 같아요.

Q: 글자 크기에는 px, em, rem 중 무엇을 써야 하나요?

대부분의 텍스트에는 rem을 쓰세요. 사용자의 브라우저 글꼴 설정에 맞춰 커지고, 누적되지 않아요. 버튼 안의 아이콘처럼 크기가 부모를 따라야 할 때는 em을 쓰세요. px는 독자가 브라우저에서 정한 기본 글자 크기를 따르지 않으니 본문 텍스트에는 피하세요.

Q: em 글자 크기가 계속 커지는 이유는 무엇인가요?

em은 부모의 글자 크기를 기준으로 해서 중첩된 요소에서는 곱해지기 때문이에요. 1.2em 안의 1.2em은 기본값의 1.44배예요. 항상 루트 요소를 기준으로 하는 rem으로 바꾸세요.

CSS에서 글자 크기 지정하기

font-size 속성은 글자 크기를 정해요. 아무 요소에나 지정하면 자식이 따로 정하지 않는 한 그 안의 모든 텍스트가 그 크기를 상속받아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .small { font-size: 12px; }
    .normal { font-size: 16px; }
    .big { font-size: 1.5rem; }
    .huge { font-size: 48px; }
  </style>
</head>
<body>
  <p class="small">12px</p>
  <p class="normal">16px (the browser default)</p>
  <p class="big">1.5rem (24px)</p>
  <p class="huge">48px</p>
</body>
</html>

HTML에서 글자 크기를 바꿀 때도 CSS를 써요. style 속성()을 넣거나 스타일시트에 규칙을 추가하세요. 1990년대의  태그는 폐기되었고 최신 페이지에는 설 자리가 없어요.

font-size가 받는 단위

값	예시	기준
`px`	`16px`	없음: 고정 크기
`rem`	`1.25rem`	루트 `<html>` 요소의 글자 크기(기본 16px)
`em`	`1.2em`	부모 요소의 글자 크기
`%`	`120%`	`em`처럼 부모의 글자 크기(`120%`는 `1.2em`)
키워드	`large`	기본값 `medium`을 중심으로 한 정해진 단계
상대 키워드	`smaller`, `larger`	부모 크기에서 한 단계
뷰포트	`4vw`	뷰포트 너비(의 4%)
함수	`clamp(1rem, 4vw, 2rem)`	최솟값과 최댓값 사이에서 유동적

값을 입력하고 브라우저가 계산한 크기를 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { border: 1px dashed #9ca3af; padding: 8px; margin: 12px 0; }
  </style>
</head>
<body>
  <label>font-size: <input id="val" value="1.5rem" size="20"></label>
  <p id="sample">The quick brown fox</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.fontSize = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).fontSize;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

20px, 2em, 150%, x-large, smaller, 5vw를 입력해 보세요. big 같은 잘못된 값은 무시되고 텍스트는 마지막으로 유효했던 크기를 유지해요.

rem과 em: 발목을 잡는 차이

rem은 항상 루트 요소를 봐서 1.2rem은 어디에 있든 같은 크기예요. em은 부모를 봐서 요소가 중첩되면 크기가 곱해져요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em compounds</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .em { font-size: 1.2em; }
    .rem { font-size: 1.2rem; }
    div { border-inline-start: 3px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">1.2em
    <div class="em">1.2em inside
      <div class="em" id="deep-em">1.2em inside again</div>
    </div>
  </div>
  <div class="rem">1.2rem
    <div class="rem">1.2rem inside
      <div class="rem" id="deep-rem">1.2rem inside again</div>
    </div>
  </div>
</body>
</html>

가장 안쪽의 em 상자는 16 × 1.2 × 1.2 × 1.2 = 27.648px이에요. 가장 안쪽의 rem 상자는 여전히 19.2px이에요. 이런 누적은 부분들이 함께 커져야 하는 컴포넌트에서는 유용하고, 나머지 모든 곳에서는 뜻밖의 결과예요. 단위 페이지에서 모든 길이 단위를 비교해요.

키워드: xx-small부터 xx-large까지

절대 키워드는 사용자 기본 크기(바꾸지 않았다면 16px)와 같은 medium을 중심으로 정해진 단계에 대응해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font size keywords</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-size: xx-small;">xx-small</p>
  <p style="font-size: x-small;">x-small</p>
  <p style="font-size: small;">small</p>
  <p style="font-size: medium;">medium</p>
  <p style="font-size: large;">large</p>
  <p style="font-size: x-large;">x-large</p>
  <p style="font-size: xx-large;">xx-large</p>
  <script>
    document.querySelectorAll('p').forEach((p) => {
      p.textContent += ': ' + getComputedStyle(p).fontSize;
    });
  </script>
</body>
</html>

기본 16px에서 small은 13px, large는 18px, x-large는 24px, xx-large는 32px이에요. 키워드는 빠른 작업에는 괜찮지만, 디자인 시스템은 보통 rem으로 자기만의 단계를 원해요.

clamp()로 유동적인 글자 크기

화면과 함께 커지되 너무 작거나 너무 커지지 않아야 하는 제목은 clamp() 호출 하나면 돼요. 최솟값, 크기가 변하는 선호값, 최댓값을 넣어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid heading</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 {
      /* never below 1.5rem, never above 3rem, 5vw in between */
      font-size: clamp(1.5rem, 5vw, 3rem);
      margin: 0;
    }
  </style>
</head>
<body>
  <h1 id="title">Fluid heading</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'computed: ' + getComputedStyle(document.getElementById('title')).fontSize;
  </script>
</body>
</html>

너비 800px 미리보기에서 5vw는 40px이고, 24px과 48px 사이라서 이 값이 이겨요. 유동적인 타이포그래피는 clamp 페이지에서 자세히 다뤄요.

페이지 전체의 기본 크기 정하기

body(또는 html)에 크기를 한 번 정하고 나머지는 모두 그 기준으로 정하세요.

html { font-size: 100%; }  /* respects the user's setting, usually 16px */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }
small, .caption { font-size: 0.875rem; }

페이지의 모든 크기를 rem으로 정할 게 아니라면 html { font-size: 62.5%; } 같은 트릭은 피하고, html에 고정 px 크기는 절대 지정하지 마세요. 독자가 브라우저에서 고른 글자 크기를 덮어써 버리는데, 이 설정 없이는 글을 읽기조차 어려운 사람들도 있어요.

접근성 참고

화면에서 읽기에는 본문 텍스트 16px 이상이 좋은 기준이에요.
rem과 em 크기는 사용자의 기본 글꼴 설정을 따라요. px 크기는 페이지 확대는 따르지만 그 설정은 따르지 않아요.
iPhone의 Safari는 글자 크기가 16px 미만인 입력 요소에 포커스하면 페이지를 확대해요. 이를 막으려면 폼 필드에 font-size: 1rem 이상을 주세요.

자주 하는 실수

 태그 쓰기. 폐기됐어요. font-size 속성을 쓰세요.
통제 불능으로 커지거나 작아지는 중첩 em 크기. 누적을 원하지 않는다면 rem을 쓰세요.
html에 고정 px 크기. 독자의 글꼴 설정을 덮어써요.
제목에 이미 크기가 있다는 걸 잊기. <h1>은 기본이 2em이라서 본문 크기로 만들려면 h1 { font-size: 1em; }이 필요해요.
뷰포트 단위만 쓰기. font-size: 3vw는 휴대폰에서는 읽을 수 없고 넓은 모니터에서는 거대해져요. clamp()로 감싸세요.

자주 묻는 질문

CSS에서 글자 크기는 어떻게 바꾸나요?

요소에 font-size 속성을 지정해요. p { font-size: 18px; } 길이(px, rem, em), 퍼센트, large 같은 키워드를 받아요.

HTML에서 글자 크기는 어떻게 바꾸나요?

스타일시트나 style 속성에서 CSS로 바꿔요.  옛  태그는 HTML5에서 폐기되었으니 쓰지 마세요.

브라우저의 기본 글자 크기는 얼마인가요?

사용자가 브라우저 설정에서 바꾸지 않았다면 본문 텍스트는 16px이에요. 기본적으로 1rem과 키워드 medium이 이 값과 같아요.

글자 크기에는 px, em, rem 중 무엇을 써야 하나요?

대부분의 텍스트에는 rem을 쓰세요. 사용자의 브라우저 글꼴 설정에 맞춰 커지고, 누적되지 않아요. 버튼 안의 아이콘처럼 크기가 부모를 따라야 할 때는 em을 쓰세요. px는 독자가 브라우저에서 정한 기본 글자 크기를 따르지 않으니 본문 텍스트에는 피하세요.

em 글자 크기가 계속 커지는 이유는 무엇인가요?

em은 부모의 글자 크기를 기준으로 해서 중첩된 요소에서는 곱해지기 때문이에요. 1.2em 안의 1.2em은 기본값의 1.44배예요. 항상 루트 요소를 기준으로 하는 rem으로 바꾸세요.