타이포그래피 기초
8개의 인터랙티브 데모 — 읽기가 아닌 실습으로 배우기
타이포그래피는 커뮤니케이션의 보이지 않는 건축입니다. 잘 되면, 독자들은 그것을 알아채지 못합니다 — 내용을 쉽게 흡수합니다. 잘못되면, 왜인지 아무도 모르는 채 모든 것이 이상하게 느껴집니다. 이 8개의 데모로 차이를 직접 느껴보세요.
Tracking (Letter-spacing)
Uniform spacing added between every letter in a word or block of text.
SUBLIMEARTS
Tight tracking (negative) feels compact. Loose tracking (positive) feels airy and formal. Headlines often use tight; all-caps text needs loose.
Kerning
Adjustment of space between specific letter pairs — unlike tracking which is uniform.
Notice how "AV" naturally looks too far apart at 0. The diagonal strokes create optical space. Negative kerning between A and V is standard in typography.
Leading (Line Height)
The vertical space between lines of text — named after the lead strips printers once placed between lines.
Good typography is invisible. When done well, readers experience the content, not the type. Leading is one of the most powerful tools — too tight and text feels suffocating, too loose and it falls apart.
Body text works best between 1.4–1.7. Headlines often use 1.0–1.2. Below 1.0 lines overlap.
Font Weight
The thickness of letter strokes, from Thin (100) to Black (900).
Sublimearts
400
Not all fonts support all weights. System UI typically supports 100–900. Use bold (700) for headlines, regular (400) for body.
Serif vs Sans-serif
Serifs are the small strokes at the ends of letterforms. Sans-serif has none.
"The quick brown fox jumps over the lazy dog."
System UI (Sans-serif)
Serifs aid readability in long print text. Sans-serif is typically cleaner on screens. Neither is better — context decides.
Text Alignment
How text is positioned horizontally within its container.
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, and spacing.
Left-align for most body text. Center for headlines and callouts. Justify only with narrow columns — otherwise creates awkward "rivers" of whitespace.
Type Scale & Hierarchy
A consistent ratio between font sizes creates visual order and leads the reader's eye.
A ratio of 1.25 (Major Third) is subtle. 1.618 (Golden Ratio) is dramatic. Most design systems use 1.2–1.333.
Contrast & Legibility
The difference between text color and background determines readability. WCAG requires at least 4.5:1 for normal text.
This text changes contrast as you move the slider. Notice when it becomes hard to read — that is your legibility threshold. Good design never crosses it for body text.
Opacity: 100% — ✓ Legible
WCAG AA requires a contrast ratio of 4.5:1 for body text. On a dark background like this, white at ~45% opacity roughly hits that threshold.
이것을 귀하의 사이트에 적용할 디자이너가 필요하신가요?
이야기해봐요 →