What Font Should I Choose?

10 Practical Website Font Options For Your Next Project

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

Practical Fonts - Anton, Open Sans

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;

Grab the Fonts

02. Ubuntu & Open Sans

Font Sample

Practical Fonts - Ubuntu, Open Sans

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;

Grab the Fonts

03. Oswald & Lato

Font Sample

Practical Fonts - Oswald, Lato

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;

Grab the Fonts

04. Lato & Lato

Font Sample

Practical Fonts - Lato, Lato

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

Practical Fonts - Roboto, Lato

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;

Grab the Fonts

Serif & Sans Serif Fonts

06. Merriweather & Lato

Font Sample

Practical Fonts - Merriweather, Lato

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;

07. Cardo & Lato

Font Sample

Practical Fonts - Cardo, Lato

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;

Grab the Fonts

08. Roboto Slab & Open Sans

Font Sample

Practical Fonts - Roboto Slab, Open Sans

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;

09. Playfair Display & Open Sans

Font Sample

Practical Fonts - Playfair Display, Lora

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;

10. Rubik & Lora

Font Sample

Practical Fonts - Rubik, Lora

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;

Grab the Fonts

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.

If you enjoyed this post please share or comment below!

Share on facebook
Share on linkedin
Share on twitter
Share on pinterest
Join Our Newsletter for Marketing Insights and Offers!