Font Weight a Minute!

Early on in my career as a designer, choosing font weight (or thickness) was confusing. Some fonts have a long list of weights to choose from. Once I learned this super basic concept, it all got easier.

When you need to emphasize a word, or "put it in bold," always pair the font by SKIPPING one level of thickness. This will give you the proper contrast. If you choose two font weights right next to each other, the difference will barely be noticeable and optically the pairing will look "off." Proper contrast appears INTENTIONAL.

The example below shows how a list of font weights would look in a dropdown menu and how to pair by skipping one weight.

The subsequent groupings shows what the pairings look like without skipping one thickness - not enough of a difference, vs what the pairings look like with skipping one thickness - proper contrast.

A few things to note:

🔸 Skipping one thickness is a minimum. Depending on the font family or how much emphasis you are after, you may want to skip 2-3 thicknesses.

🔸 Light text on a dark background often requires skipping 2 thicknesses at a minimum to achieve proper contrast. So with the Poppins example, I would probably pair Poppins Light with Poppins SemiBold, or Poppins Regular with Poppins Bold.

🔸 Try to limit yourself to only 2 font weights per graphic. If you choose a Regular paired with a SemiBold, you shouldn't be using any Light, or Bold text in the same graphic.

⚠ Just remember to step back and ask the question "Does this look intentional?" If the font weights are to close, it will look "off".