DEV Community

Vincent Liao
Vincent Liao

Posted on

How To Combine Fonts (Hint: Contrast)

Contrast attracts the eye, and you can use fonts to create contrast in your design.

Take a look at this.

Third image of font

The example on the right is more “colorful” in a way that doesn’t utilize color. It’s interesting without overwhelming the eye.

Here are other examples.

Second image of fontFourth image of fontFifth image of font

It’s all about contrast—the more different the typeface or font is, the more interesting it becomes. There is, obviously, a fine line—when the fonts clashes really hard, it’s becomes confusing rather than interesting.

If you combine all the things above, it will look something like this.

First image of font

If you want to add another font to your single-font design in your website, there’s no point in adding a font that looks similar. At best, it will look like a design without conflict, but it confuses the eye when inappropriately applied.

Contrast attracts the eye; to create contrast, you can't be a wimp.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay