Typography is the foundation of web design. Even with no images, well-set type creates hierarchy, guides attention, and establishes tone.
Type Scale
Start with a solid type scale. Use a consistent ratio (like 1.25 or 1.5) to generate font sizes that relate harmoniously to each other.
Line Length
Line length matters enormously for readability. Aim for 45-75 characters per line. Too wide and eyes struggle to track back; too narrow and reading becomes choppy.
Line Height
Line height needs adjustment based on line length and font size. Longer lines need more leading. A ratio of 1.4-1.6 works for body text.
Font Selection
Limit your fonts. One font with multiple weights can do most jobs. If you use two, make them clearly distinct—a serif and a sans-serif, for example.
Quick Reference
- Body text: 1.4–1.6 line height
- Line length: 45–75 characters
- Max 2 font families
- Use weight and size for hierarchy
Contrast & Accessibility
Pay attention to contrast. WCAG guidelines exist for good reason. Low-contrast text isn't just an accessibility issue—it's a readability issue for everyone.
