I ♥ Typography

Bringing back the finesse to digital product design

I love typography
I really do x

I LOVE Typography. I studied it at LCP. It’s arguably one of the most underrated aspects of modern digital product design, and IMHO the most taken for granted. It’s one of the main reasons that most human beings passively enjoy about a digital product, yet don’t really know why.

To understand typography, I humbly proffer a foundation starting with the history of how type was originally used in all visual communication. How type is arranged into words, and compiled into art.

I personally think it’s important for any designer to learn about the history of typesetting. (BTW I don’t think this is gatekeeping, typography is as important as every other visual element in design).

Typesetting is the most practical application of typography. Everything you interact with which displays a language is typeset.

There are four main parts to the story of typesetting, ‘Manual’, ‘Hot Metal’, ‘Photo’ and ‘Digital’. I shall attempt to summarise them here:

Part one: manual typesetting

Manual typesetting is arranging a bunch of letters into words and spaces, multiple times to create a sentence. This arrangement can be used to create an impression, or ‘print’. Thats basically the kernel of any piece of written communication.

For brevity and cultural relevance I’m not going to go back to China 1040 AD (the invention of moveable type), but rather to the good old days of letterpress.

Letterpress printing was developed by Johannes Gutenberg, in about 1440, of modern ‘movable type’ printing from individually cast, reusable letters set together in a “forme” (frame or chase).

Metal ‘movable-type’ was a bespoke assembly of alphanumeric characters more commonly made out of lead-antimony-tin alloy, assembled in lines, ready to be coated in ink and pressed onto paper.

Upper and lower cases of type
Divided upper and lower type cases for movable type by Maggie McCain (CC BY 2.0)

The characters were kept in a large wooden case. The upper part housed the capital letters, and the lower part contained the regular letters.

Illustration of upper and lower cases of type

This is where the terms ‘UPPER CASE’ and ‘lower case’ originate!

‘Mind Blown’ Meme
BOOM! Figma users just got enlightened

You like that one? well here’s another: the spacing between the lines was created and managed using thin strips of lead. Thats where the term ‘leading’ (rhymes with ‘bedding’) comes from.

Image of lead being used to space type
Leading — line spacing using strips of lead

Your design software will call it ‘line spacing’, but the etymology of typographical terminology is a fascinating look into the past.

See? I told you this would be fun!

Part two: Hot metal typesetting

Oh boy, are you in for a treat…

Linotype machine

Imagine a huge machine, with a 90-character keyboard on which you could type sentences, and in real time the machine would punch those letters into a strip of hot lead, making a line of type (hence a line-o’-type).

Linotype machines

Compositors could then assemble entire sentences rather than individual letters. The Linotype machine, invented by Ottmar Mergenthaler in 1884, totally revolutionised typesetting and newspaper publishing. It’s absolutely bonkers. Thomas Edison called it ‘The Eighth Wonder of the World’.

In 2012, Douglas Wilson made a wonderful film about the Linotype machine, Linotype: The Film:

Linotype movie (2012) poster
Official letterpressed poster for ‘Linotype: The Film’ by Doug Wilson, 2012

It’s a fascinating look in to a mechanical marvel and one of the biggest heroes of the industrial revolution.

The trailer does not do it justice, Its a wonderful documentary

You can watch it on Amazon Prime

RIP Linotype Machine. From the late 19th century to the 70’s, the king of composition. But as with all mechanical technologies, it would be superseded by a much cleaner, quieter, smaller and simpler process…

Part three: Phototypesetting

Phototypesetting was invented in 1949, using a photographic process which projected light through a negative, then developed onto light sensitive film. but it wasn’t until the 60’s that the technology took off, using CRT screens, rather than projectors, to project light. As the technology got smaller, cheaper and more sophisticated, it became the new gold standard in typesetting. No more huge machines, hot lead, noise and mechanical issues.

Photosetting machine
Linotype CRTronic 360

Due to the small size of the CRT, the technology was good for magazines, but not not big enough for newspapers. By switching from film to photosensitive paper, the whole thing could be moved around easier, so then became a perfect fit for the newspaper industry who were desperate to migrate away from hot metal typesetting. By the mid-1970s, almost all of the newspaper industry had switched to phototypesetting.

Honorable mention: Letraset

Letraset was a ‘dry transfer’ lettering system which was introduced in 1961, a sheet of letters, of a particular typeface and font that you ‘burnished’ (rubbed onto) your artwork using a stylus, pen or whatever you liked.

Letraset

It was such a hugely successful, simple, cheap and accessible DIY method of typesetting. Used extensively during the 1960s, 1970s and 1980s, it was a a huge favourite with graphic designers, architects and artists, a ‘home brew’ Phototypesetting technique, and the easiest way to visualise an artistic typographic flair not constrained by the sluggish advance of technology.

