15 color and font combos to jumpstart your new designs

Design trends come and go, but color theory is forever. Thus, some color and font combos out there can be used throughout a variety of designs. And it’s always good to know some common combos - this can jumpstart your new designs and keep you from wasting time picking styles.

So in this article, we’ll be sharing a couple of color and font mixes you can use in your designs. Along with some commentary to help you decide what kind of apps these combos go best with. Because as universal as they are, in the end it comes down to what you’re creating and who it’s for.

Table of contents:

Color combos

1. Pantone’s 2022 color of the year “Very Peri” with shades of blue and pink

We’re starting off strong with a popular color combo. Pantone’s color of the year is a vibrant periwinkle called “Very Peri” which can easily be combined with blue, pink or purple. Since Very Peri is a mix of these colors, you can play with gradients and create a very peaceful, fresh, youthful vibe.

Thus, this color combo can be used in apps targeted to teenagers or young adults. It’s fresh, modern, and calming. Here are some app examples this color combo would suit: a meditation app, an online store for skin care products, hair care products or workout wear.

Design by Christina on Dribble

2. Black and cream

Going in the opposite direction for a chilled down, less energetic combo. Black and cream are two colors you can use if you’re creating a presentation website for a jewelry store, a clothing store, a thrift shop, a candle store, or anything in that direction.

This color mix is simple and chic, and it can give your design a very classy, mature look. Plus, it’s quite versatile suiting a wide variety of industries.

Design by Sajon on Dribble

3. Blue and yellow

We’re back to bright and energetic colors. Blue and yellow are a fun combo for a fun app, with a youthful audience. It works for a variety of apps, since blue is a commonly used color in web design, and yellow acts as an accent color. Here are some examples of apps you could use this combo for: a marketing agency, a travel agency (especially an airline, or air travel-related apps), a news publication about tech, a developer’s presentation site, or a customer support agency.

Design by Dicky Indrayan on Dribble

4. Blue and orange

Call it blue and yellow’s more eccentric sister. A blue and orange color combo is bound to bring a lot of energy to your designs, but don’t overuse them - they can look color block-y, which is pretty in fashion, but can be hard to look at on a website. Instead, use them as accents, or in illustrations, whilst keeping backgrounds white and text black.

These two colors are often used in fashion and graphic design, but I think they can be used in web design as well. As opposing colors, blue and orange help bring attention to items. They’re vibrant and full of energy together. So here are some examples of apps/websites you can use them in: online shops for pet goods, travel agencies, book stores, online publications about tech, social media platforms.

Design by Filip Legierski on Dribble

5. Blue and pink

Yes, another one with blue in it. But hear me out: blue and pink don’t have to be those colors that divide genders anymore. We’re way past that. Blue and pink go very well together, even when both are used as accent colors. They’re calming, peaceful, and nice to look at.

Design by Outcrowd on Dribble

The best thing is that you can play with the intensity, and they’ll still look good together. In the examples above, you can see the difference between intense and more pastel shades of blue and pink. Which one you choose comes down with the app or website you’re designing. The more intense you make the colors, the more intense the app feels. For less energy and more calm, make them pastels.

You can use this color mix for a variety of things, like: travel agencies, pregnancy apps, marketing agencies, floral services, fashion-related publications, or personal portfolios.

6. Orange and periwinkle

Here’s a combo you might have not expected. But believe it or not, orange and periwinkle (remember “Very Peri” at the beginning?) go very well together. It’s a nice blend of energy and calmness - which is why it works for the first example below, a food delivery app. You’re waiting calmly at home, while your food is delivered - and speed is of the essence. Periwinkle calls upon the homey vibes while orange brings the energy of your food being carried on the back of a bike through traffic.

Design by Ghulam Rasool on Dribble

7. Black and your choice of a bright color

Here’s a more interesting combo: black and a bright accent color like red, yellow or orange. This combo is perfect for dark mode apps, since using white or shades of gray as accent colors can make things hard to read. And plus, it brings a bit of life to the app. This is a pretty universal combo that can be used in a variety of designs, so don’t be shy.

Design by Amir Baqian on Dribble

8. Navy blue and baby blue

