Why Does ‘Web Safe’ Matter?

Each device comes with its own pre-installed font selection. The selection is based largely on its operating system.

The problem is that every system differs a bit.

Windows-based devices might have one group. MacOS ones pull from another. Google’s own Android system uses their own as well.

Now pull up a website. Even this one would work. The font you see may not be the one original one intended.

Meaning: Let’s say the designer picked some obscure, paid font family for this site’s design. If you don’t have that font already installed and it’s not pulling from a web-friendly place – more on that later – the font you see would default back to some basic variation like Times New Roman.

You, as the visitor, wouldn’t necessarily know that this is what has happened, though. For you, it might just look plain ugly.

The ‘Web safe’ ones, appear across all operating systems. They’re the small collection of fonts that overlap from Windows to Mac to Google (even Unix or Linux ones too).

Blazer Rose Kiomi Classic Kiomi Classic They give designers (and website owners) the ability to specify which fonts to fall back to if needed. That way, you can control what shows up (no matter what) across all devices. And you can pick something that’s still kinda close to the original font (so that what your users wouldn’t see something random or out of place).

It’s a plan B, the ‘just-in-case’ version. An emergency system to save the world from bad font selections.

Got it? Good! Let’s take a look at the most popular web safe fonts to choose from.

1. Arial

It’s one of the most widely used sans-serif fonts (which means no little curls on the end of each letter). It’s often substituted on Windows devices for other interesting (read: more beautiful) font choices.

2. Helvetica

Helvetica is usually the designers’ go-to sans serif font. You can almost never go wrong with Helvetica (or at least using it as a fallback for most other choices).

5. Courier New

Courier New, similar to Times New Roman before it, is a variation of another old classic. It’s also considered a monospacedKiomi Kiomi Blazer Rose Classic Classic font (as opposed to the serif vs. sans serif we just saw).

8. Georgia

Georgia is similar to Verdana in size and stature (with bigger-than-usual letters compared with fonts of the same size). So while it’s great for certain circumstances, make sure to avoid pairing this serif font with others (like Times New Roman) which might look minuscule in comparison.

10. Garamond

Garamond is another old-school font that dates back to styles used in 16th century Paris. This new and improved version was introduced and bundled on most Windows devices (and has been adopted by others since).

14. Arial Black

Arial Black is the bigger, bolder, badder version of your basic Arial. Funny enough, it also shares proportions with Helvetica. Why is that important? So that they could originally use it to replace Helvetica and print things without paying for the license.

Jo Liana

I have a question, but first, an explanation. My search question was “What font families are least problematic for websites?” Your article was second on the list following what’s safe for Chinese fonts in CSS. After reading your message, I thought, what goes around comes around. With a couple of exceptions, your list took me down memory lane to another century when I learned to put the lead in leading, then moved on to IBM Selectric, then to Compugraphic and Verityper phototypesetting, then to the the earliest Apples, and then to 15 years with InDesign. It has spoiled me with its precise tools to minutely tweak type every which way from Sunday.Classic Classic Kiomi Rose Kiomi Blazer Now I’m making the transition into digital production. Unspoken yet obvious in your overview is the ongoing goal of all typography: do what’s best to communicate. I believe that type isn’t “there” to draw attention to itself. Like design — with or without type — it must be message-driven and serve to communicate, up to and including type and design that is gloriously and outrageously shocking. It was this perspective that defined my choice to ask what’s least problematic, not what’s best. Perhaps it is something like a physician’s “first, do no harm” mantra. For my first digital project I will try to use the Google digital serif family Libre-Baskerville but will second that with Georgia, then Times. For the sans-serif I’ll bypass Cabin and CabinCondensed and go with Arial, backed up by Helvetica. Libre-Baskerville is big. It’s an elegant Cadillac cascade, a pleasure to read online, and yet it’s kinda fat so I want to tweak it just a wee bit, perhaps reducing character width somewhere between .5% to 1.5%. (Perhaps there’s a “chunky” digital Caslon but I’m on deadline with no more time to research.) The sans-serif options also need tweaking. I want to fractionally condense the characters such that you might not consciously notice, yet visually you won’t bang your eyeballs on clunky characters from line-to-line. I’m not complaining, but there are moments while working with Helvetica when it feels like the “gift”, perhaps it’s a message with complex content, long sentences, and long paragraphs, is wrapped in butcher paper and sealed with duct tape. The second sans-serif problem is that I need to condense and yet pump-up the bold (what’s really needed is an extra bold or black) so that it kinda mimics Frutiger condensed bold or black. CabinCondensed would work visually even though the bold face is weak but I fear the kinds of complications that you’ve described in your article.

