Typography and Designing Text

So... we've learned about several tags for marking up text, but let's turn our attention to styling it, and examine the variety of ways that control how text is displayed.

<aside> <img src="/icons/list_purple.svg" alt="/icons/list_purple.svg" width="40px" />

Learning objectives

By the end of this chapter you will:

• understand the fundamental concepts of typography
• be familiar with the terminology used to describe type
• be able to design a simple font style-guide
• apply typographic principles by expressing typographic styles in the browser using CSS. </aside>

Typography

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. It involves the selection of typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space within letter pairs or individual characters (kerning).

Let's start out by introducing some of the fundamental concepts of typography:

1. Typeface vs. Font: A typeface is the design of the lettering that can include variations in size, weight (e.g., bold), and style (e.g., italic). A font is a specific version of a typeface in a particular size and weight. For example, Arial is a typeface, while Arial Bold 12pt is a font.
2. Hierarchy: Typographic hierarchy refers to a system for organising type, that establishes an order of importance within the data, allowing the reader to easily find what they are looking for and navigate the content. (Consider the different sizes of h1—h6 heading tags for example.) This can be achieved through variations in size, weight, colour, and placement.
3. Alignment: Text alignment refers to how text is positioned within a column or along a line. Common alignments include left, right, centred, and justified. Each alignment serves a different purpose and can affect the readability and overall appearance of the text.
4. Leading: Leading (pronounced like the metal "lead") refers to the vertical space between lines of text. Proper leading can greatly improve readability by giving the text appropriate 'breathing room'. Too much leading (eg. > 2× or 'double-spacing') and it can be difficult to see the connection between the lines forming the block of text. Too little and the text can appear cramped, dense, or difficult to read. (Sometimes, type designers use this for effect.) Appropriate leading finds a healthy balance between the two.
5. Kerning and Tracking: Kerning is the adjustment of space between two specific characters, which helps to create a more visually pleasing and readable text. Tracking, or letter-spacing, affects the spacing across a whole word or paragraph, which can alter the text density and its legibility.
6. Legibility and Readability: Legibility refers to how easily individual characters can be distinguished from one another, while readability refers to how easily words and blocks of text can be read. A well-designed text will be both legible and readable.
7. Contrast: Contrast in typography can refer to the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background. In terms of text, it can refer both to colour contrast between the text and background, as well as the contrast in styles between different parts of the text to create visual hierarchy.
8. Colour: Colour can similarly play a significant role in typography, affecting both the aesthetics and the readability of the text. It's important to ensure high contrast between the text and its background to maintain readability.
9. Grids and Composition: Grids are often used in typographic design to create order and consistency within a layout. They help in aligning elements, maintaining spatial relationships, and creating a cohesive overall design. (We're explore this aspect of typography in upcoming chapters when we start thinking about layout.)

There are also numerous terms that describe aspects of character glyphs, highlighted in the image below:

Typeface Anatomy — From The Foundations of Typography: Session 1 — Type 101

By understanding and applying these fundamentals, a designer can create text that is not only beautiful but also functional and easy to read.