January 29, 2014

DTC: serif vs sans serif

Design to Code: Serif vs Sans Serif. By www.daraskolnick.com/blog and www.alicia-carvalho.com/blog

For our first design to code feature we decided to start with the basics of the basics: type! Typography is my favourite part of graphic design and it is a huuuuge subject so I am going to try really hard to stick with the basics here and not nerd-out for too long.

The first thing you should know is what the difference is between a serif and a sans serif typeface. A serif typeface is when the letters and symbols have the little footsies at the bottom. Sans serifs, as the name already says, don’t have little feet.

Typefaces on the web have come a long way so this is not 100% accurate anymore, however as a general rule sans serifs are easier to read on the web, while serif fonts work very well in printed work. Why is that? The little feet on the serifs are there to help you make clear distinctions between the letters (more space between letters, higher contrast). They also serve as a guide to the horizontal flow in a word or sentence. Sans serifs on the other hand are easier to read in smaller sizes because they are “simplified” versions of the serif. One could therefore say serif fonts are great for body copy at a decent size in a printed book and sans serifs are simpler and flexible at any size, on a tiny iphone or a huge title on a poster.

What makes a really great typeface choice is when it is invisible to the reader. Not literally invisible, but more so unnoticeable. Good type is subtle and easy to read. I am not distracted by the font, but instead am focused on the content.

For your personal brand (yes, that includes your etsy shop or blog) you will really want to stay away from the default typefaces that come with your operating system. They are not bad typefaces (well, some of them are. Please stay away form Comic Sans or Papyrus!), but they are the default, they are kind of boring. Instead, get out there and start building your own type library. Some of my favourite typeface resources (free + paid) include Font SquirrelLost Type Co-op and My Fonts.


Now that you have a good grasp on serifs and sans serifs, I’ll help you figure out how to use them in your site! First, let me introduce you to the old-school way to use typography on the web. Then, I’ll show you the newer, more fun approach.

Back in the day…

Back in ye olden days (or, more accurately, a few years ago), there wasn’t any universally-supported way to embed custom fonts into websites, so you had to use fonts that were commonly found on most people’s computers. These fonts are often called web-safe fonts, and include old favourites like serifs Times New Roman and Georgia, and sans serifs like Arial and Verdana.

So, say I wanted to use Garamond for my body text, which is installed by default on 86.24% of PCs, but only 23.84% of Macs. I’d use a CSS font stack, which lets you choose as many backup fonts as you want, so if your visitor doesn’t have the first font installed on their computer, CSS will check for the next font(s) until it finds one that’s available. That looks something like this:

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

But then things got better!

In the past few years, CSS and browsers have evolved to let you use custom web fonts on your website. This is super exciting, because let’s face it, using the same old web safe fonts over and over was getting a little stale! There are a few ways to use web fonts on your site, which include:

Google Web Fonts

This is, by far, the easiest way to use web fonts on your site, especially if you’re a beginner. Google Web Fonts boasts hundreds of web fonts, which you can filter by category (like serif or sans serif), thickness, slant or width.

To use a Google Web Font on your site, click on the “Quick Use” button, select the weights you’d like to use, and then add the code snippet to your website, like they instruct.

Let’s say I decidd to use Oswald and I’d added the code to my site’s <head>. I’d then use it in my site like this (if I wanted to modify my headings):

h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;

In this case, I chose to use the ‘light’ weight (that’s what font-weight: 300 refers to).

See? Easy!

Self-hosted web fonts

Sometimes you’ll want to use fonts that just aren’t available on Google Web Fonts, so you’ll have to host the fonts on your own server, which really isn’t too hard! Good places to find web fonts to self-host include Fontspring and Font Squirrel, some of which are free, and some of which you have to pay for. These services will generate the code to include in your CSS for you, so don’t worry too much about learning the syntax, since they’ll provide step-by-step instructions on how to include the font in your CSS.

Premium web fonts

If you want to be really snazzy and use professional-level fonts, you’ll want to check out a service like Typekit or Cloud Typography, which make the best of the best fonts available via subscription.

A note on serifs vs sans serifs on the web

There’s a lot of debate about whether serifs or sans serifs are best for readability on the web. In the not-too-distant past, many screens were just too crappy to render serifs nicely, so the widespread wisdom of sticking to sans serifs on screen made a ton of sense. These days, though, operating systems render text much better, screens are way nicer (especially if you have a retina/HiDPI display), and more and more sites are trending towards using larger fonts for body copy than, say, 5–10 years ago. With that in mind, my advice would be to use whatever font suits your project best and, as Alicia said, gets out of the way and lets your reader focus on your content!

Don’t forget, we will be taking turns posting Design To Code features across our two blogs so make sure you follow Dara and me.

Comments: 2

Categories: ,

This is awesome guys! I need to brush up & I can’t wait for the series!

Thanks for following along :)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.