Elements of Typography lesson

Text exists everywhere. You'll find written pieces even in products that specialize in visual content and don't include long descriptions or articles. Typography is, therefore, an important 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.

Exercise #1

Typography

Typography serves a dual purpose in design. First, it addresses visual aesthetics, how the text looks, feels, and the mood it sets. Second, it plays a functional role, ensuring that the text is readable and legible. Good typography helps users consume and understand content with ease. It sets the tone and pace, shaping how users interact with a product.

Designers make careful decisions around:

Typefaces
Point sizes
Line lengths
Line spacing
Letter spacing
Kerning

The goal is to use these elements in balance to create text that’s both visually appealing and easy to read.

Exercise #2

Typeface

A typeface refers to the type family. Each typeface is comprised of unique characters that share a common 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.

Exercise #3

Font

A font is a specific variant within a typeface family, distinguished by attributes like size, weight, slant, and italicization. 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 of that design.

Exercise #4

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.

Exercise #6

Body text

Body text, also known as body copy, is the core content in both printed and digital media. It's the text that provides the essential information, distinct from elements like headings, footnotes, or captions. Whether you're scrolling through a webpage or flipping through a magazine, the body text is what primarily engages you in the material.

This text is meticulously designed to be both readable and legible, ensuring a comfortable user experience while conveying the intended message.

Pro Tip: 12pt is the minimum size you should use for body text, specifically for text-heavy pages.

Exercise #7

Headings

A heading serves as a signpost in the landscape of text, guiding users through different sections of content. In typography, it's 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 you're navigating a website or reading a magazine, headings give you a snapshot of what each section is about, aiding in quick navigation and better comprehension.

Pro Tip: Headings can use size as well as weight and style to stand out from other content.

Exercise #8

Text block

A text block refers to 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 the context of low-fidelity wireframing, text blocks serve as placeholders, often filled with dummy text.

These placeholders help designers visualize the spatial relationships between text elements, facilitating decisions on layout and content organization. By using text blocks effectively, designers can create more readable and engaging experiences for users.

Exercise #9

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.