Charting New Futures for Digital Typography
Sixty years ago, nearly all typography was both designed and printed through manual processes. Today, while plenty of typography gets printed or extruded into the physical world, designers produce nearly all of it digitally, and much of its consumption takes place on high-resolution displays, with devices capable of showing any and every typographic possibility with negligible overhead. Surveying the last twenty years in digital type, derivatives of Helvetica dominate, chasing an ideal of modernist Swiss beauty from before any of these devices existed. Only in the last five have we begun to see new ideas gain momentum, in the form of variable fonts and multi-color fonts, to reimagine typography for these devices.
I. System fonts, or, Helvetica soup
The most common fonts we read every day on those displays are system fonts: how operating systems natively display buttons, menus, and text. System fonts on digital devices present text we read constantly, often without registering we are seeing typography, or reading at all. And across every corporate line today, they remain remarkably similar, converging on a central form.
The original Macintosh, in 1984, had a coarse-grained, two-color display, capable of displaying only black and white. For the Macintosh Operating System, revolutionary for displaying information graphically instead of with a purely textual command line, Apple wanted high-end typography from the start, and to depart from the purely monospaced aesthetic of every competitor. The primitive CRT displays would garble existing sans-serifs, long popular in physical designs. This led artist Susan Kare to create two custom typefaces for the Mac, Chicago and Geneva (Kindy), that would “embrace the aesthetic of the pixel” (Brideau 171), using the technical constraint as a distinctive pixel style that became immediately recognizable as the Mac.
Once the Macintosh could display a third color, grey, it started down a path toward offering the smooth curves and detail that printed typography had long enjoyed. The first step in this direction was anti-aliasing, starting in 1987, which illuminates pixels, then later the smaller subpixels, neighboring the stroke of a letter to create the appearance of smoother curves. The technique, like all technologies, had trade-offs: while “antialiasing eliminates the jagged look of letters on the computer screen, it also diminishes their legibility by decreasing edge contrast” (Staples 26). With full-color and increasing resolution in displays, smaller subpixels made this effect less noticeable. In 2001, with Mac OS X 10.0, Apple switched the system to Lucida Grande, no longer attempting to show off the pixels but using a smooth sans-serif designed for screens. While Helvetica could have been an obvious choice, Lucida’s designers adapted it for superior legibility on low-resolution displays from the start, writing that “the weight of Lucida Grande regular was intended to compensate for ‘erosion’ on illuminated screen backgrounds” (Bigelow & Holmes).
The introduction of the Retina display, on the iPhone 4 in 2010, took the next major step for Apple’s platforms in displaying typography. It quadrupled the pixel density of the phone’s display, showing a new level of detail in letterforms and allowing the legibility of smaller, lighter font sizes and weights. Three years later, the first beta of iOS 7, which wholly redesigned the operating system, used Helvetica Neue Light as its default font, reflecting the widespread adoption of the Retina display. The Retina display started making its way to the Macintosh line in 2012, and in 2014 Apple switched the OS X operating system from Lucida Grande to Helvetica Neue, citing how the font “looks great on high-definition displays” (Kastrenakes). (Inevitably, users on non-Retina displays decried the reduced legibility of the update.) The switch appeared to be a move the design team had looked forward to while held back by cruder display technologies.
For a second change in two years, in 2015, Apple updated all its operating systems, and later its brand, to use a new, in-house font, San Francisco. It marked Apple’s first in-house font since the 1990s. The designers of San Francisco said the family’s goal was to “render clear and legible interfaces consistently” (Vincenzo) and to remain “inconspicuous and beautiful” (Cavedoni). Since its introduction, Apple has extended the San Francisco superfamily with a wide range of variants for more compact and wider letterforms for stylistic variation in specialized applications. Nearly every typographic surface area Apple touches now uses San Francisco, from signage at their headquarters to billboards to the fine print on the bottom of the box of a stylus.
As Apple tweaked its typography choices, each step beyond Lucida Grande presented a subtle enough change many users likely never noticed. Each sans-serif stayed within a few percentage points’ width variation from monoline, or composed of near-equal-width strokes (Bigelow & Holmes), chasing the ideal of Swiss beauty Helvetica made mainstream.
Another take on updating Helvetica for digital interfaces comes with the font Inter. Figma, now one of the most popular tools for designers in the technology industry, had its web interface set in Roboto, Google’s Helvetica-derivative system sans-serif. Swedish designer Rasmus Andersson, previously the first designer at Spotify, grew unhappy with aspects of Roboto in the dense control panels, and began drawing Inter. Within a few years of its 2016 release, Inter has quickly become one of the most popular typefaces for technology companies, as the interface and/or brand font for Figma, GitHub, Mozilla, Unity, Vercel, Clearbit, Linear, and dozens more. It became a mainstream choice for graphic designers, receiving 500 million monthly downloads from its website (Andersson) and 2.91 billion from Google Fonts in the last week (Andersson, “Inter - Google Fonts”). Since Andersson continues releasing updated versions for free download through open source platform GitHub, the largest users are not included in those statistics. Its open source nature has contributed to its widespread usage, since similar fonts such as Helvetica require expensive paid licensing, and Apple’s San Francisco remains exclusive to its platforms.
The Inter project mission is stated as creating “the best possible utilitarian solution for [screen-based user interfaces], much in the same way 60 years ago Helvetica was designed for physical medium” (Andersson, “Inter Font Family”). Inter arrived unabashedly inspired by the “neoclassical” Swiss-style sans-serifs before and contemporaneous. A younger Andersson attended the premiere of Gary Hustwit’s Helvetica documentary in Stockholm (DeAmicis), and the influence is palpable: San Francisco and Inter are visually near-identical to the untrained eye, with stark curves, legible x-height, and no excess ornamentation. The interface of the Mac application Andersson uses to design Inter, Glyphs, is set in San Francisco, and the two families have evolved and expanded alongside one another. In turn, Figma’s incorporation of Inter for its interface and default font choice on new design projects undoubtedly influences designers, presenting its look not only as the default but a paragon of clarity and legibility in digital design.
System fonts blend in, forming the essential interface elements of the billions of devices’ digital spaces many of us spend more time looking at than physical ones. With San Francisco on Apple platforms, Inter on the web, Google’s Roboto on Android, and Microsoft’s Segoe UI on Windows, the system typography we consume constantly yet passively has converged on a centralized look. Each typeface updates Helvetica for the characteristics of its new context and brand, but an average user would be hard-pressed to identify the specific differences. These system fonts speak silently, their seemingly-neutral voices presenting the buttons and menus we read and click to accomplish tasks critical to participating in society. Typographically, they articulate a clear lineage from Helvetica’s origins, and create a nearly singular vision of the ultimate typeface for everyday. The shared inspiration was not a coincidence: the lead designers of every single one of these typefaces, all white men, all grew up in the age of omnipresent Helvetica.
Yet these system font projects present goals far beyond those of the original Helvetica. Andersson states on the Inter website “the idea of Inter is to design and craft a workhorse of a typeface that is accessible to everyone in the world.” He continues: “my dream is to provide the world with something that can help communication, independently of social or economic status” (Andersson). Crafting a typeface “accessible to everyone” sounds like a noble pursuit, but it is not a new one. Apple’s San Francisco is similarly designed for “people from all around the world who read and write different scripts and languages” (Vincenzo). Historian Kate Brideau argues the expectation that Western typographers can design fonts to “achieve universality through type” (65) “has a certain hubris and brute functionality to it” (66). “The assumption is that typography’s conquering army can be a universalizing response to the tower of Babel—that is, that type can overcome the complexity introduced by the multiplicity of human languages”, she says (65). And while projects to “inconspicuously” render all human language have undeniably massive scope, with the global internet, computers have to render the writings of people all over the world. The “universality” is an unavoidable aspect of system fonts.
Though no large-scale measurements exist, these system fonts may be the most-read typefaces in the world each day. While Helvetica became popular far before Apple started working on computers or Andersson needed an updated version for his design tool, as soon as displays had sufficient resolution, these proprietors of typographic minimalism were eager to implement Helvetica and its derivatives everywhere they could. We can never disentangle Steve Jobs and the other early digital designer’s personal affinities for Helvetica, or its lineage over prior display technologies, from our contemporary landscape. The dozens of variations designed, from Lucida Grande and Arial to San Francisco and Netflix Sans, chart a trajectory of small steps, of companies sticking to what is known to work, what is assumed customers prefer. Forming this encompassing constellation today, they collectively argue Helvetica style remains the best, or at least highest-legibility, typographic idea the West has seen in a century; that while it should be tweaked and updated for the latest context—and universalized—the basic structures remain unsurpassed.
These omnipresent typefaces make up an oft-overlooked majority of digital type, of which we read more, more constantly and with even less realization, in fewer typefaces. They form a baseline of what typography looks like, present the literal framing around the area in which we might see typographic diversity in a web browser or document. While far from the most expressive or flashy, the typographic basis system fonts form is a critical, shaping force over all other digital typography.
II. Variable fonts
While modern displays can render so much more typographic fidelity, the underlying digital formats in which fonts exist have changed little in decades. One exception is variable fonts, which are singular font files combining a range of weights and/or styles. Without variable fonts, for example, Inter Regular, Inter Regular Italic, Inter Bold, and Inter Bold Italic are separate files; the more typographic options a designer wants on a website, the more separate files need to be loaded, slowing down webpage speed. With variable fonts, settings such as weight and italics are embedded as customizable axes in one file. On each of these axes, designers can choose any point on the spectrum. Due to storing the instructions for drawing characters instead of each character in each style, loading Inter Variable provides 801 weight options and 11 italics options in a smaller file size than the four files mentioned above. This combination of improved performance with orders of magnitude more design options represents a step forward for the medium, the first in awhile built for digital. Every contemporary system font mentioned thus far is published as a variable font.
Many users of variable fonts use them exclusively for their simplicity of implementation (a single file instead of several to juggle) and performance benefits, without taking advantage of their chameleonic typographic abilities. As a viewer, therefore, whether a font is variable is rarely visible without digging into the code of a website; in print, usages of variable fonts are similarly indistinctive. One unique, digital-first ability of variable fonts is animation—since axes like weight can be stepped between at 1% of the granularity of traditional fonts, variable fonts enable smooth tweening between styles—though typographic animation has yet to become popular on the web.
The specification for variable fonts, called OpenType Font Variations, offers a total of 30 axes far exceeding the traditional ones. While the majority of variable fonts encode the same weight and style ranges they would have otherwise published, variable fonts have wholly-new options. On Google Fonts, Fraunces and Recursive take notable advantage of the format, the former offering softness and “wonky” axes, the latter casual, cursive, and monospace (Google Fonts, “Variable fonts”). Two designers can use the same of these variable fonts with dramatically diverging styles appropriate for wholly separate contexts. These examples stretching the limits of the format are exceptions from the norm.
Though developers are increasingly implementing them on the web, designers are underutilizing the typographic capabilities offered by variable fonts. Each year, the HTTP Archive analyzes the results of crawling a huge portion of the internet and publishes their findings in the Web Almanac. In 2022, 29% of websites crawled used variable fonts, up from 11% in 2020 and 13% in 2021 (Stein). In the State of CSS survey, the most comprehensive survey of web developers working on visual styling, in 2022, a surprisingly-matching 29% of respondents report having tried variable fonts, an increase over the 21% in 2021 (Greif). Variable fonts are chosen for performance benefits, not typographic features, though: the Web Almanac reveals that 16% of variable font users are using a non-standard font weight, less than 5% use an axis other than weight or italics, and a microscopic percentage animate variable fonts.
While currently underutilized, variable fonts chart a new path for how typographers can take advantage of the digital medium to deliver richer visuals. With 125% growth in web usage in the last year, it’s clear the suppliers of our type consumption are hungry for innovation in the delivery and possibilities of type.
III. Fonts in color
Building on the underlying principles and technologies of variable fonts, another future of digital typography is multi-color fonts. Unlike traditional fonts which designers can set in any color, these fonts have color palettes built into the fonts themselves, sometimes with multiple themes and the additional customization axes of variable fonts.
While printing overlapping shapes of different colors was possible on the printing press, or with print techniques like screen printing, in the physical realm, pigments overlap using subtractive color, where opposing hues quickly muddy into brown and black. In contrast, screens use additive color that mixes light instead of pigment, allowing beautiful interplay of colors. This makes a leap similar to the one phototypesetters popular in the 1960s relied on, which overlaid single-color letterforms; taking advantage of how “light is a far more flexible medium than metal” (Brideau 59). Though color fonts with more traditional color usage can be printed, the most adventurous cannot match their digital fidelity in print. This foundation of color is essential for multi-color fonts, and makes them uniquely digital.
Though the technology for developing color fonts has been around for several years—their specification became part of OpenType in 2015, a year before variable fonts—their usage remains far more niche than variable fonts. This shyness from the mainstream continues due to bottlenecks in the creation process, distribution, and awareness/interest among designers and developers. For their creation, while designing fonts is a niche profession, only a small subset of type designers work on color fonts. Producing a color font is dramatically more complex than single-color fonts: while involving all the work of designing shapes for each letter, each character is constructed of multiple, sometimes overlapping shapes, each with their own color. The color palettes need to visually harmonize, create contrast with one another, blend elegantly if overlapping, and the final letterform needs adequate contrast against the intended background for legibility. This builds on the complexity of variable fonts, oftentimes including multiple color palette options and customization axes. For many foundries, the marketing of the font arguably needs to educate potential customers on how to use these abilities.
Distributors of webfonts need infrastructure updates to serve multi-color fonts at scale, which come with larger file sizes, increasing hosting costs. This support arrived on Google Fonts in September 2022, though Adobe Fonts (formerly Typekit) has provided them since 2016. Viewers then need more recent web browsers capable of rendering the fonts. While early technologies to support multi-color fonts were first developed to support emoji in browsers as their popularity exploded in the late 1990s, multiple competing standards, such as the latest COLRv1, see a patchwork of support across operating systems. While developers can rely on traditional webfonts with limited exceptions, developers must choose the browsers their typography is willing to support and a font using that standard. Depending on the type of multi-color font, secondary, fallback designs could demand their own implementation and testing time for browsers lacking support.
Mark van Wageningen’s Type and Color is one of few books digging deep into multi-color fonts, including how to design, produce, and publish them. Van Wageningen posits font designers continue in the traditional monochromatic ways out of habit, but expects the future of digital typography to be colorful. “This habituation process is comparable to the transition from the black letter to our established Latin script today. In the Middle Ages, black letter was easy for people to read, while it is more difficult for most to decipher today.” (160)
Among web developers, awareness remains far more niche than variable fonts. In the State of CSS survey, over 91% of respondents this year had never heard of font-palette, a well-supported browser standard for customizing color fonts, while a mere 1% have tried it. One commenter cites “too few colour fonts and too few clients that want coloured fonts” (Greif). The Web Almanac reveals diminutive, but steadily increasing, usage, with 0.004% of pages using color fonts in 2020 and 0.018% in 2022 (Stein). Between typographers not producing them, designers not using them, developers not pushing for them, and browsers implementing a patchwork of standards over years, spotting color fonts on the web remains a rarity, even across the work of the most typography-conscious.
Part of this lack of uptake is that unlike variable fonts, which improve traditional font delivery mechanisms with few drawbacks, multi-color fonts are not a drop-in replacement for every single-color font. Stylistically, their visual complexity belongs in larger “display” contexts, meaning projects need to pair a multi-color font with an additional font for use at smaller sizes. This puts them at the opposite end of the spectrum from system fonts and siblings like Inter, which can scale to any size with little adjustment. Typography in a display context, like the chunky serifs popular in recent years, has historically harkened back to print techniques and styling even more than system fonts; multi-color fonts present a distinctly modern option.
The more complex implementation code, larger file sizes, and lack of availability all contribute to the low usage of multi-color fonts. Yet over the last four years of web design, the most popular new visual effect for text is filling text with a gradient between colors. Multi-color fonts offer a dramatically higher-fidelity effect, tracing letterforms with more considered, precise color usage. While designer adoption has yet to go mainstream, that is far from a new story in the adoption of new typography. As the chicken-and-egg awareness/availability cycle develops further, I expect latent interest to convert to a sharp uptick in usage.
IV. Designers today and tomorrow
A long-running survey book of graphic design history writes that “the new generation of graphic designers must be encouraged to define the new aesthetics of electronic media rather than allowing technology to define them” (Meggs and Purvis 621). Bringing cues and beauty standards from the prior world is the first step in designing a new platform paradigm: mobile devices started by drawing skeuomorphic renderings of the physical objects they were replacing, while current virtual reality worlds recreate the design and constraints of the in-person one in a similarly unimaginative fashion. Over time, these early concepts feel quaint and crude, and the progression away feels obvious.
In the early days of personal computers, most fonts tried to replicate what worked well in print; a few, like Chicago, reconsidered what a beautiful digital silhouette could look like and adapted natively. Kare leveraged the constraints and abilities of the technology she had to create an aesthetic that has remained distinctive even decades later. Over time, as displays could increasingly replicate the precision of print, designers returned to the basic structures of Helvetica, redrawing its concept every few years for the latest screen or company. Over the same period, computers went from displaying content created by the single user at a desk to needing to present the world’s internet everywhere. This cemented the role of system fonts, from niche design to cultural foundation. Today, San Francisco, Inter, Roboto, and their many stylistically-restrained siblings dominate our typographic consumption. It turned out “the best possible utilitarian solution” was making them inconspicuous, attempting to make them “accessible to everyone” by letting them recede into neutrality.
With the capability to display any typographic idea onscreen, why make these lightly-differentiated Helvetica derivatives? In chasing the “inconspicuous and beautiful,” did our system fonts stop adapting to their context, becoming Helvetica soup? The context in which Susan Kare designed Chicago, where turning on an Apple computer display was a rare, special experience, has shifted. The latest Apple Watch and iPhone models exist not merely at a desk, but everywhere their owners go, constantly shining their typographic screens; tapping them opens unending streams of yet more text from the world over. San Francisco, Inter, and the like did adapt to their context: now one of ubiquitous, high-resolution displays surrounding us, where it would be inappropriate to make the character-packed statement Chicago did. In other designs with more opportunity for contrast—the splashy landing page of a new startup, the portfolios of designers themselves—variable fonts and now multi-color fonts bring fresh richness and intrigue. The neutral framing of the system fonts enables our fresh ideas on the web to shine.
If every piece of text onscreen arrived in a loud color font, they would lose their power, devolving our digital surroundings into an unending visual shouting match. We need both the neutral tones and the saturated ones, the utilitarian connecting words and the standout adjectives. For utilitarian type that surrounds us, continuous neutrality tweaked for the present makes sense. Though system fonts will continue to flood our senses, we have the technology for and designers are starting to imagine a richer typographic landscape, with higher, more distinctive peaks. The lineage of typographic beauty standards, decided disproportionately by a few white men in the previous century, has held up progress in diverse, expressive, outside-the-norm type use, but recent metrics suggest surging interest.
Nearing forty years since the release of Chicago, with variable fonts ascending and color fonts pushing today’s webfont standards, we are beginning to discover the complement to system fonts: display typography native to this context. System fonts hold down a critical role. Variable fonts reveal how we can reimagine the font medium with computers first, spanning many typographic contexts. Color fonts peek at a high-fidelity, digital-first future. These futures for typography take advantage of the latest technological foundations to open the floodgates, letting the full spectrum of designers, their creations, and modern audiences to finally shine through.
Works Cited
Andersson, Rasmus. “Inter - Google Fonts.” Google Fonts, Google, https://fonts.google.com/specimen/Inter/about.
Andersson, Rasmus. “Inter Font Family.” Rsms, https://rsms.me/inter/.
Bigelow, Charles, and Kris Holmes. “What's the Difference between Lucida Grande and Helvetica Neue?” Lucida Fonts, Bigelow & Holmes Inc., 29 Aug. 2018, https://lucidafonts.com/blogs/bigelow-holmes-blog/whats-the-difference-between-lucida-grande-and-helvetica-neue.
Brideau, Kate. The Typographic Medium, MIT Press, 2021. ProQuest Ebook Central, https://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6735556.
Cavedoni, Antonio. “Introducing the New System Fonts - WWDC15 - Videos.” Apple Developer, 2015, https://developer.apple.com/videos/play/wwdc2015/804/.
DeAmicis, Carmel. “The Birth of Inter.” Figma, 8 Aug. 2019, https://www.figma.com/blog/the-birth-of-inter/.
Greif, Sacha. “The State of CSS 2022: Typography.” State of CSS, 6 December 2022, https://2022.stateofcss.com/en-US/features/typography.
Kastrenakes, Jacob. “Apple Changes OS X System Font for the First Time in Yosemite.” The Verge, 2 June 2014, https://www.theverge.com/2014/6/2/5773838/apple-os-x-yosemite-changes-system-font-for-first-time.
Kindy, David. “How Susan Kare Designed User-Friendly Icons for the First Macintosh.” Smithsonian Magazine, Smithsonian, 9 Oct. 2019, https://www.smithsonianmag.com/innovation/how-susan-kare-designed-user-friendly-icons-for-first-macintosh-180973286/.
Meggs, Philip B., and Alston W. Purvis. Meggs' History of Graphic Design, John Wiley & Sons, Incorporated, 2016. ProQuest Ebook Central, https://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=4505417.
Staples, Loretta. “Typography and the Screen: A Technical Chronology of Digital Typography, 1984-1997.” Design Issues, vol. 16, no. 3, Oct. 2000, pp. 19–34. EBSCOhost, https://search-ebscohost-com.proxy.library.nyu.edu/login.aspx?direct=true&db=edsjsr&AN=edsjsr.1511813&site=eds-live.
Stein, Bram. “Fonts | 2022.” HTTP Archive, 26 Sept. 2022, https://almanac.httparchive.org/en/2022/fonts
Vincenzo. “Meet the expanded San Francisco font family - WWDC22 - Videos.” Apple Developer, 2022, https://developer.apple.com/videos/play/wwdc2022/110381/.
Van Wageningen, Mark. Type and Color: How to Design and Use Multicolored Typefaces, Princeton Architectural Press, 2019. ProQuest Ebook Central, https://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=5940334.
“Variable Fonts.” Google Fonts, Google, https://fonts.google.com/variablefonts.