Typography contrast and the “blurry eye test”

Font-weight can make your designs more scannable

TL;DR Summary

  • There are lots of ways to differentiate between types of text on your site (e.g., headers vs. body copy). The most popular are font-size, font-weight, color, and text-transform (uppercase).
  • It’s ok to use a mix of differentiating factors (e.g., size and color), but I consider font-weight an especially useful dimension because it helps make your pages more scannable.
  • If you un-focus you eyes (“blur” your vision) while looking at your site, you can see the broader visual differences between your type styles. When you do so on a site that uses heavier font-weight for important styles, you’ll notice that it improves the perception of layout and priority.

The full story

Our team has been working on a new typography system the past few months, so type hierarchy and header/body contrast have been on my mind. There are several ways that designers create contrast between categories of type…

Font-size

Using larger font sizes for headers is a rock-solid web convention. Some sites use large, light fonts to create elegant-looking headlines: these rely mostly on size to differentiate between headlines and body copy. InVision and SquareSpace are good examples of this, and Google Material’s default typography focused more on size than other attributes.

Lovely. The header on Squarespace.com is a Light 300 weight, so size is the big differentiator.
Both header and quote are 300 weight. InVision uses size alone for contrast.

Font-family

It’s trendy and fun (and challenging, actually) to pair typefaces together: it allows a designer to apply more nuance to a brand, and to custom-fit fonts for specific purposes. Medium is doing this on this very article; they also carve out another header style for promoted articles like this. Also, Wired.com uses several fonts for varied purposes.

Creating contrast using font families is interesting, but usually needs to be paired with font-size to be effective; it thrives in more predictable, less flexible situations.

This Medium headline uses a (way) different font-family than the body copy.

Text-transform (uppercase)

Using all-caps text has well-documented pitfalls for readability, so I try to avoid it (my company, Hired, started moving away from this in 2017). All caps treatment has some utility in smaller, shorter text, e.g., button copy, category labels, and form labels. The Medium example above shows an all caps category label (“Trust Issues”) in what’s becoming a modern convention.

Some brands use it for header text as well, but in longer sentences it can feel like somebody is YELLING at you!

SAY. STUFF. LOUDER. The buttons have all caps text, too.

(Font) color

In terms of headers, you’ll often see this as simply a distinction between blacks and grays (again, see the Medium example above). Though some brands do use colors in their header text, I tend to avoid it because it makes color a less flexible dimension for things like actions (like links and buttons), states/statuses (like ‘success’ or ‘warning’), and categories.

Font-weight!

Designers routinely use font-weight to differentiate headers, but I saved it for last because I think it’s an important one. You can see samples of bold, weighty headers on Apple’s products (especially iOS these days), Mailchimp, Adobe, and an especially tasty example on Framer.com.

BAM! Would you look at that header on Framer.com. Makes me want to… “do it all!”
The obvious example. Nice header weight, Apple!

Now isn’t that nice? You don’t have to be as dramatic as the Framer example above to be successful, but it certainly helps to demonstrate my point.

I like using font weight in headers because it provides easy scan-ability: in an instant, you can start to see the “shape” of the text blocks on a page without having to read anything: e.g., this is the main message (hero headline), this is a category/value pair (Country: USA), and this is a table (column headers).

A quick way to demonstrate that value — and a method to test if your text hierarchy has sufficient contrast — is something I call the “blurry eye test.”

The “blurry eye test”

For people with relatively normal eyesight, your eyes adjust on the fly to focus on whatever you’re looking at. But most people can force their vision to unfocus, and it’s a great way to see the general visual weighting in your designs. This is especially true for typography, as it forces you to ignore the content of the words and focus instead on the shapes.

(As a side note: this may also mimic how low-vision populations experience your site, but I haven’t worked with audiences like that carefully enough to really know if that’s true. Something to think on!)

In this post I’m using a background-blur effect to approximate “blurry eye.” Here are a few samples of font differentiation using scales of weight and size:

Each block has some level of contrast between headline and body copy: but I’d argue that the “weightiest” (1st) example stands out the most. It’s using Source Sans Pro 600 (Bold) for the header, and Source Sans Pro 300 (Light) for the body copy; the header and body copy are the same font-size (which, if maintained, gives you the opportunity to maintain a cleaner, more predictable vertical rhythm by standardizing the height of text blocks).

Here’s a larger example: both of the following have some size differentiation between headers and body copy, but only one actually uses different font-weights to create contrast.

Easy enough. Let’s look at those again with a background blur on:

There it is! The first example has enough spacing to give a vague sense of content layout; but the latter example (using font-weights) gives much stronger signals: how this page lays out, what the most important content is, which labels relate to which content blocks, etc. Hooray!

But, wait: I have pretty good vision, so things don’t usually look blurry to me. How does this help me?

Sure thing (and congrats, btw)… the idea isn’t to provide better contrast for those with low-visibility needs; rather, it’s to speed up your users’ comprehension by taking advantage of non-verbal visual scanning.

Let’s say a user loads a page of your site in their browser: before they’ve read a single word, they’ve already done a great deal of peripheral mapping, getting a general sense of what they’re looking at. By using bolder headers in our designs, we can help speed up that process: maybe it’s only a millisecond each time, but those add up over a user session (and all of your users’ sessions), and it’s substantial. Plus, you saved all of those milliseconds by just adding a single line of code:

h1, h2, h3, h4, .label { font-weight: 600; }

… ok, your code will vary wildly, but the point stands: design with font-weight in mind, it’s a powerful attribute!