Typography is the discipline designers use to arrange typefaces in a user interface to ensure text is legible, readable, and scalable. It must also be visually appealing to users. The right typography can enhance a product’s aesthetic, optimize user-friendliness, and contribute to brand perception.
Of the many factors that shape a website or application's user interface (UI), typography is vital. It can significantly influence a user's experience with your product. So, the way you portray text has a huge bearing on your work as a user experience (UX) designer. In fact, how long users stay on your website or app will depend largely on your typographical choices.
For example, typography is half of your message when you include written copy on your website. That’s why it’s important to keep your copy streamlined and efficient. You can think of typography as the form that carries the substance of what you want users to find and learn. What you write, how you write, and how that text looks all come together to make an impact. That makes it crucial to understand how to use typography effectively.
Typography differs from type. Type is the style or appearance of text in itself. Also, type sometimes refers to the process of working with text. Your decisions about typography in user interface design go beyond just how to select fonts, for example. There’s more involved than whether to use a sans-serif font or a serif.
Typefaces of Helvetica, Futura, Garamond, Bodoni, Univers, Gotham, Century, Caslon, Source Sans, Optima, Baskerville and Minion.
© Daniel Skrok and Interaction Design Foundation, CC BY-SA 4.0
When you pick the right typography for your UI design work, it:
Your selection of typography for your interface acts as a visual communication tool. It helps users find the information they need swiftly. It guides their eyes as they navigate and interact with your interface. That way, you can ensure that the most crucial content stands out and guides users to take actions seamlessly.
Medium uses clean, minimalist typography that is easy to read. They utilize optimal line lengths, line spacing, font sizes and font families.
© Medium, Fair Use
When you use good typography in your digital product, you prioritize readability and accessibility. This makes it easier for users to consume and navigate content, whoever and wherever they are.
SBB CFF FFS – Swiss Federal Railways – uses fonts with pristine alignments and styles, boosting readability and accessibility.
© SBB CFF FFS, Fair Use
It can help create a consistent tone throughout a website or app. This reinforces your brand identity for your target audience and makes it memorable for all users. For example, if a product team is designing their startup’s fashion app for young people, the look of the text should have a trendy feel.
Mailchimp (mailchimp.com) – Mailchimp balances playful, friendly fonts for headlines with highly legible body text. Their typography aligns with their quirky brand personality.
© Mailchimp, Fair Use
When you find that unique typography that’s right for your brand, you can help set your website or app apart from competitors. This enhances its appeal to users and improves user engagement.
The Darling Tree presents a beautifully unique and appropriate brand image also through its typography.
© The Darling Tree, Fair Use
If you’ve got your typography well thought out, it can encourage users to respond to call-to-action buttons. That will boost conversion rates and ultimately, sales.
Airbnb also uses typography to their advantage. They use minimalistic fonts and lines that are both visually appealing and easy to read.
© Airbnb, Fair Use
When you set out to pick the best and most appropriate typography, it isn’t just about good design. Typography is also a powerful tool to create an emotional connection with users. When you use the right typeface, size, and spacing, you can evoke certain feelings in your users. That is a large part of how to form an engaging experience for them. What’s more, design teams for brands all over the world understand how to leverage typography to add personality to their designs and make them stand out.
Effective typography is a blend of several elements. Here are the main ones:
Fonts are specific weights within a typeface. You choose a typeface; you use a font. If you were to select Arial as your typeface, then Arial bold, italic and regular would be your fonts. As such, a font is the distinct, stylized characteristics found within a typeface. It’s important to choose your fonts and typefaces well in your projects.
Calibri is a popular typeface with a warm and soft feel, featuring in Microsoft applications, for example.
© Free Fonts, Fair Use
These also go by the names of kerning and leading, respectively. They influence the readability of the text. When you optimize the space between letters and lines, you ensure the text doesn't appear too crowded or too sparse.
Kerning in action, tightening up the letters.
© Fabrik, Fair Use
These aspects of typography contribute to uniformity in the text. When you make them consistent across your website or app, you maintain your brand’s identity and enhance readability.
Find all the little elements of type here.
© Aelaschool, Fair Use
This is an individual element—commonly a single letter, number or punctuation mark.
This is the invisible line upon which all letters rest. You can create a grid using the baseline of your chosen type to create a harmonious layout. Learn more about grid systems here.
This is the distance between the baseline and the height of the lowercase letter “x”. If you’re working with a font that has an unusually large (or small) x-height, it could affect the entire interface—sometimes even breaking the layout.
This is a straight or curved line that creates the principal part of a letter.
This is the stroke, or foot-like element, connected to the end of the main stroke of some typefaces. Serif fonts are often more readable, as the tiny “feet” guide the readers’ eyes to the next character. Nonetheless, because of their tiny size, they may not always render well on screens.
This is a typeface without strokes or any extra elements at the bottom of a letter. Due to the lower resolution of screens, sans serifs are often preferable for digital interfaces. As technology improves and screens come equipped with better resolutions, this may no longer be a deciding factor in choosing a font.
The vertical stroke that extends upward beyond the x-height and downward beyond the baseline, respectively.
This is how text is positioned. There are 4 main alignments: left, right, centered and justified. Alignment helps designers to create a coherent composition.
This is the principle of arranging elements according to importance. Creating a strong hierarchy is paramount to helping users identify where to look first. No matter the screen size, if an interface has multiple elements, it is important to guide the user towards the most important elements of the screen. Your choice of font, its weight, size, letter spacing, alignment and surrounding white space, along with other visual design elements, work together to create this hierarchy.
Also called whitespace and negative space, this is the area between elements on a page. When you use white space properly, it can make your interface look clean and organized. That will help your design to “breathe” while it lets users find what they need to quickly and effortlessly. That seamlessness is a magic component of a great user experience.
Apple employs effective use of white space to deliver a calm and seamless experience.
© Apple, Fair Use
Here are some key principles, best practices, and examples to consider so you can optimize how users interact with your design:
Consistency in typography helps you create a seamless user experience. So:
○ Stick to a defined set of fonts and typefaces throughout your design. That’s essential also for building and maintaining trust with your users. It’s best to keep to the standard fonts rather than have ones that are overly “interesting” for users to think about.
○ Use no more than 3 different fonts on a website, and don’t have too many type sizes and styles. Two fonts that complement each other are ideal.
Georgia and Verdana complement each other; Baskerville and Impact don’t.
© Nick Babich, Fair Use
A clear typographic hierarchy guides users through the content. As with information architecture in general, this makes it easier for them to find what they're looking for. Ensure they don’t hesitate or become confused. This is essential for any product or service. So, make sure you distinctly style headers, subheaders, and body text with the best font sizes and weights to establish this hierarchy.
The New York Times exemplifies a clear hierarchy in type.
© The New York Times, Fair Use
Make the text easy to read and accessible to all users. Choose font sizes, weights, and line spacings that enhance readability. It’s best to limit the line length to 60 characters per line, or 30 to 40 per line for mobile. Also, remember how color contrast is especially important for users with visual impairments. And bear in mind, too, that “impairments” can also be temporary ones. A user may have to squint to read on a mobile phone screen on a bright sunny day. That’s a form of impairment.
Good exemplifies easily readable, accessible typography on its site.
© Good, Fair Use
Use a typeface that works well whatever its size. Your design will have to scale well across different devices, and so should the typefaces you use. Make sure the text stays legible and aesthetically pleasing whether users view it on a smartphone, tablet, or desktop. Remember too that mobile devices are behind the majority of experiences. So, envision small screen sizes and how your text looks on these.
Remember that things look different on different devices; that includes your typography.
© Adrian Bece, Fair Use
You can adjust visual contrast through color, size, or typeface variations. Use it to highlight specific messages or areas of the page, improve readability and guide user attention. However, don’t rely solely on color to convey information. Remember other factors, and this is especially important for accessibility purposes.
InVision’s home page shows a highly effective use of contrast.
© InVision, Fair Use
When you animate the copy, especially banners or headers, you can catch users' attention and increase engagement rates. However, make sure the animations are light and aesthetically pleasing to avoid distracting users.
Select a font that best reflects your brand’s values and personality. Of course, if you’re designing for an established brand, follow their style guide to preserve the brand identity.
Instagram’s simple yet stylish font is a powerful brand identifier as well as easy on the eye.
© Instagram, Fair Use
To confirm you have the best typography going in your visual design. User testing can reveal great insights about how well you’ve matched effective text to an intuitive design overall.
There are some aspects to watch out for—for example, fonts you should avoid and tips to bear in mind.
The main goal in UX and UI design is to make the content easier to read and understand. If too much is going on within the design, it can distract from the message. Therefore, strive for balance, with a view to cater to the many potential contexts involved in a user journey. Overall, remember that the right typography can make your design speak to users on more levels than one.
Take our course, The Ultimate Guide to Visual Design.
Find more in-depth insights in our UX Designer’s Guide to Typography.
Watch this highly insightful and helpful Masterclass by Ellen Lupton: How to Communicate with Typography.
Read UX/UI Tips: A guide to typography | Sarah Edwards for even more insights.
Find additional helpful considerations in this article, Typography in Design: Why Every Design Should Master Fonts and Styles.
For more inspiration, see 20 Websites with Beautiful Typography | William Craig.
Leading, in typography, refers to the vertical space between lines of text. It plays a crucial role in improving readability and aesthetics. Proper leading ensures that text is comfortably spaced, preventing it from looking cramped or too spread out. It also helps guide the reader's eye smoothly from one line to the next.
In typography, a widow refers to a single word or a short line of text that appears alone at the end of a paragraph or column. Widows disrupt the visual flow of text and can create awkward spacing.
In typography, widows and orphans are terms used to describe unwanted stray words or lines of text. The main difference between them is their position in the text.
Widows refer to the single words at the end of a paragraph.
Orphans refer to first word or line of a paragraph that appears alone at the bottom of a page or column, with the rest of the paragraph appearing on the next page.
Typography is crucial in UX design because it influences how users perceive and interact with content. Effective typography enhances readability, establishes hierarchy, and conveys the tone and personality of a design. It plays a pivotal role in creating a visually appealing and user-friendly experience, which can boost engagement and comprehension.
This video shows how important it is to choose the correct aspects of typography, including fonts and other important elements.
Typography design is the art and practice of arranging type elements to create visually appealing and effective communication. It encompasses font selection, spacing, size, color, and layout to convey information and evoke emotions in aesthetically pleasing forms. Typography is a fundamental aspect of graphic and web design. It significantly impacts user experience and brand identity on all screen sizes.
This video shows the various parts of typographical design, including the anatomy of type and font styles.
Typography in design involves selecting fonts, adjusting spacing, and arranging text to enhance readability and convey a message effectively. It establishes hierarchy, tone, and visual appeal. For example, in web design, a sans-serif font like "Helvetica" is something you can use for headings to create a modern, clean look.
For a more detailed understanding of typography, take the course, Visual Design: The Ultimate Guide.
Good typography involves choosing appropriate fonts, sizes, and spacing to ensure readability and convey the intended message effectively. It establishes hierarchy, coherence, and visual appeal. For example, a harmonious combination of fonts, such as pairing a sans-serif headline with a legible serif body text, can enhance visual contrast and readability in a good design.
Typography refers to the art and technique of arranging and designing type, encompassing various aspects like font selection, spacing, and layout. Font, on the other hand, is a specific style and design of a typeface, including variations in size, weight, and style within that typeface family. In essence, typography is the broader discipline, while font refers to the individual styles within it.
In this video, designer and educator Mia Cinelli explains the difference between typefaces and font—the components of typography.
Copyright holder: Mia Cinelli
Mackinac 1895, Bags to Riches, The Landscape of Love, What's Past is Prologue, Pandemic Parade Banners
Hide Content
Here are some highly cited research papers on typography:
Skrok, D. (2022). The UX Designer's Guide to Typography. Interaction Design Foundation. This article provides a comprehensive guide to typography in UI design, including typography terminology, the anatomy of type, and typography guidelines to keep in mind when designing websites or apps for optimal user-friendliness. It emphasizes the importance of effective typography in enhancing UX, optimizing usability, catching users’ attention, and increasing conversion rates.
Szerovay, K. (2023). Typography Study Guide for UX Designers. UX Planet. This article provides a study guide for UX designers to learn about typography, including a comprehensive resource of the basics, the anatomy of type, and why typography is important. It also lists out some of the best typography design resources to help UX designers upgrade their type skills.
Lupton, E. (2004). The Science of Typography. Typotheque. This article examines the scientific literature on typography from the late nineteenth century to the present, including research from various fields such as psychology, ergonomics, human computer interaction (HCI), and design. It takes a rigorous approach to how people respond to written words on page and screen and affirms human tolerance for typographic variation and the elasticity of the typographic system.
Kenna, H. (2015). A Practice-led Study of Design Principles for Screen Typography. UAL Research Online. This PhD thesis examines design principles for screen typography, with reference to the teachings of Emil Ruder Type. It provides a practice-led study of typography and its application to screen-based media, including the development of a set of design principles for screen typography.
Ngai, J. (2023). 7 Best Design Books on Typography. Prototypr. This article lists out the top typography design resources to help designers upgrade their type skills, including classic introductions to type, design classics, visual resources, and books on web typography. It emphasizes the power of typography to evoke the right voice, association, and even make things seem easier to understand.
Önduygu, D. C. (n.d.). Typography Is Important | An Introductory Practical Guide. This article provides an introductory practical guide to typography, including references to classic typography books such as The Elements of Typographic Style by Robert Bringhurst and Thinking With Type by Ellen Lupton. It emphasizes the importance of typography in enhancing the readability, legibility, and overall user experience of digital media.
If you're looking to learn more about typography, here are some highly recommended books that cover the topic in-depth:
"The Elements of Typographic Style" by Robert Bringhurst
This is often considered the definitive guide to typography. It covers typography principles, history, and practical advice for both print and digital design.
"Thinking with Type" by Ellen Lupton
This book provides a comprehensive overview of typography, including its history, terminology, and practical application in design. It's suitable for both beginners and experienced designers.
"Typography Workbook: A Real-World Guide to Using Type in Graphic Design" by Timothy Samara
A hands-on guide that offers exercises and design projects to help you develop your typographic skills and understanding.
"Type Matters!" by Jim Williams
This book explores the fundamental principles of typography and provides practical tips for selecting and using type effectively in design projects.
"Stop Stealing Sheep & Find Out How Type Works" by Erik Spiekermann and E.M. Ginger
A beginner-friendly book that explains typographic concepts and rules in a clear and engaging manner.
"Designing with Type: The Essential Guide to Typography" by James Craig and Irene Korol Scala
A classic text that covers typography basics, history, and application in a variety of design contexts.
"Typography Sketchbooks" by Steven Heller and Lita Talarico
This book offers a unique perspective by showcasing the sketchbooks and creative processes of various typographers and designers.
"Detail in Typography" by Jost Hochuli
A more advanced book that delves into the subtleties of typography, focusing on the details that can make a design exceptional.
"Just My Type: A Book About Fonts" by Simon Garfield
A lively and informative book that explores the history and personalities behind different fonts, making it an enjoyable read for typography enthusiasts.
"Typographic Design: Form and Communication" by Rob Carter, Sandra Maxa, and Mark Sanders
This book provides a comprehensive look at typographic design principles and their application in various design projects.
Eager to deepen your visual design skills? Dive into the following resources:
Comprehensive Course: Enroll in Visual Design: The Ultimate Guide to understand the foundational concepts and practices of visual design.
Comprehensive Course: Enroll in Mobile UX Design to understand additional dimensions where typography is an essential ingredient.
3. Masterclasses to Refine Your Craft:
How to Communicate with Typography: Discover the intricacies of using type effectively.
The Tone of Typography: A Visual Communication Guide: Understand the emotional impact of typography.
Combining these courses and masterclasses will provide both foundational knowledge and specialized expertise, positioning you for success in the field and applications of typography.
Here's the entire UX literature on Typography by the Interaction Design Foundation, collated in one place:
We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!
