Typography

Your constantly-updated definition of Typography and collection of videos and articles
455 shares

What is Typography?

‍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.

Show Hide video transcript
  1. Transcript loading...

How Important is Typography in UX Design and Product Design?

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. 

A screenshot showing 12 different typefaces.

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:

Communicates Essential Information

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. 

Screenshot of Medium Home Page

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

Enhances Readability and Accessibility

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.

Screenshot of Swiss Federal Railways Page

SBB CFF FFS – Swiss Federal Railways – uses fonts with pristine alignments and styles, boosting readability and accessibility.

© SBB CFF FFS, Fair Use

Establishes a Consistent Brand Tone

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.

Screenshot of Mailchimp Home Page

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

Differentiates the Product

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.

Screenshot of The Darling Tree Home Page

The Darling Tree presents a beautifully unique and appropriate brand image also through its typography.

© The Darling Tree, Fair Use

Drives Conversion

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.

Screenshot of Airbnb Home Page

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

What are Key Elements of Typography?

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 and Typefaces

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.

Screenshot of Calibri Font Demonstration Page

Calibri is a popular typeface with a warm and soft feel, featuring in Microsoft applications, for example.

© Free Fonts, Fair Use

Letter and Line Spacing

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.

Screenshot of Type Shown Before And After Kerning

Kerning in action, tightening up the letters.

© Fabrik, Fair Use

Font Weight, Height, and Size

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.

Screenshot of Text Showing Various Parts of Type

Find all the little elements of type here.

© Aelaschool, Fair Use

Character

This is an individual element—commonly a single letter, number or punctuation mark.

Baseline

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.

x-height

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.

Stroke

This is a straight or curved line that creates the principal part of a letter.

Serif

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.

Sans serif

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.

Ascender and descender

The vertical stroke that extends upward beyond the x-height and downward beyond the baseline, respectively.

Alignment

This is how text is positioned. There are 4 main alignments: left, right, centered and justified. Alignment helps designers to create a coherent composition.

Hierarchy

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.  

White Space

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.

Screenshot of Apple Support Page

Apple employs effective use of white space to deliver a calm and seamless experience.

© Apple, Fair Use

How to Use Typography Best?

Here are some key principles, best practices, and examples to consider so you can optimize how users interact with your design:

Maintain Consistency

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.

Screenshot of Two Sets of Font Pairings

Georgia and Verdana complement each other; Baskerville and Impact don’t.

© Nick Babich, Fair Use

Establish a Clear Hierarchy

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.

Screenshot of The NY Times Home Page

The New York Times exemplifies a clear hierarchy in type.

© The New York Times, Fair Use

Ensure Readability and Accessibility

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.

Screenshot of Good Home Page

Good exemplifies easily readable, accessible typography on its site.

© Good, Fair Use

Use Responsive Typography

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.

Screenshot Showing Three Devices With Various Formats of Same Type

Remember that things look different on different devices; that includes your typography.

© Adrian Bece, Fair Use

Use Visual Contrast in Typography

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.

Screenshot of InVision Home Page

InVision’s home page shows a highly effective use of contrast.

© InVision, Fair Use

Consider the Role of Animated Copy in Typography

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. 

Use a font that reflects your brand identity

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.

Screenshot of Instagram Home Page

Instagram’s simple yet stylish font is a powerful brand identifier as well as easy on the eye.

© Instagram, Fair Use

Do your user research and usability testing

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.

Remember that typography should not overpower the content

There are some aspects to watch out for—for example, fonts you should avoid and tips to bear in mind.

 

Show Hide video transcript
  1. Transcript loading...

 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. 

Learn More about Typography

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.

Questions related to Typography

What is leading in typography?

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.

What is a widow in typography?

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.

What is the difference between widows and orphans in typography?

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.

Why is typography important?

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.

Show Hide video transcript
  1. Transcript loading...

This video shows how important it is to choose the correct aspects of typography, including fonts and other important elements.

What is typography design?

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.

Show Hide video transcript
  1. Transcript loading...

