In an ever-changing discipline, it can be hard to keep abreast of everything as a user experience designer. It’s a challenge. An understanding of core design principles, however, will stand the test of time and serve you well throughout your career. This second article in the Universal Principles of User Experience Design series provides an overview of language and typography.
Language and typography
With a deep understanding of visual grammar mastered, it’s important to consider the underlying fabric of what we design, which is — more often than not — language, given form through typography. Working hand-in-hand, both are incredibly important and are supplemented by other forms of content: illustrations, photography, and video, for example.
Language – the words we choose to communicate – matters, and it’s important we give it thought as designers. When embarking upon any new project, it’s important to start by defining the language that underpins your design, as it will shape your users’ perceptions. Ask yourself: What’s the message? Then find the right words to communicate that message.
Whether you’re working with external clients as a consultant, internal project stakeholders as an in-house designer, or building a digital product, language matters. Before embarking on any new project, set aside some time to spend with your stakeholders to help them define their message. I follow a systematic process designed to clearly define my clients’ core message:
- Who are you? (As an individual or a business.)
- What are your values?
- What are your mission and purpose?
- What do you hope to achieve?
- How will we know if you’re successful?
With the answers to these questions defined, it’s important to start to define the language that will underpin the project. The language that you choose shapes your design and needs to be considered from the perspective of both macrocopy and microcopy.
At a macro level, words can help set a tone and voice, as well as establish and reinforce the personality of a brand. At a micro level, words can satisfy a functional requirement by aiding and improving design interactions. At both levels – macro and micro – words can, when used in a considered manner as a part of the design process (indeed as another core design element), aid and improve the user experience, leaving users delighted and happy.
Hiut Denim’s macrocopy (left) tells the story of the brand: “Do One Thing Well,” “We make the best jeans we can.” The company’s microcopy (right) is focused on helping the user satisfy a goal — buy the right pair of jeans — whilst still communicating the brand: “Our regular cut is a true classic…’, “If you wear turn-ups, buy the next size up….”One way of defining macrocopy is to develop a “brand dictionary”: a palette of words that defines the brand you’re working on. This helps to ensure that the words you use throughout a project are clear, concise, and consistent — reducing confusion.
Consider two different car brands: smart and Mercedes. Smart’s brand dictionary might include: agile, expressive, dynamic, fun, and friendly. Mercedes’ brand dictionary might include: precision, luxury, stylish, engineered, and efficient. Mercedes and smart are owned by the same parent company, but both have very different brand dictionaries because both are targeted at very different audiences.
With your macrocopy defined, it’s important to focus on functional microcopy: the words you use to ease interactions. Microcopy should reflect your brand’s values but is more likely to be consistent from one project to another. Everyone understands what “Add to basket” means, so don’t confuse your users by inventing your own terminology.
Language looks set to increase in importance, as we design for the ‘invisible interfaces’ that lie ahead of us — Amazon’s Echo, Google’s Home, and Apple’s HomePod — conversational interfaces that rely on language heavily. In fact, John Maeda’s influential 2017 Design in Tech Report lists writing as a UX “unicorn skill,” quoting Nicole Fenton who stresses the importance of considering words as material. Language, however, is only half of the equation; typography is also critical to amplify the language you have chosen.
As Robert Bringhurst (the author of The Elements of Typographic Style, widely accepted as “the bible of typography”) states: “Typography is the craft of endowing human language with a durable visual form.” Put another way, typography is clothing for words. Just as we can dress smartly or dress down, the typographic choices we make fundamentally change how our users interpret the language we’ve crafted.
When our medium is largely focused on language, it stands to reason that an understanding of typography is critical.
[When] 95% of the information on the web is written language, it is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: typography.
Oliver Reichenstein, iA
Just as we consider language at the macro and micro levels, we need to consider typography in a similar manner. Type needs to be designed at the macro page-level, considering the overall structure of the page and the typographic hierarchy; and at the micro text-level, considering the details, including leading and spacing.
The Oak Studios’ website (left) demonstrates a clear typographic hierarchy using scale — and a simple two-color palette — to guide the reader around the page. Brandtpunt focuses on typographic details, including bold issue numbers (259, 260…) to liven up the page.Typography can, of course, be used for decorative effect, but – equally, and more importantly – it can be used to improve UX. With your language clearly defined it’s important to consider how typography can be used to:
- optimize legibility, through the appropriate choices of typefaces,
- improve accessibility, by considering contrast between the foreground and background colors, and
- improve usability, through a considered typographic hierarchy.
Typekit Practice has an excellent series of resources — lessons, references, and even a library — that cover a wide range of typographic fundamentals. Typekit Practice’s lessons include: selecting typefaces for body text; advice on OpenType features; and — my favorite — a lovely lesson on using shades for eye-catching emphasis.
There is a wealth of other typographic resources on- and offline. Hoefler and Co.’s informative Discover.typography is a fantastic web-based resource, as is Typewolf, which offers inspiration, guides, and resources. Ellen Lupton’s book Thinking with Type is also essential reading, it’s an excellent primer for all things typographic. Lastly, Bringhurst’s book — mentioned above — deserves pride of place on every self-respecting designer’s book desk.
Language and typography: Case studies
When used hand-in-hand, language and typography can deliver more than the sum of their parts, enhancing the user experience. It’s critical to consider both as integral parts of the design process.
In an ideal world, it would be preferable to employ the services of a content designer and a typographer to assist the team. Would that we all lived in that ideal world. In the real world, developing a sound understanding of language and typography will improve your design considerably.
There are many examples of content-driven websites we can learn from. If we break apart a couple, we’ll see how language and typography can be used to deliver memorable user experiences.
GOV.UK(left) showcases the power of well-chosen words. It’s a great example of a “language-first” website; freelance digital product designer Rakesh Krishnan’s portfolio site (right) showcases the potential of well-chosen type.GOV.UK is a great example of a website that is, first and foremost, language and content-focused. A winner of a coveted D&AD Black Pencil, the website has been celebrated for its stated intent to create a “single domain for government.” As D&AD put it, the website has rewritten information and services to be “simpler, clearer and faster, focusing on the needs of users rather than the needs of government.”
As designers, we can learn a great deal from GOV.UK’s approach, which emphasizes the importance of content design, a term — which it’s fair to say — the team at GOV.UK, led by Sarah Richards, helped to position front and center. The design, which follows the UK government design principles, is focused on:
- starting with user needs, placing a heavy emphasis on identifying what those needs are and delivering them,
- focusing on clear and consistent language, ensuring users become familiar with the services offered, and
- ensuring the site is as simple to use as possible (a difficult task when dealing with complex information).
Just as important as the language we use are the choices of typefaces we make. Rakesh Krishnan’s portfolio site, Rakesh, is a lovely example of a site that combines a minimal color palette with strong — yet restrained — typography. Its typography-focused approach offers lessons aplenty:
- typographic pairings, a bold sans-serif typeface for headings catches the eye, coupled with a classic serif for body copy helps aid legibility,
- a strong typographic hierarchy helps the reader find their way around the page, and
- a contrasting bright red color accent offsets the largely monographic color palette, adding a little brightness to the page.
When a considerable proportion of the information on the web is comprised of words, an understanding of language and typography is essential to improve user experience. As designers, our role is to communicate as clearly as possible and develop an understanding of these principles, which can enhance our designs considerably.
Tips and techniques
- Spend some time developing a brand dictionary at the beginning of the project. This ensures the words you choose communicate the brand clearly and consistently. This brand dictionary acts as a guide for both macrocopy and microcopy.
- Ensure every page or screen has a clear call to action (CTA). Ask yourself, “What is the user trying to achieve?” and design with that in mind. Use clear and concise language — you’ll improve your design considerably, and your users will be a great deal happier.Even something as simple as a call to action button can be broken down into components and designed, as Aurélio Jota’s excellent article, The Anatomy of a CTA Button in 2017, demonstrates in detail.
- When considering typography, less is more. Pairing typefaces isn’t easy. If you’re just starting out, find a ‘superfamily’ and build around that.Consider contrasting typefaces for headings and body copy. Generally, serif typefaces work well for body copy, which can be contrasted with sans-serif typefaces for headings and sub-headings.
Continue reading part three of Universal Principles of User Experience Design: Narrative Design.