Best Google Web Fonts For Page Headers: Tips & Live Examples

By |2020-01-04T11:09:17+00:00January 4th, 2020|Categories: Blog|0 Comments

There’s a lot of variety in Google’s free webfonts library. These fonts all load through Google’s servers and they’re optimized for heavy loads so they’ll never slow down a site.

The hardest part is finding a font to perfectly match your design. The most important typography of any webpage is the header so this is where you should start a font exploration.

Roboto Slab

The nice thing about Roboto Slab is that it can work for any topic from business sites to tech blogs. Hongkiat runs Roboto Slab in the header and it practically jumps off the page.

Serif typefaces work great on news sites and they fit especially well in headers.

An example with slightly less contrast is the redesigned Copyhackers website.

Open Sans

Take for example How-To Geek which uses Open Sans in both the heading and paragraph section of each article.Lighter variations of Open Sans can be found on the Cleverbird Creative website.The gaming blog GamesRadar uses the condensed Open Sans in their header which spans the entire page width.

The key takeaway is that Open Sans works for pretty much everything, regardless of font styles. This includes page headers but you’ll need to mess around with CSS styles to find the right match for your page.

Montserrat

Montserrat supports every type of style from thin to black and everything inbetween(including italics). This means you can load different font styles with more accuracy and less rendering in the browser.

The Kindred homepage uses Montserrat exclusively throughout the site. It’s the first header to grab your attention and it’s all over the site from image captions to footer links.

Push Square uses the thickest Montserrat style for all their page headings. It naturally has a good amount of letter spacing so you might even try to reduce this a bit and bring the letters closer together.

Lato

It works in almost every situation but it doesn’t have too much personality one way or another. It’s not too stiff, nor too creative, and it varies tremendously between the thinnest style and the thickest.Lato is most impressive because of its versatility in header styles.

Lato is a safe bet for pretty much every website and it has all the variety of Montserrat with a slightly more “generic” feeling.

Catamaran

Catamaran can work nicely as a body font if you only use thin styles. But adding bolded text into your paragraphs can look wonky since the typographic styles are very thick.

The best thing about Catamaran is the oddly-shaped letterforms. They really feel unique and almost have a handwritten style to them.

Raleway

The Raleway font is definitely eye-grabbing and it’s easy to spot because of the interconnected shape of many letterforms.

Tech blog ReadWrite uses Raleway for their headers across the entire site. When sized smaller for sidebar/related post stories it can blend pretty well into the layout too.

Raleway’s “w” shapes are unique. The uppercase and lowercase both look like two letter v’s put together.

A lot of big names use Raleway including ZDNet which runs this font on article headers, subheaders, and page content.

Because of Raleway’s unique design it’ll either work well on your site or it won’t. Definitely worth testing but just know this isn’t the easiest font to make blend.