Your constantly-updated definition of Type in UX/UI Design and
collection of videos and articles
169shares
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.
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.
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.
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.
Script
Script typefaces have a natural, handwritten feel. Scripts can be classified as Black Letter, Calligraphic and Handwriting.
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.
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 to10–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.
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.
Typography can make or break the success of a site or app. It’s a cornerstone of UX design; more than 90% of online info
811 shares
2 years ago
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.