HowtoHow to complement typography with the right colors

How to complement typography with the right colors

“When a flower doesn’t bloom you fix the environment, not the flower”

Alexander Den

The same is equally true in design. A font, a color, or a composition may look awful, but perhaps there is nothing wrong with the design element itself, but the environment simply isn’t right yet.

What this means for designers is this: we need to know the right environment for each flower design element.

Below several examples to illustrate this, in which I attempted to mix a color palette with the right typography, making them flourish & thrive.

Example 1

Typefaces and Color Combinations
Helvetica
Typefaces and Color Combinations
Gilroy
In the above-left example, I combined primary colors with Helvetica and below-average sized whitespace. These things match because Helvetica and primary colors come from the same time, a time where Swiss design was a thing.

…their style, which was called the International Typographic Style at the time, was guided by the ethos that design should be as invisible as possible. 

The right version contains Gilroy, but with the same whitespace and colors. Gilroy is a much more friendly typeface in my opinion. It’s rather geometric but more round and thus friendly in a way. It’s a typeface often used in finance designs; serious yet friendly and open. An example below.
But I think we can agree that in the left version the elements are much more in sync with each other. The right font in the right environment.
Typefaces and Color Combinations
A style found on Dribbble often these days. Depth, round corners, gradients, & energetic colors, matched properly with an equally friendly typeface. Designer: Anastasia, Dribbble.

Example 2

Typefaces and Color Combinations
Gilroy
Typefaces and Color Combinations
Helvetica
In this second example, I’ve picked an environment much more suited for Gilroy. Depth and a more fun color palette, matching the friendly aspect of the typeface. In the right example Helvetica comes across as a bit cheap, Gilroy is obviously the better choice here.

Example 3

The above example contains Open Sans & Adobe Caslon Pro. The left version is a more coherent set: matching a serif humanistic typeface with some classical Old Dutch colors.
Typefaces and Color Combinations
Adobe Caslon
Typefaces and Color Combinations
Open Sans

Example 4

Used typeface: Eczar. A serif typeface, at first you might be tempted to mix it with more classical & traditional colors. But at the same time, the font is a bit quirky and feels like a contemporary typeface. So a subdued green (fits the traditional element) combined with pink and vibrant red (to complement the quirky aspect of the font) mixes with it perfectly.
Typefaces and Color Combinations

Example 5

The typeface used in the above example: Canela. As described by the owner, it’s a very graceful typeface. The regular version of the typeface also feels rather fragile, making it a good fit with pastel colors. A combination often found in fashion or personal care products.
Typefaces and Color Combinations

Example 6 & 7

Typefaces and Color Combinations
Adobe Caslon
Typefaces and Color Combinations
Open Sans

Summary, Conclusion & Next Steps

Find the right environment for the colors or typography you are about to use. Open Sans might look great on a Dribbble image, but terrible in your design, due to the incorrect use of other design elements such as color or composition.

As for the next steps: it will be interesting to discover if elements always should be a coherent set in order to appear visually pleasing. What if we combine elements that have completely different characteristics? In the above examples that didn’t work out too well, but what are the exceptions?

Comments (3)

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll up Drag View