Typographic Design Patterns and
Best Practices
Michael Martin
Even with a relatively limited set of options in CSS, typography can vary
tremendously using pure CSS syntax. Serif or sans-serif? Large or small
font? Line height, spacing, font size and padding... The list goes on and on.
To find typographic design patterns that are common in modern Web
design and to resolve some common typographic issues, we conducted
extensive research on 50 popular Web sites on which typography matters
more than usual (or at least should matter more than usual). We՚ve chosen
popular newspapers, magazines and blogs as well as various typography-
related Web sites.
We՚ve carefully analyzed their typography and style sheets and searched
for similarities and differences. We have also put together a spreadsheet of
the study that displays the Web sites̓ various values (for example, the ratio
between the line height and line length).
General Typographic Problems and Issues
Ultimately, we identified 13 general typographic problems and issues
related to typographic design and tried to find answers to them through
our research:
- How popular are serif and sans-serif typefaces in body copy and
headlines?