System UI fonts were once considered the safe and boring choice by designers, but in the years since webfonts solved the font availability problem, system UI fonts have improved enormously.
Anyone who has been involved in web design for more than a few years remembers the tyranny of web-safe fonts. Designers were forced to choose from a limited pool of — usually terrible — fonts that could be relied on to be present on everyone’s computer, which at that point meant Windows or Mac. Many of these “safe” fonts weren’t optimized for screen display, and all of them were so common it was impossible to do anything interesting with web typography. But even way back when, choosing the system UI font — the font used by the operating systems itself — was frowned upon.
Then came webfonts, which opened up huge vistas for designers. No longer were they bound to choose from the tiny fraction of fonts that existed on every PC. They could select — for better and worse — from thousands of fonts. With the advent of webfont hosting services like Typekit and Google Fonts, fonts could be dynamically loaded from massive libraries. And here we are today; web designers have an embarrassment of riches where fonts are concerned.
But it’s not all wine and roses. Font hosting services have drawbacks. The biggest problem is latency. Downloading fonts from a server takes time, and, on a well-optimized web page, requesting, downloading, and displaying a couple of fonts can take up the lion’s share of the load time.
That’s one reason designers are looking at system UI fonts in a new light. System fonts are always fast to load, but these aren’t the system UI fonts of yesteryear. Every common platform now has a default system UI font designed to look great on screens of all sizes. Microsoft has Segoe, Apple has San Francisco, Android has Roboto, and so on.
In the age of the web application, designers are looking at system fonts to play the same role they play in desktop applications. Because system UI fonts are so much better than they once were, designers can, without holding their noses, use them in web applications and take advantage of the performance and integration benefits they bring.
In the next release of WordPress, developers intend to move away from Open Sans towards system fonts for UI elements. The proposed font-stack looks like this.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
To be clear, I’m not talking about using system UI fonts for all typography. For body text and headings, designers will still choose from either system fonts or webfonts, but for application-like interface elements, it makes sense to go for the system UI font.
What do you think? Does the thought of using system UI fonts for your web app interfaces strike you as the safe and boring route? Or will you be taking advantage of the improvements in System UI fonts to build an app experience that coheres with desktop and native mobile typography?