Type in UX/UI Design

Your constantly-updated definition of Type in UX/UI Design and collection of videos and articles
169 shares

What is Type in UX/UI Design?

Type is the appearance or style of printed text. It also refers to the process of working with text to create a legible, readable and visually appealing experience. Designers choose appropriate typefaces and use elements of design including hierarchy, alignment, spacing and more to convey their message.

Typography exists to honor content.”

— Robert Bringhurst, author of “Elements of Typographic Style”

Learn about the intricate details of type here.

Show Hide video transcript
  1. Transcript loading…
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

Types of Type

As designers, we select typefaces (a grouping of fonts including bold, regular and light) to match the context and make easy-to-read and pleasing text for users. We choose fonts that accentuate and match the spirit of our messages. For example, the Chiller font helps cast an atmosphere for the users of a horror-themed movie poster. The multitude of available fonts are variations of weights within typefaces, and the vast array of styles we can select have a long heritage.

Type classifications are a basic system for classifying typefaces devised in the 19th century. Humanist letterforms are closely related to calligraphy and hand movement, while transitional and modern typefaces are less organic. These three main groups correspond roughly to the Renaissance, Baroque and Enlightenment periods in art and literature, and modern designers have progressed with new styles based on historic characteristics. There are five basic type classifications, each showing unique forms in the anatomy of type. (Some notable characteristics appear below each subsection.)

Serif

A serif is a stroke added to the beginning or end of one of the main strokes of a letter. A typeface with serifs is called a serif typeface. Serifs can be classified as Old-Style, Transitional, Modern and Slab.

Illustration depicting the serif type classification

Serif type classifications. 1 Old-Style: Garamond, 2 Transitional: Baskerville, 3 Modern: Bodoni, 4 Slab: Clarendon.

© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

Characteristics of Serif Typefaces:

  • Old-Style

    • Have a low contrast between thick and thin strokes

    • Have a diagonal stress in the strokes

    • Have slanted serifs on lower-case ascenders

  • Transitional

    • Have a high contrast between thick and thin strokes

    • Have a medium-high x-height

    • Have vertical stress in the strokes

    • Have bracketed serifs

  • Modern (Didone, Neoclassical)

    • Have a high contrast between thick and thin strokes

    • Have a medium-high x-height

    • Have vertical stress in the strokes

    • Have bracketed serifs

  • Slab

    • Are heavy serifs with subtle differences between the stroke weight

    • Usually have minimal or no bracketing

Sans Serif

A typeface without serifs is called a sans serif typeface, from the French word “sans” that means "without." Sans serifs can be classified as Transitional, Humanist and Geometric.

Illustration depicting the sans serif type classification

Sans serif type classifications. 1 Transitional: Gill Sans, 2 Humanist: Helvetica, 3 Geometric: Futura.

© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

Characteristics of Sans Serif Typefaces:

  • Transitional

    • Have a low contrast between thick and thin strokes

    • Have vertical or no observable stress

  • Humanist

    • Have a medium contrast between thick and thin strokes

    • Have a slanted stress

  • Geometric

    • Have a low contrast between thick and thin strokes

    • Have vertical stress and circular round forms

Monospace

A typeface that displays all characters with the same width is known as Monospace

Illustration depicting the monospace type classification

Monospace type classification. 1 Monospace: Source Code Mono, 2 Monospace: Courier, 3 Monospace: Space Mono.

© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

Script

Script typefaces have a natural, handwritten feel. Scripts can be classified as Black Letter, Calligraphic and Handwriting.

Illustration depicting the script type classification

Script type classification. 1 Black Letter: Linotext, 2 Calligraphic: Mackinac 1895, 3 Handwriting: P22 FLW Midway.

© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

Characteristics of Sans Serif Typefaces:

  • Black Letter

    • Have a high contrast between thick and thin strokes

    • Are narrow with straight lines and angular curves

  • Calligraphic

    • Are replications of calligraphic styles of writing (formal)

  • Handwriting

    • Are replications of handwriting (casual)

