Design![Fonts Fonts](https://i.pinimg.com/originals/58/f8/7c/58f87c9c6efad6b7d4881b28e4ebca6c.jpg)
The thing with choosing fonts…
The exception is when a project is taken on by a community of volunteers, such as the team behind Montserrat, when it is able to grow into a wider set of fonts. If you need a comprehensive set of characters, or a variety of weights, then a premium font family could be the answer. Montserrat Font. Download the Montserrat font by Julieta Ulanovsky. The Montserrat font has been downloaded 1,119,568 times.
If you’re building a website and you’re not precisely a designer, you’ll find yourself facing a big challenge when it comes to choosing the right fonts for it.
It’s definitely not an easy task. Not even for those who work in design.
There’s so many to choose from. Where to start? How can you be sure you’re choosing the right one? How to combine two fonts?
Well, those are questions that you’ll be able to answer with time, gaining experience and learning about typography, if you’d like.
But there’s a shortcut. You can also rely on inspiring yourself by other designers’ combinations.
I prepared for you 10 fail-proof combinations that work.
Reliable combinations
These are thought for websites with a modern approach, or that are looking to go through a brand renewal.
All the combinations use Google fonts. And they showcase one typeface for the headings (marked as H) and another one for the body (marked as B).
There’re no weird or too-fanny fonts in here, which can quickly make your design look unprofessional.
All of them are solid and trustable typefaces with proper legibility. And the combinations are meant to create balance so your website looks modern and polished.
Exclusive Bonus:Download the 7 Ways Guide to Make Your Website Look Professional. And improve your site’s credibility!
How to use these combinations
→ If you’re using one of our WordPress themes, then all you need to do is go to Theme Options » Typography in your WordPress Dashboard.
You’ll find a dropdown menu for the Headings and another one for the Body font. That menu offers you all available fonts from Google, so just choose the one you need and click Save.
→ If you’re not using one of our themes or if you’re coding yourself a website, there’re two steps you need to follow:
Step 1: Embed the fonts into your website by adding the embed code as the first element in the < head > of your HTML document.
Step 2 Steep full game free pc play. steep for mac. : Declare the fonts that will be used for body and headings in your styles.css file.
You’ll find both the embed code and the CSS code below each combination, so you can copy-paste them to your files.
Just one more thing before we begin
I created 10 font combinations that are suitable for any kind of modern website. I tried to cover several styles so you find the one that matches your brand.
But then I thought, why don’t I offer you one more piece of inspiration together with the font combination? Skyrim cat girl follower.
So I added a color palette to each one of them, for you to not only grab the fonts you should use but also the colors that go nicely with them.
1. Crimson Text + Work Sans
If you’re looking for a high-end kind of style, a look that will make your website appear both prestigious and contemporary, this is the combo for you.
Crimson Text –a serif font inspired by old-style typefaces– for the headings, combined with Work Sans –a modern, kind of grotesque sans-serif– for the body, make a solid combination of tradition + modernity.
* See this combination of fonts and colors in action on this Ready Made Site by Artisan Themes: Blue Agency.
Fonts
Embed code:
CSS code:
Colors
Background color: #0057ff
Text color: #ffffff
Text color: #ffffff
2. Oswald + Cardo
A high contrast combination that will impact your site’s visitors for sure.
That’s Oswald + Cardo. A condensed sans-serif in all caps for the headings and a classically styled serif for the body.
Fonts
Embed code:
CSS code:
Colors
Background color: #484d5c
Headline color: #ffce00
Body color: #c0ccd4
Headline color: #ffce00
Body color: #c0ccd4
3. Quicksand (Medium + Light)
Sometimes one font is enough to make your design stand. This is one of those times.
Grab Quicksand in two different weights, Medium for the headings and Light for the body, and your website’s typography is done.
Quicksand is a geometric display sans-serif with rounded terminals, which makes it a friendly and pleasant type.
Use it with bright colors and you’ll get this modern sharp look.
Fonts
Embed code:
CSS code:
Colors
Background color: #ff0d7b
Text color: #ffffff
Text color: #ffffff
4. Archivo Black + Judson
Robust, bold with a touch of elegance. Meet: Archivo Black + Judson.
A heavy sans-serif for headlines, with a more delicate serif font for the body.
Fonts
Embed code:
CSS code:
Colors
Background color: #674b7c
Text color: #f47362
Text color: #f47362
5. Abril Fatface + Roboto
Abril Fatface and Roboto make a fashionable and chic combination.
As said by Abril Fatface’s authors: “The thin serifs and clean curves lend the typeface a refined touch that give any headline an elegant appearance”.
Roboto enters in order to equilibrate Abril’s personality. Achieving a stylish and modern balance.
Fonts Similar To Montserrat
Fonts
Embed code:
CSS code:
Colors
Background color: #ff3627
Text color: #ffffff
Text color: #ffffff
6. Archivo + Open Sans
Vivid, bright, shiny. A font combination for youthful and cheerful brands.
Wise care 365 serial key. Use Archivo (weight 500) for the headings, Open Sans (weight 300) for the body, and ta-da…! You’re ready to go.
Fonts
Embed code:
CSS code:
Colors
Background color: #864aff
Headline color: #00fdcb
Body color: #ffffff
Headline color: #00fdcb
Body color: #ffffff
![Fonts Fonts](https://i.pinimg.com/originals/58/f8/7c/58f87c9c6efad6b7d4881b28e4ebca6c.jpg)
7. Montserrat + Work Sans
Bold, bold, bold, geometric, bold… and friendly. If that’s what you’re after, then try this combination.
I don’t have to say much about Montserrat, one of the most beautiful and solid typefaces in the Google Fonts collection.
It’s perfect for modern websites, and you’ll see it adapts itself to many different personalities.
Here we have it on its strongest and thicker side, but it can also serve chic and more delicate styles as well (spoiler alert: combination number 9).
Combine it with Work Sans (light version), a font that I’ve been personally falling in love with for the last months, and you’ll have nothing to worry about. Sonic and all stars racing transformed pc download. Like, in life. That powerful they are.
Fonts
Embed code:
CSS code:
Colors
Background color: #b7e3e4
Text color: #f03f35
Text color: #f03f35
8. Prata + Lato
I can’t hide my love for Prata. It’s an elegant serif typeface with refined curves and strong serifs, which make headlines neat and attractive.
Together with Lato as body font, this blend delivers an audacious but also elegant and minimal style for any website.
* See this combination in action on this free WordPress theme called Pepper.
Fonts
Embed code:
CSS code:
Colors
Background color: #5b1ee1
Text color: #ffffff
Text color: #ffffff
9. Montserrat + Lora
Remember I said Montserrat could serve many different styles and purposes? Here’s the proof.
This combination uses it in all caps and with a light weight, turning your headlines into both delicate and trendy.
Combine it with a clean serif like Lora and a pink or a rose gold palette, and bum, you have a feminine styled website for a solopreneur or a modern brand run by a woman.
Fonts
Embed code:
CSS code:
What Fonts Are Similar To Montserrat
Colors
Background color: #fce1e0
Text color: #000000
Text color: #000000
10. Playfair Display + Chivo
Luxurious and trendy. That’s the status you can achieve with this combination.
The headings are dressed with Playfair Display, one of the most beautiful serifs from Google Fonts. Weatherby mark v serial number lookup. Use it in italics and your website will look premium and exclusive.
Chivo’s elegance and fine strokes, used in Light, makes it ideal for combining with the strong features of Playfair Display.
What are you waiting to try it out?
Fonts
Embed code:
CSS code:
Colors
Background color: #000000
Text color: #ffffff
Text color: #ffffff
Hope you find these combinations useful! I’m sure you’ll keep a couple of faves from here at hand.
Looking for more design advice on building your own website? Keep reading here: 11 Essential Tips for Non-Designers Building a Website