Typography in Interface Design by Nicky Hope

Nicky Hope

PAPER phoeniXmotion by G.F Smith TYPEFACES Maison Neue by Milieu Grotesque San Francisco by Apple Roboto by Google Helvetica Neue by Max Miedinger Gotham by Tobias Frere-Jones WEBSITE www.behance.net /nickyhope2013

CONTENTS

by Environment Operating Systems Keyboards Maps Wearables Cars Spacecraft Video gamesÂ

6 14 18 20 24 26 30

by Time The Origins Modern Uses The Future Type Gallery

6 8 32 36

INTRODUCTION

Typography in Interface Design will explore type in the context of the digital interface. It will serve as both a source of overview and analysis, and also as a simple gallery of the best and worst uses of typography in UI. Some pages will focus on a specific typeface in use, such as San Francisco, and some pages will focus on a particular environment, such as a car infotainment system. The environments covered in the book are extensive, and include phones, desktop PCs, cars, wearables, maps, video games and spacecraft. If read from cover to cover as standard, the book will take a chronological approach and start with the very first iterations of interface design and how typography was utilised within them. It will then move to more modern cases, such as how type is currently being utilised in wearable technology such as the smartwatch. As the book nears its end it will discuss potential futures for typography in digital interfaces, including the theory of Responsive Type and the argument for migrating the features of physical type to the digital environment.

THE ORIGINS

Interface designers and typographers were limited by the pixel density of early displays. The first displays had very low pixel counts by modern standards, with the standard resolution being 320x200, or CGA standard. Because of this, typographers had to figure out how to convey type and information with very little resources to play with. Whereas hundreds of pixels can now be used to construct just one letter, they in some cases had less than ten to use. This resulted in the creative use of pixels to make the text as legible as possible. The Xerox workstation mockup to the right never made it to production, but served to inspire the Apple and Microsoft GUIs that would follow it, as seen below it with the first iteration of macOS. Though later software and hardware releases brought colour screens and fancier graphics, the typography remained mostly unchanged in its pixelated and undeveloped state. In fact we would not see a truly high resolution display until the HD standards of 720p and 1080p, but even they only allowed for improved type rendering.

It still could not get close to the quality of the printed page. Screens only started to get close to physical printing with the consumer advent of iPhone 4 in 2010. Now that 2K, 4K and even 8K screens are becoming more common, digital type is able to be displayed at the same level as its printed ancestors.

INTRODUCTION

User interfaces have had type at the centre of the experience from the very beginning. Though attempts have been made to deviate from this, such as the Windows Metro UI, or Apple Watch, type is still present somewhere in the interface. There has not yet been a major interface truly free of typography, regardless of how big a part iconography plays.

MODERN Operating Systems

The image above is taken from macOS Sierra, the most recent version of software used by Mac computers. Whilst the interface itself has changed somewhat from the earlier versions, the actual user experience has remained mostly unchanged, and type remains at the centre of that experience. On the opposing page is an image of both the interface on Windows 8 and the first interface version of the Xbox One. Microsoft somewhat attempted to move away from typo-centric user interfaces in these designs, but retained type over symbols in most cases and failed to completely remove a typed, list-based app drawer. Windows 10 offers a hybrid between symbol-based and type-based interaction, with typography being by far the most critical. This would imply that type-based interfaces are here to stay, but that's not necessarily the case, at least not in all scenarios. Apple Watch

for example, offers a very effective and purely symbol-based home screen. Arguably this is only because of years of pre-conditioning in iOS, which is the source of the symbols on Apple Watch. But the argument still follows - if it's possible to condition a type-less interface in one case, then it's possible to recreate and reproduce the results. Indeed, the majority of interaction with Apple Watch is still based around typography.

MODERN Keyboards

Digital keyboards (as well as most physical keyboards) have had a history of exclusively using sans serif typefaces due to their readability and legibility at small sizes on screens. This especially applies to lower resolution displays. Helvetica and Helvetica Neue was used on all iOS devices since the introduction of iPhone in 2007, including the keyboard. This can be seen on the images to the right, which show the keyboards on iPad and iPhone. Helvetica was chosen for its neutrality and practicality. It worked on the relatively high resolution iPhone screen, and it fell in line with the full system design.

