typesetting

Contrast (typography)

In typography, contrast refers to the difference in thickness between thin and thick strokes in a letterform. High-contrast typefaces (like Playfair Display) have dramatic variation; low-contrast faces (like Inter) are more uniform. Also used to describe visual difference between type sizes, weights, or styles in a layout.

In Practice

In typography, contrast usually means the difference in visual weight or style between two typefaces used together. High-contrast typefaces like Playfair Display pair with low-contrast faces like Source Sans 3. In color, contrast refers to the WCAG ratio between text and background colors, which affects accessibility. The Font Blend contrast checker measures exact WCAG 2.2 ratios for any foreground and background combination.

Common Mistakes

Confusing typographic contrast with color contrast. Typographic contrast means visual weight difference between typefaces; color contrast means the WCAG ratio between foreground and background. Both matter but they are different properties.

Using contrast only for accessibility. High typographic contrast creates visual energy and hierarchy. Low contrast creates subtlety and cohesion. Neither is universally correct; both are tools.

Two kinds of contrast, one word

Contrast in typography means stroke contrast, the difference in thickness between the thin and thick parts of a letterform. A high-contrast face like Playfair Display carries dramatic thin hairlines against heavy stems; a low-contrast face like Inter draws nearly uniform strokes. Stroke contrast changes how a font behaves: high contrast is elegant at display sizes and fragile at small sizes, where hairline strokes break up on coarse screens.

The same word is used for the WCAG relationship between text and its background, and the two should not be confused in a requirements review. Stroke contrast comes from the font's design; text contrast is a ratio you measure and fix. When a designer says the contrast is too low, ask which one they mean. The Font Blend contrast checker measures the WCAG kind, and the categories page notes which families sit on the high-contrast end.