For entirely too long, your font choices when designing a website were pretty limited. Historically, your choices for sans serif fonts were Arial or Helvetica and Times New Roman or Georgia if you wanted to use a serif font. With the advancements in web technology that we’ve seen in recent years (HTML5 and CSS3) you now have more flexibility than ever before when choosing web fonts, so let’s cover a few of the popular choices as well as some new up and comers.
Open Sans – Google Fonts
Open Sans is a very clean font available for free at Google Fonts. It was designed for the web, which has become a very important aspect to think about when selecting fonts for your site. With people viewing your site on such a wide variety of devices nowadays, it’s important that your text always shows as crisp and clean and possible, which is definitely the case with Open Sans.
Noto Serif – Google Fonts
Noto Serif is another great font available at Google Fonts. This is another one that was designed for the web, and it was designed by Google. They placed a high importance that Noto Serif shows it’s best face on every device and every language, so you can be sure your site will show up nicely just about everywhere. Noto Serif itself looks great at larger sizes and has several weights, so it could easily be used as a heading/accent font but is also very readable at small sizes so it works for content as well.
Mission Gothic – Lost Type Co-op
Mission Gothic is a great font that works great for headlines and as an accent font in general. Recently released over at Lost Type Co-op, Mission Gothic is versatile sans that comes in five different weights in regular and italic styles. This is a font that actually looks good in all 10 styles, unlike so many others where the bold version appears to added in at the last second. Unfortunately it’s not available as a ready-to-go web font, but if you head over to FontSquirrel.com (a great web font generator) you’ll be ready to go in no time.
Fjalla One – Google Fonts
This one is a display only font from Google Fonts, meaning it’s a font that you should only use for headings and at larger sizes. Fjalla One is a chunky font but it is also tall, which gives it a playful feel that’s still easy to read. This is another font that was developed for use on screen, so it looks very good at all sizes and is a pretty flexible display font to work with, especially on blogs or sites that are a little more laid back.
Libre Baskerville is a modern take on a classic font, optimizing a couple of things so that it shows up well on modern devices.. The font was actually designed by Pablo Impallari but is now available at Google Fonts as well. As Pablo puts it on his website, “Libre Baskerville is webfont optimized for web body text (typically 16px). It’s based on 1941 ATF Specimens, but it has a taller x height, wider counters and minor contrast that allow it to work on small sizes in any screen.” Basically, all that means is that it shows up very nicely on your desktop, your tablet, and your phone.
There are a billion fonts out there nowadays, and a lot of them are great – but even more of them aren’t any good at all. Be careful when choosing your web font, and keep in mind that in today’s world you need to make sure that it shows up the same everywhere (computer, phone, refrigerator…) because unfortunately fonts sometimes don’t show up anything like they are supposed to.
What’s your favorite new web font? Be sure to let us know in the comments.
Jack Nycz is a front-end web developer at Southern Web Group.