Recently Apple have migrated all iOS, macOS and watchOS software to the San Francisco typeface, which offers better readability at small sizes and lower resolutions due to its high x-height and differential letterforms.

INTRODUCTION

MODERN Maps

Words set in capital letters are less legible than in lower case when reading text, and this is why maps almost universally employ lower case type. The difference is usually attributed to the distinctive shape of lower case words, but lower case type also emphasises capital letters at the start of sentences and for proper names. Google use their proprietary typeface Roboto for Google Maps. Roboto Regular is used for regular place names, and a condensed form is used for general locations like oceans or bays to differentiate them from higher priority locations like city or town names. In most cases the type is set in white with a thick black stroke, or the opposite, to make it easily visible against any background. Ordnance Survey use the same technique, albeit with their own proprietary typeface. This technique is key for type to be clearly displayed on the foreground of a map.

MODERN Wearables

In most cases the screens on wearable technology are very small, so the typefaces used are forced to adapt to this. On smartwatches it's common for the device manufacturer to use a condensed version of their standard system typeface, such as Roboto Condensed used in the Android Wear series of watches. Roboto Condensed allows for more text to fit on the very limited screen space, and the very high x-height allows for better readability. Google also employed Roboto Condensed for their now discontinued Google Glass project. Apple designed San Francisco uniquely for use on Apple Watch, then expanded its use to all of their software.

MODERN Cars

Digital interfaces in cars exclusively use sans serif typefaces. The exact type family being used depends on the vehicle manufacturer, though it is usually a humanist or square/grotesque typeface such as Frutiger or Eurostile. In most occasions the typeface used is consistent with the corporate branding of the vehicle manufacturer, such as Porsche's use of their proprietary Porsche Design typeface and Tesla's use of Gotham. Ideally, typefaces used in car interfaces should be easily visible and readable at relatively small scales, and able to be read in a short glance. In the case of transportation, the success of typography in its role can be the difference between life and death.

According to a study carried out by Monotype, the open design of humanist typefaces is best for use in cars because of their highly visible and distinctive letterforms, which help prevent the letters from blending into each other. The large counters and tall x-heights also help generate more open shapes which are easier to distinguish at a glance. The ideal typeface for use in a car would have open shapes, generous spacing, unambiguous forms and the ability to work in varying proportions. Monotype's own offerings include the likes of Burlingame, Akko and Mayberry.

MODERN Spacecraft

Typography used in space vehicles must have very similar features to typography used in cars. Though all modern spacecraft is controlled autonomously, in emergency situations the crew might have to retake command. In these situations the crew must be able to identify and read the information almost immediately. Typography has been an important aspect in vehicle control systems since the beginning of human spaceflight, but digital interfaces are only just starting to appear with the development of the SpaceX Crew Dragon.

Digital interfaces allow for the content and design to be updated over time, though the potential for a system crash or screen failure means that some mission critical and emergency operations still have to rely on physical buttons and switches.

MODERN Video Games

A player's experience with a game can be affected by the way typography is implemented. The wrong choice of typeface can be jarring and off-putting, taking the player out of the world that was otherwise painstakingly created. Effective typography, however, can tie loose ends together, put the player at ease, and reinforce the theme and aesthetic value of the game. As in most cases, successful typography in video games is easily legible, even on small screens. If the words are difficult for the player to read then they will ultimately struggle to understand what is being communicated and become irritated with the game. Typography in games is also used to evoke and enhance the style and emotion of the game. This is evident above with Deus Ex: Mankind Divided, in which the cyber-renaissance art style is represented by the combination of serif and sans serif typefaces.

Typography can also be implemented directly into the game environment, such as with Splinter Cell: Conviction (top, overleaf). In this case the type is used as a visual signature, and to make the game feel more immersive by deconstructing the barrier between interface and game world. The colour, font, use, application and visual style of typefaces helps to create an immersive, pleasantly interactive game environment whilst simultaneously enhancing the visual language of the game as a whole.

