Design - CSS - Typography

Choosing the Right (Free) Web Font

Note: This article assumes you are somewhat familiar with typographic terms. You should also be familiar with scripting HTML and CSS, as you need to paste a few lines of code into the web page’s header, and set a font-family rule in CSS.

In the web’s early days web designers used only web-safe fonts, because they were almost certainly available on most home computers. These typefaces included Arial, Helvetica, Georgia, Times, Times New Roman, Courier, Courier New, Tahoma MS, Verdana, and Comic Sans MS. Less commonly, we used Avante Garde, Impact, Bookman, Garamond and Palatino. Web typography was limited to choosing web-safe fonts, and applying attributes such as font-size, font-color, italic or bold. Verdana/Georgia font combinations were common.

More typographical rules were added to the Cascading Style Sheets 2 specification, released in 1998. The @font-face rule was one of them. It allowed designers to import or synchronize fonts that may not be available on user’s machines. However, @font-face wasn’t widely supported in most browsers until the mid-2000s.

There was, however, an exception.

Microsoft introduced a proprietary web font format (EOT), in 1997. While innovative and welcome, EOT fonts only worked with Internet Explorer 4. They were also hard to find.

In addition to EOT, we now have web-optimized TTF, SVG and WOFF font formats available for Internet use. We’ll explore these formats in another tutorial. This article looks at Google Web Fonts, a valuable tool for do-it-yourselfers and web designers. As of this writing, Google has collected 632 web fonts that are free to use for commercial and personal websites. The most difficult and time-consuming task you’ll face, regardless of your expertise, is choosing suitable typefaces for your site.

Choosing the Right Font

There is an art to choosing display and copy typefaces. They need to contrast each other to guide readers through a page. Typefaces need to reflect the tone of the article. For instance, you wouldn’t want to use Comic Sans MS in an article on astrophysics – although that’s been done – just as you wouldn’t want to use Garamond in a comic.

Another consideration is the number of styles and weights available. For body copy, a single font may be problematic if your article calls for bold or italic text because finding compatible fonts can be time consuming. And frustrating. It may be advantageous to choose a font family with all the styles you need. One containing regular, italic, bold and bold italic fonts is versatile enough to serve most purposes.

You can use any font you’ve licensed in a design. However, problems arise when your beautiful layout breaks on your client’s machine because you designed it with Seravek, or Frutiger 55 Roman, but your client sees their website rendered in Arial Regular. If your client wants to purchase web font licenses for Frutiger, fine. If not, you’re rethinking the design.

In choosing typefaces, consider your audience. Older and younger readers may struggle with low contrast or thin fonts; so might viewers using older or consumer-level displays. Rambla is our example body type. It’s a clean sans serif and easy to read at 13 pixels.

IMAGE: Google Fonts Rambla family

Rambla by Martin Sommaruga is a font family with four styles: normal (regular or roman), bold, normal italic and bold. It’s large x-height and thicker strokes make it easier to read on web pages.

Display & Body Type

Choosing the right body typeface is important. In general, body font sizes range 10–14 pixels. Headings, or display type are generally larger. Display type is used for headings, pull-quotes – any place in the document you need to draw the reader’s eyes. Fonts specifically designed for use as display type can look great at larger sizes, but look crunched up or fuzzy at smaller sizes, making them unsuitable for body type. If a font is designed for body type, it may require manual kerning or tracking to look right at larger sizes (Try playing the Kerning Game to get a sense of manual kerning.)

IMAGE: Astigmatic's Yellowtail, a handwriting (display) font from Google Fonts.

In this screenshot we see Astigmatic’s Yellowtail, a handwriting font, shown here at 13- and 36 pixels. At 13 pixels it’s still legible, even though it seems a little compressed. It could work as a body font, but reading it in large blocks is likely to tire the reader’s eyes. Yellowtail could work for headings in a project requiring an informal mood.

Adding Google Fonts to Your Website

Before adding fonts to our website, we need to select them. In the following steps we’ll choose body and heading fonts.

Choosing fonts is usually my first design decision. If I have client copy to work with, I’ll copy a paragraph into the Preview Text box and then select the paragraph tab to see how the text looks. Having client copy from the start doesn’t happen often, so you can create mockups with lorem ipsum. I used Hipster Lipsum for this example.

