Display Fonts vs Body Fonts: Knowing When to Use Each
Using a body font for headings or a display font for paragraphs is the most common typography mistake I see. Here is how to tell the difference. The most common typography mistake I see in client work is using fonts outside their intended role. A display font set in body text becomes unreadable at small sizes. A body font set at display sizes looks flat and lifeless. The distinction between display and body fonts is not arbitrary, and understanding it is the foundation of all other typography decisions. What Makes a Body Font Body fonts are designed to be read at small sizes, typically between fourteen and eighteen pixels on screen. Their defining characteristic is a generous x-height, the height of lowercase letters relative to capitals. A large x-height keeps lowercase letters legible when the font is scaled down. Body fonts also have relatively open counters, the enclosed spaces inside letters like o and a, which prevents the letters from filling in at small sizes. Body fonts have restrained stroke contrast, meaning the difference between thick and thin parts of each letter is modest. High contrast looks elegant at large sizes but causes thin strokes to disappear at small sizes, especially on lower-resolution screens. A good body font maintains consistent visibility across all strokes at all sizes. What Makes a Display Font Display fonts are designed to be read at large sizes, typically twenty-four pixels and above.