Typography

Font Follows Function – 5 things to check when choosing a font

Typography has a utilitarian purpose, you want your text to look approachable and be easy to read, right? The functional part of a typeface plays a large role in that and is often overlooked. This is a checklist of what aspects to consider when choosing a typeface for your website or app. Watch the video or read the article with more details below.

TL;DR: Before I pick a typeface for a project, I go through a checklist of functional considerations that my type choice has to live up to. It covers weights and styles, language support, characters and OpenType Features, file formats (static vs. variable fonts) and licensing models.

I already wrote about the different kinds of text and their specific needs. This checklist is something in addition to that, depending on your application.

1. Weights and Styles

What weights and styles do you need for your application? Making your mind up about what you want to do with your typeface, will make it easier to narrow your focus. Some examples:

If you look for a typeface for headings or large, short text only (hence a display typeface), one weight might be enough. This could be a bold or a maybe a light weight then, depending on what contrast or atmosphere you want to create.

If you’re looking for something for long reading text (also known as body text) you most definitely need a regular weight. And for emphasis, think about a bold or an italic in addition to that.

Light, Regular, Small Caps, Italic and Bold
Fira Sans contains a lot of different weights and styles, making it universally usable.

If in the text a lot of abbreviations appear, like WWF or WHO, they always stand out due to being written in capital letters. Small caps, which are uppercase letter forms that have approximately the height of lower-case letters, are a way to make these blend in better with the overall text. Set in small caps, WWF or WHO won’t appear that loud like you can see right here.

If you are looking for a text used in a user interface (also known as functional text) it might come handy to have a medium weight that maintains a sturdy stroke in small sizes for tiny labels.

And this might kind of seem obvious, but it also nicely leads over to the next point: Check for basic characters support. Many beginners, myself included, have been burnt picking a typeface that misses basic punctuation marks or an at sign (thanks, for this comment).

2. Language support

What languages should your application cover? I constantly see menus in restaurants or websites where the free font they chose misses German umlauts (äöü) or other characters, even quotation marks. On the web when a certain glyph is missing, the browser switches to the fallback font for that character. This creates weird word zombies with letters from different typefaces.

This doesn’t look good
The browser shows the fallback font if a character is missing creating these weird word Frankensteins.

Prevent this from happening by checking what languages you need and that your typeface contains them. To browse typeface by language is a solution for that. Almost all foundries and font libraries, like MyFonts, Google Fonts or Adobe Fonts offer that opportunity.

The website of Adobe fonts browsed by languages with German and Turkish selected
At Adobe Fonts and almost all other font libraries and foundries you can easily browse typefaces by languages.

Also think beyond the Latin script. If there is a Polish and Russian version of a website, look for a typeface that contains both scripts, Latin and Cyrillic. The same goes for Greek or Hebrew. For scripts that are not that closely related to Latin (like Devanagari, or Thai, Arabic and so on) you could look for super families that contain the same vibe or characteristics in this very different writing systems.

Hallå in Latin, ?????? in Cyrillic, ???? in Greek, ????in in Hebrew, ?????? in Devanagari, ????? in Arabic,and ?????? in Thai
Fira Sans not only contains the pretty similar Latin, Cyrillic and Greek Script, it also goes beyond that.

3. Characters and OpenType Features

Do you need any special characters for your project? You might say – how do I know what’s special? Well, a lot of fonts offer sexy OpenType Features and you can browse them in their specimen sheets here are some examples:

Different kinds of numbers – proportional figures that blend in nicely with body text and tabular figures for vertically aligned numbers or UIs (find more about this in my article about the iOS time display).

Proportional and Tabular Figures compared
Proportional figures blend in better with running text, tabular figures work better when aligned vertically.

Alternate characters, e.g. a single- and a two-story version of an a or a g. Or fractions and sub and super scripts for scientific or finacial content.

