Typography is how text looks Typography is how text looks

In this lesson, we’ll consider what typography is and why it’s valuable.

What is typography?

Typography is how text looks, which is the cumulative result of many small decisions — like the font in use, the font size, the line length (for example, the width of a paragraph), and the line spacing. It’s the result of more subtle things too, like the style of characters chosen (some fonts offer many different versions of the same character), and the presence and arrangement of punctuation. Typography encompasses every element in a composition, from paragraphs to headings, lists, navigation, forms, and more, as well as the spaces between and around those elements.

Text blocks

_Text blocks_ are chunks of text that share a set of typographic rules, such as paragraphs in an article, lists, or image captions. The fundamental aspects of a text block are typeface, font size, line length (often called _measure_) and line height. When any one of these aspects changes, the others are affected. No particular arrangement is correct, but some look better than others. Part of practicing typography is having the patience to experiment with these arrangements. Typesetting a successful text block is a matter of balance and judgment.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

These two text blocks use the same font-size, line length, and line height. Only the font is different. When the font in use changes, other aspects of a text block need to be reevaluated.

Characters and glyphs

Characters ‘f’ and 'i’ are combined in Hypatia Sans’ 'fi’ ligature glyph. Its alternate lowercase 'a’ glyph (right) can be substituted for the default 'a’ glyph (left).

_Characters_ are unique symbols. Fonts contain _glyphs_ that represent instances of one or more characters. Some fonts offer multiple glyphs for specific characters, called _alternates_. Some fonts offer _ligatures_, which represent multiple characters and have been designed to resolve issues like spacing. Punctuation, too, can come in a variety of styles. Decisions about these individual shapes add up to produce a distinctive aesthetic flavor.

Space and composition

Negative space, or _white space_, also plays an important role in typography. The amount of white space in and around glyphs, and its proportional relationship to the positive shapes of glyphs, gives us an idea of whether the typeface feels balanced. And the same goes for the composition in its entirety — the white spaces in and around text blocks, like margins and gutters, give us an idea of compositional balance when we compare them to the positive shapes of text blocks.

Snow Drug

Cosmetics & Prescriptions

Snow Drug

Cosmetics & Prescriptions

Study these similar compositions. (Really, sit back and stare at them.) They feel different, don’t they? The second version looks better because its positive and negative spaces have been carefully managed — font sizes, letterspacing, word spacing, and margins have been adjusted.

Typography is about all of these relationships, as well as the relationships among other, non-typographic elements in a composition — things like images, videos, and even the dimensions of the composition itself.

The value of typography

Typography helps text do its job. It influences what we understand, and how we feel. We humans share a visceral connection to text, and the ways text is arranged and styled to convey meaning. With practice, we can articulate the reasons why different qualities of typography make us feel certain ways. That knowledge can help us make good design decisions and explain our decisions to others.

Texts exist for reasons (or should, anyway!), and good typographic decisions are appropriate to those reasons. Typography makes stories readable, signage decipherable, headings eye-catching, and small text legible. Typography fails if text doesn’t achieve its purpose — no matter how it looks.

Beyond functionality, how text looks does matter. All typography balances familiarity and distinctiveness: make something unique but unfamiliar, and readers may find it unpleasant; make something comfortable but indistinct, and readers may not pay attention. But within this balance are many desirable outcomes too, including comfort, authenticity, and delight. Typography affects how we feel.

It also influences our understanding. The subtle and specific design decisions that guide how typography catches our attention, helps us find our way, and welcomes us to reading are similar to film editing and camera movement, as Thomas Phinney put it. Typography not only _conveys_ the meaning of text, it _adds_ meaning to text.

Exercises

Look at typography, everywhere you notice it. (Have a look at the sites we feature on the Typekit blog for some good examples). Consider the decisions that went into what you see — the text blocks, the small details, the spaces, and the contexts. Consider the function of text. Consider how the message is conveyed or obstructed. Consider how you feel, and think about how others might feel.

Then, tell other people about what you’ve found and thought about. Sharing results in a better understanding of what we notice, and can lead to new ideas. Write about what you see, post photos — and [let us know](mailto:support@typekit.com?subject=Practice) when you do.