The Sans Serif Typeface

Tweet

Letterform Over the past few weeks I’ve put up posts about Old Style, Modern and Slab Serif typefaces. All three of these font categories cover fonts that are described as Serif typefaces. That is, their letter forms have a serif on the end of the stroke.

If you studied French, you will know that “sans” means “without,” so naturally enough, sans serif fonts are those without serifs at the end of the strokes. The fonts that fall into this category are most commonly known as sans serif but you might also see them referred to as Grotesque, Doric and Gothic (not to be confused with the Blackletter typeface).

The first experiments with printed sans serif typefaces was in the mid 1700s, however their use in print really didn’t become more commonplace until the early 1800s.

The characteristics which distinguish sans serif typefaces are that they are nearly always “monoweight.” This means that there no thick/thin transition in the strokes, they are the same thickness the whole way around. And of course, there are no serifs anywhere.

Sans-Serif

Sans serif fonts are considered to be easy to read from a screen and so are very suitable for body text on web sites. They are not quite as legible in print, so are used in headings, pull quotes and small tracts of text in magazines, books and brochures. You probably already have several sans serif typefaces on your computer. The following are all web safe.

sans-serif-websafe

The look pretty similar don’t they?  Helvetica and Geneva come with Macs, while Arial, Tahoma and Verdana come with Windows.

Some of the professional or commercial font families come in a variety of weights and styles. It can worth buying a couple of good sans serif fonts for your library. For example, I’m a big fan of the Futura font. (I’m not going to link here because I’ve seen different prices on various websites and as part of packages, so the advice is shop around for your fonts.) As well as the “regular” or medium font Futura has the following.

Futura

So one typeface with 19 styles makes for a very versatile tool.

Obviously the term sans serif covers a myriad, but what are your favourite sans serif fonts? (Free or commercial)

Related Reading:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Richard

    Obviously the term sans serif covers a myriad, but what are your favourite sans serif fonts?

    Myriad Pro

  • http://www.baymard.com jamieappleseed

    Helvetica. Then myriad pro for headers.

  • http://www.cemerson.co.uk Stormrider

    Myriad is nice. I quite like Verdana as well, and the new Microsoft fonts like Calibri.

  • D.D.S. Polymath

    All things considered, the following cascade for headings (h1–h6) does seem like a product of exuberant fancy, but it did appear pleasing of aspect once I tried it while building a site:

    h1, h2, h3, h4, h5, h6 {
    font-family: "Frutiger LT Std 47 Light Cn", "Univers LT Std 47 Cn Lt", "Trade Gothic LT Std Cn", "Myriad Pro SemiCond", "Myriad Web Pro Condensed", "Helvetica LT Std Cond", "Arial Narrow", "Segoe Condensed", "Franklin Gothic Book", Arial, sans-serif;
    (…)
    }

  • viaDigita.com

    I recently found several new fonts—real beauties—at Devlounge: Nevis and Old Republic.

    Five Big Bold Beautiful Fonts