Typography & Spacing Terms
이 문서가 답하는 질문: 폰트와 여백 토큰을 다룰 때 등장하는 scale·grid·variable font 어휘가 정확히 무엇을 의미하는가? 한 줄 답 (Pyramid Top): 이 카테고리는 “리듬을 어떻게 수식화하는가” 의 어휘 — 비율·격자·축(axis)로 텍스트와 여백을 통제하는 용어다.
카테고리 개요
| 키워드 | 한 줄 정의 |
|---|---|
| Modular Scale | 비율로 만든 폰트 사이즈 수열 |
| 4/8 Grid | 모든 spacing을 4 또는 8의 배수로 |
| T-shirt Sizing | xs·sm·md·lg·xl 등 의미 기반 sizing |
| Fluid Type | clamp()로 뷰포트에 따라 변하는 글자 |
| Variable Font | 한 파일에 여러 축을 담은 폰트 |
본문 (알파벳 순)
4/8 Grid
카테고리: Spacing 별칭: 4px grid, 8px baseline grid
모든 간격을 4 또는 8의 배수로만 쓰는 규약. Material Design 8dp grid가 시작. 4-grid가 더 유연(반정수 허용), 8-grid가 더 엄격.
관련: Spacing Scale, Baseline Grid 참고: 03-typography-spacing
Axis (variable font axis)
카테고리: Typography 별칭: variation axis, OpenType axis
Variable font의 조절 가능한 차원. 표준 5축 — wght(weight 100-900), wdth(width), slnt(slant), ital(italic), opsz(optical size). 커스텀 축은 4글자 영문 대문자(GRAD, XOPQ).
관련: Variable Font, Optical Size 참고: 03-typography-spacing
Baseline (베이스라인)
카테고리: Typography 별칭: typographic baseline
알파벳이 앉는 가상의 수평선. line-height의 기준이지만 폰트마다 위치가 달라 디자인 시스템에서는 leading-trim으로 보정한다.
관련: Leading-trim, x-height
Baseline Grid (4-pt baseline)
카테고리: Typography 별칭: vertical rhythm
문단 전체의 수직 리듬을 4의 배수로 통제하는 인쇄 전통. 웹은 line-height가 폰트마다 달라 100% 적용이 어렵다.
관련: Baseline, Leading, 4/8 Grid
clamp()
카테고리: Typography 별칭: CSS clamp function
clamp(min, ideal, max) — 세 값 사이에서 뷰포트 폭에 따라 자연 변화하는 함수. fluid typography의 핵심 도구.
관련: Fluid Typography, Modular Scale
Fluid Typography
카테고리: Typography 별칭: fluid type, responsive font sizing
뷰포트 크기에 따라 연속적으로 변하는 글자 크기. clamp(1rem, 0.875rem + 0.5vw, 1.5rem). breakpoint마다 분기하던 옛 방식을 대체.
관련: clamp(), Modular Scale 참고: 03-typography-spacing
Font Stack
카테고리: Typography 별칭: font-family fallback
font-family에 나열하는 fallback 폰트 순서. system stack(-apple-system, BlinkMacSystemFont, ...) 권장.
관련: Variable Font, size-adjust
Leading (행간)
카테고리: Typography 별칭: line spacing, line-height
줄 사이의 수직 간격. CSS line-height로 표현하지만, 폰트 metrics에 따라 실제 시각 결과가 달라진다.
관련: Leading-trim, Baseline
Leading-trim
카테고리: Typography 별칭: text-edge, text-box-trim
글자 박스 위아래의 빈 공간을 제거하는 CSS 기능. 디자인 시스템의 정렬 문제를 근본적으로 해결. text-box-trim: trim-both 형태로 표준화 중.
Modular Scale
카테고리: Typography 별칭: typography scale, type ramp
폰트 사이즈를 고정 비율(1.125, 1.25, 1.333, 1.5 등 — minor 2nd, minor 3rd, perfect 4th)로 수열화한 것. base 16px × ratio^n.
관련: T-shirt Sizing, Type Ramp 참고: 03-typography-spacing
Optical Size (opsz)
카테고리: Typography 별칭: optical sizing, automatic optical sizing
큰 글자와 작은 글자에 다른 형태의 글리프를 적용하는 variable font 축. 본문은 굵고 짧게, 제목은 가늘고 길게 자동 전환.
관련: Axis, Variable Font
rem / em
카테고리: Typography 별칭: root em / em unit
rem = html의 font-size 기준, em = 부모의 font-size 기준. 토큰 시스템은 rem 단위가 사실상 표준 — 사용자 글자 크기 설정을 존중.
관련: px
size-adjust
카테고리: Typography 별칭: @font-face size-adjust
@font-face의 새 디스크립터. fallback 폰트의 metric을 웹폰트와 맞춰서 CLS(layout shift)를 0으로 만든다.
관련: Variable Font, Font Stack
Spacing Scale
카테고리: Spacing 별칭: space scale, spacing ramp
간격 토큰의 수열. space.0=0, .1=4px, .2=8px, ... 같이 4의 배수. 타이포 스케일과 서로 다른 비율을 쓰는 것이 디자인 시스템 관행.
관련: 4/8 Grid, T-shirt Sizing 참고: 03-typography-spacing
Type Ramp
카테고리: Typography 별칭: typography ramp, type system
heading·body·caption까지 한 화면의 모든 텍스트 역할에 대응하는 사이즈·weight·line-height 묶음.
관련: Modular Scale, T-shirt Sizing
T-shirt Sizing
카테고리: Spacing 별칭: xs/sm/md/lg/xl, semantic sizing
수치 대신 의미 이름(xs·sm·md·lg·xl·2xl)으로 토큰을 부르는 관행. Tailwind가 대중화. semantic 토큰의 일종.
관련: Spacing Scale, Semantic Token
Tracking (자간)
카테고리: Typography 별칭: letter-spacing
글자 사이 수평 간격. CSS letter-spacing. 큰 제목은 음수, 작은 캡션은 양수로 미세 조정하는 것이 관행.
관련: Leading
Variable Font
카테고리: Typography 별칭: OpenType Variable Font, VF
한 파일에 여러 weight·width·slant를 담은 폰트. font-variation-settings로 미세 조정. 파일 1개로 100~900 모든 weight 사용 가능.
관련: Axis, Optical Size 참고: 03-typography-spacing
x-height
카테고리: Typography 별칭: ex unit reference
소문자 x의 높이. 폰트의 시각적 크기를 결정하는 핵심 metric. x-height가 큰 폰트가 같은 px라도 커 보인다.
관련: Baseline, Optical Size
요약 + Mermaid
이 카테고리는 리듬의 수식화를 다룬다. 핵심은 두 스케일 — 타이포 스케일(비율로 만든 수열)과 spacing 스케일(4/8 grid)이 별개이며, 둘 다 T-shirt naming으로 의미를 부여한다.