# Headline fonts: typefaces that grab attention

[Canonical HTML page](https://gradiently.design/guide/headline-fonts)

A headline has about a second to be read. The font does a surprising share of that work. Here are free typefaces that earn attention, grouped by the job they do best, with pairings you can use today.

## The short version

- Good headline fonts have clear letter shapes, strong weights and enough character to be recognised at a glance.
- Condensed faces such as Anton and Bebas Neue fit long words at large sizes, which suits posters and thumbnails.
- High contrast serifs such as Playfair Display and DM Serif Display give headlines an editorial, refined tone.
- A headline font is usually paired with a quieter body font, such as Inter or DM Sans, for everything else.
- Headlines set large usually need slightly tighter tracking and leading than the font's defaults.

The best **headline fonts** are ones you can read in a single glance at large sizes and that carry a clear tone: condensed sans serifs like Anton or Bebas Neue for punch, heavy grotesques like Archivo Black for weight, and high contrast serifs like Playfair Display or DM Serif Display for elegance. All of these are free on [Google Fonts](https://fonts.google.com). The right one depends less on taste than on the job: how many words, how much space, and what the headline needs to feel like.

## What makes a good headline font

- **Clear shapes at a glance.** Open counters and distinct letters, so the words read before the eye settles.
- **Weight to spare.** A family with bold, extra bold or black, because headlines on phones need heavy strokes.
- **Good default spacing and kerning.** Large type magnifies every gap; well made fonts need less fixing. See [kerning](https://gradiently.design/guide/kerning).
- **A tone that matches the message.** Loud, calm, luxurious or technical. The font says it before the words do.
- **The right width for your space.** Condensed faces fit long words in narrow formats; wide faces suit short words with room around them.

## The best free fonts for headlines, by style

| Style | Google Fonts to try | Feels | Best for |
| --- | --- | --- | --- |
| Condensed sans | Anton, Bebas Neue, Oswald, Barlow Condensed, Big Shoulders Display | Loud, urgent, sporty | Posters, thumbnails, sale posts |
| Heavy grotesque | Archivo Black, Inter Tight, Work Sans in black | Direct, modern, no nonsense | Announcements, product launches |
| Geometric sans | Montserrat, Poppins, Outfit, League Spartan | Friendly, clean, round | Startups, services, social posts |
| Characterful sans | Bricolage Grotesque, Space Grotesk, Syne | Distinctive, current, a little quirky | Brands that want a voice |
| High contrast serif | Playfair Display, DM Serif Display, Instrument Serif | Editorial, refined, expensive | Fashion, beauty, journals, menus |
| Soft serif | Fraunces, Young Serif | Warm, crafted, approachable | Food, cafes, independent shops |

A starting shortlist. Every font here is free on Google Fonts under an open licence that allows commercial use.

A few notes worth knowing before you choose. **Bebas Neue** has capitals only, so it suits short, shouted lines rather than sentences. **Oswald** is a reworking of the classic Alternate Gothic style and comes in several weights, which makes it more flexible than Anton. **Fraunces** is a variable font with axes for softness and a playful wonky mode, so one family can go from crisp to cuddly. **Syne** gets noticeably wider in its heavier weights, which gives a bold headline real presence.

A portrait sale post with SUMMER SALE in large condensed capitals over a bright gradient

Short, shouted words in capitals: the register a condensed face such as Anton or Bebas Neue is made for.

A portrait editorial post with a refined serif headline reading The quiet return of linen

An editorial headline wants the opposite: a high contrast serif such as Playfair Display slows the reader down and signals care.

## How to choose a headline font

1. **Write the real headline first** Test with your actual words, not the font's sample text. A face that looks great on 'Hamburgefonts' can look odd on your brand name.
2. **Measure the space** A long headline in a narrow format, such as a story or a pin, needs a condensed face. Short lines in wide formats can afford a wider one.
3. **Match the tone to the message** Write down three words for how the headline should feel. Shortlist only fonts that fit all three.
4. **Test at the smallest real size** Shrink the design to phone size, or to a grid thumbnail. Thin strokes and tight counters fail first.
5. **Pair it with a quiet body font** Choose a calm, readable face for supporting text so the headline stays the loudest thing on the page.

## Pairing headline fonts with body text

A headline font is a specialist. It shines at 90 px and tires the eye at 16 px. Pair it with a workhorse that reads well in paragraphs and stays out of the way. The safest pairings contrast in one clear way, usually serif against sans, or condensed against normal width. [Font pairing](https://gradiently.design/guide/font-pairing) explains the principles, and [Google Fonts pairings](https://gradiently.design/guide/google-fonts-pairings) has many more combinations.

| Headline | Body | Why it works |
| --- | --- | --- |
| Anton | Inter | Condensed impact over a neutral, very readable sans |
| Playfair Display | Source Sans 3 | Classic editorial contrast of serif and sans |
| Bricolage Grotesque | DM Sans | A characterful headline over a calm geometric body |
| DM Serif Display | DM Sans | Drawn as companions, so the proportions match |
| Archivo Black | Archivo | One family in two weights, the simplest pairing there is |
| Fraunces | Manrope | Warm, soft serif over a clean, modern sans |

Six pairings built from free Google Fonts. Use the headline face for one or two lines; let the body face carry everything else.

## How to set headline type: size, spacing and line height

Even the right font looks weak with default settings. Large type needs tighter tracking and tighter leading than body text, and it needs fewer words. In practice that means letter spacing around minus 0.01 to minus 0.03 em and line height around 1.0 to 1.1. On a 1080 px social post, a headline usually sits between 90 and 140 px; [font size for Instagram posts](https://gradiently.design/guide/font-size-for-social-media) has the full scale.

### Avoid

- A light weight for the main headline on a phone
- Script or decorative fonts for long headlines
- Default line height on a three line headline
- Two different display fonts in one design
- Twelve words at headline size

### Do

- Semibold to black for social and thumbnails
- A display face for impact, a sans for detail
- Line height near 1.05 for stacked lines
- One headline face, used consistently
- Five to eight words, cut until it hurts

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;600&display=swap" rel="stylesheet">

<style>
  h1 {
    font-family: "Anton", "Arial Narrow", sans-serif;
    font-size: clamp(2.75rem, 7vw, 6rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
  }
  body {
    font-family: "Inter", system-ui, sans-serif;
  }
</style>
```

Loading a headline and body pairing from Google Fonts. The fallback stack keeps the line a similar width while the font loads.

Background matters too. A heavy headline on a busy gradient can still break up where the colour shifts behind it. Gradiently Marks move their calmest region behind your words and pick light or dark ink line by line, and the Lettering treatments, such as Contour, Inline and Extrude, give a headline extra presence without boxes or shadows. For big type on posters, see [display fonts](https://gradiently.design/guide/display-fonts) and [bold fonts](https://gradiently.design/guide/bold-fonts); for thumbnails, [thumbnail text](https://gradiently.design/guide/typography-for-thumbnails).

## FAQ

### What is the best font for headlines?

It depends on the job. Anton or Bebas Neue suit loud, short headlines; Playfair Display or DM Serif Display suit editorial ones; Montserrat or Outfit suit friendly, clean ones.

### Are Google Fonts free for commercial use?

Fonts on Google Fonts are released under open licences, mostly the SIL Open Font License, which allow commercial use. Each font's page on Google Fonts shows its licence, so check it before you rely on it. [Font licensing](https://gradiently.design/guide/font-licensing) explains the details.

### Should headlines be serif or sans serif?

Either works. Sans serifs read as direct and modern; serifs read as editorial and refined. Choose by the tone you want, then pair with the opposite for body text.

### What font size should a headline be?

On a 1080 px social post, around 90 to 140 px. On a website, roughly 2.5 to 4 times your body size, depending on your type scale.

### Can I use two headline fonts in one design?

It is rarely a good idea. One display face plus one calm body face gives clearer hierarchy and looks more deliberate.
