My favorite Google fonts and how to use them

My favorite Google fonts and how to use them

Long gone are the days when web designers were limited to a small selection of fonts. Now you can use fonts whether or not the user has them stored on their computer. Google has played a large role in this change by offering hundreds of free, open source, fonts that can be used on any website without requiring any downloads. But with hundreds of fonts to choose from, which should you use?

There are a lot of factors in the selection of a font. I am not going to go to deeply into issues of aesthetics or “messaging” here. What I am going to cover are some simple rules that anyone can use to select a font that will look good in most circumstances.

Here are two simple rules that will improve the look of almost any site.

  • Use no more than two typefaces for a project. For example, use one typeface for body copy and another for headlines. But that is about it.
  • Use only simple, legible fonts. Though reading seems natural, it actually requires our eyes and brain to translate thousands of shapes into meaningful words. Save your reader the headache and go with commonly available fonts that people are used to reading.

There are also some factors in choosing fonts that are unique to how computer screens display fonts, such as:

  • On a printed piece, type is composed of ink on paper. No matter how smooth the paper is there is a little spreading that happens when the paper absorbs the ink. This thickens the font a bit. On the web, a pixel is always pixel, and a pixel is way to thin to read easily.
  • Fonts on the web are viewed on a lighted background. This back-lighting has the effect of making the type look thinner than it actually is.

This could just be my guess but these factors might be why web fonts tend to favor sans-serif typefaces. Serifs are the tapered ends of a certain typefaces and they can get quite thin. They can look quite elegant but on the computer their subtleties are hard to discern. I have rarely seen a better substitute for serif fonts than Georgia, which is available on all computers and has heavier serifs than other serif fonts like Times Roman. The special issues of viewing type on a computer screen might also  be why web fonts tend to be a little chunkier and rounder and favor more leading, or space between lines. Designers might have naturally started using simply-designed fonts in a larger size. Or maybe it is just a passing fad.

So what are my “go-to” fonts for the web? Here is a list. Pick one, or at most two, typefaces to use on your site. I will give you instructions how to use them at the end. I  also offer files which can be downloaded and installed on your computer. These are aren’t necessary to use the fonts  but are useful if you want to mock up how a page looks before you build it for the web.

Open Sans

Open Sans is an all-around workhorse, a kinder, and gentler substitute for the ever popular, and over-used, Helvetica. It is extremely legible and is ideal for large bodies of text.

open-sans

Lato

Lato is a clean and professional typeface that is at home anywhere. With large variety of weights to choose from it could be the only typeface you need.

Lato

Arvo

Arvo is a slab serif. It has a friendly “chunky” feel that can work well with headlines or short paragraphs, such as a pull quote.

arvo

Oswald

Oswald is a block-y,  condensed font that let’s you know you mean business. It is perfect for headlines. The larger the type size, the better. It is 36px in this sample.

oswald2

How to use these fonts

If you want to get started using these right away, it is pretty easy. All you need is access to your style sheet. In WordPress it is stored under Appearance > Editor and is usually labeled styles.css.

Add this code near the beginning of the file

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300italic,400italic,800italic,800,700italic,700,600,300,600italic|Lato:400,300,300italic,400italic,700,700italic,900,900italic,100italic,100|Arvo:400,400italic,700,700italic|Oswald:400,300,700);

This gives your website access to the font files mentioned above. You now need to apply these fonts to the elements of your site.

Here’s how. For example, to use Oswald for your main headline—bold, 36px and with 120% leading— find the H1 tag, and edit it to read:

h1 { 
font-family: 'Oswald', Arial, Helvetica, sans-serif;
font-size: 36px;
line-height: 1.2;
font-weight: 700;
}

sometimes abbreviated to:

h1 {
font: bold 36px/1.2 'Oswald', Arial, Helvetica, sans-serif;
}

To use other fonts, replace “Oswald” with “Arvo”, “Open Sans”, “Lato”, etc.
I included “Arial, Helvetica, sans-serif” in the specifications to give some options in case some computer can’t use Google fonts. This might be the case for older browsers.

Use Google Fonts offline!

Sometime you want to use Google Fonts in your design software or word processor either to match the look of a printed piece to an existing web page or to get an idea of what a web design might look like. To do so download and open these .zip files and install the individual fonts you want. In most cases you only need to double-click on the file to install it.

Let me know if these work for you. And what your favorite Google fonts are!

Anything on your mind?