Yes, blue again. Afterall, it’s also our official color, so it’s not a surprise that we like it. Preferences aside, blue is a very versatile color when it comes to web design. It works in formal settings, as well as informal. It can be a corporate color, that shows seriousness, or a soft, youthful color, that tells you it’s time to relax. And plus, using 2 shades of it, as long as they’re a similar hue, will always look good.

Design by Mahmudur Rahman on Dribble

A monochrome look will always be easy to obtain. Every base color (like blue or red) has a variety of hues and intensities, and you can always play with them to create a color palette. And blue, here, fits a lot of app types. For instance: corporate websites, marketing agency websites, real estate platforms, management platforms, the list goes on.

Font Combos

Font combinations rely on contrast: if you’re trying to set apart a headline and a paragraph, you don’t want to use overly similar fonts. What would be the point? You’d be better off using the same font in different sizes and weights. But using contrasting fonts will help create a distinction between the main portion of text you want users to see, and the secondary, more detailed portion.

You can find out more about this topic in the links below:

Pairing typefaces

Fontjoy

Canva's ultimate guide to font pairing

So here are some font combo examples to inspire you in your upcoming designs.

1. The famous New York Times combo: Georgia and Arial

One of the most famous font combos is the classic serif and sans-serif combo. It’s commonly used in newspapers, and it gives a classy, formal vibe, while staying easy to read. Using the serif font for titles helps grab attention, and sans serif fonts in body text are easier on the eyes.

Source: The New York Times

This is a pretty standard combo where you can use a variety of different fonts, not just the classic Georgia and Arial combo. Another example is Playfair and Lato, with the first in a SemiBold weight and the second in Light. This combo is more modern and youthful, but would still look good on a newspaper, or a presentation website.

2. The same font in all caps and lowercase. But for example sake, Montserrat.

Montserrat looks really good both in all caps, and in lowercase. And using a font this way saves you the time of trying to find a 2nd, “accent” font. The all caps look brings attention to elements, so it suits titles. And the regular, lowercase look is good for body text. To help set them apart, it’s best to use a thicker weight on the upper case one.

Source: https://www.canva.com/templates/EAEvH2XoiFQ-blue-modern-live-webinar-poster/ 

3. DM Serif Display and Poppins

This is a combo we’ve recently used in one of our designs. It’s chic, modern, formal but not too rigid. You can use these 2 fonts for presentation sites - especially if you have a more youthful key audience. They look good together, and they look like the newspaper combo mentioned earlier, but more 2022.

4. Clarkson and Helvetica

This is the key font combo Squarespace uses in their branding. And it’s a really fun, modern combo that you can use in a variety of settings. Most of all, presentation sites: which is what Squarespace does best.

Source: Squarespace

5. Libre Baskerville in all its forms

Just like Montserrat, Libre Baskerville is really good at looking like different fonts when you use all its forms. You can use it in bold for titles, and in regular or italic for body text. Of course, the titles have to be bigger in size. Alternatively, you can play with casing as well - make key titles uppercase and bold, subtitles bold and slightly smaller, and body text italic. 

Together, they create an elegant combo you can use in a lot of different places. Due to the look of this font, it works best in formal settings. Stuff related to books or school, for instance.

6. Bebas Neue and PT Sans

Here’s another fun, energetic combo. Bebas Neue is a great font for apps and websites where titles matter the most. Where you need to grab the user’s attention. And PT Sans, in comparison, is a chic, easy to read font that goes pretty well with it. This mix works well on tech news publications, on posters, or promotional material.

7. Crimson Pro and DM Sans

These fonts make for a chic, yet formal combo. The example below shows it best: you can use them in a formal setting, while keeping things modern and pretty. It’s ideal if you’re tired of using ‘traditional’ fonts like Times New Roman, Arial or Georgia. They’re both easy to read, they look good together, and go well on posters like the one below. And of course, it suits apps as well - this combo would look great on a law firm’s website, or on a presentation website.

And there you have it. These are the color and font combinations you should try in your designs this year. Don’t be afraid to play around, get creative, and maybe come up with some of your own font and color combos. If you want to get validation on your current font and color choices, we offer a free UI/UX assessment worth $3K.

If you’re looking for someone else to create font and color combos for you, or for entire apps, contact us and let’s see what we can do together.

If you liked this article subscribe and get an email when we publish new, juicy stuff. We hate spammers, so we don’t spam.