How to Choose Fonts for an Application or Website - Design for Developers
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.
This is a Serif font.
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.
This is a Sans-serif font.
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.
This is a Script font.
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:
iiiiiiiiii
mmmmmmmmmm
var x = 10;
var yyyy = 20;
var zz = x + yyyy;
____ . _ .
/# /_\_ |\_|/__/| THIS
| |/o\o\ / / \/ \ \ WILL
| \\_/_/ /__|O||O|__ \ PROBABLY
/ |_ | |/_ \_/\_/ _\ | BLOW
| ||\_ ~| | | (____) | || UP
| ||| \/ \/\___/\__/ // ON
| |||_ (_/ || MOBILE
\// | | || DISPLAYS
|| | | ||\ :)
||_ \ \ //_/
\_| o| \______//
/\___/ __|| __||
/ ||||__ (____(____)
(___)_)
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

Improper kerning
Notice the spacing between the A and V characters. Feels super weird and uncomfortable, right?

Proper Kerning
Here's the same example, but with the kerning fixed between the A and V characters. Much better.
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:
This is an example of wide leading. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean magna massa, sodales ac placerat sit amet, laoreet ut leo. Vestibulum varius varius accumsan. Curabitur vel dictum arcu, quis rutrum enim. Sed ante odio, pretium eget dapibus pharetra, posuere vel nulla. Praesent commodo tincidunt nulla, ac fringilla eros sollicitudin sit amet. Cras et quam metus. Praesent ut lacus in eros convallis congue eget ac dolor.
This is an example of narrow leading. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean magna massa, sodales ac placerat sit amet, laoreet ut leo. Vestibulum varius varius accumsan. Curabitur vel dictum arcu, quis rutrum enim. Sed ante odio, pretium eget dapibus pharetra, posuere vel nulla. Praesent commodo tincidunt nulla, ac fringilla eros sollicitudin sit amet. Cras et quam metus. Praesent ut lacus in eros convallis congue eget ac dolor.
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
Open Sans
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor lectus nunc, non porttitor ex mollis sit amet. Donec scelerisque magna velit, nec placerat purus vehicula quis.
Open Sans on Google Fonts
Header weight: 800
Body weight: 300
Arvo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor lectus nunc, non porttitor ex mollis sit amet. Donec scelerisque magna velit, nec placerat purus vehicula quis.
Arvo on Google Fonts
Header weight: 700
Body weight: 400
Raleway
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor lectus nunc, non porttitor ex mollis sit amet. Donec scelerisque magna velit, nec placerat purus vehicula quis.
Raleway on Google Fonts
Header weight: 800
Body weight: 300
Roboto
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor lectus nunc, non porttitor ex mollis sit amet. Donec scelerisque magna velit, nec placerat purus vehicula quis.
Roboto on Google Fonts
Header weight: 800
Body weight: 300
Lato
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor lectus nunc, non porttitor ex mollis sit amet. Donec scelerisque magna velit, nec placerat purus vehicula quis.
Lato on Google Fonts
Header weight: 700
Body weight: 300
Libre Baskerville
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor lectus nunc, non porttitor ex mollis sit amet. Donec scelerisque magna velit, nec placerat purus vehicula quis.
Libre Baskerville on Google Fonts
Header weight: 700
Body weight: 400
Two-Typeface Combinations
Lobster + Droid Sans
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor lectus nunc, non porttitor ex mollis sit amet. Donec scelerisque magna velit, nec placerat purus vehicula quis.
Lobster on Google Fonts
Droid Sans on Google Fonts
Header weight: 400
Body weight: 400
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.
Open Sans
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor lectus nunc, non porttitor ex mollis sit amet. Donec scelerisque magna velit, nec placerat purus vehicula quis.
Open Sans on Google Fonts
Header weight: 300
Body weight: 300
Raleway
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor lectus nunc, non porttitor ex mollis sit amet. Donec scelerisque magna velit, nec placerat purus vehicula quis.
Raleway on Google Fonts
Header weight: 200
Body weight: 200
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.
Free Downloadable Book: 10 Killer Tips for .NET Web API

Be awesome. Get my free 56-page downloadable book about building performant, scalable, maintainable software using .NET Web API. (There's also a bonus chapter on effectively using HTTP Status Codes.)
Enter your email address below and get it immediately.