Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

5 perfect headline and body font combos

Create the perfect typographic combination to instantly enhance a web page


Just like the great movie star duos – Butch and Sundance, Thelma and Louise, Han and Chewie – there’s some typefaces that just share a natural chemistry. Opposites very much attract and there’s a real art to selecting a good pairing.

A well matched pair of typefaces can instantly enhance a webpage through harmony and balance. Finding two typefaces that work well together whilst not looking too similar, but equally aren’t too far apart, sounds awfully confusing. Though it does have a fuzzy logic to it. Here are a few examples of classic pairings to get you started.

Headline: Brandon Groteske

Body: Roboto Slab

A nice contrast between the bold rounded nature of Brandon Groteske and the angular edges of slab serif, Roboto. Easy to read on full desktop view at 20pt but watch for how well slab serifs translate at smaller sizes as well as on mobile or tablets

Headline: Freight Display

Body: Georgia

Rare for a duo of serifs to work exceptionally, but this carries it off well. Freight Display brings clarity to the titles on a text heavy design. The additional white space given allows it to breathe and the condensed space is filled with the ever-legible Georgia.
A classic look, popular at the moment for that old field notes/journal vibe.

Headline: Avenir

Body: Georgia

Again, similar to the above, punchy headlines make way for a more subtle readable typeface. The feel of the site as a whole is very clean and modern. Using the italicised serif for the kicker works well for the title sequence.

Headline: Museo Sans

Body: Adobe Calson

This combination has been used to create a much more classic feel. The serif callouts give an editorial feel and the size plays a vital role in the visual hierarchy. When it comes to using a san serif as the title, the punchier Museo at smaller sizes brings clear and concise subtitles and navigation.

Headline: Gotham

Body: Chronicle

With a very minimal theme and colour palette, Gotham seems the ideal choice to get that clean polished look easily. The font allows the medium weight to be scaled up to gigantic proportions without looking overwhelming and can be tracked as to not feel too cumbersome. The book weight is ideal for body copy with its light appearance and wide, spacious characters.