Display vs Text Fonts: Why Some Families Come in Two

Browse a font archive and you will find pairs that look like duplicates: DM Serif Display and DM Serif Text, Libre Caslon Display and Libre Caslon Text, Playfair Display and plain Playfair. They are not the same file under two names. Each is the same design adjusted for a different size, and choosing the wrong one is one of the quieter ways typography goes wrong.

Where optical sizes come from

In metal type, every size of a typeface was cut separately by hand, and punchcutters did not simply scale one drawing up and down. Small sizes were made sturdier, wider and more loosely spaced so they would survive ink spread and still read. Large sizes were given finer hairlines, tighter spacing and more contrast, because at that size the detail could be seen and the looseness of small type would look gappy.

Digital fonts lost this. One outline scaled to every size became the norm, which means most fonts are a compromise tuned for somewhere around text size. Display and text cuts are the way designers put the distinction back.

What changes between the two

• Contrast. Display cuts have thinner hairlines. At 16 pixels those hairlines drop below a pixel and break up.
• Spacing. Display cuts are spaced tighter. At body size that makes words clot together.
• Proportions. Text cuts are often a little wider with a slightly larger lowercase, so small letters stay distinct.

DM Serif Display and DM Serif Text show it clearly: type the same headline into both font pages at a large size and then at a small one. At 60 pixels the display cut is crisper and more elegant; at 16, the text cut is the one you can read. Libre Caslon Display and Libre Caslon Text are the same idea in a Caslon, and the compare tool puts any two side by side.

Using the wrong one

A display face used for body text is the more common mistake and the more damaging: paragraphs look sparkly and fragile, and reading them is tiring. A text face used for a large headline is less harmful but looks slightly clumsy — loose, heavy and blunt where it should be sharp. If a family comes in both, use Display at roughly 30 pixels and above and Text below.

Variable fonts made it automatic

Some modern families carry an optical size axis, called opsz, that moves smoothly between text and display drawings in a single file. Source Serif 4, Literata, Newsreader and Fraunces all have one, and so does Playfair, the later family by the designer of Playfair Display. Browsers apply it by themselves: the CSS property font-optical-sizing is set to auto by default, so a heading set in one of these fonts gets the display drawing and the paragraph gets the text one without any extra work.

Word, Canva and older design programs usually cannot use the axis, and show only the default drawing. That limitation, and how to work around it, is covered in what a variable font is.