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
- Typographic Terms
- Apps and Devices
- Legibility and Design Detail
- The Digital Environment
- Optical Sizes
- WordPress CMS
- Choosing a Font
- Variable Fonts
- International Markets
- Type Foundries
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.
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.
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
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
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, 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.
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.
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)
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’.
Instead of working with a family of optically sized fonts we can now work with one variable font.
‘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
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
Links & References
All the fonts are included with the Creative Cloud Subscription.
The world’s largest type library
‘We empower creative minds to build and express authentic brands through design, technology and expertise’. Monotype.
Featured foundries include Linotype, Monotype, Dalton Maag and Adobe.
All the fonts in the catalog are free and open source so you can use the code generated by Google Fonts for web content.
This site is for when you wish to purchase a font.
Drop or upload an image of a font to this site to identify it.
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
Fonts featured in the article: Univers, San Francisco (SF), VAG Rounded, New York
WordPress Theme Font: Arimo and Default Theme Font