10 Awesome Google Font Combinations Trending in 2017
A list of trendy fonts hand-picked from Google Fonts that pair well together and how to install them on your website.
Website typography used to be a more mystifying design practice than it is today. The complicated process of decorating a web page with custom fonts once required converting and embedding font files to be hosted on the user’s server, and the choice of available fonts was limited to the user’s own collection or knowledge of typography outside of the standard system fonts. As a result, most websites looked nearly identical in their content formatting, which relied on many overused and mundane web safe fonts.
That all changed in 2010 with the release of Google Fonts, an open-source project that allows for far easier implementation of custom fonts on websites. Installing these fonts on your own website is luckily a process that is quick and easy, but you should be aware that not every font combination in Google’s library is a recipe for typographical success. With the right font pairings and usage considerations, however, your online brand can exude professionalism, beauty and reader friendliness without the need for expensive customized fonts. In this article, I'll show you how to accomplish all this.
A List of 10 Trending Google Font Combinations
Let's get to it! In no particular order, here are 10 of the best Google Font combinations currently trending:
1. Open Sans Condensed + Open Sans
Here’s an easy combination that works wonders for nearly any applicable use. Open Sans is one of—if not the—most versatile fonts in the entire collection of Google Fonts. It’s extremely easy to read in large blocks of text, while still being striking enough for headlines.
Simple. Elegant. Familiar. You can’t go wrong!
I can’t foresee any scenario where Open Sans would be a poor choice. Unless you’re looking specifically for a serif font, I think this one will serve most any business, blog, landing page, or web app perfectly.
2. Oswald + Droid Serif
Oswald is a great font for headlines no matter the font-weight or use of caps. Its condensed nature helps it grab attention and pop, but it also makes for a pleasant text as your main body’s font.
Droid Serif has a classical look, similar to literature fave Garamond. Under the right conditions, this serif font can lend a nice elegance to your professional appearance.
This pairing works well for professionals dealing with high-end clientele, such as attorneys, real estate agencies, or even upscale boutiques. The versatility of Oswald and the timelessness of Droid Serif make for great product description text where it’s important to emphasize an item of premium quality.
3. Amatic SC + Josefin Sans
Okay, this one’s definitely more on the light-hearted side. Obviously this combination won’t work for everyone, but the whimsical nature of both Amatic SC and Josefin Sans create something that is sure to stand out—just as long as you exercise caution!
If you’re a fun-spirited artist, musician or entertainer then this font could be essential in capturing your unique personality. Depending on the overarching tone and subject matter, this combination could work for a niche blog as well. It might even be perfect for a politician’s campaign website. (Kidding!)
A word of advice: Do not use Amatic SC as your main body text. You will drive your readers insane.
4. Montserrat + Merriweather
Montserrat is a favorite among designers for its versatility and simplicity, and Merriweather pairs wonderfully with its contrasting style and easy readability. Feel free to interchange them as headlines or paragraph text—they both work great as either!
This particular combination is a nice balance of modern and classic design. As such, its variety of uses could support many types of businesses. Personally, I feel these fonts would do well for any type of online news source or publishing agency.
5. Roboto Condensed + Roboto
The Roboto font-family is a personal favorite. Extremely versatile with a wide range of font weights, there’s practically no limitation to what the font could be used for. Modern and geometric, yet somehow remaining friendly and dependable, Roboto is a marvel of form and function.
Here’s another pairing that you’d be hard-pressed to find an ill use for. While Roboto works for just about anything, I think it’s particularly great for tech start-ups, modern small businesses, or any type of brand with an eye to the future.
6. Raleway + Roboto Slab
It’s our friend Roboto again! This time, however, we’re looking at the serif variation, Roboto Slab. It’s a font that is just as versatile as its cousin, yet a bit more classical in style. When paired with the distinctive and bold Raleway, we have an amazing match of clean and refined typography.
Raleway is one of those fonts that screams sophistication. When used as an all-caps headline, I think it works beautifully for luxury items like jewelry, designer clothing, or similarly upscale ecommerce products. Roboto Slab supports it well with simple and approachable descriptive text.
7. Playfair Display + Source Sans Pro
According to its designer, Playfair Display was inspired by the letterforms of the 18th century during the transition from quills to steel-tipped pens. It’s no surprise then that this font exudes old world charm but with a modern spin.
Source Sans Pro pushes things a tad further into the future, creating an intriguing combination that is ornate while still being utilitarian.
Playfair Display adds a personal touch to something like a tagline or product description. If you have a chance to use its ampersand or currency symbols, you’ll immediately see why it’s the perfect choice for a product or service centered around luxury and appearances. Source Sans Pro keeps the text grounded in a modern and clean presentation.
8. Fjalla One + Cantarell
Fjalla One may not be the most versatile of fonts, but one thing it does extremely well is create headlines that demand attention. Small or large, lowercase or all caps, those letters are hypnotic no matter what you do with them. Similarly, Cantarell has a charm that seems to do for paragraphs what Fjalla One does for headlines.
Blogs or landing pages would be great for this pairing—or really anything with long bodies of text that require noticeable subheadings to break up content.
9. Alegreya + Lato
Alegreya has a certain appeal that feels very “earthy” and friendly to me. There’s no pretense about its personality; what you see is what you get.
Lato could give Open Sans a run for its money as the champion of all-purpose fonts in Google’s library.
Together they make for a combination that is fun, easy to read, and pragmatic.
Great for small local businesses like cafes, or professionals who want to present a warm demeanor to clients. Also those in the “New Age” or alternative health realm might want to consider utilizing this pairing’s tonal qualities.
10. Unica One + Vollkorn
Unica One can be pretty funky on its own, but when used as all caps it becomes a headline that is all business. Vollkorn is a font reminiscent of classical literature. Used in this combination, somehow the two work amazingly together.
Contemporary and impactful, these two fonts might help authors or journalists announce their next significant work to the world. If you’re a wordsmith or someone with a commanding voice, Unica One and Vollkorn share characteristics to consider.
Why Should You Use Google Fonts?
Welcome to what many web designers consider their best friend. Speaking from experience, I can tell you that I rarely embed custom font files onto websites anymore. Google Fonts is now almost exclusively the first and last place I turn to for a website’s typography. Here’s why:
- It’s completely free. Doesn’t matter how many fonts you choose or how many websites you use them on. You’ll never pay a dime.
- As of May 2017 there are over 800 fonts in the library. Chances are you’ll find the right style to match your brand.
- It’s fast. Because the fonts are hosted on Google’s servers, the files are intelligently compressed and designed to load quickly.
- It’s easy. A simple copy-and-paste into an HTML file and you’re done.
- It’s organized. All fonts are categorized and searchable within one database. No more scouring through messy subfolders on your computer to find that perfect font.
- Did I mention it’s free? It’s free!
How to Install Google Fonts
No headaches required here. Just go to Google Fonts and find the font(s) you need.
As you select your fonts they are cumulatively added to a collection at the bottom of the page. When you’re finished with your search, click on that bottom tab and a window with embed instructions will pop up.
From here you can choose to include additional styling such as italic, bold, bold-italic and so on. Just click on the CUSTOMIZE tab and select the styles you think you’ll need.
For example, here is how I would select both regular and bold text for the font Khula.
Embedding the Standard or @Import?
You’ll notice you have two options for embedding the fonts on your website: using a standard <link href> to be used in your site’s HTML file, or a @import url to be included in your site’s CSS file. So which one should you use?
Generally the best option is to copy and paste the <link href> line into your HTML file. Your fonts will typically load faster this way rather than waiting for the CSS file to load, and this method also has a bit better support for (very) old browsers.
Where to Put the Code
You’re going to copy and paste the line of code Google gives you into the <head> section of your HTML file. So using the Khula font I chose above, it will look like this:
< link href="https://fonts.googleapis.com/css?family=Khula:400,700" rel="stylesheet" >
QUICK TIP: You can also specify font styles by writing them out in the url, separated by commas. For example: “https://fonts.googleapis.com/css?family=Khula:bold,italic,bolditalic“
Using the Font in Your Style Sheet
Now you simply call on the font as usual within your CSS code. For demonstration purposes, your main heading and paragraph text could look like this:
font-family: ‘Khula’, sans-serif;
font-family: ‘Khula’, sans-serif;
QUICK TIP: Make sure to include a fallback font such as ‘serif’, ‘sans-serif’ or a similar web safe font in the rare event that your Google Font fails to load.
Advice On Pairing Your Fonts
Deciding which fonts to group together can sometimes be a tricky artistic balance to strike. On the one hand, your font selection will be most effective when there is enough of a contrast in styles; each font on your site must stand out from the others and earn a justification for its use. On the other hand, you don’t want your fonts to stray too far from each other stylistically, which could give the impression they were chosen randomly.
QUICK TIP: Think about what emotion or idea a particular font evokes. Try to pair it with another font that evokes the same emotion or idea. It’s all about finding the right fonts that speak to your unique brand. You’ll know it inherently when a font feels like your brand or whether it’s giving mixed signals.
Serif and Sans-Serif
A tried-and-true method is to pair a serif font with a sans-serif one. Their styles tend to contrast well together, offering an easy distinction between headlines and paragraphs.
Experimentation is Key
When I’m choosing fonts for a new website, I like to download all possible Google Font options to my computer and play with them in a word processing document. Fidgeting with different sizes and weights and comparing the combinations side-by-side is an effective way to determine the best possible pairing. By taking the time to experiment, you may even discover that using a thin variation of a given font makes for better headline text than if you were to use an entirely separate font. (The simplest solution is oftentimes the best.)
Google Fonts is a powerful resource for DIYers who don’t want to pay for expensive custom fonts on their website. But with great power comes great responsibility: typography requires careful thought for it to be done well, and not every font out there is a winner. We hope that this guide helps steer you in the right direction, inspiring you to find that perfect font pairing to capture your brand’s personality.