Stroke contrast

How much a letter's thick strokes differ from its thin ones. High contrast reads elegant and fragile, low contrast reads sturdy and plain.

thick and thin strokesfont with fat and skinny partshigh contrast fontlow contrast typefacestrock contraststroke weight variationthick thin letters like a fashion magazinewhy do the thin bits disappear when I shrink the text

See it

Live demo coming soon

What it is

Stroke contrast is how much a letter's thickest stroke differs from its thinnest. It comes from the broad-nib pen and the pointed pen: hold a flat pen at an angle and downstrokes go fat while cross strokes go hairline. Type designers kept that logic long after the pens went away.

The scale runs from flat (monolinear faces like Futura, Helvetica, or most slab serifs, where every stroke looks the same weight) to extreme (Didone faces like Bodoni and Didot, where hairlines meet heavy stems at a hard edge). Moderate contrast is the workhorse zone: Garamond, Caslon, Georgia. High contrast reads as luxury, fashion, and editorial. Low contrast reads as sturdy, functional, and loud, which is why signage and small UI text live there.

Gotcha: high contrast is a size trap. Those hairlines are drawn to survive at 72px on a headline, and at 14px in a body paragraph they either vanish, shimmer, or clog when the renderer rounds them. If a font looks stunning in your hero and muddy in your paragraphs, contrast is usually the culprit, not the size.

Ask AI for it

Set the headings in a high stroke contrast Didone serif (Bodoni or Didot style: heavy vertical stems, hairline horizontals, flat unbracketed serifs) at 64px or larger so the hairlines survive. Set body copy in a low contrast, near monolinear face at 17px for legibility. Do not use the display serif below 24px, and do not apply faux bold to it.

You might have meant

serif vs sans seriftransitional serif didone serifdisplay typeface vs text typefaceweight font weightslab serif