How important are fonts in user interface and user experience design? You guessed it: they’re all but indispensable. It seems like an easy answer. Today’s UI/UX design is mainly focused on electronic devices and, more specifically, the programs (apps) running on these devices. Usually, the ‘interface’ of a device is a screen on which type is used to communicate with the user. (Sure, there are haptic and auditory types of feedback, but at the time of writing this, these are rather exotic applications.)
You can think of the font as the voice of the device. The typographical treatment of the font represents the pitch, timbre, and loudness that a speaker or actress might modulate their voice with to convey a specific emotion. Yes, it’s about emotion, too. The typeface carries the information, but it also visualizes the soul of a UI/UX concept.
However, before the advent of electronic devices, user interface design and user experience design were distinct disciplines. (And there was no such contraction like ‘UI/UX’, of course.)
When machines became complex enough to warrant—and require—an actual kind of ‘communication’ with the user, user interface (UI) design took the entire device into consideration: not only screens but also mechanical components and all other means of input and output. Fonts were already present in this early stage of UI design. Labels for buttons, knobs, levers, and other components were necessary to communicate and correspond with what was happening within the device, on the screen, and on printouts. Conversely, on-screen fonts weren’t a big thing in early UI design, with only low-resolution screens available and nothing like the type design scene that we know today.
On the other hand, user experience (UX) design was—and is—concerned with the entire range of emotions, learning, and interactions a user experiences when in contact with a product or service. It’s not restricted to the headlines and copy of a given app. This user-centered approach takes into account the whole journey: from getting to know a product or service, to acquiring information, to purchasing, to the first interaction, to establishing routines, etc. This approach might apply to making a hospital stay more pleasant to patients, visitors, and healthcare professionals. This approach could potentially guide travelers safely throughout their journey, from booking tickets through an app to reaching their hotel room at their intended destination. And it might apply to sports fans getting hyped for their team at the start of the season all the way until the finals in a big national stadium.
All this was is a preamble to the main question: shouldn’t fonts play a bigger role in our UI/UX projects? Yes, today’s UI/UX design is mostly understood as ‘website and app design’. Indeed, I carefully selected the fonts on this list to specifically meet the needs of this field. However, all of these typefaces can be more than just pixels on a mobile phone. Type should be a part of the whole package—the entire journey from start to finish. (If a given ‘package’ is just an app and no journey at all, that means back to the drawing board.)
It’s time for us to rediscover the meaning behind ‘UI’ and ‘UX’. This way, typography can be more than a convenient information transmitter. It can be an experience.
by Hannes von Döhren / HvD Fonts
Apps that want to communicate in an informal and friendly manner often resort to rounded typefaces. This isn’t a bad idea: the soft look of fonts from this genre can make for a benign and safe mood if used right.
‘Soft’ and ‘Round’ can be regarded as two different genres, with Soft typefaces honing corners to a small radius and Round ones topping the entire stroke width with a circle segment. Not all foundries adhere to this naming convention, though. Bouba Round is an excellent example from the Round genre with smooth curves all over, remaining legible even in small sizes.
by Radomir Tinkov / Fontfabric
Muller Narrow is a space-saving variant of Muller. Like its wider counterpart, it is a versatile humanist typeface with a generally neutral yet slightly friendly appearance, spiced with a pinch of character. The typeface’s generous apertures, economic proportions, and wide range of weights make it a useful tool in UI/UX design for mobile devices. The Narrow family comes without Muller’s delightfully chunky ‘Fat’ weight, though.
by Arne Freytag / Fontador
Darkmode was all the rage in late 2022 and early 2023 UI/UX design. By now, it’s a convention. It makes sense, though: negative typesetting (bright text on a dark background) spares your eyes from looking into a screaming white rectangle all night.
With darkmode, a nigh-forgotten truism of typography had to be rediscovered by many designers: in negative typesetting (especially if backlit), type has to be lighter because it appears optically bolder than usual. Adrian Frutiger knew this when designing his famous Charles de Gaulle airport signage.
You don’t have to design your own type like Frutiger to achieve impeccable negative typesetting, though. Arne Freytag’s Whiteblack supplies you with the right tool to pull it off easily—each weight comes in a positive and a negative variant that will look equally bold when employed in their respective natural habitat.
by Jonathan Hill / The Northern Block
Superellipses are, to put it simply, elliptical shapes with squarish curves. (Type designers refer to this as ‘high curve tension’.) Since the 1960s, when these typefaces were frequently used in science-fiction films (notably, Stanley Kubrick’s ‘2001’), they have been associated with high-tech applications and futuristic themes. With generous counters, this kind of glyph construction is well suited for digital displays, too. Jonathan Hill’s Paradroid is a suite of fonts that plays out the benefits of its genre while also providing an additional ‘mono’ subfamily for extra versatility in UI/UX design (see next entry).
by Toshi Omagari / Tabular Type Foundry
Toshi Omagari—who happens to run two foundries named ‘TTF’ and ‘OTF’ simultaneously—has a knack for monotype typefaces. Also called non-proportional typefaces, these are a rather exotic choice for body copy. In the limited doses of text that most apps deal with, though, they can be a refreshing font choice. The letterforms of Belinksy are well suited to on-screen use.
by Dieter Hofrichter / Hoftype
Dieter Hofrichter’s typefaces look fantastic on digital screens. I’ve achieved stellar results with Hoftype fonts on e-ink displays in particular. Equip is a calm humanist typeface with a geometric heritage that looks crisp and clean in a pixel-based environment. It’s the ideal crystal goblet to pour any kind of content into, from indie messaging apps to big corporate communication.
by Tim Ahrens & Shoko Mugikura / Just Another Foundry
Bernino Sans is part of the Bernini superfamily, which comprises Bernino & Bernina Sans. An extraordinarily legible, neutral yet soulful humanist sans, Bernino is the Frutiger of the 21st century. It features open apertures, clear shapes, great on-screen performance, and a wide range of weights and widths that come in handy when optimizing type for different screens and devices. Bernina is the less technical version of Bernino, with round dots and a triple-story ‘g’. It can be used to extend Bernino’s screen-based brand voice into the world of printed matter.
by Alanna Munro / Alanna Munro Type Design
Another example of superelliptic glyph construction, Alanna Munro’s Tofino superfamily is an entire suite for complex UI/UX projects. The original Tofino family comes in 4 widths and has neogrotesk-style closed apertures with vertical and horizontal stroke endings. Tofino Text opens the apertures a bit, adds diagonal stroke endings, and uses alternates (like ‘l’ with a hook) for better legibility in small sizes.
by Veronika Burian & José Scaglione / TypeTogether
TypeTogether’s Protipo is a DIN-like grotesque with flat sides. It’s not quite an engineers’ typeface, though: slightly angled stroke endings and a few alternates that move the obliques closer to a ‘true italic’ subtly infuse Protipo with soul. The Protipo superfamily was specifically created for information design. It even comes with an icon set in two weights.
by Anita Jürgeleit / TypeThis!Studio
Captura Now is my go-to Verdana alternative. Verdana is a legendary (though overexposed) typeface that found its way into the collection of the MoMA, but it was optimized for a type of device that has largely gone obsolete by now. For the time being, I’m happy to leave Verdana in the museum and resort to Anita Jürgeleit’s friendlier, more versatile, multiscript Captura Now. It looks clean and confident on contemporary high-resolution devices.
by Moritz Kleinsorge / Identity Letters
The Nomos superfamily balances two attributes that are often on opposite ends of the scale: neutral enough to adapt to any content, distinct enough to provide a unique brand language. The ‘brutalist’ construction principle ensures that both Sans and Slab appear crisp on small and large screens. I can see Nomos being used in a banking app just as well as in an underground techno radio or a gardening forum—it’s that adaptable.
by Ludwig Übele / Ludwig Type
A neutral humanist sans, Ludwig Übele’s Riga is narrow enough to be economical and wide enough not to be regarded as narrow. While not exactly generous, its open letterforms are wonderfully legible in text sizes and fine print while the bolder weights pack a punch in headlines. The original Riga already offers stellar screen performance and it has always been more than sufficient for my design needs. However, there’s also Riga Screen, a four-font suite derived from Riga that is optimized specifically for e-ink and mobile device displays. Riga Screen is a bit lighter and wider than Riga. The two families can be combined easily.
by Kimmy Kirkwood / Kimmy Design Co
While I can see Refinery mostly in the realm of computer games, the range of styles in this typeface (a whopping 84 fonts) gives you ample opportunity to use the limited space of a hand-held device to full capacity. Its squarish, mechanical structure lends itself to low-resolution screens.
by Felix Braden / Floodfonts
Let’s talk about Futura for a bit. Paul Renner’s 1927 classic is part of the world’s typographic heritage and it’s here to stay. Yet, it’s fundamentally a print typeface that doesn’t feel at home in UI/UX settings. Compare any letterpress-printed Futura specimen to any Futura-laden website or app and you know what I mean. It was a boon to UI/UX designers everywhere when Felix Braden released his Capitana font family. While loosely based on Futura, it ironed out so many irregularities and pumped up the x-height so vigorously that it became a design in its own right, rooted in our time. Capitana is eye candy on mobile screens. It’s so legible I even use it in fine print as a Futura replacement.
by René Bieder / Studio René Bieder
Faktum is a neo-grotesk sans-serif typeface with a geometric silhouette and squarish counters, giving it a ‘technoid’ but very distinct look and conveying a poised brand voice in contemporary UI/UX design. Due to this construction, the counters are more open than in your generic grot. This can aid legibility on screen. On the other hand, Faktum’s peculiar shapes leads to a fair amount of stroke contrast and its closed apertures might increase ambiguity between letters in small sizes, so tread with care. Faktum comes in 8 weights and 4 widths, the condensed of which make for efficient headlines and titles. Only the normal width has italics.
by Lisa Schultz / Schriftlabor
Apart from its formidable Name, Lisa Schultz’s Bajazzo also excels as a UI/UX typeface. Despite its wood-type origin, the clean rendering of humanist curves, the range of 9 weights and 3 widths (also available as a multi-axis variable font), and the multiscript language support bestow Bajazzo with incredible on-screen versatility. A few signature characters like ‘W’ and available alternates like a Star Wars-style ‘R’ allow for effective typographic branding in larger sizes.
Johannes López Ayala is a designer, writer, and artist based in Germany. With a background in languages, he went to art school, studied Industrial Design and Communication Design, worked in big-corp marketing, and managed an art gallery before he took to type. Beside his work as a creative director, he has been teaching as a lecturer at Rhine-Waal University of Applied Sciences. His current project is the launch of Tipogris Fonts and Friends, a type foundry spun off of the eponymous book design and branding office.
Follow Johannes on Mastodon and Bluesky, or read his irregular type reviews at 366Fonts.com
More Expert Lists by Johannes:
Fonts for Books
Fonts for the Metaverse
Fonts for Culture Branding
Photo credit (header): Unsplash