Letraset catalogue
Letraset Graphic Arts System (Catalogue) 1978

But as with everything, technology progressed to ‘render’ Letraset, along with ALL types of Phototypesetting, entirely redundant.

Letraset catalogue, inside view

Part four: Digital typesetting

As computers and digital technology became ubiquitous in the early 80’s, typesetting, along with most mechanical or analogue industries, had to upgrade.

And my goodness it did. Everything shifted to computers. From the input to the output, everything went digital.

New software was created, not just to set type but to build entire page layouts. Desktop Publishing (DTP) was born. A small company named Aldus was about to change the game…

Aldus ‘PageMaker’ was introduced in 1985 for the Apple Macintosh. Along with the mouse-driven, graphical interface of the Mac OS, it birthed creative digital document design.

I first experienced digital document design on the Apple Mac SE/30 at art college. It was marvellous. You could create whole documents visually and the typographic controls were first class. I loved that software and that computer.

Pagemaker screen for old Apple Macintosh computer
Aldus Pagemaker on the Mac SE30. The GOAT

I am lucky enough to have one of those computers at my home. It’s my favourite Mac of all time, and still runs Photoshop 1.0.

And so to the present day, we use computers to set type, via a desktop publishing application, or one of the copious design apps that can create a digital experience.

And thats your foundation of how type came to be on your computer. However, as with most technological advances, some of the ‘craft’ and the ‘finesse’ got left behind. And thats perfectly fine. But that meant people did not ‘need’ to understand type design, as most of it was already at the fingertips. It’s so easy to knock out a bunch of text on an artboard now. Technology has afforded the democratisation of design, but typography is an art.

What happened to typography?

Short answer:

It got lowballed due to the advent of ‘digital product’.

Long answer:

The issue with digital design is that it is mostly rebuilt using code, either web standards (HTML/CSS/JS etc) or native app (Objective C, Java, React etc) and that code does not fully respect typographical conventions. Web and app users consume information differently. Consequently it got deprioritised. It’s THAT simple

Also the ‘anyone can design’ mantra espoused on LinkedIn, meant that everyone can make stuff, yet have no formal training on the rules of typography.

But fuck that I’m repping typography. It's BRILLIANT.

Why is typography so important?

Well first of all, the rules of typography are the rules of comprehension. Take the simple rule of size:

Size

Size is often equated with importance, well this is the first principle of typography:

Example of type size affecting viewing order
Size = importance

Typeface v font

Helvetica is not a font. It’s a typeface. Helvetica Bold is a font. A typeface is a family of fonts. A font is a specific version of a typeface.

Anatomy

Every single part of a piece of type has a term, while its not critical to know these nowadays, its a lovely thing for designers to learn

Anatomy of a typeface
Google Material Design — Understanding Typography

Kerning

Not to be confused with tracking, or line spacing, Kerning is the space between two individual letterforms.

Why is it not all a uniform spacing across the typeface?

Example of scpacing
All spacing is not equal

The issue with digital type is that type is inherently optical. Different font characters are spaced together differently. these are called ‘kerning pairs’.

Kerning pairs
Kerning pairs

Most letter characters don’t have straight optical edges, which creates an optical illusion, to compensate for this the spacing between those letters needs to be adjusted to be visually commensurate otherwise the spacing looks off.

Swiss Style

Graphic art magazine
Neue Grafik, the International Review of graphic design and related subjects

International Typographic Style, or ‘Swiss Style’ was a movement that started in the 1920’s, that was hugely influential to interface design, it also truly elevated typography to an art form.

Swiss Style followed a mantra of ‘form follows function’. It used a grid, sans serif typefaces, it respected content, and became the blueprint for most modern graphic design techniques, along with helping to make interfaces and systems more user friendly.

Grid system
Your grid system derives from Swiss Style

Legends of type design

Edward Johnston

Widely considered as the father of modern calligraphy, Edward Johnston CBE (11 February 1872–26 November 1944) was trained in medicine, yet taught himself the art of lettering, and began to teach others. He taught at the Central School of Fine Arts and Crafts, London, and subsequently at the Royal College of Art.

His most famous work is the typeface and logo for the London Underground, which bears his name. Johnston, commissioned in 1913 by Frank Pick, commercial manager of the Underground Electric Railways Company of London, who specified to Johnston that he wanted a typeface that would ensure that the Underground Group’s posters would not be mistaken for advertisements and should have “the bold simplicity of the authentic lettering of the finest periods” and belong “unmistakably to the twentieth century” Pick considered a sans-serif best suited to transport use.

Johnson Typeface and Roundel logo poster
The original Johnston typeface. It’s perfect.

