The Montserrat Project began with the idea to rescue what is in Montserrat and set it free under a libre license, the SIL Open Font License. This is the normal family, and it has two sister families so far, Alternates and Subrayada. But not all fonts are made equal, especially when it comes to their use for screens. Web and mobile typography has to take into account important aspects like legibility, readability, as well as accessibility. The cost of premium web fonts made by expert type foundries can add up quickly, especially if the license is based on page views. Montserrat is often mentioned as the closest free alternative to Gotham and Proxima Nova, however, in my opinion it’s a much more distinctive typeface compared to.
- Adobe Fonts Similar To Montserrat
- Microsoft Fonts Similar To Montserrat
- Adobe Fonts Similar To Montserrat
- Fonts That Go With Montserrat
The thing with choosing fonts…
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: 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?
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
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.
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
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.
R4cce tutorial. 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. Like, in life. That powerful they are.
Adobe Fonts Similar To Montserrat
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:
Microsoft Fonts Similar To Montserrat
Colors
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. 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
Adobe Fonts Similar To Montserrat
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
Looking for the new Rogue One - A Star Wars Story movie font? No Problem, we have it here [:: Click Here ::]
Fonts That Go With Montserrat
Font Family | Montserrat |
Font Name | Montserrat Thin |
Creator | Julieta Ulanovsky |
File Name | montserrat-thin.ttf |
Version | Version 1.000;PS 002.000;hotconv 1.0.70;makeotf.lib2.5.58329 DEVELOPMENT; ttfautohint (v1.00) -l 8 -r 50 -G 200 -x 14 -D latn -f none -w G |
Style | Thin |
Type | ttf |
Related Keywords | |
Preview | View Larger Preview |
Download | Please enable JavaScript to view the comments powered by Disqus. More Fonts Like Montserrat Thin |