This video shows the various parts of typographical design, including the anatomy of type and font styles.

How do you use typography in design?

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.

What makes good typography?

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.

What is typography vs font?

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. 

Video copyright info


Copyright holder:
Mia Cinelli

Mackinac 1895, Bags to Riches, The Landscape of Love, What's Past is Prologue, Pandemic Parade Banners

Hide Content

Show Hide video transcript
  1. Transcript loading...

What some some highly cited research on the subject of Typography?

Here are some highly cited research papers on typography:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. Ö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.

What are some highly recommended books about typography?

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.

Where to learn more about typography?

Eager to deepen your visual design skills? Dive into the following resources:

  1. Comprehensive Course: Enroll in Visual Design: The Ultimate Guide to understand the foundational concepts and practices of visual design.

  2. Comprehensive Course: Enroll in Mobile UX Design to understand additional dimensions where typography is an essential ingredient. 

3. Masterclasses to Refine Your Craft:

Combining these courses and masterclasses will provide both foundational knowledge and specialized expertise, positioning you for success in the field and applications of typography.

Literature on Typography

Here’s the entire UX literature on Typography by the Interaction Design Foundation, collated in one place:

Learn more about Typography

Take a deep dive into Typography with our course Visual Design: The Ultimate Guide .

In this course, you will gain a holistic understanding of visual design and increase your knowledge of visual principles, color theory, typography, grid systems and history. You’ll also learn why visual design is so important, how history influences the present, and practical applications to improve your own work. These insights will help you to achieve the best possible user experience.

In the first lesson, you’ll learn the difference between visual design elements and visual design principles. You’ll also learn how to effectively use visual design elements and principles by deconstructing several well-known designs. 

In the second lesson, you’ll learn about the science and importance of color. You’ll gain a better understanding of color modes, color schemes and color systems. You’ll also learn how to confidently use color by understanding its cultural symbolism and context of use. 

In the third lesson, you’ll learn best practices for designing with type and how to effectively use type for communication. We’ll provide you with a basic understanding of the anatomy of type, type classifications, type styles and typographic terms. You’ll also learn practical tips for selecting a typeface, when to mix typefaces and how to talk type with fellow designers. 

In the final lesson, you’ll learn about grid systems and their importance in providing structure within design. You’ll also learn about the types of grid systems and how to effectively use grids to improve your work.

You’ll be taught by some of the world’s leading experts. The experts we’ve handpicked for you are the Vignelli Distinguished Professor of Design Emeritus at RIT R. Roger Remington, author of “American Modernism: Graphic Design, 1920 to 1960”; Co-founder of The Book Doctors Arielle Eckstut and leading color consultant Joann Eckstut, co-authors of “What Is Color?” and “The Secret Language of Color”; Award-winning designer and educator Mia Cinelli, TEDx speaker of “The Power of Typography”; Betty Cooke and William O. Steinmetz Design Chair at MICA Ellen Lupton, author of “Thinking with Type”; Chair of the Graphic + Interactive communication department at the Ringling School of Art and Design Kimberly Elam, author of "Grid Systems: Principles of Organizing Type.”

Throughout the course, we’ll supply you with lots of templates and step-by-step guides so you can go right out and use what you learn in your everyday practice.

In the “Build Your Portfolio Project: Redesign,” you’ll find a series of fun exercises that build upon one another and cover the visual design topics discussed. If you want to complete these optional exercises, you will get hands-on experience with the methods you learn and in the process you’ll create a case study for your portfolio which you can show your future employer or freelance customers.

You can also learn with your fellow course-takers and use the discussion forums to get feedback and inspire other people who are learning alongside you. You and your fellow course-takers have a huge knowledge and experience base between you, so we think you should take advantage of it whenever possible.

You earn a verifiable and industry-trusted Course Certificate once you’ve completed the course. You can highlight it on your resume, your LinkedIn profile or your website.

All open-source articles on Typography

Please check the value and try again.

Open Access - Link to us!

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!