Type systems and hierarchy patterns—font pairing, type scale, fluid typography. 8 essential patterns for readable, scalable text systems.
Typography patterns establish text hierarchy, readability, and typographic rhythm. These 8 patterns cover font pairing, type scale, fluid typography, hierarchy, contrast, line width, leading, and kerning. Good typography is invisible—it enhances readability without drawing attention to itself. Choose system fonts for performance, custom fonts for brand differentiation, and always test across devices and screen sizes.
Font pairing combines complementary typefaces—typically pairing serif with sans-serif for hierarchy and visual interest.
Type scale establishes harmonious font size relationships—typically using ratio-based progression (1.25x, 1.5x, 2x).
Fluid typography scales smoothly between viewport sizes using CSS clamp()—eliminates breakpoint jumps for seamless responsiveness.
Typography hierarchy uses size, weight, color, and spacing to guide readers through content—establishing clear visual order.
Typography contrast ensures readable text through sufficient color difference—WCAG requires 4.5:1 for body text, 3:1 for large text.
Line width (measure) should be 50-75 characters per line for optimal readability—too long causes eye fatigue, too short disrupts rhythm.
Leading (line height) is vertical spacing between lines—1.5-1.75 for body text, tighter for headings, looser for accessibility.
Kerning adjusts space between specific letter pairs; tracking adjusts spacing across entire words—fine-tuning typography for readability.