How to Choose Fonts for an Application or Website - Design for Developers

Creative Workshop: 80 Challenges to Sharpen Your Design Skills

Choosing fonts (more accurately “typefaces”, but we’ll use the word interchangably with “fonts” even though it’s not exactly correct) for a website or application design can be intimidating. Even a base install of OS X or Windows includes well over a hundred different typefaces, plus variations like bold and italic. Then an installation of Microsoft Office, or the Adobe suite, adds a slough of others, making it worse!

I’m not exaggerating when I say that I have a folder on my home server with over 12,000 typefaces in it.

Good design (which we’re all capable of discerning, I believe) really comes down to classic rules. Color harmony, composition, typography, and other fundamentals still remain the most important factors in creating design that works (and sells). Choosing the correct typeface for your work can be distilled down to some simple rules, which I’ll cover in this article.

As you’ll see, in most cases it’s perfectly acceptable to just use what works for other websites and applications, and I’ll equip you with the ability to choose and combine fonts properly on your own. I’ll also explain why it’s no longer necessary to rely on classic defaults like Arial, Verdana, or Times New Roman on the web.

Typography Fundamentals

Typography is or process of arranging language into readable form. While this article will cover how you should choose typefaces for an application or website, it’s important to at least understand some fundamentals of typography. The art of typography helps us create products with content that is accessible and appealing.

I won’t cover every aspect of typography (there are a lot!) but I’ll cover the ones that I think are most relevant to benefit your software products. Let’s call it the 80-20 rule for understanding typography; you are familiar with the Pareto Principle, right?

Classifications of Typefaces

You know how some letters have those weird little curly accents, and some don’t? Some are rigid and bold, some are more wavy, and some look like handwriting. These are all components of how we classify typefaces. To make things simple, I’ll break down typefaces into 4 categories, though depending on how specific you want to be, there are definitely more. The highest-level classifications to understand are serif, sans-serif, handwriting, and monospace.

These new phrases may seem intimidating, but read on. I guarantee you are already familiar with these.

Serif Typefaces

Serif is a general classification of typeface. Serifs are the little curls and tails you see on characters, and they are more classically used in print. It’s considered that serifs were used to increase readability, but there doesn’t seem to be sufficient evidence to support this. It’s more likely that serifs originated in early typesetting and calligraphy, a by-product of handwritten brush strokes that later translated to more formal definitions of typefaces.

Sans-Serif

Sans-serif, like its serif cousin, is also a general classification of typeface. Sans-serif fonts lack the little curls and tails, and are commonly used to style body content in modern media, especially online. It’s widely accepted that sans-serif typefaces became more popular on displays because of consistency and ease of reading across devices. They are usable anywhere, from large headers to body text to logo design.

Script

Script (or handwriting, cursive) typefaces, just like the name implies, are those that look like they were written by hand. They are curvy, whimsical, flowy, or just plain messy, and can range from professionally-scribed calligraphy to child-like scribbles. Despite their classification, many handwriting fonts work well in professional design, whether as headings on a website or document, in accent typography like drop caps, or even as a focal typeface like that on a logo or main title.

Monospace

Monospace typefaces (or fixed-width) is the categorization of typeface that you are probably most familiar with as a developer. When coding in an IDE like Visual Studio or XCode, in a text editor like Sublime or Notepad++, or working in a command-line environment, you generally work with a monospace font. While they originated with the typewriter, in modern times monospace typefaces are best suited for working in applications where letter width should be consistent across all characters. As an example of how they work, the small letter i takes up the same width as the small letter m. This is by design, and provides better horizontal flow and control, like the example below:

Here are 10 characters each of lower case i and m:

  iiiiiiiiii
  mmmmmmmmmm

With monospaced fonts, we have better control over code:

  var x     = 10;
  var yyyy  = 20;
  var zz    = x + yyyy;

And we can also make super sweet ASCII art:

    ____         .    _  .
   /# /_\_       |\_|/__/|      THIS
  |  |/o\o\     / / \/ \  \     WILL
  |  \\_/_/    /__|O||O|__ \    PROBABLY
 / |_    |    |/_ \_/\_/ _\ |   BLOW
|  ||\_ ~|    | | (____) | ||   UP
|  ||| \/     \/\___/\__/  //   ON
|  |||_       (_/         ||    MOBILE
 \//  |        |          ||    DISPLAYS
  ||  |        |          ||\   :)
  ||_  \        \        //_/
  \_|  o|        \______//
  /\___/        __|| __||
 / ||||__      (____(____)
   (___)_)

For comparison, here are the same three examples using a variable-width font:

I didn’t need to spend that much time on monospaced fonts, but I want you to appreciate just how special they are in your day to day as a developer. :)

Kerning and Tracking