Rose Kiomi Kiomi Classic Blazer Classic So here’s the query: can I do a wee bit of tweaking in CSS with these web-safe fonts? If so, do you have any tips or links to info on how to safely manipulate web-safe font characters?

Letter spacing is the same with “tracking” in some design software, while font stretch is the “horizontal scale,” which widens the text. With these two, you can modify web-safe fonts to make it look unique.

P.S. the font-stretch property is a new property from CSS3, meaning it will only work for browsers that supports CSS3. If you want to make your font style “less problematic” then avoid using the “font-stretch” property, since there are still a lot of people who use outdated browsers.

joe venturini

Thanks for taking me down type memory lane. I started my career a Type Director at a major NYC ad agency, that was still using hot metal for some jobs. Went through all the same permutation of producing type that you did as I became and AD and then a creative director. Had the pleasure of personally knowing and working with the great type designer Ed Benguiat and watching him hand draw all his original fonts (no computers back then) — what an artist. Thanks for the memories.

Jessica Lee

Hi, I am not trying to build a web page, or write any documents. I am just trying to figure out how to set my fonts so I can read them again. I have Windows 10 but use Google Chrome as my browser. (Yes, I fiddled with them, and now I don’t know how to go back.) I’ve read about Serif, Sans-serif and fixed-width. I can barely read the tabs or the bookmarked pages on my screen, and I don’t know how to make them larger. Chrome was recently updated, and I have found where to change fonts, but I can’t make them legible. These are my settings for size: Standard Times New Roman 16 Serif Times New Roman 16 Sans-serif Ariel 16 Fixed-witdth Consolas 16 The MINIMUM Font size is set at 17. Chrome recommends setting FONT size at medium. I appreciate any help you can give me. Thanks, Jess

Dave

Tess

Helvetica is not part of windows or ios default font sets. Helvetica doesn’t display well on the web, Helvetica Neue, on the other hand, does. It can be used in a stack but you’ll need a backup that doesn’t require licensing. Use this font stack:

font-family: “Helvetica Neue”, Arial, sans-serif;

If you’re not stacking, don’t use Helvetica, you’ll only see a substitute font or it won’t display correctly at all. I say avoid Helvetica.

smallsii

Robert Mening

Marvin

Hi, Thank you so much for this! Amazing. I would like to speed up my website, avoiding loading too much fonts. Verdana seems to be a very good choice thanks to your explanations. So that mean, if I use Verdana, the font will not have to be loaded anymore, as It’s pre-installed on every device/browser on the web, right?

Robert Mening

Tony

Lawrence Roscoe

Helpful article – thanks! In support of Verdana, I’d like to point out that it is unambiguous for easily mistaken characters: I i L l | 1 0 O o (). Whatever font is being used on this web page is visually ambiguous for I, |, l (cap i, vert bar, and small L respectively).

About WebsiteSetup®

WebsiteSetup is a Kiomi Kiomi Rose Classic Classic Blazer free resource site for creating websites. WebsiteSetup was founded in 2013 by Mil Olive Sweatshirt Maharishi Komainu Crew qwa44z. The main goal of this website is to provide step-by-step instructions for setting up a website, blog or e-commerce site.