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.
| Family | Variable download | Static download |
|---|---|---|
| DM Serif Display | None published | 83 KB2 files |
| DM Serif Text | None published | 82 KB2 files |
| Libre Caslon Display | None published | 51 KB1 file |
| Libre Caslon Text | 155 KB2 files | None published |
Names that are really sizes
The vocabulary is inherited from metal type, where a size was cut for a purpose and named after it. When you see one of these words in a family name, it is telling you the size the drawing was made for rather than what it looks like.
- Display, Poster, Banner, Deck: large. Finer hairlines, tighter spacing, more contrast.
- Text, Book, Regular: reading sizes, roughly 9 to 14 point on paper or 14 to 20 pixels on screen.
- Caption, Micro, Small: smaller still. Sturdier strokes, wider spacing, a larger lowercase.
- Subhead: between text and display, and the one most often missing when a family has only two cuts.
The words are not regulated, so they mean what the designer intended rather than a fixed range — but the direction is always the same: the bigger the intended size, the finer the detail.
Setting an optical size axis by hand
Browsers apply the axis automatically, which is right almost always. The exception is display type that is not large on the page — a heading in a narrow column on a phone, for instance, where the browser sees 24px and applies a text drawing. Switching font-optical-sizing off and setting the axis directly with font-variation-settings lets you ask for the display drawing at any size.
Use it sparingly and never for body text: the automatic behaviour exists because the drawing that suits 60px is genuinely harder to read at 16. Overriding it is a decision about one heading, not a site-wide setting.
Building a page from both cuts
A page set in the display and text cuts of one family gets the contrast of a pairing with none of the risk: the skeletons match because they are the same drawing. Headings take the display cut from about 30 pixels up, body text takes the text cut, and anything in between — a standfirst, a pull quote — is the one judgement call. DM Serif Display over DM Serif Text is the clearest example in this archive.
Two practical checks before shipping it: the weights have to match between the cuts — a 400 in one is not always the colour of a 400 in the other — and both files have to be loaded, which doubles the font payload for that family. If that matters, a variable family with an optical size axis does the same job in one file. The cost side is in what your fonts cost your page speed.
When the family has only one cut
Most families have one drawing and no optical sizes, which is the normal case rather than a deficiency. You can do part of what the display cut would have done by hand: tighten the tracking slightly at large sizes, and leave it alone at text sizes.
What you cannot fix by hand is contrast. If the hairlines break up at 14px, no amount of spacing will save them, and that is the point at which the family belongs to headings only and the body text needs a different face. Recognising that early is cheaper than discovering it on a printed proof.