Display (Decorative)

Display typefaces, also known as decorative, are a broad category of typefaces that do not fit into the preceding classifications. They are typically suited for large point sizes and primarily used for display.

Illustration depicting the display type classification

Display (decorative) type classification. 1 Display: Eclat, 2 Display: Bauhaus, 3 Display: Lobster.

© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

Characteristics of Display Typefaces:

  • Decorative

    • Are distinctive, eye-catching and original

Type Families and Superfamilies

In the 16th century, printers began organizing roman and italic typefaces into matched type families. The concept was formalized in the early 20th century to include styles such as bold, semibold and small caps. A traditional roman book face typically has a small family, an intimate group that comprises roman, italic, small caps, and possibly bold and semibold (each with an italic variant) styles. Sans-serif families often feature many more weights and sizes (e.g., thin, light, black, compressed and condensed). 

A superfamily comprises dozens of related fonts in multiple weights and/or widths, often with both sans-serif and serif versions. Small capitals and non-lining numerals (formerly only in serif fonts) appear in the sans-serif versions of Thesis, Scala Pro and other contemporary superfamilies. Some type families evolve over time. An exception is Univers, designed by Swiss typographer Adrian Frutiger, in 1957. Frutiger designed 21 versions of Univers, thereby conceiving an entire system of it.

Choose Your Type Wisely

Here are some helpful tips and best practices for designing with type (the art of arranging type). While these best practices are appropriate in most situations, it’s important that you always consider the cultural context of your user

  • Keep it simple; stick to two typefaces, preferably different-enough-looking ones. Try pairing a serif typeface with a sans serif.

  • Ensure it’s appropriate for the application/occasion. If in doubt, choose from Baskerville, Bodoni, Caslon, Century, Futura, Garamond, Gotham, Helvetica, Minion, Optima, Source Sans and Univers.

  • Left align your type to create a strong vertical threshold and reduce eye fatigue for users.

  • Limit your word count to 10–12 words per line of text, to further minimize eye fatigue.

  • Align groupings of text (e.g., headlines and body copy) with design elements (e.g., images and logos).

  • Skip a weight; use multiple font weights within a typeface to differentiate text, so adding contrast between your headlines, body copy and call-to-actions. 

Learn More about Type

Take our Visual Design course.

Read some great tips on type from UX Planet, here.

This Tubik blog offers helpful advice about using type to your advantage in designs.

Answer a Short Quiz to Earn a Gift

Question 1

What does 'type' refer to in design?

1 point towards your gift

Question 2

Which type classification is known for a low contrast between thick and thin strokes?

1 point towards your gift

Question 3

What is a common feature of Old-Style serif typefaces?

1 point towards your gift

Question 4

Why is the right type important for user experience in design?

1 point towards your gift

Question 5

What is a 'superfamily' in the context of typefaces?

1 point towards your gift

Better luck next time!

0 out of 5 questions answered correctly

Do you want to improve your UX / UI Design skills? Join us now

Congratulations! You did amazing

5 out of 5 questions answered correctly

You earned your gift with a perfect score! Let us send it to you.

Letter from IxDF

Check Your Inbox

We’ve emailed your gift to name@email.com.

Do you want to improve your UX / UI Design skills? Join us now

Literature on Type in UX/UI Design

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

Learn more about Type in UX/UI Design

Take a deep dive into Type in UX/UI Design 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 Type in UX/UI Design

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!

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this page.

Interaction Design Foundation - IxDF. (2021, November 4). What is Type in UX/UI Design?. Interaction Design Foundation - IxDF.

New to UX Design? We're Giving You a Free eBook!

The Basics of User Experience Design

Download our free ebook “The Basics of User Experience Design” to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
315,362 designers enjoy our newsletter—sure you don’t want to receive it?