Typographic Hierarchy
Scale
| Level | Weight | Size | Letter Spacing | Application |
|---|---|---|---|---|
| Display | 700 (Bold) | 44px | -0.02em | Hero areas, landing pages |
| H1 | 700 (Bold) | 32px | -0.01em | Page titles |
| H2 | 600 (Semibold) | 24px | — | Section titles |
| H3 | 600 (Semibold) | 18px | — | Subsections |
| Body | 400 (Regular) | 16px | — | Body text |
| Small | 400 (Regular) | 14px | — | Captions, footnotes |
Live Examples
BAUER GROUP
Today. Tomorrow. Together.
Our Services
Section Title
Professional business consulting and educational services.
www.bauer-group.com
Font Weights
| Weight | Value | Usage |
|---|---|---|
| Regular | 400 | Body text, descriptions |
| Semibold | 600 | Section titles, labels |
| Bold | 700 | Page titles, emphasis, display |
Rule
Use a maximum of 2 weights per page. The combination of Regular + Bold is sufficient for most applications.