Typography is one of the most dealings that designers have and that’s where I want to make your work easy. There are lot’s of good combinations that looks great on the web, you just need to know how to use them.

But first you need to understand there are just a few print fonts that looks good on the web and if you force a print font on a website it may look really weird.

Websites should be easy to read and easy to find the information you are looking for, so to beginners or expertise’s when you are doing a layout of a website or blog this is one of your first problems.

As a web designer this is the first thing I look for when I draw a layout. Understand the kind of information the site wants to show to people and the kind of people who read that is my premiere answer.

Where to find this kind of fonts? Well, you’ve two ways. Open source fonts or paid fonts. If you are a friendly designer you will choose the first one. Open source is the best way to guaranty your font will be easy to find, and even easier to read by the browser.

There are a few places where you found really good fonts – Font squirrel, google fonts, behance, the league of moveable type, free typogragy.com

After looking for trending fonts (yes, there is a lot of pages talking about it, but not all of them show you the best combinations) you need to make a test and understand if the font or combinations are legible on the web. Most of the times I change my font in the middle of the project. That needs a clinical eye because like a road one day, this is the most important design decision you make in a web project, and even for a print project that decision can change the course of your success.

As you can read by John Boardley, “Fundamentally, the responsibility we bear is twofold. First we owe it to the reader not to hinder their reading pleasure, but to aid it; second, we owe a responsibility to the typefaces we employ. Good typefaces are designed for a good purpose, but not even the very best types are suited to every situation.” says John at article ‘On choosing type‘.

The next tip to you how to understand the type looks on screen. Tell you that you need to test doesn’t answer you how to test, and Typecast can help you. Here you can see body text working with subtitles and then you just need to choose.

After finish and gives you some good fonts, your next move is the weight of the font. Don’t use to much scales but use space between lines. A harmonious content in a web site makes a huge difference in the legibility of information. And always remember, details make the difference.

My tip? Use google fonts. You see the delay every font have in browsers and they give you all the weights the font have, beside the code you need to put on your file. And with any cost.

Another secret is the number of fonts you use. In almost any design project, using too many fonts can be overwhelming. This is especially true when dealing with content websites. Keep your palette simple. Use one or two typeface families to get the most impact in your design. Add emphasis with bolding, italics, sizing and color, it’s the best decision.

But you really want to know which are the best fonts for web design and the best combinations, I will not make you lose more time.

> Dense

> Museo Slab

> Glober Free Font

> Gafata std

> Roboto
> Titillium 
> Lato

> Dancing Script
> Garamond
> Oswald
> Open Sans
> Glamour

> Fabrica

> Code Pro

Every designer and every web designer needs to know more about typography, and maybe some of them will stop killing design by the wrong use of typography. Bad typography can ruin a good poster or run a website.

Be careful, not only choose because it looks good but also because it looks legible too.
My last tip is this amazing book – “The big book of font combinations”

My sources?
– Mr McGuire
– Creative Bloq
– Web Designer Depot
– Awwwards