FUTURE Responsive Typography

Now that almost every consumer screen available is HD or beyond, the issue of typography having to abide by the pixel count is no longer an issue. We can accurately recreate letterforms on a screen as well as we could on paper, though the experience is arguably not yet the same. Physical type is reactive and responsive to the environment where it is. It reacts to ambient light, it shines or glows, it's metallic or dull, it glistens, or it physically feels like something. It responds to the light of the room it's placed in, and you can move it closer or farther to scale it. Type of the future could be responsive in a similar way to physical type; it could even go further. Type in future interfaces has two potential outcomes, and these outcomes could and should exist together. Either type follows its current route, where the objective is for the type to be a means to an end, a simple, highly legible piece of information designed not to get in the way; OR, it could be a highly reactive, physical piece of design. It could utilise ambient light sensors to detect the brightness and colour of the light in the room and act accordingly, giving an experience similar to that of printed type on paper, or it could be animated or simulated in way that reflects a metallic or textured appearance. It could be manipulated, resized or destroyed at the will of the user. The distance from the viewer to the screen could influence the size of the type too, or it could reform and recolour itself based on the brightness of the screen. Whilst some type for certain just doesn't work on screens, similar to how some type just doesn't work at all. But there's nothing stopping us from bringing some of the positive experiences of physical type to the digital arena.

Type Gallery

HELVETICA NEUE

Light Reg ular Bold

Helvetica Neue was used temporarily by Apple in both iOS and macOS. It was used after Lucida Grande and before San Francisco. It received much criticism during its short reign due do its inability to scale well and the similarity of some letterforms. Erik Spiekermann said of it: "Helvetica sucks. It really wasn’t designed for small sizes on screens. Words like 'milliliter' can be very difficult to decipher."

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !¡#$%&’( )”+,./:;<=>?[~]^{|}£¢™ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !¡#$%&’( )”+,./:;<=>?[~]^{|}£¢™ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !¡#$%&’( )”+,./:;<=>?[~]^{|}£¢™ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !¡#$%&’( )”+,./:;<=>?[~]^{|}£¢™ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !¡#$%&’( )”+,./:;<=>?[~]^{|}£¢™ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !¡#$%&’( )”+,./:;<=>?[~]^{|}£¢™

ROBOTO

Light Reg ular Bold

Roboto was designed by Google for use in Android software and within the Material Design language. It has a wide usage scenario, ranging from phones to TVs and car infotainment systems. Its high x-height and condensed form make it ideal for small screen environments like phones and watches. It performs well in the space it was built for, and although Google describes it as "modern, approachable" and "emotional", some have criticised its militaryesque stern-ness. Even a recent redesign failed to make it feel friendlier.

SAN FRANCISCO

Light Reg ular Bold

San Francisco was designed in-house by Apple for Apple Watch. It was designed specifically to perform optimally in small screen environments such as a smartwatch, and it achieves this through its high x-height and differential letterforms. Whereas Helvetica performs very poorly in a digital environment because of its similar letterforms, such as i and l, San Francisco was designed specifcally to avoid this. It has been expanded from Apple Watch to both iOS and macOS.

GOTHAM

Light Reg ular Bold

Gotham was never intended for use on user interfaces, but it performs relatively well in use. Though it has a small x-height, its letterforms are all differentiated with ease and often the type is set in the heavier fonts in the family which helps to aid legibility and readability. The typeface allows for rapid reading due to its compact form. Gotham Medium is used by Tesla in the Model S and Model X.

abcdefghijklmnopqrstuvwxyz ABCDEFGHIKLMNOPRSTUVWXYZ 1234567890 !¡#$%&’( )”+,./:;<=>?[~]^{|}£¢™ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !¡#$%&’( )”+,./:;<=>?[~]^{|}£¢™ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !¡#$%&’( )”+,./:;<=>?[~]^{|}£¢™ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !¡#$%&’( )”+,./:;<=>?[~]^{|}£¢™

NOTE All technology and products depicted within belong to their respectful owners