For most visual design, text makes up a large majority of what a user will see, whether section headings, labels for interactive elements, or good old-fashioned paragraphs. You as the designer can make many decisions that affect how that text is presented—things like which typefaces to use, what sizes to make different text elements, and how to space the text. Collectively, these kinds of text-focused design decisions are called typography.

Typography is a huge subject, and there have been many full books and courses created on the topic. This means that all we can cover here is a very broad overview of some of the most important high-level topics within the realm of typography. Consider this chapter as a starting point, then, as with any aspect of design, go out and keep learning all you can about it.

Understanding Typefaces

Possibly the most important choice you can make for any visual design is which typeface(s) to use. Not only will the typefaces carry all of the text, and therefore need to be very readable, but the style of the typeface will itself communicate much of the aesthetics and sense of identity in the design. It’s vitally important that you take time and care in selecting typefaces for a project and understanding basic terminology and classifications can be a great help in doing so.

Type Anatomy

To help us talk about type in a way that we can all understand, let’s start by defining some terms that we use to describe different parts of typefaces and letterforms.

Baseline: The baseline is the line upon which a line of text seems to sit. The bottom of most letterforms rest on the baseline.
Capline: The capline is the line defined by the tops of capital letters. If you look at a line of text, the capline will seem to be the top of the row.
X-Height / Meanline: X-height is the height of a lowercase letter X. This is a convenient measure for the tops of most lowercase letters in a typeface. We call the line implied by the x-height the meanline.
Stroke: Strokes are the lines that make up the primary shape of a letter. Some strokes are straight, like the vertical and horizontal lines that make up a capital T, and some strokes are curved, like the rounded form that makes up most of the shape of a capital G.
Ascender: An ascender is the part of some lowercase letters that sticks up above the meanline. Think of the hook at the top of a lowercase F or the stroke that sticks up above the bowl of a lowercase B.
Descender: The opposite of an ascender, a descender is the part of some lowercase letters that hangs down below the baseline. Think of the tail on a lowercase Y or the hook at the bottom of a lowercase G.

Basic Classifications

There are many ways to classify different typefaces, but here we’ll focus on some of the most broad and general categories.

Serif: Serif typefaces have little “feet” and “flags” at the ends of many of the strokes. (Those feet and flags are the serifs.) Common examples are Garamond, Times New Roman, Baskerville, and many others. Serif typefaces are often thought of as more traditional or formal, but there is a great deal of variation within the category, and many casual, fun, and whimsical serif typefaces can be found.
Sans Serif: Sans serif typefaces have more minimal letterforms that don’t include serifs at the ends of the strokes. (The word sans is French for “without”, so sans serif letters are without serifs.) Common examples include Helvetica, Arial, Proxima Nova, Gotham, and countless others. Sans serif typefaces are often thought of as being more modern, clean, and minimal. But, as with serif typefaces, there is an almost endless amount of variation within the category.
Display: Display typefaces are any typefaces that are too decorative, too intricate, or otherwise too unreadable to be used for longform body copy.

Let’s stop and think about that last sentence for a moment. Because the purpose of text is to be read and communicate meaning, it’s important to always consider how easy it will be for a viewer to read it. And this is especially important for full paragraphs or other forms of body copy.

This doesn’t mean that typefaces that wouldn’t make good body copy should never be used; it just means that they should only be used in small amounts and at larger sizes, such as for headings or big attention-getting text.

Weights and Styles

You’ve probably noticed before that many typefaces include bold and italic versions. Let’s take a look at those variations in a little bit more detail.

When you choose a bold variation of a typeface, you are using a version of that same typeface that has thicker strokes than the regular version. When different variations of a typeface have different stroke thicknesses, we call this weight. What you might not know is that many typefaces have more than just the two regular and bold weights. Some typefaces have a wide selection of weights for you to use, from very light to very thick. (There’s not much consistency as to how different typefaces name their weights, so one typeface might call the thinnest weight something like “slim” and another might call it “feather”.) On the other hand, some typefaces only have one weight available and don’t even offer a bold, so it’s important to consider what weights a typeface offers when selecting it.

Italic variations of a typeface usually have a bit of a rightward slant and often more curvilinear or flowing forms. It’s important to note that italics are carefully crafted by a typeface’s designer and far more goes into them beyond simply skewing the letterforms, so don’t assume that you can create your own italics in your design software by tilting a regular version of a typeface. Many typefaces have an italic version of each available weight, but not all typefaces offer italics. That makes their availability another important consideration when selecting type.

Choosing Typefaces

As mentioned earlier, the choice of which typeface(s) to use for a project is one of the most important design decisions you will make. That means you should invest plenty of time and thought in the decision. Here are some of the factors to keep in mind.

How Many Typefaces Do You Need?

You never really need more than one typeface family as long as there are enough weights and styles available. In fact, many great apps, websites, and other projects look fantastic with just one typeface used throughout.

But sometimes you want to switch things up, or you need more variation than is present within a single family. In that case, it’s fine to use a secondary typeface—often a display typeface—as an accent or supplement to your primary typeface. Indeed, sometimes the combination of two typefaces with different aesthetics can create added meaning in the dialog between the two.

It’s rarely necessary to use more than two typeface families in a single project, and I generally don’t recommend doing so, especially for beginning designers. Too many typefaces can lead to the design feeling inconsistent, chaotic, and overwhelming.

Aesthetics

