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…


Medula One / Abel

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!

medula-one-abel

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;

Julius Sans One / Cinzel

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!

julius-sans-one-cinzel

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;

Dancing Script / EB Garamond

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.

dancing-script-eb-garamond

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 Script / Didact Gothic

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.

kaushan-script-didact-gothic

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;

Oswald / Droid 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.

oswald-droid-serif

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;

Passion One / Forum

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.

passion-one-forum

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;

Lato / Grand Hotel / Lato

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.

lato-grand-hotel

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;

Meddon / Open Sans Light

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!

meddon-open-sans-light

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;

Raleway / Merriweather

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.

raleway-merriweather

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;

Satisfy / Roboto Light

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.

satisfy-roboto-light

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!

thePixelPixie.com - WordPress boutique

Subscribe and receive my FREE eBook


4 MISTAKES You’re Making on Your Website that are Costing You MONEY!

  • This field is for validation purposes and should be left unchanged.

The Author

Save

Like thePixelPixie on Facebook

Leave a Reply

Your email address will not be published.

Ready to chat about how ThePixelPixie can help?