Typographic Principles
Master the fundamental rules that make the difference between amateur and professional typography.
Visual Hierarchy
Good example
Main title
Descriptive subtitle
Body text with appropriate size and contrast for comfortable reading.
Secondary note in smaller size.
Bad example
Main title
Descriptive subtitle
Body text with inappropriate size.
Secondary note too prominent.
Spacing and Rhythm
Line Height
Leading
1.2 (too tight)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1.6 (optimal)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Letter Spacing
Tracking
-0.05em
Typography
0em (normal)
Typography
0.1em
Typography
Margins
White space
Insufficient margin
Appropriate margin
Generous margin
Kerning and Ligatures
Kerning (pair adjustment)
Without kerning
AVANT
With kerning
AVANT
Kerning adjusts space between certain letter pairs (AV, WA, To) for more harmonious visual rendering.
Ligatures
Without ligatures
fi fl ff ffi ffl office
With ligatures
fi fl ff ffi ffl office
Ligatures combine certain letters to avoid collisions and improve readability. Very visible with EB Garamond, a classic serif font.
Contrast and Readability
Color contrast
Norme WCAG AAA
Ratio de contraste: 17.74:1
- • AAA: ≥ 7:1 (texte normal)
- • AA: ≥ 4.5:1 (texte normal)
- • Fail: < 4.5:1
Norme WCAG AAA
Ratio de contraste: 16.12:1
- • AAA: ≥ 7:1 (texte normal)
- • AA: ≥ 4.5:1 (texte normal)
- • Fail: < 4.5:1
Norme WCAG Fail
Ratio de contraste: 3.28:1
- • AAA: ≥ 7:1 (texte normal)
- • AA: ≥ 4.5:1 (texte normal)
- • Fail: < 4.5:1
Line length
~45-75 characters (optimal)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
> 90 characters (too long)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Font Selection
Harmonious combinations
Serif for headings
Sans-serif for body
Mono for code
Sans-serif for explanations
Common mistakes
- • Too many different fonts
- • Comic Sans in professional context
- • Decorative fonts for body text
- • Poor style pairing
2-3 fonts rule
Limit yourself to 2-3 fonts maximum: one for headings, one for body, and possibly one for accents.
Golden Rules
Clear hierarchy
Establish a consistent visual hierarchy to guide the reader.
Generous spacing
Don't fear white space. It improves readability.
Sufficient contrast
Ensure at least 4.5:1 contrast ratio for accessibility.
Consistency
Maintain consistent styles throughout your design.
Readability over style
Function over form. Readability is non-negotiable.