Once you have your paragraph ready to go, it’s time to find a body font.

  1. Jump to Google Web Fonts.
  2. We’ll start by modifying our search. Let’s select our body font first. Under the Filters heading, select the Categories box, uncheck Serif, Display and handwriting. This step reduces the number of fonts to165. Alternatively, if you know the name of the font you want, type its name into the search box directly above the categories box. Hint: If you can’t recall the name, or are unsure of its spelling, enter the first letter or three and then search.
  3. Under the Categories drop down are three sliders: Thickness, Slant & Width. Thickness filters fonts by weight, I.e.: Bold, extra Bold or Black; Slant (or Italic) filter by degree of angle; Width sorts by character width (wider fonts would include monospaced type).
    IMAGE: google fonts categories.

    Filtering fonts by category allows you to search within your required category, i.e.: Serif, Sans-serif, Display or Handwriting.

  4. The Reset all filters/search restores the default settings. Do that now. Select either Serif or Sans Serif.
  5. There are four type display tabs above the preview pane: Word, Sentence, Paragraph & Poster. Word displays a single word. This viewing option is useful for choosing logo type or other branding text. Sentence shows fonts in a single line. Paragraph displays type as blocks. Poster shows font names in clickable boxes.
    IMAGE: Google Fonts type display options

    Font display options you can set to get a better idea of how typefaces will look in context .

  6. Viewing options are above the type preview panes. The first is Preview Text. From the drop down select [Enter your own text] and paste your lorem ipsum into it.
    IMAGE: Copy a paragraph of lorem ipsum to the clipboard.

    Copy a paragraph of lorem ipsum to the clipboard.

  7. As we’re selecting a body font, change the Size to 13 pixels.
    IMAGE: Font size drop down.

    Setting font size helps you see how it will appear in your project before committing to a font.

  8. Now let’s set the sort order. The Sorting drop down provides five options: Alphabet, Date added, Number of styles, Trending & Popularity.
    IMAGE: Sort Fonts by Alphabet, etc.

    Hint: Popular & trending fonts may be well-designed and easy to work with, but they may also be in use everywhere. As a rule, I don’t follow trends. Instead, I choose fonts that fit the project. I’ll either search Alphabetically, or by Number of styles when I want body fonts.

  9. Now choose one. I’ll wait. If you want to see all of the styles available, click the Show all styles button. Click it again to hide them.
  10. Scroll to the bottom of the font box. You’ll find Quick Use, Pop Out and Add to Collection buttons in the bottom right corner of the text box. Note: Adding a font to your collection also adds a new Filter option: Show Collection Only/Show All Families.
    IMAGE: Describes quick-use, pop ot and addd to collection buttons.

    The Quick-use button takes you to a form for generating HTML and CSS snippets for use in your page. Pop Out offers a number of options, including font pairing suggestions. It’s worth exploring. Add or removing a font from your collection allows quick access to your selected fonts.

  11. Click Quick Use. A new page will load.
  12. The first step is to Choose the styles you want. Here, I’ve selected Normal, Normal Italic & Bold styles. Note the Page Load meter on the right side of the page. The more fonts you choose, the higher the impact on page load times. Only check the styles you’re going to use.
    IMAGE: Selecting font styles from Google Fonts Quick use page.

    Check the style you want to add to your website. Remember the more fonts and styles you add, the more overhead you’re adding to your website – which may lead to increased download times, perhaps slower font rendering and other performance hits.

  13. In almost all cases you’ll use the Latin character set.
    IMAGE: Choose the Latin Character set

    The Latin character set is the only one you need for all western languages, and a number of eastern ones, too.

  14. Next we’ll copy then paste the generated code into the head of our page.


    <link href=',400italic,400' rel='stylesheet' type='text/css'>


  15. You can jump back to your font page and copy the CSS snippet and then paste it into your style sheet. Or you can save a return trip by keying font-family: “[FONT_NAME]“, [fallback value, i.e.: sans-serif, serif, cursive, monospace;
    I’ve created an internal style sheet for this code snippet:


    <link href=',400italic,400' rel='stylesheet' type='text/css'>

    body {font-family: "Rambla", sans-serif; …}

  16. Save the page. Preview it in your browser.
    IMAGE Screen shot of sample web page

    A screen shot of our page, using Rambla 100%/145% normal as our body type and Yellowtail 285% normal for our headings.

Your browser will render Google Fonts because they’re linked to your web page the same way other assets such as images are linked.


Adding web fonts to your project need not be a complex task. Besides being easy to use, free Google Web Fonts are an inexpensive way to add oomph! to a website. Today you learned to choose web fonts from Google’s extensive font collection. You also learned to copy and paste the lines of generated HTML and CSS into the head of your web page. In future articles I’ll discuss more efficient ways of adding web fonts to your website. Try different fonts. Explore the Google Fonts website.

For now, play. Explore Google’s 632 free fonts. Post links to your pages below. I’d love to see what you’ve done.

About the author

Gord taught the graphic design program at a private college for six years. He also wrote nineteen of the program's courses. After six years leading classes, he felt it was time to learn how to be a graphic designer again. In addition to graphic design, Gord's an accomplished writer. Digital painting and photography are two of his hobbies.

Share this post

Leave a Comment

Subscribe To Our Newsletter