Meagan Fisher: Here is a block of text styled four different ways. You’d probably agree that the last block feels the most polished and easy to read. But why exactly? Contrast.

In this tutorial, I’ll share four practical tips for using contrast to improve your typography. Contrast refers to the difference between items. Black and white, huge and small, heavy and light are examples of high-contrast pairings.

When we get the contrast right in our typography, our content feels more organized and easy to digest. Our designs also become more accessible, meaning they are usable to people with a wide range of devices, settings, and abilities.

The first factor to consider when it comes to contrast is size.

Tip: 16 pixels is a great size to start with, since this ensures the text has enough contrast to be legible.

Once you’ve set your body text size, you’ll want to choose three to four other sizes to use for subheadlines and headlines.

Best Practice: I tend to start with a subheading that is around 1.5 times the size of my body text and a heading that is around two times the size of my body text.

Then I’ll adjust based on what looks best for that particular typeface.

Having a pretty big leap between the sizes of different text elements on the page helps to establish a hierarchy to your content. Compare what this design looks like with less size contrast between the text elements versus more. You can see how the second option feels easier to scan and more organized.

For our second tip, we’ll talk about how to use different font weights to further create structure and add emphasis to your design.

A font’s weight refers to the thickness of its letterforms. Bolder text elements will have more contrast than regular or light text elements around them, which helps to set them apart.

As a general best practice, using bold weights for headlines, button text, and links is a great way to bring attention to important content.

See how the use of font weight in these two examples helps to make the content feel more structured. Because the headlines are set in bold, the different sections of text are more clearly delineated.

For our third tip, you can create further contrast between headlines and body text by pairing multiple typefaces in your design.

When it comes to typeface pairings, it’s usually best to stick with just two for a design and to make sure they feel distinctive from one another. This isn’t the only way to do it, but here’s a classic technique.

Best Practice: If your body text is a serif typeface, choose a headline that sans serif, and vice versa.

Let’s look at some examples of this in action. Here, we see two typographic stylings. The first example shows serif headlines with sans serif body text. The second shows the reverse. Both have a unique feel, and it can be fun to experiment with different pairings. Just be sure that, whatever typefaces you choose, readability is your first priority.

For tip number four, we’ll look at how contrast and color can affect content organization and readability.

You can use color to set distinct text elements apart. For example, here I’ve set the headline text color to white and the body text color to light gray, which helps to further differentiate these typographic elements. Using distinct colors for items like links or error messages can also help draw the user’s attention to important information.

When choosing text colors, just keep in mind that the contrast between your text and the background must be high enough to be accessible to users with vision differences.

Best Practice: The best way to be sure your colors meet this requirement is to test your design in a color contrast checker, such as the ones linked in the Resources section of this video.

Here’s an example of two color palettes. The first is low-contrast and inaccessible. The second is more readable to all users and meets accessibility standards. In short, when you use contrast to make the text clear, you help to ensure the best possible experience for all users.

For more guidance, check out our Resources section for links to articles and other tutorials that can help you expand on the concepts we’ve covered here.

And there you have it, four tips to help you get the contrast right in your typography. Thanks for watching, and be sure to check out our other Take 5 videos, as well as the entire course catalog here at Gymnasium.