OpenType Features Fractions and Alternate Characters
Don’t these fractions look gorgeous with OpenType Features? And isn’t it nice to have options? A two-story g might be better for long reading text to make the character more distinct, for headings the one-story version might be simpler.

Additional special characters, like symbols, also could be a part of your typeface to make it more versatile for your project.

Various symbols like stars, triangles and arrows from the typeface Inter
The typeface Inter contains a lot of user interface symbols. The advantage is you won’t have to load a separate font for icons while keeping a consistent look.

4. Format and size

What font format do you need for your application? Is it a website or an app? Is the typeface available for this platform in the needed format? And, is it available as a variable font, which could help you save on file size and provide you with more design options?

For iOS and Android Apps, you can use True Type Font (.ttf) or an Open Type Font (.otf) file as described by Apple, and Google.

For the web, WOFF2 is the way to go, because it offers the best compression and is supported by almost 75% of all browsers. Browsers that support its less efficient, larger predecessor WOFF also support WOFF2, so you could just go for it. See the Web Almanac of 2020 for more.

Three static font files regular bold and italic compared with one variable font file. The static files total a size of 90 KB, the variable font only 80 KB
A variable font can save on file size while providing you with more design space, compared to static fonts.

Variable fonts are basically the wet dream of a typographer (quote me on that). It’s a rather new format that can contains different designs (like weights) in one single file. You can seamlessly transition between these styles which gives you the ability to fine tune a lot. It is supported by all major browsers and operating systems since September 2018, hence only very recent typeface or very popular ones are available as variable fonts, but the list is constantly growing since they kind of become the new industry standard. And if you’re using about 2 to 4 styles of a typeface, the variable font might be smaller than the static files too, which is good for performance. Here I wrote a detailed primer about variable fonts.

5. Licensing

Is this typeface in my project’s budget? Check the costs for licensing before picking a typeface. Nothing is more frustrating than choosing the perfect font, showing it and then finding out that licensing exceeds the allocated budget.

There are good free fonts but many of them are overused. So always convince the stakeholders to set aside a budget for quality typefaces. Investing in unique typography is investing in the uniqueness of your project and for most web projects around € 200 to € 400 could be sufficient. And of course there are also badly designed paid fonts, so use demo fonts if available and try them out first.

Checkout at MyFonts
Among most foundries and font libraries, MyFonts offers licensing for different platforms separately. If you’re designing a website and only need the font for your design tool, you have to buy a desktop license for that. And later, a web or app license for the actual thing.

The hassle with licensing is, that every foundry has its own terms and this makes it hard to compare. Try to buy directly from the designers, prices are almost always better there, and they get a larger share. Some foundries, like DJR or Fontwerk offer very affordable packages that contain desktop, web and app licenses in one package. With others you have to buy a license for desktop to try them in your design software and then a license to get the web fonts. This always kind of feels very print focuses, old-fashioned to me, since I only need the desktop version temporarily and not for the actual thing.

Licensing at Fontwerk
Among other cool foundries, Fontwerk offers pretty progressive licensing tailored to the needs of modern digital designers.

These are the basic things, I check before picking a typeface. I hope they were helpful to you and your project! Did I miss something? Leave it in the comments below, happy to hear your thoughts!

Typographic power to your inbox!

  • FontFriday: I personally recommend one typeface per week and for what application it’s best. Every second week, it’s a free font.
  • Pimp my Type: Every second Tuesday a short article or a video from the YouTube channel that help you improve the design of your website, app or digital product.
  • No Comic Sans, Open Sans 😉 or any other BS, like annoying ads. Your email will only be used to send out the newsletters, unsubscribe anytime.

2 Comments

  1. Great article. I’ve been burned a few times in my life.
    – Finding a font only has one weight after applying it to a brand
    – Even finding one that only had caps!
    – Finding out late that the @ sign was inverted in a circle.

    This last one is probably worth mentioning in the article. Basic punctuation glyphs are super-important to check.

Leave a Reply to Alistair Hong Kong Cancel reply

Your email address will not be published. Required fields are marked *