My next project is in the works and I find myself in an all-too-familiar situation. Which website font options will work best for the build at hand?
Ever find yourself stuck on deciding which fonts to use? There are limitless font options available. You can spend days researching and testing out all the possibilities. This is great if you have nothing better to do, but not for most of us that have deadlines to meet. So, to lighten the load a bit I’ve assembled a collection of 10 practical website font options you can use towards your next project.
Hope these help inspire you and lighten your work load a bit.
Benefits of using these fonts options include:
- Saving you hours of time… really.
- I’ve included the font styling code as guidelines. (I hate it when I see font collections and have no idea what they did when it comes to letter spacing, line heights, etc.)
- You’ll find that several of the options will work for most business websites.
- The fonts are FREE and available from Google Fonts. I’ve included links to their respective Google Fonts pages.
Sans Serif Fonts
01. Anton & Open Sans
Font Sample
Headings
font-family: ‘Anton’, sans-serif;
font-size: 50px;
font-weight: 400;
line-height: 40px;
letter-spacing: 0;
Subheadings
font-family: ‘Anton’, sans-serif;
font-size: 24px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0;
Body
font-family: ‘Open Sans’, sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0;
02. Ubuntu & Open Sans
Font Sample
Headings
font-family: ‘Ubuntu’, sans-serif;
font-size: 50px;
font-weight: 700;
line-height: 40px;
letter-spacing: -2px;
Subheadings
font-family: ‘Ubuntu’, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 30px;
letter-spacing: -1px;
Body
font-family: ‘Open Sans’, sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0;
03. Oswald & Lato
Font Sample
Headings
font-family: ‘Oswald’, sans-serif;
font-size: 50px;
font-weight: 700;
line-height: 40px;
letter-spacing: -1px;
text-transform: uppercase;
Subheadings
font-family: ‘Oswald’, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0;
text-transform: uppercase;
Body
font-family: ‘Lato’, sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0;
04. Lato & Lato
Font Sample
Headings
font-family: ‘Lato’, sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0;
text-transform: uppercase;
Subheadings
font-family: ‘Lato’, sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 30px;
letter-spacing: 1px;
text-transform: uppercase;
Body
font-family: ‘Lato’, sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0;
Grab the Font
05. Roboto & Lato
Font Sample
Headings
font-family: ‘Roboto’, sans-serif;
font-size: 50px;
font-weight: 700;
line-height: 40px;
letter-spacing: -1px;
Subheadings
font-family: ‘Roboto’, sans-serif;
font-size: 23px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0;
Body
font-family: ‘Lato’, sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0;
Serif & Sans Serif Fonts
06. Merriweather & Lato
Font Sample
Headings
font-family: ‘Merriweather’, serif;
font-size: 46px;
font-weight: 400;
line-height: 40px;
letter-spacing: -1px;
Subheadings
font-family: ‘Merriweather’, serif;
font-size: 22px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0;
Body
font-family: ‘Lato’, sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0;
Grab the Fonts
07. Cardo & Lato
Font Sample
Headings
font-family: ‘Cardo’, serif;
font-size: 48px;
font-weight: 700;
line-height: 40px;
letter-spacing: -2px;
Subheadings
font-family: ‘Cardo’, serif;
font-size: 24px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0;
Body
font-family: ‘Lato’, sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0;
08. Roboto Slab & Open Sans
Font Sample
Headings
font-family: ‘Roboto Slab’, serif;
font-size: 46px;
font-weight: 700;
line-height: 40px;
letter-spacing: -1px;
Subheadings
font-family: ‘Roboto Slab’, serif;
font-size: 22px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0;
Body
font-family: ‘Open Sans’, sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 30px;
letter-spacing: 0;
Grab the Fonts
09. Playfair Display & Open Sans
Font Sample
Headings
font-family: ‘Playfair Display’, serif;
font-size: 48px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0;
Subheadings
font-family: ‘Playfair Display’, serif;
font-size: 24px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0;
Body
font-family: ‘Lora’, serif;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0;
Grab the Fonts
10. Rubik & Lora
Font Sample
Headings
font-family: ‘Rubik’, sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 40px;
letter-spacing: -2px;
Subheadings
font-family: ‘Rubik’, sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 30px;
letter-spacing: 0;
Body
font-family: ‘Lora’, serif;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0;
Final Thoughts
This is not the be all end all of font choices but it’s a great resource for combinations that work well across a variety of websites.
There’s a bonus too. This will save you a ton of time trying to figure out what works and what doesn’t.
I hope these links and font styling snippets make things easier on you for your next project.
I’d love to hear your feedback and any font combinations that are in your “go to” bag of tricks for websites you work on. Please share your comments below.