Text exists everywhere. You’ll find written pieces even in products specializing in visual content and not including long descriptions or articles. Typography is, therefore, an essential component of design.
Like any other field, typography has a great variety of terms unfamiliar to non-designers (sometimes, even to designers!). To speak the same language with your designers and copywriters, you need to know the difference between a typeface and font and not confuse a heading with the body text.
Typography serves a dual purpose in design. First, it addresses the visual aesthetics — how the text looks, feels, and the ambiance it creates. Second, it has a functional role — ensuring the text is easily readable and legible. Good typography ensures that users can effortlessly consume and understand the content. It sets the tone and pace, influencing how users interact with a product. The objective is to use these elements harmoniously to create text that looks appealing and is user-friendly.
Tip! Learn the history, concepts, and best practices of working with typography in design by taking Uxcel’s Typography course.
Typeface
A typeface refers to the type family. Each typeface comprises unique characters with a standard design, including letters, numbers, punctuation marks, and symbols. Don’t confuse a typeface with a font — fonts are variations of a typeface.
You may select Roboto as the primary typeface for a project, but you’d use various fonts like 12pt Roboto Regular and 9pt Roboto Bold. (See → Anatomy of a typeface)
Font
A font is a specific variant within a typeface family, distinguished by size, weight, slant, and italicization attributes. Helvetica is a well-known typeface, while 12pt Helvetica Bold and 14pt Helvetica Light are its fonts.
It’s common for people to use the terms “font” and “typeface” interchangeably outside of professional design circles. However, in the realm of typography, they serve distinct roles. A typeface is the overarching design of letterforms, whereas a font is a particular implementation.
Font size
Font size is the height of a typeface. Let’s first define typographical terms like ascender and descender before moving on to a more detailed explanation.
- Ascender is the vertical stroke on lowercase letters (b, d, f, h, k, l, t) extending above the typeface’s x-height.
- Descender is the part of a lowercase letter that extends below the baseline.
Font size equals the distance between the ascender height’s top and the descender’s bottom. Designers usually use points (8, 10, 12, etc.) to measure font size, where 1 point equals 1/72 inch or 0.35 mm.
Font weight
Font weight refers to the thickness of the stroke in a given typeface. It can vary from thin, sometimes referred to as hairline or light, to much heavier weights like black or bold. The choice of font-weight plays a significant role in conveying emphasis, mood, and readability in a design. While regular and bold are the most frequently used weights, many typefaces offer a range of options to give designers flexibility in creating a balanced and engaging user interface.
Body text
Body text, also known as body copy, is the core content in both printed and digital media. The text provides the essential information, distinct from headings, footnotes, or captions. Whether scrolling through a webpage or a magazine, the body text primarily engages you in the material.
This text is meticulously designed to be readable and legible, ensuring a comfortable user experience while conveying the intended message.
Tip! 12 pt is the minimum size for body text, specifically for text-heavy pages.
Headings
A heading serves as a signpost in the text landscape, guiding users through different content sections. Typography is a critical component that establishes a hierarchy, making it easier for users to scan and understand the layout. Typically more prominent than body text, headings appear in various sizes and styles, depending on their level of importance.
Whether navigating a website or reading a magazine, headings give you a snapshot of each section, aiding in quick navigation and better comprehension.
Tip! Headings can use size, weight, and style to stand out from other content.
Text block
A text block is a cluster of text elements, like paragraphs or blockquotes, arranged together to form a visually coherent unit. This grouping typically assumes a rectangular shape, hence the term “block.” In low-fidelity wireframing, text blocks are placeholders, often filled with dummy text.
These placeholders help designers visualize the spatial relationships between text elements, facilitating layout and content organization decisions. Designers can create more readable and engaging user experiences using text blocks effectively.
Lorem ipsum
Lorem Ipsum is the placeholder or filler text used in design when creating content. It originally comes from Finibus bonorum et malorum, the work of Roman statesman and philosopher Cicero. But the original Latin text was altered and now represents a nonsensical and improper version of Latin.
Generally, Lorem ipsum is a short-term fix before designers replace it with the actual copy. Such dummy text is helpful in the very early stages of wireframing, entry-level planning, and brainstorming ideas.
Microcopy
Microcopy refers to short bits of copy that guide users through the product and help them achieve their goals. Some examples of microcopy include:
Microcopy helps guide, engage, and cue users into products’ functionality. It is responsible for shaping a significant part of the user experience.
Tip! Learn how to create a user-focused microcopy in Uxcel’s UX Writing course.