5 Fonts to Try for Your Next Web Design Project

A variety of font styles, including sans-serifs, slabs, condensed, and more.

Wooden type letters
Wooden type letters.

The days of only being able to use a handful of “web safe fonts” in our website designs are in the past. Today we have access to a wide range of wonderful typefaces to draw from using @font-face and many of the 3rd party web font services that are now available.

While there are a number of places you can find fonts to use on your website projects, the ones I will cover in this article are all available to use for free from Google Fonts.

Here are 5 excellent web fonts that you can experiment with for your next web design project.

Raleway

One of my favorite fonts, Raleway is a sans-serif that comes in a variety of styles – 9 in all. These styles range from a very thin weight to a very thick extra bold version. These varying weights allow you to get incredible variety in your design, all while using just this one font! The very thin and very thick styles will not work as body copy text, but they work perfectly as titles and headers when set at larger sizes. The medium sizes (Medium, Regular, Semi-Bold) are all perfectly usable as body text.

Besides the variety of weights available in the Raleway typeface, another thing I love is the design of the characters. There is a distinctiveness in many of the individual letterforms, like the “W”, that you do not find in many sans-serif fonts, yet the font itself is still very readable at a variety of sizes.

Oswald

If you are looking for a nice condensed font, Oswald may be a great choice for you. This typeface comes in 3 weights – a light, a normal, and a bold, giving you some variety to use in your designs.
Like most condensed fonts, Oswald is unlikely to be a good choice for large blocks of body copy, especially if that copy is set at smaller sizes.

Oswald is best used at larger sizes for titles and headings.

Ultra

Another font that works great when set at larger sizes is the slab-serif, Ultra. This font only features one style, and it is a very heavy one. The ultra-thick letterforms and those slab serifs really have a weight to them, making this font a bold and powerful choice.

The downside of Ultra is that it only has that one weight, so there is no way to get some variety in your design by using different versions of this one typeface.

Tangerine

If your design calls for a script font with some nice styling, but which is also readable, Tangerine may be a good one to experiment with. The wispy letterforms of the capitals make for some very nice styling, but they are not so over the top as to become unreadable. This is a problem with many script fonts that Tangerine avoids. There are two weights available for Tangerine, a regular and a bold, but the difference between the two is minimal. Because this is a script font, the letterforms are thin on both styles and this choice would only work well when set at larger sizes.

Roboto

Roboto is a workhouse of a typeface. It is the typeface that was designed by Google for use in their Android system.

The power of Roboto is in the incredible variety it offers. A variety of weights, from thin to bold, are available as are italicized versions of all those weights. There are also variations on Roboto, including a condensed version, a monospaced font, and a slab-serif. With this incredible variety you could easily use Roboto in a number of ways on a website, from large headings to small body text. Because there are so many weights, these fonts would also be ideal for responsive sites where the typographic styles may need to be adjusted for different screen sizes and displays.