This legendary brief and relationship between client and designer resulted in the most widely recognised typeface in history.

London Underground logo original poster
Edward Johnston’s design guidelines for the Underground roundel, 1925

Johnston was the first time a typeface was commissioned for a transport system.

Johnston got redesigned in the 80’s, mainly due to the advent of digital applications, but still remains the best example of a typeface created absolutely for a purpose, and will forever be one of the most recognisable uses of type design in history.

Typeface poster
Comparison of Johnston Sans, Old and New
Blue Plaque for Edward Johnston
Edward Johnston's blue plaque, 3 Hammersmith Terrace, London W6 9TS

Paul Renner

Paul Renner (9 August 1878–25 April 1956) was a German typeface designer. He is best known for designing the Futura typeface in 1927. Futura is arguable one of most successful typefaces of the 20th century, a geometric sans serif powerhouse, with a huge whiff of Bauhaus.

Futura type specimen sheet
Futura specimen book (Flickr CC licence)

Futura was designed as a contribution on the New Frankfurt-project. New Frankfurt was an affordable public housing program in Frankfurt started in 1925 and completed in 1930. It was also the name of the accompanying magazine that was published from 1926 to 1931 dedicated to international tendencies in architecture, the renewal of art, housing and education.

Futura was used in science fiction movies, most notably 2001: A Space Odyssey

2001 Movie poster
2001: A Space Odyssey Poster

You can see Futura still used heavily in the 21st Century EVERYWHERE:

CD cover using Futura typeface
Vampire Weekend: Contra (2010)
Supreme logo
Supreme Logo Futura Bold Italic

Herb Lubalin

Herbert F Lubalin (March 17, 1918 — May 24, 1981) was an American graphic designer. He designed the logo for Avant Garde magazine (1968–1971). It's brilliant.

Avant Garde logo
Avant Garde Magazine logo

Its also great example of how a logo design can be turned into a full typeface. In this case, ‘ITC Avant Garde’, designed by Herb, along with colleague Tom Carnase.

Avant Garde typeface specimen
Check out the ligatures

It's a hugely popular typeface. You may recognise the lower case letters in the adidas logo:

Adidas logo

Or its use in the Stranger Things title sequence credits:

Stranger Things Credit sequence

It’s often used as a retro sub-styling, but its uses span so far and wide.

Adrian Frutiger

Swiss typeface designer Adrian Frutiger (24 May 1928 — 10 September 2015) created three of the most popular san serif typefaces of the modern era: Univers, Frutiger and Avenir.

Univers was designed in 1957, a Neo-grotesque sans serif in the German style. Used extensively in maps and signage, and for the instructional diagrams and user interfaces for everything from Sony to Audi dashboard graphics.

London street sign
Univers Condensed is used for most of the London Street signage

Univers was also the typeface chosen by Otl Aicher for his groundbreaking work on the 1972 Munich Olympics

Avenir, French for ‘Future’ obviously influenced by Futura, was super accessible, and a more modern alternative to Helvetica. More recently the Avenir Next typeface has been used by the BBC, replacing their previous use of Gill Sans.

BBC Two logo
BBC Two logo

It’s also the Typeface used throughout the Disney+ streaming service

Disney Plus website sign up

10 typographic tips

  1. ‘When You Highlight Everything, You Highlight Nothing’ — try to practice judicious use of bold or capitals letters to highlight text or emphasise a word, as overuse can negate everything.
  2. People cant read capital letters as easy or quickly as lower case. Learn how and when to use them. Headings, yes, emphasis, judiciously, whole sentences, no
  3. Don’t use too many typefaces. Start with two, the brand, or house style , and the secondary typeface for the main body of the text. A third could possibly be used but as a mild flourish or as part of an illustration. Don’t use more than three.
  4. Establish a hierarchy. Heading, Subhead, Body etc, look at font choices and create harmony and proportion
  5. Learn how and why to align text elements to create visual balance
  6. Learn spacing. Space maintains the flow of design, and it gives strength to structure. Leave sufficient space between typographic elements, and don’t use too much or too little spacing between letters. Same with leading. It all needs to look balanced and be easy to read.
  7. Make sure there is enough contrast between the text and its background
  8. If in doubt, LEFT ALIGN text. Its the easiest to scan
  9. Test your typography on the smallest screen possible, then work upwards. If it works on mobile first then you aren’t going to have issues
  10. Form follows function. The primary goal of any text is to be read.

Well I hope you’ve enjoyed this potted history, and next time you venture into designing digital productsfor humans, consider giving a little more love to typography. It’s amazing.

Thanks for reading x

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mat Venn

Designer. Dad. Cyclist. Runner. Flâneur. Autodidact. Piano student. Writer of intelligent balderdash. Fondue enthusiast. Hopeless romantic