Barlow Condensed and Barlow Font Pairing
Set in Barlow Condensed 600 and Barlow 400
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600&family=Barlow:wght@400;700&display=swap');
body {
font-family: 'Barlow', system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Barlow Condensed', system-ui, sans-serif;
font-weight: 600;
}Barlow Condensed at weight 600 for headings and Barlow for body text is a strong, matched pairing from one family. The condensed width packs bold, compact headlines into tight spaces, while regular Barlow keeps paragraphs open and readable. Because the letters share the same skeleton, pages look consistent and purposeful, which suits business sites and shops that want a confident, no-nonsense voice.
Barlow Condensed & Barlow
Headings 600, body text 400
ABCDEFGHIJKLM
abcdefghijklm
0123456789 &?!
Body text has to stay comfortable from the first line to the last.
Why Barlow Condensed and Barlow Work Together
Both fonts come from the Barlow superfamily, designed by Jeremy Tribby, so this is a pairing by width rather than by classification. Barlow is a low-contrast sans serif with slightly rounded corners and a plain, practical look, a little like road and transit signage. Barlow Condensed uses the same letter shapes squeezed horizontally, which gives headings height and urgency without needing extra size.
The contrast comes entirely from proportion and weight. Narrow, upright headings read as announcements, and the wider regular cut underneath reads as explanation. Since stroke thickness, curves and terminals match, nothing clashes, and the page holds together even when you add buttons, labels and prices in either width. The mood is bold and industrious rather than decorative.
Where Barlow Condensed and Barlow Work Best
Think of a trades business, such as a roofing or moving company, where the homepage needs a short headline, a phone number and a list of services that all read at a glance. In a shop, Barlow Condensed handles product names, sale banners and category tiles in narrow grid columns, while Barlow takes care of descriptions, sizing charts and return policies.
Weights and Sizes to Use
Set Barlow Condensed at 600 for headings; both widths offer nine weights from 100 to 900 with italics. Condensed headings can go slightly larger than usual, around 40 to 56px for a main title, with line height near 1.1. Use Barlow at 400 for body and 700 for bold, at 17px with a line height around 1.6. For all-caps labels in the condensed cut, add 0.04 to 0.06em of letter spacing.
Things to Watch
The risk with a single-family pairing is flatness, so make the heading and body sizes clearly different. Do not use Barlow Condensed for paragraphs; narrow letters tire the eye over several lines. Keep condensed text above about 14px, since tight counters close up at small sizes. Finally, all-caps headlines are tempting with this font, but limit them to short phrases so pages still feel approachable.
Similar Pairings
Pairs with a similar bold feel, each with its own page.
Archivo Black & Archivo
The best pairings go unnoticed. Readers remember the story, not the fonts, and that is exactly the point.
Archivo & Source Serif 4
Good type disappears into the reading. The heading sets the tone, and the body font carries the story to the last line.
Syne & Literata
A well-made pair feels like one voice in two registers: a confident headline and a calm, even paragraph underneath.