10장 typography로 브랜드의 목소리와 읽기 속도를 조절한다

Font를 많이 쓰면 개성이 생기는 것이 아니다. Onda는 system sans로 정보와 control을, Georgia 계열 serif fallback으로 editorial headline을 표현한다. 외부 web font를 불러오지 않아 권리와 performance risk를 줄인다. 실제 출시에서 상용 font를 쓰면 web embedding license와 pageview 조건을 확인한다.

Fluid scale은 viewport에 맞춰 부드럽게 변한다.

:root {
  --step-0: clamp(1rem, .95rem + .22vw, 1.12rem);
  --step-2: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  --step-3: clamp(3.6rem, 2.4rem + 5vw, 7.2rem);
}

한글은 영문보다 같은 크기에서 밀도가 높아 보일 수 있다. line-height, word break, 조사만 다음 줄에 남는 현상, 숫자와 단위 spacing을 실제 문장으로 본다. image 안에 text를 굽지 않는다. 번역·확대·screen reader·검색에서 모두 손실된다.