Alisen Hazzard

the Blog

Google Web Fonts

Posted on July 9th, 2014

I just love using Google Fonts to change the type when I'm designing a website.. Usually, I try to leave this until later in the process, because I get obsessed with switching between fonts, or I pick a font too early and it doesn’t represent the finished site and then have to go back and find a new one (sigh...)

I read somewhere that if you’re not so comfortable with web typography, pick only two fonts for your site. Starting out, this was a great tip for me as it narrowed down the options. I can’t have all the fonts, so I can pick my two favorites and then use the others for different projects.

I tend to go with the old stand-by: sans-serif for the headers and serif for the body text, and pick ones that have enough contrast without looking ridiculous.

Raleway

Google Web Font Google Web Font

Crimson Text

Google Web Font

For my first website, I used Crimson Text for the body, and Raleway for the headers. I like the look of Raleway, and kept going back to it when I was looking through fonts; the “w” in particular is really great, and I love the full round curves of the lowercase “e” and “c”. The serif font, Crimson Text, was nice and easy to read, which was important. Also, I loved the italic version (even though I didn’t use it, to save on loading time).

Lato

Google Web Font Google Web Font

It was also fun to play with fonts for Dreaming California. Lato, a sans-serif font, was perfect for my header. It has a lovely shape for the curvy capitals in the title, “D” and “C”, and I also liked the traditional “g” instead of a sans-serif font that looked hand-drawn.

Questrial

Google Web Font

Vollkorn

Google Web Font

I’m also redesigning a blog, and using nice sturdy (ahem, manly) fonts: Vollkorn, serif; and Questrial, sans-serif. I really like how they look together on the site, readable and clean, and slightly modern-looking. For that site I’m also using small-caps for some of the text, and the sans-serif font is excellent in that font-variant.

So far I’ve tried to stay away from the decorative fonts, but I think it would be fun to design a site with one as the logo and use it (sparingly, of course) in other areas of the site. If you haven’t played with Google Fonts, you can sort them by many different things, test out your text as you go, and download them in different weights and styles to add to your code. It gives you pairing suggestions if you’re having trouble finding a font to use with it, and you can see beforehand the loading time for each font - faster page-loading FTW!

What are some of your favorite web fonts? @alisenhazzard

Tagged in: Web Design Typography