You want to choose typefaces that feel right and communicate the right message about who your organization is. This can apply broadly to whole categories of type (maybe don’t choose a jagged death metal typeface for a kindergarten), but it’s also important to take into account the subtle messages sent by small details of individual typefaces within a category. So be sure to look carefully and consider multiple similar typefaces to assess what messages they send.

Body Copy versus Display Type

For type that will include longer amounts of writing (body copy) or be shown at smaller sizes, it’s incredibly important to choose typefaces that are highly legible and readable. Usually, a straightforward serif or sans serif typeface with an even rhythm, medium x-height, and familiar shapes is best.

This means that for body copy you should exclude anything that is decorative, unusual, or has extremely thick or thin strokes. These kinds of typefaces are best reserved for display purposes. Display typefaces can add a lot of flavor and uniqueness to a design but should be used only in small amounts and at large sizes, such as for headings or attention-grabbing text.

Readable Body Copy

Since we know how important it is for body copy to be very easy to read, let’s take a closer look at some of the factors that affect readability.

Line Length

Most of have done a lot of writing in word processor documents and are used to seeing text formatted in that standard way. But from a typographic point of view, the lines of text are way too long! Consider that when reading a paragraph, the eye must travel from left to right to the end of one line of text and then back from left to right to find the start of the next line. The wider the width of the paragraph, the longer the eye has to travel to continue reading. This can lead to interruptions of the reading flow, or, worse yet, the eye can get lost or distracted during that long journey.

This means that body copy line lengths (also known as the measure by designers) should be relatively short. But not too short, because it would also be uncomfortable to read text with just a few words per line. It’s generally agreed by designers (and research seems to support this) that the ideal line length for standard body copy is between 45–75 characters per line. This is generally about 30% shorter than the width usually seen in a standard word processor document.

Leading

Another important factor in the readability of text is how much space is between the lines vertically, which is called leading. If there is too much leading, the lines look far apart and feel like they don’t go together. If there is too little leading, the lines are very close together and can feel crowded and claustrophobic. The trick is to find the perfect amount right in the middle.

As a rule of thumb, the ideal leading amount for body copy is usually somewhere around 1.5 times the size of the type. So if the text is set to 20px, the leading would look right at around 30px. Depending on factors like the typeface being used, the line length, and the text size, the actual leading might need to be a bit more or a bit less, but 1.5 times the type size is generally a good starting point.

While we’re mostly talking about body copy in this part of the chapter, we’ll take a quick digression to mention that larger type like headings usually needs somewhat tighter leading than body copy. Often for headings you might go down to 1.2 times the text size or even lower.

Alignment

For English and other western languages, left-aligned text is most common for body copy and with good reason. Similar to what we discussed in the section on line length, when the eye moves from one line of text to the next, it has to briefly search for the start of the new line. And since we read from left-to-right, if all lines of text start with a consistent left alignment, it is much easier for the eye to find each one because it knows where to look. With center or right alignment, on the other hand, each line starts in a slightly different place and the eye has to do more searching.

This doesn’t mean you should never use center or right alignment, but they should be restricted to relatively short blocks of text and definitely avoided for longform reading of any kind.

One other kind of text alignment is justified, which gives a flush line of text on both the left and the right sides of the paragraph. Justified text can work great in print media, but for a variety of reasons it is much less reliable in digital media. I recommend that you avoid justified alignment altogether when designing for screens.

Paragraphs

Looking at a large amount of text can be overwhelming, especially when it is one big undifferentiated block. That’s why we use paragraphs. They break up the text into smaller, more bite-sized chunks that make it easier to take it one little bit at a time. And making sure that text is broken up like this can help ensure that the text is scannable for users skimming through the content in search of something specific.

One of the biggest choices we designers have to make is how to show where one paragraph ends and a new one begins. There are two common ways to do this: by indenting the first line of each paragraph or by adding extra space between paragraphs. Either method is acceptable in digital media, though using space between paragraphs is much more common.

There are two rules that will help you with paragraph breaks: Make sure you have clear paragraph breaks in the first place. And choose either indents or space between as your paragraph indicators; don’t use both. Both is visual overkill and can actually be a little confusing to the eye.

Text Color and Contrast

Use sufficient contrast (by having different lightness)
- Contrast checker
- Avoid pure black on pure white in most cases - go for off white or off-black

Sections Coming Soon

Hierarchy
- What happens when everything is trying to be important (when everything is important, nothing is important)
- Flat hierarchy
- Size
- Spacing
- Color
- Weight
- Italics
- Typeface
- Decoration - law of proximity will make the text seem related to nearby decoration
- Case
- Combinations
  - Don’t always have to cook with all the spices at once
- Golden rule: The thing that is different stands out as important
Typographic scales:
- Don’t decide in a one-off way about sizes. It leads to inconsistency.
- Use a consistent body copy size throughout the page. The law of similarity will make the design feel unified.
- Use a consistent scale and styles for headings
- Your software probably has a way to save and name styles for reuse
Make things scannable by including lots of headings and visual anchors (mini-focal points) and keeping the text in small digestible chunks
- Users don’t read everything, they scan, jumping from item to item
Mixing left aligned and center aligned text is always tricky. I recommend matching them.
Be sure to check your headings with multiple lines of text to make sure you don’t need to adjust the leading
Care about every detail, including punctuation, spelling, and writing
Icons
- Consistent set and style
- Gel with typefaces
- Keep it simple (and mostly single color)
- Use vectors
- Shapes are learnable, but labels help. Few are truly universally understood