Typography is arguably the most vital piece of the puzzle when it comes to visual communication. When someone visits a website, the very first thing they'll do is seek out some textual content to read and understand what they're even looking at. Let's explore how you can make yours more impactful.
Choosing the right typography can make or break your design. There’s an infinite amount of ways you can play with type to add character, evoke a certain mood, or achieve a specific goal. You can adjust the type size, kerning, tracking, leading, alignment, and color just to name a few. Once you’ve mastered the basic elements of typography, you can pair with an additional font to create more diversity and hierarchy.
Typography is the art and technique of arranging type. Whether it’s a poster, pages in a book, or the words you read on an app screen, it’s all typography the designer used with intention to create an experience.
Typography serves two main purposes. The first is it has to be legible, can the user read it? And the second is how can you use typography to create a mood or design aesthetic to attract a specific audience.
Learning the fundamental rules of type (so that you can learn how to break them later) will help you become a better designer. It takes practice and a little knowledge, which we’ll go over next. First, let’s discuss some of the basics.
Sometimes the terms typeface and font are used interchangeably so it can be a little confusing. A typeface is a collection of fonts while a font refers to a specific style or weight within a typeface family.
For example, Helvetica is a typeface but Helvetica Bold is a specific font within the Helvetica typeface family. Here’s a visual example so you can see the difference between a typeface and fonts.
Three are three main categories of typefaces a font will fall under. These categories are serif, sans serif, and decorative or display typefaces.
A serif is a small line or stroke attached to the end of a larger stroke. They’re often referred to as the “feet” shown at the bottom of letters. Not all serifs are the same, you’ll notice slight character variation from one serif typeface to another and that’s what makes them unique.
Serif typefaces are more formal and traditional. They’re often used editorially such as in newspapers, magazines, and the body copy of books. One of the most well-known serif typefaces and probably the first font you ever used on a computer is Times New Roman. Here are five visual examples of some of the most well-known serif typefaces.
An advantage of using serif typefaces is the level of customization. For example, most serif typefaces have an italics, while a sans serif (coming next!) does not. Some serif typefaces also have small caps and open type features such as ligatures.
The term sans serif comes from the French word sans, meaning “without”, it’s a typeface without serifs. These typefaces are more modern, bold, and tend to make good choices for large headlines.
One of the most popular sans serif typefaces is Arial which is a copycat of Helvetica. Here are a few examples of the most popular and well-known san serif typefaces that have stood the test of time.
These typefaces are mostly used for titles and headlines. They’re not recommended for large amounts of body copy due to issues with legibility. This is a large bucket for typefaces including subcategories like slab serifs, scripts, blackletter, monospaced, and more. They can also be some of the most fun to use and add flair to your design but use them sparingly.
Now let’s get into some of the technical terms of typography. There’s an endless amount of nerdy type terms like cap height, baseline, ascender, descended, terminal, and more. If you’re curious to learn more about the history of typography, check out What is Typography? A Deep Dive Into All Terms and Rules.
But it’s not really important to know these terms by heart to be a good designer. Instead, we’ll stick to a few core elements, ones you’ll need to know as you’ll use them on a daily basis when designing any project.
Leading refers to the space between lines. It’s measured from one baseline to the next. Leading, as well as the following elements of typography, are important for legibility.
The tighter the lines are, the more difficult it is to read. However, if there’s too much space between the lines, it can also be hard to read. It’s a delicate balance and something you’ll have to adjust for every font you use and how you’re using it.
Tracking refers to the letter spacing over a range of characters, usually one or multiple lines. Negative tracking makes your words appear tight and compact. Increased tracking will add more air or white space in between.
When it comes to tracking, it also varies depending on the typeface you use and the context you’re designing in. Super tight or wide tracking will impact legibility for the user so be sure to adjust accordingly.
In general, titles in all caps should use increased tracking. Lower case and italics usually need to be tracked in tighter.
While tracking refers to the spacing over a range of characters, kerning refers to the spacing between individual letters.
Most of the time you won’t need to adjust kerning, especially for large blocks of body copy. Kerning mostly comes into play for 1–5 words in a title or a logo. The larger the type is, the more noticeable awkward spacing will be between individual letters. There’s no mathematical formula, you’ll have to train your eye to learn where there’s too much or too little space between letters.
In most design software, you can choose between optical and metric spacing. Metrics kerning uses kern pairs, which are included with most fonts. Kern pairs contain information about the spacing of specific pairs of letters. Optical kerning adjusts the spacing between adjacent characters based on their shapes (article source).
For paragraph alignment, you can choose from left align, right align, center align, and justified. In general, right-aligned is rarely a good choice. Center aligned text can work with small amounts of copy or for a headline. But for the most part, you’ll want to left-align your body copy paragraphs.
Left-aligned text is easier on the eyes and best for legibility. We’re used to reading a page of words from left to right. Most books are either left-aligned or left-aligned justified. Justified text is more traditional, often used in newspapers and magazines. For justified text, you’ll need to adjust the tracking to compensate for the forced awkward spacing.
An important tip when it comes to paragraph alignment is to think about the visual appearance of the rag. When you left-align or center text, you’ll notice a rag on the edge. Sometimes you’ll need to manually adjust tracking or line breaks to create a better visual rag. Here’s an example of a bad vs good rag. Which looks better to you?
One of the most important aspects of design and typography is hierarchy. No matter what you’re designing, there needs to be a clear sense of hierarchy. If all type on a landing page is the same size then a potential customer would have no idea what to read first and will exit out immediately. By varying fonts, weights, size, and color you can begin to walk your user through finding all the information they’re looking for.
There are three ways to think about hierarchy. First is the size of typography. Usually whatever is most important is the largest and takes up the most space. Then the secondary messages are smaller in size.
Next, we can use color or tints to create hierarchy. Use bold colors for the most important message, use more subdued colors or tints of the same color for secondary messages.
You can also use spacing to create hierarchy. For example, your title can be large and bold but also surrounded by plenty of white space to allow a user to see this message first.
Check out our video where Ran walks you through more visual examples of hierarchy in web and app design:
Use one or a combination of the above to create contrast in your type. For example, use a bright red for headlines and a dark brick red for body copy. This monochromatic color palette achieves contrast as well as good hierarchy.
Another way to think about contrast with typography is to vary weight size. As an exercise, try sticking to one font family and pairing various weights together. For one pairing, use bold or light for headlines and regular for body copy. See how many combinations you can create with all the styles in one typeface family. You can also achieve contrast by varying point sizes. Create a pairing with the same font but with different sizes.
Try varying your use of all caps vs upper and lowercase. You’ll want to keep your main body copy in upper and lower case, a full paragraph of all caps is hard on the eyes. But maybe as a stylistic choice, you decide to use all caps for your header.
You’ve learned what typography is, the three main categories of type, and key elements and adjustments to make it legible. But now, how do we use this knowledge to choose good fonts for your design projects?
The first tip to remember when choosing fonts is to avoid trends. Choose classic typefaces that stand the test of time. Check out this list of 25 classic fonts that will last your whole design career. You really can’t go wrong with any of the fonts on that list.
Think about choosing fonts as choosing an outfit for an occasion. Is this event formal or casual? Who will be there? This will help you narrow down to a type category. If you’re designing a landing page for Pepsi, you’ll probably want to look at modern san serif typefaces to go with their bold logo.
If you’re designing a poster for a serious drama film, maybe you’ll want a strong, yet elegant serif for the title. Typography gives character to your design so choose wisely.
Try not to use too many typefaces on one design. The more typefaces you use, the harder it is to read or distinguish hierarchy. As a rule, try to stick to 2 or 3 typefaces at the most.
When pairing multiple typefaces, be sure to choose two distinctly different fonts. For example, don’t use two sans serifs that look nearly identical. Instead, pair a serif or other decorative font with a sans serif to achieve a good balance.
For more information on how to choose fonts for your projects, including some of Ran’s favorite websites, check out this video.
There’s really no way around it but to practice. Essentially design is type + image. But within these two elements, there’s an endless amount of design possibilities.
If you’re new to design and typography, try experimenting with type only exercises on your own. Don’t think about color, photography, illustration, or any other design elements yet.
Start with a blank white canvas in your favorite design software. Add small blocks of black type one at a time. Start with one typeface only, add a title, add a subtitle, and body copy. For placeholder text, copy and paste from a Lorem Ipsum text generator.
How can you create hierarchy? Try to create at least 10 different layout options by using some of the tips you learned in this article. Try varying the type size, use all caps for headlines, consider white space.
If you’re feeling ambitious, begin to pair 2–3 typefaces, find combinations that work well together. It might be tough at first but soon you’ll realize how many possibilities there are when designing with type.
If you’re ready to dive in deeper, watch our introduction to typography lesson from our free web design course.