Simply put, kerning and tracking define the spacing between characters. Kerning is more specific to the spacing between individual characters, and tracking more general, referring to the general spacing of between characters in a group or sentence. In design, kerning is generally used to improve the composition of adjacent letters and improve the flow of text in logos, headers, etc., and helps remove uncomfortable gaps where letters can sit together better. Tracking is generally used to condense (or expand) text slightly to fit in an area, or improve readability.

In general you won’t need to adjust kerning in places other than logos or text used as design. Tracking comes in handy when trying to give body text a particular feel or fit it into a specific space. Here are some examples:

Kerning

Oh, and here’s a little tip. Squint your eyes at the examples above; it helps exaggerate the white space between the A and V characters (blah, blah something smart about how our eyes work).

Tracking

Open tracking. In the text below, you can see how the letter spacing opens up the words, giving them more horizontal spread. Useful for filling space, but can feel disconnected it the tracking is too open.

Tight tracking. In this text, see how condensed the text feels? Great for fitting text into a particular spot, or tightening up an already-open typeface.

Leading

Pronounced “LED-ing” (not “LEED-ing”), leading is what defines the vertical spacing between lines. Like tracking, leading can be used for readability or to help fit text within a certain space. Ideally, leading should be considered document wide; lines of text from one column should align directly with lines from other columns.

This one’s an easy one, and here’s a quick example:

Tips for Choosing Typefaces

Before we dig into actual typefaces and tools, consider these tips:

• Choose typeface families that offer at least some variety. When looking at available typefaces you may occasionally notice that there are different font foptions for each typeface (known as a family). Typefaces normally come with many variations of weights, or boldness, like "light", "medium", "bold", "black", or with variations like "italic" (also, oblique). Some typefaces have larger families with weight defined by number like 300, 400, 500, 700, or with different rendering options like "condensed". The numeric weight is just another way of quantifying weights like "light", "bold", etc. Key point here is that you more often want to choose fonts with at least a few weight options, plus italic.
• Focus primarily on differentiating the headers from the body text. If content is King, and Quality is queen, then content structure comes in as a very close "Jack". As much as it's important to semantically structure content in code, it's also important to make the visual distinction clear. Use font weights, white space, and font size for this; within reason, it's hard to have too much of any of these components.
• That said, don't be afraid to choose a font that you just like. Weight and rendering options aside, if there's a font you really like, use it and just be aware of the limitations. The font Lobster (available on Google Fonts) comes in only one weight, and no other options. But I really like it, and I've used it in the past. Fonts with less options are generally designed for use in headers or typographic design, and rarely useful for body text.
• Start with one typeface family; add more only when necessary. One of the safest and most useful rules of typography is to choose one typeface family and rely only on its weight and style variants. You can do no wrong having one font and using the extra bold variant for headers, the light variant for body text, and the medium variant for buttons or links. While you may find this limiting, I assure you it's not. If companies like Apple can do it (they use a single font, San Francisco, across OS X, iOS, watchOS, and tvOS), you can do it too.

Typeface Combinations You Can Use

Following are some combinations of typefaces that are easy to use and free. These samples are from Google Fonts because it’s easy to embed them here for you to see. Typefaces from Google Fonts can be downloaded and embedded in your software as well, and are generally licensed with SIL Open Font License or Apache Version 2; however, please make sure you verify license restrictions before embedding or using any font! If you want more information about licensing, use TLDRLegal (not a lawyer; not legal advice).

Single-Typeface Combinations

Two-Typeface Combinations

These combinations should get you started choosing a typeface for your project. When in doubt, you can never go wrong with a classic typeface for the body like Open Sans or Roboto, and then a typeface that you like for headers. The classic typefaces are generally easy to match, and with enough contrast in size or color, they’re sure not to clash.

Rule of thumb when choosing two-typeface combinations: Match two typefaces based on one similar quality, like boldness, x-height, or character width, and then drastically different in other features. Very much like matching colors or patterns.

Header Weight and Size

Keep in mind too, that while the above typeface combinations are styled with bold headers it’s perfectly acceptable to use a larger, non-bold font as a header. The larger your headers are, the less need to make them bold. The key point is to make them stand out, and very little you can do wrong here.

Final Thoughts on Typefaces

A lot of developers get caught up in the detail of choosing typfaces. Much like color and composition, typography is incredibly important, but it’s also a component of design where “doing what works” just works. Classic typefaces are always a safe bet; they’re readable and accessible, and people are accustomed to seeing them. Unless type is a major component of your application (which I will assume it generally isn’t), then my best recommendation is to just pick something and move on. Define your application’s typefaces in a single place and make it easy to change them later.

Thanks for reading. Do me a favor and comment below to let me know what you thought about this article. If I’ve missed something or can clarify any of this information, please let me know.

Also, if you’d like to be notified when I write more articles like this, please subscribe below. I’d love to keep in touch.

---