What You Can Do with Different Font Weights

If you are a Mac user or Google Fonts user, often you will come across a typeface that offers a variety of font weights. Have you ever thought about what you can do with these different font weights? Today, I would like to show a few examples that illustrate the their usage. If you have other interesting examples of using different font weights in your design, leave a comment below and let me know.

Raleway in Google Fonts offers a variety of font weights from 100 to 900. How can we use these different font weights to our advantage in our design?
Raleway in Google Fonts offers a variety of font weights from 100 to 900. How can we use these different font weights to our advantage in our design?

1. Create Headings and Body Text

This is probably the most common usage of different font weights. We can choose a large font weight for headings and a regular font weight for body text. The difference between the font weights can create a visual hierarchy for readers to quickly identify the headings and the body text. What’s important here is that in order to effectively create a visual hierarchy, the two font weights need to be very different. For example, body text of font weight 400 should be paired with headings of at least a 600 font weight. In fact, I will recommend trying a 700+ font weight. Headings of a 500 font weight will make the reader confused and think that the difference is a mistake rather than intentional.

Good example of using different font weights for headings and body text because the two font weights are very different.
Good example of using different font weights for headings and body text because the two font weights are very different.
A not so good example as the previous one because the difference between the font weights is too small.
A not so good example as the previous one because the difference between the font weights is too small.

2. Create Run-in Heads

A large font weight can also be used in run-in heads. Again, you will need to make the font weight for the run-in heads big enough to separate them from the rest of the text block and create a hierarchy visually. Look at the example below.

In this design, I used a very large font weight for the run-in heads to separate them from the rest of the text blocks. The typeface used here is Helvetica Neue. The font used for run-in heads is Helvetica Neue Condensed Black.
In this design, I used a very large font weight for the run-in heads to separate them from the rest of the text blocks. The typeface used here is Helvetica Neue. The font used for run-in heads is Helvetica Neue Condensed Black.

3. Create A Logo

Different font weights can also be used together in logos. For example, if the name of your brand consists of two words, you can use a large font weight for one word, and a small font weight for the other word. By doing so, you can eliminate the space between the two words, and the viewers will still be able to clearly identify the words due to the Gestalt Principles. Take a look at the following examples in which I used two different font weights in the logos.

Use of different font weights in logo
Use of different font weights in logo
Use of different font weights in logo
Use of different font weights in logo

In these two examples, I used a very large font weight for one word and a small font weight for the other word. Again, I tried to make the two font weights very different so that I could effectively create a contrast.

4. Compensate Ink Leakage

One of the benefits of having a variety of font weights to choose from is to compensate ink leakage in printing. Consider the following example. You are printing some white text of a small font size on a black background. The black ink used to print the background will inevitably seep into the white text, causing a certain amount of erosion of the text. In this case, a regular font weight may not be sufficient, and you can increase the font weight to compensate the erosion caused by ink leakage.

The white text in this example is against a dark background. The font weight of the white text here is slightly increased to compensate the erosion caused by ink leakage in printing.
The white text in this example is against a dark background. The font weight of the white text here is slightly increased to compensate the erosion caused by ink leakage in printing.

On the other hand, if you are printing some black text on a white background, and due to the material of the paper or the ink, the black ink seeps into the white area, you can then decrease the font weight a bit to cancel out the additional “boldness” caused by ink leakage.

5. Reduce Light Glow

Similar to ink leakage, strong lighting in signage can also cause the strokes of characters to appear thicker than they actually are. To ensure that text in signage can be clearly seen from a distance, designers can slightly decrease the font weight a bit to reduce the amount of light glow in signage.

Some Traditional Chinese characters contain a lot of strokes. Because lights can make strokes appear thicker than they actually are, a slightly smaller font weight is recommended for signage. In this case, a Sans Serif Chinese typeface of a slightly smaller font weight should be used.
Some Traditional Chinese characters contain a lot of strokes. Because lights can make strokes appear thicker than they actually are, a slightly smaller font weight is recommended for signage. In this case, a Sans Serif Chinese typeface of a slightly smaller font weight should be used.

Final Thoughts

Different font weights in a typeface can help us a lot when we design a document, a webpage, a logo or a sign. I hope that the above 5 examples can give you some inspirations and help you come up with great designs. Once again, if you have other interesting examples of using different font weights, leave a comment and let me know.

Survey

Do you like this article? What are your struggles related to typography? Answer this short survey and let me know. It will help me create the best content related to typography for you.

Author: Simon Li

Designer, coder and animator.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>