From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
Typography is a very important part of design and choosing the right type for your design can be very challenging. From print to web layouts, typography is the center piece of a good design and today we gathered a few examples of beautiful typeface combinations in web design to inspire you. In web design, typography can be used in different forms, big bold headers, simple and clean menus, explanatory text and so on. Finding a good combination of typeface is more than only good taste, it’s an art.
To discover the fonts used in each design I used the WhatFont tool, which is pretty good (besides Firebug and other tools).
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Colbow Design
Futura PT (header) – Yellowtail (center).
Ana Majik
FF Tisa (header and footer) – Josefin Slab (everything else).
Fatum
Helvetica Neue and Octin College Regular.
nest
nest is beautifully mixing Fuller Sans DT Bold and Fuller Sans DT Regular.
Tommy
A nice combination of Arial and Bebas Neue.
826 Seattle
Courier (top menus), Museo Slab and Futura PT.
The Beauty Shoppe
Here we have a great combination of Nixie One (headlines) and Open Sans (Texts).
The Bright Future of Car Sharing
A lot of fonts here: Aurea Ultra, Helvetica, Times, Franklin Gothic and Georgia.
La Wine
We showcased La Wine on our last week texture use in minimal design but their typography combination is so beautiful that we decided to show them again. Fonts used here are Proxima Nova Extra Condensed – Bold, Helvetica and League Gothic – Regular.
Kansas City Creep Fest
Copse and Homemade Apple.
English Workshop
League Gothic Regular, Helvetica Neue and Museo Slab .
350gram
Kreon and Verdana.
palantir.net
Proxima Nova Extra Condensed and Verdana.
Johan Reinhold
Raleway and Georgia.
Co-Work
Arial and Georgia.
Dave Carter
Cuprum and Pacifico.
space150
Helvetica Neue and League Gothic.
Dilly Deli
Arvo, Helvetica and Georgia.
Jones Film Video
Droid Sans and Kulturista.
Australia Business Arts Foundation
Clarendon and Arial.
Switch to Virgin America
FS Sinclair, Vitesse Sans and Vitesse.
Protein
Droid Serif and Helvetica.
Polaroid
Helvetica Neue and Museo.
Timberland Women
Trade Gothic and Neutraface.
Hermetik
Caslon and Helvetica.
It’s odd how many of these fonts would appear incompatible at first glance, yet they work really well in the finished product. Great selection, Gisele.
One thing, though… you put up that “Dilly Deli” site with that photo of that amazing muffin thing, and all I have in the ‘fridge is a manky bit of bacon, a finger-width of old cheddar cheese, and a bagel from the rough end of the Lidl bakery section… That’s just mean. 🙁
wonderful collection, thanks for sharing.
This might not be relevant to the topic, was wondering what would be the best font tools used for web design? cufons or font squirrel 🙂
Great to see some new examples of web typography!
Thanks for your time and energy in putting this collection together Gisele. It’s good to see webfonts being more widely adopted. I really enjoyed browsing through them all.
I’m always a little worried about the fonts I choose when I’m designing websites. I’m kind of new to typography, but thanks to this post, I now have a much better idea of font combinations which work! Thanks a lot!
Thank You! 🙂
I really wish more sites could do that. Put the font combinations next to the site. It really helps those who are starting to experiment with typography. You guys are great.
wow! awesome inspirational sites, love to see some of my favorite fonts thanks for sharing
Brilliant article, there are some really inspiring designs in this collection. Good use of typography and a combination of fonts can really help to add that extra wow factor to a site.
English Worship is my favourite as I feel it manages to combine colour, texture and typography in the perfect way to really make an impact.
Amazing! Hope to see more on this soon! 🙂
[]’s
Hi there!
Thanks for linking to my site 🙂
Really appreciate it!
I chose Pacifico to emulate handwriting and Cuprum because is readable at small sizes. Although you will find a lot of free font faces available at http://webfonts.google.com I don’t recommend to use more than two ore maybe three different fonts in the same website in order to keep your site clean and tidy.
Cheers.
I just wanted to let you know that you can add
I love the sites that break the “2 fonts” rule and make it work. But, just as much, I love the arial/georgia combo. Great picks.
@marco, the web developer extension shows you font-family info. check the “Display Element Information” item
great post, very inspirational
Thank you! Very inspirational sites! =)
I love Creep Fest. Amazing site.
Great post, pretty good!
Dilly Deli has such great colours. Really great wordpress based restaurant homepage
I think this website has also a great typography: http://www.gamepocket.nl
For me Raleway and Georgia is the best
There’s many odd combinations that I see on some sites like DIN Pro / Mercury from Hoefler & Frere-Jones… very delicate combination…Never thought people actually used Droid Sans/Serif as an actual font for their sites, really surprised me. I’m not a big fan of Georgia…well any Serif for that matter. I use slab-serifs a lot. Cholla Slab for horizontal menus is very nice and less common. 3 fonts I try to stay away from is Arial, Georgia/Times New Roman, and Verdana. I suppose I don’t like commonality. …Now that I see a font I never heard of, Kreon, I will definitely have to use that one. 🙂