Get this week's FREE printable now!
I’ll admit it. There are some pretty feminine combos in this collection. I am, however, unabashadly feminine! (don’t worry, boys…I’ll get some more masculine combos going shortly. I promise).
Without further ado…
Ok, perhaps not overly feminine here. I personally find this combination to be classic, with just a touch of modern going on. In fact, it’s a combination that I’ve used very recently on an arts organization website. It worked very well!
Add this to your website <head> area:
<link href='//fonts.googleapis.com/css?family=Medula One|Abel' rel='stylesheet' type='text/css'>
And use this in your CSS:
font-family: 'Medula One', cursive; font-family: 'Abel', sans-serif;
Ok, ok. You got me. This is not a good combination for a website, unless it’s maybe just a simple “Coming Soon” page. Why? Well, Cinzel here is a caps-only font. Therefore it doesn’t work well for body text. I still like the combination though. And it could very nicely be used in print pieces! Have fun with it!
Add this to your website <head> area:
<link href='http://fonts.googleapis.com/css?family=Julius Sans One|Cinzel' rel='stylesheet' type='text/css'>
And use this in your CSS:
font-family: 'Julius Sans One', sans-serif; font-family: 'Cinzel', serif;
Ahhhh. Yes, I like this one very much. Imagine a site devoted to poetry, using this combination for various verses. Yummy. The EB Garamond is a very classic serif font. It pairs beautifully with the flowing, but semi-upright, Dancing Script.
Add this to your website <head> area:
<link href='http://fonts.googleapis.com/css?family=Dancing Script|EB Garamond' rel='stylesheet' type='text/css'>
And use this in your CSS:
font-family: 'Dancing Script', cursive; font-family: 'EB Garamond', serif;
Kaushan has a brush and somewhat oriental feel to it, while Didact Gothic is simple without being weak. I think the readability of both would work well for websites having to do with the environment, green living, etc. Really, the possibilities are endless. Those are just the first possibilities that spring to mind when *I* look at this combination.
Add this to your website <head> area:
<link href='http://fonts.googleapis.com/css?family=Kaushan Script|Didact Gothic' rel='stylesheet' type='text/css'>
And use this in your CSS:
font-family: 'Kaushan Script', cursive; font-family: 'Didact Gothic', sans-serif;
Are you looking for a classic sans-serif/serif pairing? Well look no further. Oswald is a somewhat condensed-width font, paired here with the more classically-rounded Droid Serif font. Droid verges on the event more common Times New Roman, but it just has prettier lines. I think you’ll find this combination to be very versatile.
Add this to your website <head> area:
<link href='http://fonts.googleapis.com/css?family=Oswald|Droid Serif' rel='stylesheet' type='text/css'>
And use this in your CSS:
font-family: 'Oswald', sans-serif; font-family: 'Droid Serif', serif;
Another sans-serif/serif combination. This time, Passion One is a very bold, very strong choice. Slightly rounded bottoms of letters like ‘s’, ‘o’, and ‘e’. I think it looks particularly good paired with Forum, a semi-seriffed font.
Add this to your website <head> area:
<link href='http://fonts.googleapis.com/css?family=Passion One|Forum' rel='stylesheet' type='text/css'>
And use this in your CSS:
font-family: 'Passion One', cursive; font-family: 'Forum', cursive;
Ohhhh! Hello, Beautiful! I think this may be my favorite combination and I’m still looking for the perfect project to use this set on. What you’ll immediately notice different about this combination is that instead of using the cursive font as the header, I’ve instead used it as a sub-header. The rest of the piece is framed in the very simple, easy-to-read, Lato.
Add this to your website <head> area:
<link href='http://fonts.googleapis.com/css?family=Lato:400,700|Grand Hotel' rel='stylesheet' type='text/css'>
And use this in your CSS:
font-family: 'Lato', sans-serif; font-family: 'Grand Hotel', cursive;
Oh my goodness! This one comes in a close 2nd to Lato/Grand Hotel for me. Really! Meddon feels like a perfect “American” script, don’t you think? Imagine a website devoted to a place in New England. Or a site devoted to founding fathers. Yes, yes! Using different weights of Open Sans judiciously throughout any web or print piece, combined with Meddon – that’s a winner right there, folks!
Add this to your website <head> area:
<link href='http://fonts.googleapis.com/css?family=Meddon|Open Sans:300' rel='stylesheet' type='text/css'>
And use this in your CSS:
font-family: 'Meddon', cursive; font-family: 'Open Sans', sans-serif;
Classic. Right here. There’s just not much more to say about this combo. Both fonts are extremely readable at both small and large sizes, making them a great pair for many types of uses.
Add this to your website <head> area:
<link href='http://fonts.googleapis.com/css?family=Raleway:300|Merriweather' rel='stylesheet' type='text/css'>
And use this in your CSS:
font-family: 'Raleway', sans-serif; font-family: 'Merriweather', serif;
Roboto has become one of my favorite fonts to use for websites of all sorts. Used in it’s various weights it can make for a very strong, almost masculine feel for a site. But using the light weight here with the lovely cursive Satisfy gives a whole different feel. Satisfy is an excellent cursive font in that it remains highly readable at smaller sizes. You probably wouldn’t want to go too small with it, but try using it as a primary header. I think you’ll enjoy working with these 2.
Add this to your website <head> area:
<link href='http://fonts.googleapis.com/css?family=Satisfy|Roboto:300' rel='stylesheet' type='text/css'>
And use this in your CSS:
font-family: 'Satisfy', cursive; font-family: 'Roboto', sans-serif;
Well there you have 10 more wonderful font combinations, specifically from Google Fonts. Google Fonts is an absolute treasure-trove of typographic design inspiration. I would love to know if you use any of these combination, and hear what some of your favorite font combinations are. Tell me in the comments below!
4 MISTAKES You’re Making on Your Website that are Costing You MONEY!
