CSS 타이포그래피 생성기

각 속성이 하는 일

font-size는 글자의 em 상자를 정합니다. 숫자만 쓴 line-height는 요소 자신의 글자 크기에 곱하는 배수이고 그 숫자 그대로 상속되므로 자식이 자기 글자 크기로 다시 계산합니다. letter-spacing은 각 글자 뒤에 간격을 더하고, font-weight는 글꼴 가족에서 굵기를 고릅니다. text-align은 상자 안에서 줄의 위치를 정합니다.

em 단위 자간은 글자 크기를 따라가서, 48px 제목에 어울리는 -0.02em이 같은 규칙을 24px에 재사용해도 비례를 유지합니다. 고정 px 값은 그렇지 않으므로 도구는 둘 다 제공하고 현재 글자 크기를 기준으로 서로 환산합니다.

.prose {
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: 0em;
  font-weight: 400;
  text-align: left;
  max-width: 65ch;
}

줄 길이: 한 줄은 얼마나 길어야 하나

타이포그래피에서는 줄 길이를 measure라고 부릅니다. 읽기 편한 본문은 한 줄에 대략 45~75자가 일반적인 지침이고, 66자를 이상적이라고 자주 말합니다. ch는 요소 글꼴에서 숫자 0의 진행 폭이므로 max-width: 65ch는 평균적인 글에서 대략 65자가 되며 글꼴에 따라 조금 많거나 적습니다.

이 도구의 측정기는 설정값에서 추정하지 않고 그려진 문단을 실제로 측정해 각 줄의 글자 수를 셉니다. 그래서 단을 좁히거나 글자 크기를 키우면 곧바로 반영됩니다. 평균은 보통 짧은 문단의 마지막 줄을 제외하고 계산합니다.

읽기 편한 기본값과 WCAG 2.2

WCAG 2.2 성공 기준 1.4.12(텍스트 간격)는 사용자가 행간을 글자 크기의 1.5배 이상, 자간을 0.12배, 문단 간격을 2배로 바꿔도 콘텐츠가 깨지지 않기를 요구합니다. 본문을 행간 1.5 이상으로 시작하면 그 덮어쓰기에도 문제가 없습니다.

큰 제목은 더 촘촘해도 됩니다. 행간 1.1 안팎에 살짝 음수 자간을 준 큰 글자는 균형 있어 보이지만, 같은 값을 16px 본문에 쓰면 줄끼리 부딪힙니다.

이 도구가 강제하는 범위

글자 크기는 단위와 관계없이 12~120px여야 하므로 0.5rem은 거부되고 7.5rem이 가장 큰 값입니다. 행간은 0.8~2.4, 자간은 -4~12px 또는 -0.25~0.75em, 줄 길이는 20~120ch, 굵기는 300, 400, 500, 600, 700, 800, 900 중 하나입니다. 범위를 벗어난 값이나 450 같은 굵기는 입력란 옆 메시지와 함께 거부됩니다.