For web developers creating themes, choosing a font — or shall I say typeface, can be quite daunting and might even be quite random. A common question developers ask designers is “Which font should I use?”.
That’s like asking “Which framework should I use?”, the answer will most likely vary depending on your needs. What is your app for? Does it need to be ported to several mobile OSes? What experience do you have in the field? How many developers, time and money do you have?
The typeface must also be considered based on your needs. With that in mind, it’s important to note that there are many right answers, and no answer is really wrong, there are just better or worse answers.
As you might have guessed by now, it’s not easy, but fear not! Relax, grab a drink and follow along as we revisit the bases of typefaces to understand how they can be used so we get the right tool for the job.
Typeface anatomy
Before we dig into classification of typefaces let’s examine the different parts that compose them, so we can say things like “the x-height is quite big” instead of “the height of the lowercase letters in comparison with the capital ones is quite big”. Using the correct jargon makes things quite easier later on.
Image may be NSFW.
Clik here to view.
The image above is courtesy of FontShop which also provides an awesome explanation of the different parts which compose all typefaces.
Take your time to see the PDF document I linked and understand the different parts, I’ll wait… Done? Good!
Summing it up, all text is vertically aligned using the baseline, if a letter uses space under the baseline it’s called a descender. Cap-height is the height of the capital letters, and every space above that line is called an ascender.
The height of the lowercase letters is called x-height, some fonts have higher x-height — meaning lowercase letters are closer to cap-height, while others have lower x-height.
Quoting FontShop, the axis is “An imaginary line drawn from top to bottom of a glyph bisecting the upper and lower strokes is the axis”. Designers use this to give the letter a slight inclination like the ‘o’ in the image shown above.
The counter is the circular white-space enclosed totally or partially inside some letters such as ‘d’, ‘o’ and ‘s’.
It might be a lot of information to absorb all at once but recognizing these elements in a typeface gives us quite a lot of power. For example, it allows us to see common patterns in different typefaces, which enables us to easily look for “alternative fonts”.
Finally I’ll introduce another concept: contrast. This defines the variation in width of the strokes in a letter.
Image may be NSFW.
Clik here to view.
Contrast makes letters more distinguishable thus easier to read, although it can get messy if the type is small. We’ll learn more on the effects contrast has in the next section.
Typefaces classification
Unlike hard-sciences classifications which most of the time are absolute (either it’s 0 or 1), typefaces classifications are quite subjective. There are so many typefaces that’s hard to make a classification and have everyone agree on it; moreover, typefaces evolve over time which adds even more complexity to the problem. Nevertheless for practical purposes we can get away with knowing just a few classifications and use that to take decisions.
Image may be NSFW.
Clik here to view.
Without dwelving deep into typeface history, the classifications above are a good summary of what’s currently available in each web designer’s toolbelt. If you have the time I highly reccomend to chill out, grab some coffee and see the presentation I linked on typeface history, it just help things to make sense if you have doubts later on.
The first row of the image above describe the most commonly used typefaces. Sans serif is the first classification specified, and it’s probably one of the easiest to identify, typefaces in this classification don’t have decorations, they are modern and most of them have little to no contrast; Serif is the next classification, and it’s quite big, the very first typefaces were serif (now known as old-style serif) and it mutated from there. Simply put, serifs are the small lines tailing from the edges of letters; Slab serif — also known as square serif or Egyptian, is a variant of serif where the decoration is big and boxy; Script resemblances handwriting and it’s purpose is highly decorational; As for Blackletter or Gothic script it’s a typeface designed to look like elegant handwriting from 12th century.
The second row contains sub-definitions of the serif type, namely modern serif and old style serif. The first classification features quite high contrast as well as delicate geometric serifs, the latter is sometimes called “Humanist” and can be applied to serif as well as sans serif typefaces. It’s designed so letters resembles old print typefaces where letters had traits of caligraphy and the human hand motions. The last typeface in the second row is called Mono or Monospace and it’s designed so each letter occupies the same ammount of horizontal space, it’s used in very specific contexts like text editors and terminals.
Each classification can divide even further, for example, sans serif can also include geometric sans serif which are typefaces based on geometric figures like circles and triangles. You can really go crazy with all the classifications out there, but as long as you have a basic idea of where everything came from you won’t have many issues to just google away your doubts.
The classifications described so far are quite popular and used in services like Adobe’s TypeKit. A very relevant read on this sujbect is TypeKit’s lists, they describe different classifications as well as examples and alternatives for the most common typefaces.
Have in mind that classification systems are not perfect and a typeface might be hard to classify strictly into a single category. Thinking with type’s classification briefly explains a similar classification scheme than the one used here, where it includes Transitional serif and sans-serif.
Typeface choosing kickstart
There are no hard rules for typeface usage, nevertheless some types are known to work nicely on certain contexts, this section intends to give you a good base so you can start experimenting and slowly build up better solutions.
| Typeface | Good for | Example |
|---|---|---|
| Old style serif | Journalism and history | Sabon |
| Modern serif | Traditional academia and legal | Bodoni |
| Slab serif | Marketing and promotions | Museo Sans |
| Geometric sans | Science and architecture | Futura |
| Transitional sans | Technology and transportation | Helvetica |
| Casual Script | Marketplace, ads, promotions | FF Market |
| Formal Script | Elegant invitations, diplomas | Alex Brush |
You can use the table above to get a kickstart on your journey though typeface selection, and move on from there. There are no hard rules here, so you can use any font you think does the job, it doesn’t have to be in this table.
It’s important to note that even though I listed two script typefaces, they must never be used for body copy, only for small ammount of text such as headers.
It’s a known fact that not all typefaces are good, and getting started from scratch can be hard. There are lots of resources with reccommended typefaces out there, Thinking with type’s list and TypeKit’s list are good starting points, you can start playing around with those typefaces.
On typeface context
As Jason Santa Maria points out in his book On Web Typography, one could simplify and put the kinds of uses for type into two groups: type for a moment and type to live with.
The first group is for type which the reader spends very little time dealing with, such as headings, UI like buttons, menus and such. The latter refers to the main content of the page, a body of text, like an article.
You don’t want the reader to stumble for a few seconds on a heading or button to decypher the meaning, it must be quick, easy and invite the user to move right into what she wants. For small UI a sans serif type with high x-height works very well, as the big x-height makes it easily readable at small sizes, where a delicate serif with high contrast and low x-height would only work at big sizes, in a heading for example.
Image may be NSFW.
Clik here to view.
As you can see the heading on the left looks quite delicate and elegant, but the text beneath is unreadable, on the other hand the text on the right looks readable even in the same size. Remember type is a tool and you must choose the right one for the job, which is make text easy to read and invite the reader to keep going.
As for “type to live with” you need to be a little conservative, text must be easy to read and type should not distract the reader from the message itself. Type should not get in the way.
When reading long chunks of text, serifs make it easier to distinct letters from each other, thus making it easier to read, but high contrast or low x-height make it harder to read when the size is small, you must find a good balance. Also, serif typefaces might not be quite adequate if your site is about technology or games, for example.
Typefaces with too much personality eventually make it uncomfortable to read big portions of text.
Image may be NSFW.
Clik here to view.
What do I mean by personality? Well, for body text you want a known, predictable and somewhat boring typeface that’s easy for the reader to process. Sturdy typefaces do great in this area, typefaces which have modest short and simple serifs.
In the image above, the “Museo” typeface looks nice on a header but for body text it gets annoying as it has too many details, it’s not what the reader is used to so it takes effort to read. On the other hand, “FF Tisa Pro” is a more standard serif which makes it much easier on the eye.
If you want more information on the body text typefaces you can check out this awesome TypeKit article on the subject.
Transitional sans serifs such as Helvetica are known to work pretty much everywhere, because they are unobtrusive and they don’t impose any style. That’s why they are referred as “Anonymous sans serif”. Helvetica is the safe choice and could somehow be defined as the lack of type, discussing Helvetica is far beyond the point of this article, although it seems to be some designer’s favourite pastime!
Mixing typefaces
You don’t need to use several typefaces, most of the time you can get away with a single typeface in different styles and weights, nevertheless if you want to mix typefaces there are some bland rules you can use to find good matches. One of the most known rules is “Mix a serif and sans-serif of the same typeface family”. If the same designer made a serif and sans-serif variant of the same typeface family it’s guaranteed to look good together.
If you can’t find a serif and sans-serif of the same typeface family use a typeface in the same classification, for example, a humanist serif and a humanist sans-serif will most likely look good together.
Remember it’s just a guideline though, feel free to experiment and see if you can find a better match.
Some typefaces include different optical sizes. An optical size is just a variation of the typeface which is optimized to be displayed in certain size, normally optical sizes include “display”, “subhead”, “body text” and “caption”, ranging from big and detailed to optimized for small sizes.
Image may be NSFW.
Clik here to view.
Technical considerations
When choosing typefaces for the web, have in mind size does matter, you have to correctly subset the typeface so your site loads as fast as possible. Also, not every browser treats web fonts the same way, for example, Chrome renders the page but waits until the font loads to render the text, while Firefox renders the text in the default font, then updates it. If you want to control this you can use the Web Font Loader which allows
you to controll those details.
Google has a pretty good article on web font optimization you can read for free. It explains what web fonts are as well as the most common web font formats and how they should be optimized. Remember optimization matters! I’m sure you’ve been to a website which just freezes for a few seconds before displaying the content, that’s because the font is beeing downloaded and parsed, and can be quite a bummer.
Conclusion
Well this wasn’t by any means a full guide on typefaces but hopefully it’s a good starting point. I linked a lot of resources you can use to dig deeper into the subject. This is a huge topic and you can’t really know everything about it, but a solid foundation really helps!