How to Choose a Headline Font for Your Website
A headline font sets the voice of a website before anyone reads a word. How I chose the faces for two websites, from a scan of over a thousand templates to a test at real size, and why some popular faces now read as made by AI.
Mike Lopez
Designs and builds websites and B2B software
On this page
I choose a headline font for a website by looking at the faces which the best sites in the same field already use, and then testing two or three finalists with the real headline at the size which the hero will use, because a face which looks right in a specimen can look quite different across a hero at 88 pixels. For the two website concepts which I designed most recently, a treasury platform and an aesthetic clinic, that meant reading the headline faces of 790 and 451 well-ranked templates, and the first of those scans replaced a face which I had already set in the design.
Why the headline face matters most
The headline face is the largest type on a website, so it sets the voice of the brand before a visitor reads a word, while the body face mostly needs to stay easy to read at small sizes. I think that makes the headline the one place where a website can show some character, and the body text the place for calm.
Scan the field first
I start from a marketplace of well-ranked website templates, such as Framer’s, filtered to the field which the website is for, and I note the headline face of every template which ranks well, because those templates are what visitors in that field have already seen many times. The scan tells me two things at once, which faces are common enough to feel familiar in that field and which are so common that they no longer tell one brand from another.
The faces which now read as AI-made
The first scan, for the treasury site, moved me away from Instrument Serif, which I had already set in the design, because it appears on so many recent sites made with AI tools that I think visitors now read it as generated rather than designed. I replaced it with Hedvig Letters Serif, which heads six of the best-ranked accounting and SaaS templates, and for the clinic site the scan pointed to Libre Caslon Display, a fine high-contrast serif which suits a doctor-led clinic in a painter’s studio.
I would treat the faces which AI site builders reach for by default as a last resort for a headline, which in my view includes Instrument Serif, Playfair Display and Fraunces among the serifs, since a familiar default makes a new brand look like many others before anyone has read its name.
Test the finalists with the real headline
I put two or three finalists on one board, each setting the site’s real headline at the size which the hero will use, with the same headline at phone size beside it, because a face is mostly judged by its capitals and its widest words at full size. The words matter here, so I write the headline before I test any face, which is the same reason that I write website copy before the design.
| What I test | How | What it rules out |
|---|---|---|
| Familiarity | Count the face in the template scan | Faces so common that they read as a template |
| The real headline | Set the hero headline at full size | Faces whose capitals or widest words break the line |
| The phone | Set the same headline at phone size | Faces which turn thin or crowded when they are small |
| Descenders | Set g, j, p and y with a tight line height | Faces whose tails are cut off by the layout |
| Licence | Check where the face comes from | Faces whose licence limits where you can use them |
Size the face for itself
Every face has its own proportions, so I size the headline for the face rather than for a fixed scale, which mostly means larger and tighter for a display serif. Hedvig Letters Serif is about 40% wider than Instrument Serif at the same height of its capitals, so on the treasury site the main headline came down to 72 pixels on a line of 76, while on the clinic site Libre Caslon Display sits at 88 on 92 on a laptop and 44 on 48 on a phone, which are the sizes where each face looked balanced in the test.
Break the lines by hand
A long headline breaks wherever the browser runs out of room, which can leave one short word alone on its line, so I break each headline by hand at a natural pause into two lines and set the second line in a softer grey, which lets a visitor read the headline in two steps.
Leave room for the tails
Some faces have long descenders, the tails of g, j, p and y, which hang below the box which the browser draws around a line of text when the line height is tight, so a headline inside a container which clips its contents can lose the bottom of its letters. That happened to Hedvig on the treasury site, and the fix was to let the containers around headlines show everything inside them, which I now check on every face before it goes into a design.
Where to start
I would take the headline from your home page, set it in your current face and in two alternatives at the size which your hero uses, and look at the three on a laptop and on a phone side by side. If your current face looks like the face on many other sites in your field, or loses its tails or its balance on the phone, I think that is a good reason to test a change, and you can see how the two faces above carry whole websites in my Ampersand and Softglow case studies.
Frequently asked questions
What is a good headline font for a website?
A face which suits the field, reads clearly at the size of your hero and appears less often than the most common choices in that field. For a calm, trustworthy brand I would start with a display serif such as Libre Caslon Display or Hedvig Letters Serif, and test it with your real headline before deciding.
Should the headline and the body text use the same font?
They can, but I mostly pair a display face for headlines with a plain sans serif for the body, such as Hanken Grotesk on the clinic site and Figtree on the treasury site, because the body face needs to stay readable at small sizes while the headline face carries the character.
How big should a website headline be?
Large enough to lead the page and sized for the face, which on a laptop is mostly between 64 and 96 pixels for a hero headline and about half that on a phone. I would check the size with the real words, since a long headline needs a smaller size than a short one.
Where can I find headline fonts for a website?
Google Fonts holds both of the faces which I mention above, and a template marketplace is the quickest way to see which faces the well-ranked sites in your field already use, which is the scan that I would start with.
