What Typefaces for Display Text?
Typography

How to Choose a Typeface for Display Text

Display text is the kind of text that should attract your readers and represent the atmosphere of your project. What you should consider when picking a typeface for it and what different kinds of display fonts there are, I tell you in this post and video.

TL;DR: Have fun picking a cool typeface for your headlines or pull quotes that represents the vibe of your project. Don’t use it for body text, only use it in large sizes.

What is display text?

Display text shown within an app for the headline and the pull quote

I simply have to agree with Richard Rutter when he writes in his book Web Typography: “Display text is all about seduction. Its purpose is to draw your reader into the content.” As the name suggests this kind of text is set in larger sizes, aka display sizes, which are starting at 20 px and therefor are mostly used for:

  • title or headlines,
  • initials, or a prominent lead paragraph,
  • or maybe a pull quote.
Different display typefaces from script to decorative
Display typefaces can be eye-catching and striking.

Readers see these words before they read them. And this makes it a great opportunity to set the tone of voice for your website, app or digital project very obviously. But it’s not just about the vibe or feel, it’s also about conventions for that particular industry or topic and setting up expectations for the content.

How to pick a good display typeface

My advice is to have fun picking a display typeface. Look for something that suits your project. It can go from ornamental, spacy, minimalistic, crazy to all sorts of styles. Follow your gut feeling and enjoy the process! Either it fits your project or it does not. Of course, you can use your text typeface for display purposes as well, but maybe experiment with a different style or weight there? As long as you set it big enough, it’s readable and fits your theme, you’re all good. Only avoid using too eye-catching typefaces for long reading text in small sizes.

Different fonts that convey a serious, casual or retro feeling.
Different styles convey different feelings. What fits your project?

Display fonts are not only thematic or ornamental

For some typeface that seem less striking there are special display styles – a version of the same family that is designed for lager sizes. For example the beautiful typeface Abril comes as Abril Text and Abril Display. Abril Text has sturdier strokes, stronger serifs and is less delicate. The text appears darker and with less contrast which makes it comfortable for continuous reading in text sizes (around 16 to 24 px). On the other hand Abril Display has more contrast, straight serifs and is tighter which makes it suitable for headlines and larger sizes.

Abril Text and Abril Display in Comparision. Abril Text works well in small sizes, Abril display does not.
Abril Text on the left has thicker serifs, Abril Display has more contrast and straight serif.
Abril Text in large sizes seems clunky. Abril Display in large sizes seems elegant.
Use the right font style for its designated application.

There are also display styles where the differences are not that obvious (if you saw the differences with Abril as obvious, then welcome to club, beautiful type nerd). For Apple’s very functional SF Pro used in iOS and MacOS, mostly the letter spacing changes since words set in larger sizes can be set a bit tighter than in small sizes.

SF Pro Text has wider letter spacing, SF Pro Display has narrower letter spacing.

Last but not least the body text on this website is set in my beloved Bressay. But for the lead paragraph I switch from Bressay to the more detailed Bressay Display for screens wider than 1024 px. I do that because the font size increases to 24 px for that paragraph then.

When the font size scales the lead paragraph switches from Bressay to Bressay Display.

Enjoy choosing a font for display text. Go for what feels right and give your audience the opportunity to connect to your project with distinctive typography.


I’m curious, what is the last display typeface you picked for what kind of project and why? Leave it in the comments below!

Typographic power to your inbox!

  • FontFriday: I personally recommend one typeface per week and for what application it’s best. Every second week, it’s a free font.
  • Pimp my Type: Articles & videos from the YouTube channel that help you improve the design of your website, app or digital product.
  • No Comic Sans, Open Sans 😉 or any other BS, like annoying ads.

2 Comments

  1. Gutenberg.
    I used it for an art exhibit called FREEDOM: The Summer of ’64
    About integration in Mississippi. Black and White Photos
    I wanted a bold, distressed type that looked like old poster headline type.

Leave a Reply

Your email address will not be published. Required fields are marked *