Web Font Basics

If you’re a seasoned web designer, there’s probably nothing in here that’s going to enthrall you, but if you’re new to the profession, or perhaps switching from print to web, there’s plenty of web font tips here that you simply need to know.

The Basics

‘System’ Fonts

Also known as ‘web safe’ fonts, they are the classics that you’re bound to recognise. They include:

  • Arial
  • Times New Roman
  • Georgia
  • Verdana
  • Tahoma

They are considered safe because they appear on the vast majority of modern machines. Whilst the install rate isn’t exactly 100%, these fonts are up there at the 98-99% mark; enough for you to use freely without worrying about support.

Semi Supported Fonts

This is the middle-ground that often trips a few people up. These are fonts that come installed on some machines, but not on others; generally speaking, the split is across operating systems. Typical examples include:

  • Helvetica Neue
  • Gill Sans
  • Garamond
  • Century Gothic

* If you’re seeing different fonts above, you’ve got them installed on your machine

For example, Helvetica (and it’s variants) can be found on nearly every Apple device, but you’d be hard pressed to find it on an out-of-the-box Windows machine.

If a machine doesn’t have the font, it can’t use it…simple as. To provide something decently consistent, you have to provide a string of similar fonts to fallback on. Here’s an example for Garamond:

body {
    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
}

With some fonts – like Arial and Helvetica – you can barely notice the difference; so it isn’t the end of the world. But, some font stacks have subtle differences – like been fatter, narrower or having differing glyphs – that can sometimes cause continuity issues, or in extreme cases, break the layout of a website.

Personally, I’d avoid these fonts outright; they can often cause front-end headaches that simply aren’t worth it.

@font-face Fonts

This is the relatively new approach where fonts are loaded as a resource by the browser.

To be used across all browsers, a font loaded using @font-face needs four formats: .woff, .eot, .tff and .svg. Without all four of these formats, you can’t guarantee a consistent experience for all users.

Sometimes the fonts are free, and sometimes they cost; which can be charged from a one-off download or a monthly / yearly subscription.

Access

Direct Download

You go to a website that supplies the font files and download them; pretty straight-forward really. It can either be a pay-for site like MyFonts or a free resource like FontSquirrel. You take the font files and put them alongside your other website assets, then call them in the CSS, like so:

@font-face {
    font-family: 'Fontname';
    src: url('Fontname.eot');
    src: local("☺"),
            url('Fontname.woff') format('woff'),
	    url('Fontname.ttf') format('truetype'),
	    url('Fontname.svg#Fontname') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3 {
    font-family: 'Fontname';
}

Font Foundry

These are online services that provides the fonts for you; either provided for free like Google Fonts, or paid-for like Adobe Typekit. You never physically own the font or host it with your website, it’s provided from their servers through you adding a code snippet; either <link />, @import or JavaScript.

Usage

Check

If there’s one thing that catches designers out, it’s falling in love with a font that can’t actually be used on the web. They fall victim to the common assumption that because you can get the font on your computer, that it’ll be fine on the web as well.

So before you plaster a design with a font, have a quick scour online to see if it’s available for web; here’s a few places you can check:

If you’re getting fonts from free resources like Google Fonts and FontSquirrel, it’s a 5-10 minute, cost-free job to grab the font / code snippet and create a live code test; totally worth it if it stops headaches later on.

Page Load

Whatever source you load @font-face from, you’re asking the user’s browser to download these fonts. Like CSS, JavaScript and images, fonts are web assets that contribute weight to a page. Use @font-face fonts, just don’t go crazy with them.

Invest / Experiment

Now is a really exciting time for web typography. For years we wanted to use pretty fonts but had to resort to using ugly hacks and workarounds like image replacement, sIFR and Cufon (never use these…ever!).

With literally thousands of fonts at your disposal, now isn’t the time to stick with the stable handful of fonts from yesteryear. Go out and explore what’s possible; invest real time into finding worthy alternatives to fonts like Arial and Times New Roman (e.g. Proxima Nova and Adelle). Even if you can’t afford paid-for solutions, there’s plenty of free resources to use.