How to choose fonts for responsive web interfaces
A checklist for making good type decisions for user interfaces
By Jake Giltsoff, Experience Designer, Adobe Fonts
I’m an experience designer on the Adobe Fonts team. Some highlights from the past decade include working on a rebranding for Adobe Fonts and kickstarting the typography system for Spectrum, Adobe’s design system. It’s no exaggeration to say, I love fonts! Since 2014 I’ve been helping people find and use fonts across Adobe’s applications and along the way I’ve picked up a lot of tips — from finding the perfect font to laying out designs seamlessly and intelligently. Earlier this year I launched Make type work so I could share some of those tips and (hopefully) help other people feel more confident working with type.
This article addresses a question I see/hear often: How can you verify (in terms of legibility and support) whether a font is a good choice for a responsive web interface? While there are plenty of articles recommending fonts for user interfaces, few go into the details of why those choices might be a good fit or provide frameworks for how people can start making these decisions themselves. This article breaks down how I go about choosing fonts so people can take whatever they find most helpful. Although my comments focus on responsive web interfaces, most of it is also relevant to UI design in general.
Let’s begin with a three (mostly) make-or-break considerations:
Consider your platform needs
When I use the word “platform,” I mean where will these fonts be used? If they’re strictly for use on a website that keeps things simple, but if a project will require that these fonts also be used elsewhere (even if far down the line), you’ll need to account for that. It’s not likely that the interface will be recreated in large print jobs but, for example, if you want these fonts to be supported in an app that will likely require additional licensing-a cost you’ll need to consider if you have a set budget. Adobe Fonts has the benefit of supporting commercial web and print use for all the fonts in its library so you’ll be well covered for most use cases, but you can go directly to the font foundry for any extended licenses if necessary.
Which languages will your site support?
You’ll need to think about the languages your website will support. There are a lot of options these days with large character sets so unless you’re working on a global project, you should be good with most fonts. Nevertheless, remember to check!
Make room for your design system to grow
Next, you’ll want to think about your key interface elements and how complex your system might become in the future. To play it safe, it’s worth choosing a font with multiple weights-even if you only have basic typesetting needs to start-so you have the 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 they could be a nice-to-have. You may even want to use a variable font to give you even more control over weight and style increments (for those that include those axes). This could also be handy for Dark Mode, for example, where you may want to adjust for shifts in how thick the type looks light-on-dark on screen. On the topic of additional styles: Having access to a condensed width can also be helpful for a responsive design-as screen real estate gets more limited you can switch to the narrower style to increase the density of information.
The first two considerations are indeed deal breakers: If fonts can’t be licensed or they don’t support all the characters you need, you simply cannot use them. But if you fall in love with a font without multiple weights, you can probably make it work. Having extra styles available makes designing easier, but it can be a fun challenge to keep to one font style and use other methods to define hierarchy.
Now that the must-haves are done, let’s move on to the checklist for making good font choices for UIs (and especially for responsive design).
Use a sans-serif font
There is no rule that you must use sans-serif fonts for user interfaces. Heck, there are very few rules to choosing fonts at all (and, what’s even more frustrating, all of those can be broken for good reasons too), so sometimes it’s just nice to be told what to do. So here you go: You will probably want to use a sans-serif font. Look around. You’ll find many sans-serif examples. The main reason is that serifs can be tricky when used on screens at small sizes (think about how many pixels it takes to render tiny details) but there is another: Even though there are a lot of high pixel density screens now, people have gotten used to seeing sans-serif fonts, and humans are not good at change-everyone has preferences (even if unconscious) toward fonts they know or that meet their expectations in particular contexts.
One last note: You can make slab serif, or monospaced fonts work for interfaces too, so if you really don’t want to stick to sans-serif don’t feel that you must. Standing out can be a good thing.
Legibility and readability are key
When thinking about fonts for UIs, legibility (based on the font, this is how easy it is to read type and distinguish between individual characters) and readability (the overall use of type and typesetting) are of prime importance. It’s unlikely that this is news to you, but since it’s possible to make a legible font hard to read if you set it badly, let’s talk about what to look for. Not only will you be setting labels at small sizes, but since this is responsive design, people will be looking at it on mobile (which means small screen, variable lighting conditions, etc.)
One method I use, and I believe I first heard this in a talk by Jon Tan (over 10 years ago!), to quickly evaluate legibility is to use a text string like “aeogh 1lIi O0” to test the differentiation of similar characters. (This should also give you a quick overall feel for the style too. Try it at small sizes too, and if the characters all start to look a bit too much the same, or you have to squint at the screen, that’s bad news.
Considerations for small type
Let’s keep the legibility train rolling: Distinct characters are one lens through which to look at legibility, another is what characteristics can help when setting small text. High x-height (the distance between the baseline and imaginary top line of lowercase letters like “x”), open counters (the partially enclosed space in letters like “c” or “h”), and healthy spacing are what’s needed. These may sound intimidating or abstract but fear not as they all refer somewhat to the same principle: a balance of whitespace to make sure small letters are legible.
If the gaps between letters or the spaces in the middle of a character “collapse,” everything will start to blur into a big mess (it’s a lot like getting your eyes tested and hoping you correctly guessed the bottom line). There are a couple of ways to evaluate spacing: Try fonts out at a size that feels just slightly too small to see if you can still read them; or view the sample upside down so your brain focuses less on the characters and more on the space around and between them.
Don’t forget about numbers
Another consideration you want to factor in is number style. In most cases you’ll probably want to use what’s known as “proportional lining” and “tabular lining,” if you’re going to need to create rows and columns of tabular data. “Lining” refers to a fixed-height uppercase style as opposed to “oldstyle” which vary in height like lowercase letters (which flow better with text and are more helpful in body copy).
A few words of caution: Don’t be too quick to write-off fonts because of number styles because they can be a red herring. Sometimes a type designer’s default style might be oldstyle, but the lining versions are still available with OpenType features (which can be easily enabled in CSS).
Evaluate how type renders on different screens
How “responsive” comes into play: Responsive websites render content to best “respond” to the screen size on which they’re being viewed. As I mentioned earlier, there are a lot of high-resolution screens now so it’s a lot less important than when rending varied wildly between screens, but it is still worth evaluating how a font will render on different (and differently sized) devices. At the very minimum make sure to look at it on your phone and your computer.
A word of caution about “personality”
When setting text for interfaces, the tendency is toward “functional” rather than “expressive.” Make sure to toe the line so you get the right feel without standing out too much. For simpler websites with less density, it’s possible to inject personality without risk of being too distracting, but for complex interfaces in web apps it’s better to err on the side of “safe” or “plain” so the text isn’t overwhelming.
The most important question: How does it look?
This one may sound simple but remember not to get too caught up in the details of trying to find the technically perfect choice. 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 must check all the boxes… Rules are meant to be broken.
Keep file sizes as small as possible
This one final check is a small and not very exciting part of the process, but it’s a consideration that should be made for the best experience: Web performance is important, so always make sure you aren’t using extra fonts just for the sake of using them. Fonts in general are not large in file size but it’s still important to think about how many you’re using and whether it’s possible to “subset” some of the characters to only use those that are needed.
When in doubt, read up on why a font was designed. Many fonts have been specifically designed for interfaces or legibility, while others have been designed for dense information, wayfinding, or being set at small sizes in print-most of these qualities will translate well to modern, on-screen UIs, so think outside the box.
That sums up my checklist for choosing fonts for responsive (and most other) UIs. For anyone who scrolled directly to the bottom, here’s a TL; DR version:
- 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) 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 (also 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, can help)?
- Does it render well across a few different screens?
- Do I like how it looks?
This article first appeared on Jake Giltsoff’s Make type work blog and published at https://adobe.design.
