Display vs Body, Font weight, Ligature

Display vs Body type

Display type: 표제용입니다. 큰 크기에서 빛나도록 설계됩니다. 미세한 디테일과 좁은 자간을 가집니다. Body type: 본문용입니다. 작은 크기에서 잘 읽히도록 설계됩니다. 넓은 자간과 큰 X-height를 가집니다.

같은 폰트도 보통 display 버전과 text 버전을 따로 제공합니다. SF Pro Display vs SF Pro Text (Apple)가 대표적입니다.

Font weight

폰트의 굵기입니다. 100~900 스케일입니다.

100: Thin입니다. 300: Light입니다. 400: Regular (기본)입니다. 500: Medium입니다. 700: Bold입니다. 900: Black입니다.

CSS font-weight: 400 같은 형식입니다. 모든 폰트가 모든 굵기를 제공하지는 않습니다. Variable font는 모든 값이 가능합니다.

Ligature

fi, fl, ffi 같은 두 글자가 합쳐진 형태입니다. 중세 필사본의 손글씨에서 자연스럽게 발생합니다. 인쇄 시대에 활자로 표준화됩니다.

fi → fi  (i의 점이 f와 합쳐짐)
fl → fl

OpenType 폰트는 자동으로 ligature를 적용합니다. CSS font-variant-ligatures로 제어합니다.

코딩 폰트(Fira Code, JetBrains Mono)의 ligature는 다른 의미입니다. =>, !=, <= 같은 코드 기호를 더 읽기 좋게 합니다.

바이브 메이커가 챙길 한 가지

큰 헤드라인(48px+)을 만들 때 display 버전 폰트를 쓰면 글자가 더 정교해 보입니다. 본문에는 text 버전을 씁니다.

관련

Typography anatomy, Variable fonts, Monospace