Typography for User Interfaces

Then, Now & The Future

“Optimizing typography is optimizing readability, accessibility, usability(!), and overall graphic balance.”
— Oliver Reichenstein

 

 

 

 

 

The first GUIs

Xerox Alto circa 1973, running the Executive file browser:

Xerox Star workstation in 1981, introduced the first commercial GUI operating system:

Although not commercially successful, Star greatly influenced future developments, for example at Apple and Microsoft…

If you look at all these UIs closer, you realize that they’re mostly text.

Text is UI.

“Web Design is 95% Typography.”
— Oliver Reichenstein

How we read

In user interfaces, it’s common to encounter screens that are nothing more, typographically speaking, than a collection of singular words displayed in isolation from one another.
— Billy Whited

These are just collections of words.

Mostly at least.

Why does this matter?

The efficiency with which we read is a function of the amount of text available to us as we do so.

This means an isolated word that has fewer than 20 characters will be read more slowly than a word that forms part of a longer sentence.

This makes our choice of typeface extremely important.

What makes letters legible?




In 2008, Department of Psychology at the University of Victoria did empirical tests to reveal which areas of lowercase and uppercase Latin letters are most efficient for reading (full study).

 

The study revealed few interesting things.




First of all, it revealed that “line terminations” are the most important features for letter identification.




The image above shows which areas we pay most attention to when recognizing letters.




These areas of a typeface should be designed both in a generic and familiar way and also in a way that stresses letter differentiation.




In 2010, there was also another study, by Sofie Beier and Kevin Larson, that focused testing letter variations of frequently misrecognized letters (full study).




This study found that some variations were more legible than others despite the letters within a font having similar size, weight, and personality. The results showed that narrow letters benefit from being widened, and that x-height characters benefit from using more of the ascending and descending area.

Few links if you want to dive deeper into cognitive psychology:

Typeface Legibility: Towards defining familiarity

What makes letters legible?

Research on Features for Identification of Uppercase and Lowercase Letters

The Science of Word Recognition, or how I learned to stop worrying and love the bouma

Understanding Letters

What should I look for in a UI typeface?

“All text needs legible typefaces. But especially at interfaces, our eyes need fonts that cooperate rather than resist.”
— Tobias Frere-Jones

10 things:

1. Legibility

2. Modesty

3. Flexibility

4. Large x-height

5. Wide proportions

6. Loose letter spacing

7. Low stroke contrast

8. OpenType features

9. Fallback

10. Hinting

1. Legibility

Letterforms need to be clear and recognizable.

Letters with clear distinction in their forms perform better as a user interface element.

In many sans serif typefaces, including Helvetica, capital I and lowercase l are indistinguishable. As a result, these are usually bad choices for UIs.

“Helvetica sucks. It really wasn’t designed for small sizes on screens. Words like ‘milliliter’ can be very difficult to decipher.”
— Erik Spiekermann

2. Modesty

An ideal UI typeface doesn’t scream for attention, but rather goes unnoticed.

The typeface you choose should stay out of the users’ way when they try to complete their task.

3. Flexibility

A UI typeface needs to be flexible.

It should work well in various sizes and devices, on a small screen in particular.

Sans serifs that are made to work at small sizes on low resolution are preferred for interfaces.

4. Large X-Height

You want to look out for a typeface with large x-height since it’s in general easier to read and renders better in small sizes.

Don’t go too far though, since too large x-height makes the letters n and h difficult to distinguish.

5. Wide proportions

You want to look out for a typeface with wide proportions since it helps with legibility and is easier to read in small sizes.

6. Breathing room in‑between letters

The space around the letters is as important as the space within them.

Letters that are too close to each other can be hard to read.

A good rule of thumb is that letter space should be slightly smaller than the counter space inside the letterforms.




http://insideparagraphs.com

7. Low/minimal stroke contrast

Kepler has too much contrast. Arial has no contrast.

Please don’t use Arial though!

8. OpenType features




caniuse.com/#feat=font-feature

To use OpenType features in Sketch,
there is the native OS X panel:

9. Fallback

10. Hinting

“Hinting, or screen optimizing, is the process by which fonts are adjusted for maximum readability on computer monitors.”
— Peter Biľak

Hinting

TrueType font format, and therefore the instructions we’ve called “hinting,” are disappearing.

Only consider if you need to support IE8.

Good choices

Source Sans Pro:

Fira Sans:

Open Sans:

FF Meta Web Pro:

JAF Facit:

Workflow

 

Workflow

1. Start from the UI copy

2. Make sure the typeface you choose works with the actual copy

3. Test on different screens that it renders well and stays legible

4. Continue working your way up

This is my workflow.

https://arie.ls/2013/prototyping-responsive-typography/

The future(s)

Facts

“It’s tough for a typographer like me to admit it, but on the web we have to prioritise the text, and the font, independently.”
— Kenneth Ormandy

Text itself is fundamentally more important than our suggestions about how it should be typeset. (Tim Brown)

It’s a critical point of failure for typographers to grapple with, and ultimately we must accept that preparing our typographic interfaces with failure in mind is better than the alternative. (Robin Rendle)

Predictions

It’s all about sensors.

“Content, layout, behaviour, perception, brand, feel. All of those things are open for change if we have a good set of sensors.”
— Mark Boulton

Typefaces will become more aware of their surroundings and start to respond to a number of factors like viewport, resolution, type rendering engine used, ambient light, screen brightness and even the viewing distance.

I also predict that fonts’ legibility adjustments will be eventually linked to OS’s accessibility options so that typefaces can automatically start adapting to different user needs.

j.mp/marko-face-demo

typerendering.com



We’ve got work to do.

“Today’s webfonts tie our responsive sites and applications to inflexible type that doesn’t scale. As a result, our users get poor reading experiences and longer loading times from additional font weights.”
— Andrew Johnson

Meet grades

For microfine control.

Designed originally for newspapers, where ink meets paper in unpredictable ways, “grades” allow designers total control over their media — whatever that media may be.

Could we utilize these same principles, but for different purposes, in the medium(s) we work on?

 

What do we need?

A new variable font format.

 

http://bit.ly/1Sg8az0

“Typefaces will eventually gain more awareness of their internal structures and external surroundings.”
— Nick Sherman

 

 

 

 

 

 

 

Ultimately, good typography enables productivity.

Thank you!

Created by @ariel at Idean.