How to choose fonts for Responsive User Interfaces (pt. 1)

Q: How can you verify if a font is a good choice for a responsive web UI? In terms of legibility / support?

Good question! Of course the answer—as always—is ‘it depends!’ There are plenty of articles online recommending fonts for UI but few go into the details of why the choices might be a good fit or provide a framework on how you can go about making this decision yourself. So, let’s break down how I would go about this and you can take what you think is helpful. I’ll note that the question is around responsive web UI but pretty much everything here is also relevant to UI design in general.

To start we’ll check off a few make-or-break points before we get to the fun.

Platform/Media

I say platform here meaning ‘where do these fonts need to be used?’ If we are talking purely for a website that keeps things simple, but if we have a project which will require these fonts to be used elsewhere too we need to account for that (even if this is something far down the line). It’s not likely we’ll be having the interface shown in large print jobs, but for example if you want these fonts to be supported in an app that will likely be an additional licensing cost which will need to be considered if you have a set budget. Adobe Fonts has the benefit of supporting commercial web and print use for all the fonts in the library so you will be pretty well covered for most uses cases already. You can go directly to the font foundry to get any extended licenses if you need.

Language support

You will also need to think about what languages the website will be available in. There are a lot of options these days with large character sets so unless you are doing a fully global project you should be good with most fonts, but remember to check!

Design system

Next up you’ll want to think about the key interface elements you’ll have and how complex your system could grow to become. To play it safe here it’s worth choosing a font with multiple weights available, even if you only have basic typesetting needs to start. This will give you tools for creating hierarchy across the interface. Italics aren’t too common in UI design for emphasis so you can probably get away without those, but could be a nice-to-have. You may even want to use a Variable Font to give you even more control over weight increments (for those which include a ‘Weight’ axis). This could also come in handy for Dark Mode for example, where you may want to adjust things a touch lighter to account for the shift in how thick the type looks light-on-dark on screen.

While we’re talking about additional styles, having access to a condensed width can also be helpful for a responsive design where as you get more limited in screen real-estate you can switch to the narrower style to get more density of information.

The first two points are indeed deal breakers: if you cant license the fonts or they don’t support all the characters you need you simply cannot use them. If you fall in love with a font without multiple weights, you can probably make that work though. Having the extra styles available will make designing easier but I do also love the challenge of keeping to one font style and using other methods to define hierarchy.

Ok now we’re past those, we get to the fun part! Evaluating what choices make for good UI fonts (and especially for responsive design).

Sans-Serif?

There is no rule that you have to use sans-serif fonts for user interfaces. Heck, there are very few rules to choosing fonts at all (and all of those can be broken with good reason too) but this can be frustrating as sometimes it’s just nice to be told what to do. So here you go, you will probably want to use a sans-serif. Look around and most examples you will find won’t be using serifs. A big reason that is the case is serifs can be tricky when used at small sizes on screens (think about how many pixels there are to render tiny details). Even now when we have a lot of very high density pixel screens we have also gotten used to seeing sans-serif and humans are not good at change. We have a preference (even if unconscious) towards fonts we know or which meet our expectations for the context they are set in.

I will say that you can definitely make slab serif, or monospaced fonts work for interfaces too so if you really don’t want to stick to sans-serif you shouldn’t feel you HAVE to. Standing out can be a good thing.

Legibility

This is the major key when we think about fonts for UI. Unlikely that this is news to you, but let’s talk about what to look for here. We’re probably going to be setting labels etc in pretty small sizes and as this is responsive design we’re talking things will be on mobile (small screen, variable lighting conditions etc). This means we’re straight up going to need a font which you can easily recognize all the characters. On method I’ve come to use (and I believe first heard in a talk from Jon Tan [over 10 years ago, dang!]) to quickly evaluate legibility is to use a string along the lines of ‘aeogh 1lIi O0’ to test out how similar characters are differentiated. This also should give you a quick overall feel for the style too. Try it at a small size too so you have to squint at the screen. Do things start to all look a bit too much the same? Bad news.

