Condensed Fonts

A short history of condensed fonts

Compare at a glance

How to use condensed fonts

How to choose between them

• Oswald if you need headlines. A classic condensed gothic for strong headlines.
• Bebas Neue if you need posters and titles. All-caps condensed display font, a poster staple.
• Barlow Condensed if you need dashboards and UI. A slightly rounded condensed sans, readable at small sizes.
• Roboto Condensed if you need tables and data. Condensed Roboto for dense interfaces.
• Anton if you need sports and news. Very bold and tall for maximum impact.
• Fjalla One if you need web headlines. Medium-contrast condensed sans that works on screens.
• Archivo Narrow if you need editorial. A narrow grotesque for compact body and labels.

Tested font pairings

Add it to your site

<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=Oswald&display=swap" rel="stylesheet">

.heading {
  font-family: "Oswald", sans-serif;
}

Pairing and tips

Each font at a glance

• Oswald is a sans serif best for headlines. Fallback stack: "Oswald", sans-serif. It pairs well with Merriweather.
• Bebas Neue is a display face best for posters and titles. Fallback stack: "Bebas Neue", sans-serif. It pairs well with Inter.
• Barlow Condensed is a sans serif best for dashboards and ui. Fallback stack: "Barlow Condensed", sans-serif. It pairs well with Barlow.
• Roboto Condensed is a sans serif best for tables and data. Fallback stack: "Roboto Condensed", sans-serif. Pair it with a neutral sans for body text.
• Anton is a display face best for sports and news. Fallback stack: "Anton", sans-serif. Pair it with a neutral sans for body text.
• Fjalla One is a sans serif best for web headlines. Fallback stack: "Fjalla One", sans-serif. Pair it with a neutral sans for body text.
• Archivo Narrow is a sans serif best for editorial. Fallback stack: "Archivo Narrow", sans-serif. Pair it with a neutral sans for body text.

Readability and accessibility

Colors and layouts that suit this style

Common mistakes

• Using condensed fonts for long paragraphs.
• Leaving uppercase condensed text with no extra tracking.
• Setting very light condensed weights at small sizes.

Recommended sizes

• Sans serif faces (Oswald, Barlow Condensed, Roboto Condensed, Fjalla One, Archivo Narrow): readable from about 14px for interface text, 16 to 18px for long reading, and any larger size for headings.
• Display faces (Bebas Neue, Anton): use at 32px (2rem) and above, ideally for one or two lines. Below that, details fill in and readability drops.

Licensing and commercial use

Loading fonts without slowing your site

• Load only the weights and styles you actually use. Each extra weight is another file to download.
• Use font-display: swap (included in the Google Fonts link above) so text shows immediately in a fallback font and swaps when the web font arrives.
• Add preconnect hints for fonts.googleapis.com and fonts.gstatic.com, or self-host the files on your own domain for the fastest, most private loading.
• Prefer variable fonts when available: one file can cover every weight.
• Define a sensible fallback stack, such as "Oswald", sans-serif, so the layout looks right even before the font loads.

Sources and further reading

• Google Fonts · Every font on this page is available here for free.
• SIL Open Font License FAQ · What the most common Google Fonts license allows.
• Google Fonts FAQ · Licensing and commercial use of Google Fonts.
• MDN: font-family · How font stacks and fallbacks work.

More font guides

Questions people ask