What even is typography?

One of the most important parts of design is typography.

There's just no way around it.

If you want to communicate visually, you're going to need words on display.

How those words are rendered conveys meaning to the viewer, just like the words themselves.

The presentation, the legibility, the position. All of it is part of the practice of typography.

I like to break everything down into smaller pieces.

It helps me learn and remember best practices, and it gives me a good framework to build on.

So when someone says "I'm good with typography" or "I'm not very good with typography," that's a little hard to understand.

What even is typography?

Typography is the art and practice of arranging type to make written language legible, readable, and visually appealing.

It involves selecting and arranging typefaces, sizes, weights, spacing, alignment, and hierarchy to communicate effectively.

That's still pretty broad.

But it gives us a better look at the pieces that make up typography.

Selecting a typeface is typography.

Choosing a size for that typeface is typography.

Changing the weight, the letter spacing, and the alignment, then combining and positioning pieces of text together to create hierarchy.

That's all typography too.

The 5 parts

Beyond that, I like to think about balancing any one piece of typography as five parts.

And I like to think about these five parts as if they were all connected with a string.

1. Size

First, pick your size depending on what you're designing and what you're going for. Try your absolute best to use as few sizes as possible at least in the beginning. Only add sizes when you absolutely need them.

2. Weight

Then choose your weight. Be intentional with this. Don't default to something because it's the default. Balance the contrast with the other pieces of type and the rest of the design.

3. Line height

Let's assume you'll end up with at least two lines of text.

Whether it's a headline, body copy, or something in between, you'll need to decide your line height.

Larger and more breathable for longer copy.

Tighter for subheadings and headlines.

There's a range.

In some cases you might go completely against those recommendations, as long as you're doing it on purpose for a specific reason.

4. Width

This is the width of your text box.

Do you let it flow across the entire page?
Do you break it after one word?
Or do you land somewhere in between?

For body copy, the optimal line length ranges anywhere from 45 to 75 characters, sometimes 80.

45 to 75 is a good range for paragraph width.

Again, these are general rules of thumb.

Unless you're choosing to go outside them on purpose, for a specific reason, follow the rules of thumb.

The worst thing you can do is be unaware of best practices and mistakenly do something that falls outside of them.

5. Alignment

Left, center, and right.

Left most of the time.

And when you want centered text, it's very helpful to have other pieces of the layout to anchor the left and right visual points of the text itself.

Right aligned works great for aligning line item value data on the right side of a module or a screen.

Putting them together

When you're working with typography, you need to balance all five of these together.

And that's just for a single block of text.

There's a lot of subtle nuance in combining two pieces of text, like a headline and a paragraph.

Each one has its own five variables (and more).

Once you put them together, you also have to think about how they look together.

Is there enough contrast?
Is there enough scale?
What vibe are we going for?

All of these factor into the right setup for your typographic choices.

If you can remember these five (size, weight, line height, width, and alignment) and be really intentional about each one, you'll get closer.

When you have a clear reason behind all five decisions, you'll end up with a better design.

And if it's still not as refined as you want it to be, at least you'll be pointed in the right direction.

Limit your type sizes

One more thing to consider when you're using multiple pieces of text together, especially on a screen or in a section.

You really want to limit your type sizes.

A good practice is the rule of three. Three type sizes.

Start with one size if you can.

Then push negative space, weight, casing, color, and position.

Let all of those guide the elegance of the type.

Add a second, larger size for a headline as you need it.

Maybe a third, smaller or medium size if you need that too.

Don't let font size be the main thing you reach for when you're trying to set up really sharp typography.

If you use a bunch of sizes and call your hierarchy done, it's usually not going to look very nice.

So limit your sizes and balance the five parts of typography.

Before you add extra sizes, play around with color, space, background colors, and positioning.

Two or three sizes can carry an entire interface.

Typography is principle number one of the 16 Shift Nudge principles.

I'll be expanding on each of them in future newsletters, so stay tuned for more.

Happy designing,