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

  • Font Friday: I recommend one typeface per week, free fonts included.
  • Type Tuesdays: articles & videos that up your design game.
  • Join 2500+ typography enthusiasts, unsubscribe anytime.

4 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.

  2. Nocturno Display.
    I used it in the visual identity for a leadership development program called Kløkt (“Cleverness” literally translated from Norwegian). Some keywords for the atmosphere and vibe of the project were experience, knowledge and human warmth(as a contrast to the sharp, cold and “corporate” visual conventions in the industry). I thought the Old Style characteristics and the elegant curvy lines of the typeface would balance professional weight with humanness.

    1. What a gorgeous typeface, Emil! I love it 😍 Love the sharp edged of the overall warm appearance. Thanks for sharing it!

Leave a Reply

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