When building a website, font choice is one of those things that can be a total time suck. Cycling through all the various permutations of typeface for each element of your website, it’s all too easy to get stuck on the question of bold vs italic, from Amatic to Zapfino.

I’d like to demystify some things about fonts for the uninitiated, and let you know how you can use webfonts on your website the right way.

Graphic design and typography

In these times of accessible web publishing, it would appear that anyone can be a graphic designer. But of course, this isn’t necessarily the case.

It still holds true that the best person to design your website is, well, a graphic designer. After all, they are the ones with the training, experience, skill, and talent to make your brand come to life.

Let me say right here that I firmly belive you should consult with a professional graphic designer for your branding and website design. There’s really no substitute for investing in a good design right off the bat. Graphic design encompasses various aspects of a website. Colours, spacing, typography, layout, logo, and visual balance are all elements that a designer will consider.

But with that said, there’s no reason why everyone can’t learn a few basics of design and typography, so you’re able to make minor adjustments and tweaks without needing to call in a professional. After all, designers are busy and often expensive, so you might not need to seek their help for every change. And every designer had to start somewhere!

So, let’s have a look at fonts, and how they can be used on your website.

Fonts

What are fonts?

When we talk about fonts, we are referring to the style of the type used. There are thousands (maybe even millions) of different fonts in the world. These range from the hugely popular and widely-used (like Helvetica or – shudder – Comic Sans), to the obscure and the proprietary.

Typeface vs font

You may have heard the terms typeface and font. Typeface is the name for the broader style of type, like Helvetica or Garamond. Font refers to a specific size and weight of that typeface, for example Helvetica Light 12px. Really, the difference between the meaning of these two terms is subtle, and not really relevant to most people working with web publishing. These days, both terms can generally be used interchangeably. For now, I’ll use font to refer to both typefaces and fonts.

Serif and sans-serif fonts

The terms serif and sans-serif are used to differentiate between groups of fonts. Serif fonts have little endcaps on their lines, whereas sans-serif fonts don’t have these endcaps.

For example, the old Google logo is a serif font, and the new logo is sans-serif:

Many designs use a combination of serif and sans-serif fonts to contrast headers and body text.

Display/decorative fonts

These are fancy fonts that you might use sparingly for special purposes, like fonts, headings, or stylistic elements. Generally, you wouldn’t use these for body text as they can render the text quite hard to read.

For example, Violetta Script is a beautiful display font for headings, but when used as a paragraph font it becomes difficult to read:

Display fonts have a big impact when used sparingly. So don’t be afraid of them!

How to implement fonts on your website

It used to be the case that fonts were not inherently part of the website, but rather the website would tell the visitor’s computer which font to display from its own library. This required the use of “web-safe fonts,” meaning fonts that were on every computer and therefore if you used them on your website, everyone would see the same font.

This is a bit of an old concept now, as there are now many services you can use to display fonts on your website. These services draw from an online library of fonts to display them on your website, meaning that as long as your website’s code points to the online library, everyone visiting the site will see the same font, regardless of whether they have them on their computer. Some examples of these services are Google Fonts (my personal favorite), Font Squirrel, and Adobe TypeKit.

The method for implementing the web font on your website varies depending on its particular setup. Essentially, the website needs to reference the font files, and also your stylesheet needs to apply the relevant fonts to the body and headings. If you are happy getting your hands dirty in the CSS code, you can make the changes in there. If you’re more of a code novice, try the Easy Google Fonts WordPress plugin, however keep in mind that it might not work with all themes.

Essentially, you are no longer limited to the small range of “web-safe” fonts to use on your website. The rising popularity of webfont services means that web typography is now more interesting than ever. So go ahead and try out some new and interesting fonts! Just don’t forget the principles of good design and typography in the process.

Have you seen any interesting examples of typography on the web? Leave a comment to let me know!