Fonts that address special

issues

Part 4

Another important development was the proliferation of new fonts. Over the past several decades, Microsoft and Apple have approached the issue of web legibility repeatedly, producing more and more fonts targeted to the peculiarities of digital displays and the web.

In the early 90s, British type designer Matthew Carter created the early web 1.0 fonts Georgia (1993) and Verdana (1996). Commissioned by Microsoft specifically for text on webpages, both fonts were designed in bitmaps to match the pixels of the standard screen resolution at the time and then translated into outline fonts. For legibility and readability on screens, Carter designed these fonts with large x-height, open aperture, and generous space.

Matthew Carter, July 16 2014. Photo: Christopher Lewis. CC by 4.0

Georgia, 1993

Both designed by Matthew Carter, hinted by Tom Rickner

Verdana, 1996

A decade later, sub-pixel rendering appeared—also known as font smoothing, it adds red, green or blue pixels to letter fringes for clearer reading even on low-res screens. The origin of subpixel rendering remains controversial: Apple, then IBM and Microsoft, patented various implementations with their own technical differences, but Microsoft was the first to implement the technology in their products. Soon after, Microsoft also released the Clear Type font collection, a suite of fonts designed to demonstrate the advantages of sub-pixel rendering. The collection included Calibri, Corbel, Cambria, Candara, Consolas, and Constantia.

Another major development came in 2009. Small Batch., Inc released Typekit—a collection of web fonts from different foundries, making use of the @font-face feature of CSS while protecting them from infringement at the same time. @font-face was available from 1998, but Typekit was the first collection to solve the problem of font copyrighting, allowing a new market for custom web fonts to bloom. It’s difficult to imagine now, but before Typekit all web typography was either done with one of the dozen or so ‘web safe’ fonts or rendered in graphics.

In 2014, Apple released its San Francisco font family, inspired by iconic modernist type Helvetica. San Francisco includes several fonts, each aimed for a different environment: SF is meant for macOS, iOS and tvOS, while SF Сompact was designed for Apple Watch. The main difference between them is that letters with round shapes, such as “o”, “e”, and “s”, have rounded sides in San Francisco, whereas in SF Compact they are flat. These flat sides allow the letters to be laid out with more space in between each character, making the text more legible at small sizes (which is particularly important for the watch).

Neue

Alt

Neue

This paragraph is set in Pragmatica (Paratype). The typeface was obtained via Typekit (now Adobe Fonts)

Left: SF Text

Right: SF Compact Text

Working together, Adobe, Apple, Google, and Microsoft jointly introduced variable fonts in 2016. The power of this new font variation technology lay in its ability to pack multiple fonts into one without increasing file size. Variable fonts solve the issue of loading individual font files to achieve various weights, widths, heights, styles, and other attributes.

Grade axis changes the weight of the font without changing the widths, so line breaks are the same. Set in GradeGX by Pablo Impallari and Adam Twardoch

Grade axis:

In theory, variable fonts could be modified along several axes, including their optical size, which directly affects font legibility. For now, variable fonts give much room for experimentation. Some great ideas for using variable fonts in design can be found here, and Axis Praxis is a resource for experimenting more directly.