Tag Archives: websafe

Web-Safe Fonts: There are More than You Think!

When it comes to using fonts for my websites, I admit I’ve gone the “super-safe” route more often than not. In search of making my text readable on all devices, I end up using Arial, Garamond, Georgia, and Verdana…and that’s pretty much it, since I avoid Times New Roman like the default plague it is.

Imagine my surprise, then, when I learned that there are plenty of other web-safe fonts available–and even some which are friendly to multiple operating systems! Here’s how to make this work for your site:

Explore Which Fonts ARE Web-Safe

CSSFontStack is an excellent resource to begin searching for the web-safe fonts you want. It displays OS statistics on the most commonly-used web fonts, so you’re more aware of which OS (Mac or Windows) likely carries your chosen font. VERY handy!

See Which Mac and Windows Fonts are the Same

This Windows and Mac fonts list shows you which fonts are designed alike (for instance, Verdana and Geneva, Lucida Console and Monaco, Book Antiqua and Palatino). This will not only help you pick a good cross-platform web-safe font, but it will also help you choose fonts for your font stack in your CSS document (see next point!).

Build Your Font Stack Varied and Strong

As this W3Schools page shows, you can’t safely specify just one font name and be done with it–you must give the users’ browsers a range of fonts to choose from if one or more of the specified fonts is not natively installed. This range of font options is called a font stack, and will save your users from having to read your content in a really odd font.

See Examples of Font Stacks

Sitepoint’s “8 Definitive Font Stacks” article is a great jumping-off point for your sites, either to use directly or as a template for designing your own font stack. This will help you make your font choices as web-safe as possible!

Summary

Choosing fonts for your website content doesn’t have to be “same-old, same-old”–using these web resources can help you pick stylish yet standard choices for your design! (And now if you’ll excuse me, I’m off to select some new favorite fonts! :D)