Use at small sizes

Let’s keep this train of thought rolling — distinct characters are one lens to look at legibility through, another is what characteristics can help when setting the text small. High x-height, open counters, and healthy spacing are what we want here. These may sound intimidating or abstract but fear not as they all refer somewhat to the same principle.

We need a balance of whitespace to make sure letters are legible when small. If the gaps between letters or the space in the middle of a character collapse, everything will start to blur into a big mess. Like how it is when you get your eyes tested and you are hoping you guessed the bottom line right. A couple of ways to evaluate this — try the fonts out at a size which feels just slightly too small. Can you still read them? Another way to evaluate the spacing is to view the sample upside down so your brain focuses less on the characters and more on the space around and between them.

Numbers

Another factor will be the number style. We’re likely going to want to have what’s known as proportional lining numerals for the majority of our uses, and tabular lining also available as a bonus if we are going to need to set tabular data. Lining refers to the ‘uppercase’ style numbers as opposed to oldstyle which flow more with the text and are more helpful in body copy. Looking at numbers and writing-off fonts immediately can however be a red herring, as sometimes the default style which the type designer chose might be oldstyle but the lining versions are still available with OpenType features (which can be easily enabled in CSS).

How it renders across different screens

Here’s where the ‘responsive’ part of the question really comes in. We typically think about websites responding to the screen size they are viewed on to best render the content. As mentioned already there are a lot of high resolution screens now so this is a whole lot less important than it used to be, as before rending varied WILDLY per screen, but it is still worth evaluating how the font renders on different devices. At a minimum try to look at it on your phone and your computer.

Personality

When we are setting text for interfaces we mostly want things to be ‘functional’ rather than ‘expressive’. We need to toe the line of being the right feel but not standing out too much. Especially for complex interfaces in web apps we may want to err on the side of ‘safe’ or ‘plain’ for the text so it isn’t overwhelming. If we have a more simple website with less density we can inject more personality without risk of being too distracting.

How it looks

This one may sound simple but remember not to get too caught up in all of these details and trying to find the technically perfect option. How it looks is the most important piece. Do you like it? Does it feel right for your brand? If it’s working for you don’t feel like you have to check all the boxes, rules are meant to be broken after all.

File size

This is a small and not very exciting part of our quest, but it is a consideration which should be taken for the best experience. Web performance is important and this is really more a note to make sure you aren’t using extraneous fonts for the sake of it. Fonts in general are not too large in file size but you will still want to think about how many you use and if you can subset some of the characters to only use the ones you need to load in. I tend to think of this as one of the last checks.

Still unsure?

If in doubt, try reading why the font was designed. A lot of fonts have been specifically designed for interfaces or legibility. You can think out-of-the-box here too. Fonts specifically designed for dense information, way finding, or being set at small sizes in print often translate well to modern on screen UI too.

That about sums up my approach! Here’s a checklist you can refer back to:

TL;DR checklist—

• Can I license this font within my budget for all the use cases I need?
• Does it support all the languages I need it to?
• Does it have a variety of weights I can use for hierarchy?
• Nice-to-have: Is it a Variable Font or does it have some incremental weights (Book/Medium etc) I can use for Dark Mode?
• Nice-to-have: Does it have italics?
• Nice-to-have: Does it have condensed or narrow styles?
• Does it have distinct characters? i.e. ‘aeogh 1lIi O0’ (for general legibility)
• Does it have a high x-height? (For legibility as small sizes)
• Does it have open counters and even healthy spacing? (For legibility as small sizes)
• Nice-to-have: Does it have lining and tabular numbers?
• How much personality does it have? (More can help it stand out, but too much could be distracting)
• How can it be optimized for delivery? (Subsetting / only using the weights you need will help)
• Does it render well across a few different screens?
• Do I like how it looks?