Young-designers-looking-at-a-digital-screen Featured

Choosing fonts for the digital environment


Most fonts are designed for a purpose, for example – to be easy to read in print and/or digital, to attract attention in advertising or to work as road signs and way finding systems.

Different fonts have different design details which make up their own visual language. This article attempts to take you through all the things you might need to consider when choosing a font for today’s physical and digital environments:


TYPE CLASSIFICATIONS


Screenshot/fonts.com

Allan Hayley, Director of Words and Letters at Monotype explains:

‘Most typefaces can be classified into one of four basic groups: those with serifs, those without serifs, scripts and decorative styles’.

(Note the classification options on fonts.com website (screenshot above).

His Classification System (below) identifies 15 styles (which may be more helpful to us than four) in identifying, choosing and combining typefaces. He describes it as a hybrid of the Vox system first published in 1954.

TYPOGRAPHIC TERMS


Type design has been around for centuries. First invented in the 16th century all fonts were Roman designed and came as Roman or Italic (named after Italy).

The Typographic Terms (above and above top) describe the design details unique to different font designs. It was put together by fontsmith.com, part of the global type foundry Monotype who have an office at The Tea Building in Shoreditch, London.

PRINT


90% of typefaces we use today were originally designed for print.

(Allan Hayley, Monotype)

Type foundries have been releasing the modern type families that we tend to use today since the late nineteenth century.

For example Univers, designed by Adrian Frutiger in 1954 is a type family that has grown to include 44 different weights and styles.

APPS & DEVICES


VAG Rounded™

Apple used Univers on its laptop keyboards until 2007 until they switched to the custom font VAG Rounded in 2007 (also used in their Apps, above). Designed by Gerry Barney and published by Linotype, the VAG Rounded family contains only 8 styles.

LEGIBILITY AND DESIGN DETAIL


Most fonts were (and still are) designed for a purpose, for example – to be easy to read in a print, to attract attention in advertising or to work as road signs and way finding systems.

Today, whatever the output, ink on paper (or other media) – or vector graphics rasterised in a pixel grid, we are mostly looking for fonts that balance legibility with design detail.

Designers tend to choose a font or a combination of fonts to support a visual message. This may mean looking for a combination of fonts that deliver on legibility, readability, accessibility and tone of voice and working with layout principles to support message hierarchy or sufficient contrast between texts. This may include use of scale and/or working with a serif and a sans serif or bold and light to create a sufficient contrast. In addition to contrast the design detail of the font often reflects the tone of voice that you are looking for. For example, open and friendly, delicate, strong, elegant and so on.

There are exceptions to that rule which we will consider in another article.

THE DIGITAL ENVIRONMENT


Rasterised fonts on a pixel grid

If you are choosing to rasterise fonts on a pixel grid you will need to think about scalability.

Loïc Sander, Type Designer at Apple explains:

‘The challenge with choosing fonts for screen is that they become entangled with the resolution of a screen (a pixel grid) and the finer details of the letterforms get lost’.

Metal Type

Metal type, for example, was made by hand which involved cutting letterforms into punches of steel at different physical scales which then became metallic stamps in a range of sizes, for example, for 8 pt letters to 42 pt letters and beyond, the stamps contained all the detail at actual size.

(Loïc Sander, Type Designer, Apple)

Type designers use a process called hinting to update traditional fonts to render more clearly on screen. You can check out the term hinting, together with other typographic terms in the Type Terms reference for this article.

OPTICAL SIZES


San Francisco

Apple’s custom font San Francisco (SF) is optically sized for digital. It was designed to balance legibility, the detail of the font and the font behaviour across multiple devices.

Apple took the decision to work only with two optically designed sizes for use in their apps: SF Text is designed to work at 20 pts and less and SF Display is designed to work at 20 pts and above. (shown above). Gone was the centuries old craft of designing and cutting fonts into hundreds of different physical sizes.

WORDPRESS CMS


WordPress CMS

As I write (using the WordPress CMS) my choices for text size are ‘small’, ‘normal’, ‘large’, ‘huge’ and ‘custom’. ‘Display’ text or ‘Heading’ text comes as H1, H2, H3, H4, H5, H6. The fonts that come packaged with the theme are optically sized to work in the digital environment. That means legibility is balanced with the design details of the font so that they work across multiple platforms and screens. Theme Fonts (Arimo and the Default Theme Font).

CHOOSING A FONT


So, what are we looking for in a font today?

Your font may need to be legible and versatile across different devices

If so, more often than not you are looking to balance legibility with design detail:

  • Ample x-height
  • Open counters
  • Sufficient stroke weight
  • Sufficient space inside the letter
  • Sufficient space around the letter

Legibility and Readability

You will need more ample line height (Leading) when working with fonts on screen

And ample space between the letters (Tracking)

When working across different devices the font will need to be space efficient and when working with type over an image, allow for sufficient contrast between the background and the text or glyph.

It may also need to be a multiscript font

And when working with a brand it might have to work in all environments (physical and digital)

VARIABLE FONTS


So, have we lost the art or craft of typeface design?

Apple Type Designer, Loic Sander thinks that we have come full circle and are now able to go back to designing a wider variety of styles.

He explains: Variable Fonts were introduced in 2016 as an evolution of the open type specification. The spec was updated in response to the increased popularity of web fonts and the fact that this technology was really testing the limits of existing font formats’.

Optical sizes as separate fonts

Instead of working with a family of optically sized fonts we can now work with one variable font.

Variable Fonts as one file

‘The format fundamentally changes the way glyphs are stored in a font. A glyph is no longer limited to being a single static drawing. It can also describe the way each point moves to produce a related but different glyph. Each of these motions or deltas are tied to a design axis that let software control their behaviour’. Apple Type Designer, Loïc Sander

INTERNATIONAL MARKETS


As international markets develop consistent communication across countries and font systems has become increasingly important.

Recently Monotype introduced a new Chinese sans serif called M Ying Hei designed to blend with Helvetica as well as other popular Latin sans like Avenir Next, Neue Frutiger or Univers Next.


I hope that this article helps you to choose the perfect font (or combination of fonts) for your next digital media project.

All the typographic terms used in this article can be found in the Typographic Terms section, view the slider or download the PDF poster and booklet designed by fontsmith.com

Article by Wendy Corbett Digital


Links & References


Type Foundries

fonts.adobe.com

All the fonts are included with the Creative Cloud Subscription.


monotype.com

The world’s largest type library

‘We empower creative minds to build and express authentic brands through design, technology and expertise’. Monotype.


fonts.com

Featured foundries include Linotype, Monotype, Dalton Maag and Adobe.


fonts.google.com

All the fonts in the catalog are free and open source so you can use the code generated by Google Fonts for web content.


fonts.com/web-fonts

This site is for when you wish to purchase a font.


myfonts.com/WhatTheFont

Drop or upload an image of a font to this site to identify it.


References


Type Classifications

https://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications


Typographic Terms

https://www.fontsmith.com/blog/2019/06/24/a-guide-to-type-styles#section-1359

Note: This work is licensed under a Creative Commons Attribution 4.0 International Licence. You are free to copy, distributes and adapt the work providing it is attributed too http://www.fontsmith.com

Image Credits


Screenshots from Allan Hayley, Director of Words and Letters, Monotype (Web Article)

Screenshots from Video Presentation by Loïc Sander, Type Designer at Apple

Screenshots from fonts.com, fontsmith.com, myfonts.com/WhatTheFont, fonts.google.com, fonts.abobe.com

Font Credits


Fonts featured in the article: Univers, San Francisco (SF), VAG Rounded, New York

WordPress Theme Font: Arimo and Default Theme Font

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.