Avatar
Editor in Chief
. 39 Comments

fonts

90%* of website design comes down to:

  • (1) the image assets you use 
  • (2) the fonts you select.
    (*That’s my personal completely hypothetical, biased estimate.)

Font embedding services (like Google Web Fonts or Adobe Fonts) sprung up as an alternative, giving your designs something new, fresh, and unexpected.

They’re also super easy to use.

Take Google for example:

Choose any font like Open Sans or Droid Serif or Lato. Generate the code and paste in your document’s <Head>. And you’re all set to reference it in CSS!

That took 60 seconds. And it was completely free. (Thanks, Google!)

What could go wrong, right?

Not everyone will have access to that same font. Which means you will have a problem. That beautiful font you just chose is going to show up as something random for your visitors.

Not if you create a fallback with a web safe alternative!

Here’s how it works.

P.S. I recently published a free, step-by-step guide on how to create a website using WordPress.

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, 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).

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.

15 Best Web Safe Fonts


There might be a few more.

But these are the best 15 web safe fonts to choose from. Select one of these and you can’t go wrong.

1. Arial

Web Safe Font - Arial

Arial is like the de facto standard for most.

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. Roboto

Web Safe Font - Roboto

Roboto is a sans-serif typeface that was developed by Google to be their system font for Android.

3. Times New Roman

Web Safe Font - Times New Roman

Times New Roman is to serif what Arial is to sans serif.

It’s among the most popular on Windows devices and is a new variation on the old Times font.

4. Times

Web Safe Font - Times

The Times font probably looks familiar. It’s the old newspaper print that you’re used to seeing in a small size in narrow columns. It’s about as traditional as it gets.

5. Courier New

Web Safe Font - Courier New

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

6. Courier

Web Safe Font - Courier

Courier is the old monospace stand-by available on almost all devices and operating systems.

7. Verdana

Web Safe Font - Verdana

Verdana is a true web font because (1) the simple sans serif lines and (2) it’s super large size. The letters are almost elongated, which makes it easy to read online.

8. Georgia

Web Safe Font - 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.

9. Palatino

Web Safe Font - Palatino

Palatino dates back to the Renaissance. Seriously! It’s another large font that makes it perfect for the web, traditionally used for headings and print-style ads.

10. Garamond

Web Safe Font - 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).

11. Bookman

Web Safe Font - Bookman

Bookman (or Bookman Old Style) is another perfect headline option that maintains legibility (or readability) even when used in a small size.

12. Comic Sans MS

Web Safe Font - Comic Sans MS

Comic Sans MS is a playful, whimsical alternative to other sans serif options.

It’s also kinda fugly. Don’t use it! 😉

13. Candara

Web Safe Font - Candara

Candara is a sans-serif typeface commissioned by Microsoft. It is part of the ClearType Font Collection which was released with Windows Vista.

14. Arial Black

Web Safe Font - 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.

15. Impact

Web Safe Font - Impact

Impact is another bold headline choice that looks great in a few short words, and absolutely terrible in a sentence or longer.

Conclusion

Web-safe fonts give you a Plan B. A fallback option for when your first option might not work.

They’re widely accessible and have been available on most devices for decades (in some cases).

While not all of them are #winners (Comic Sans MS? Yuck!), there are enough to choose from that should be closely related to your original option.

What happens, when if not? You can’t go wrong with Arial!


Want to ask a question or leave a comment?


Ask me anything

  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • +

39 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

*

  1. Avatar

    First, thank you WebsiteSetup Editorial for the insight and expert advice.

    Second, I arrived here because I am tired of blocking fonts that are wrapped around stalkers and was looking for a way to avoid all external to-site-to-victim/visitor fonts but still see icons.

    Blocking stalker-fonts means I miss most website icons too, which are replaced, as you’ve noted to some comments here, by stacked fonts.
    An example is your ‘Search’ icon at the top right of this page is replaced by a small square outline, as are 10 other Fonts here. Also blocked are the facebook and googletagmanager.com stalkers.

    Having said all that, I am confused as to why web sites even need to shove another bunch of fonts at us. I get it about the various devices each wanting to be masters of the universe, but as Google notes “Like any other asset, font files have to be downloaded to a site visitor’s computer before they can be displayed.” Why, when we already have dozens on our devices.

    Kiddie-kewl fonts and bells and whistles may look cute and pretty but IMH, it cautions visitors that if the site needs all that bling, glitz, and glamour – what’s wrong with the product, services, or information?

    Your site here is a good example of what a site should be like – almost. My browsers anti-stalker is preventing access to my privacy from 10 fonts – plus between Google and facebook; 3 stalkers but allowing 27 java scripts – so like I said almost 🙂

    Great job helping others – I appreciate what you do and your info has helped me a lot.
    ~s~

    • Avatar

      Hey Sharon, glad to be of help! Personally, I think there is nothing wrong with using custom fonts. Using different graphic assets is part of design and I like the possibilities that the numerous custom fonts give web designers. On the other hand, since users are generally getting more privacy conscious, it’s important to always have a fallback font for when the original typeface can not be displayed. Another possibility is to host the font files yourself so that no connection to Google or some other website is necessary. More information here: https://websitesetup.org/custom-fonts-wordpress/. Thanks for the comment!

  2. Avatar

    For Comic Sans, you say that it is “fugly” and that you shouldn’t use it. However, it was created to be an easy to read font for dyslexic people because the letters are not easily confused for each other. For example, put a lower case d next to a lower case b and you’ll notice that even if you flip them horizontally, they don’t look quite the same. The “stalk” of the d is subtly curved, whereas the b is straight. Same with the p and q. There is also some deliberate padding between the letters to make them less likely to merge together for a dyslexic person

    So whilst you might not like it aesthetically, its one of few fonts which were designed with accessibility for dyslexic people in mind. Another choice would be Dyslexie, however this is not a standard font so not websafe. It also isn’t free so not good for the vast majority of people who might need it. The license for a year is actually quite expensive when there are so many free to use fonts out there just for aesthetics rather than accessibility. Therefore comic sans is the way to go.

    • Avatar
      Nick Schäferhoff Verified

      Hey Alexa, thanks a lot for the info! I had no idea Comic Sans was made with that kind of purpose in mind. While I personally don’t find it aesthetically pleasing, I definitely see it in a different light now. Do you know of any other measures/fonts to make websites more accessible for dyslexic people? Thanks for the insightful comment!

      • Avatar

        Some of us dyslexics have a problem with positioning, that are totally independent of the font in use. We swap letters because the dyslexia affects the link between intent and execution.

        • Avatar
          Nick Schäferhoff Verified

          Thanks for pointing that out. Again, if you have any additional tips on how to make websites and online content more dyslexic accessible, please don’t hesitate to share them!

  3. Avatar

    Just an important note for anyone reading this ‘information’:

    Helvetica is NOT and has NEVER BEEN a standard or supplied Windows typeface.

    I do not know why this person recommends helvetica as ‘web safe’. It is NOT ‘web safe’.

    Do your research because websites such as this are responsible for spreading misinformation that will impact your user viewing experience without taking any responsibility for the act.

    • Avatar

      Absolutely! We might have also taken the Comic Sans bashing a little too far in this post, seeing as how many people come to its rescue. Thanks for the comment!

  4. Avatar

    I’m pretty sure you misunderstand how webfonts work.

    Selecting a font from Google fonts isn’t dependent on your OS already having that font, otherwise zero of them would work, and that would be a horribly unreliable service.

    There hasn’t been any reason to worry about ‘web-safe’ fonts for the past 5 or 6 years. Any embed code from Google or TypeKit will have an appropriate fallback for the split-second FOUT caused by asynchronous stylesheet loading.

    Jargon aside, I’d call all of this advice redundant.

    • Avatar

      Hey Mitch, I respectfully disagree. There are cases in which it makes sense to have a surefire fallback font. For example, in some areas of the world Google is blocked. So, if you have embedded Google fonts on your site, they will not load. To make sure your design still looks mostly the way you want to, setting a font that is present most computers is a good option.

    • Avatar

      I agree with Nick. Adblockers like uBlock Origin block fonts from loading, so I can’t use my fancy brand font without alienating the 60% of my users that use adblock. Setting a fallback “web-safe” font is still pertinent today, if not more so.

  5. Avatar

    Thank you for the article!

    Arial may be superstar on many web-safe lists, but my pet-peeve with Arial is that the uppercase “i” (eye) and the lowercase L are almost indistinguishable. Try printing the auto-generated daily Guest-password with Arial, and your receptionist will have every visitor coming back complaining that password is bad – true story.

    • Avatar

      Haha, I wasn’t aware of that. Looks like the deeper you dive into the topic of fonts, the more interesting it gets. Thanks for the anecdote!

  6. Avatar

    Hi there, I would like to know what font you use in your headings? You used this font in your headings, such as ‘Conclusion’ thank you! Please reply asap as I am trying to set up a blog for my pet business :).

  7. Avatar

    Great article with examples. I have found a list that show these basic fonts are installed with all systems
    Arial
    Courier
    Georgia
    Times New Roman
    Trebuchet
    MSVerdana

    Stick with these and the result is faster web loading and readability
    ” To infinity and beyond” !!!

  8. Avatar

    > You can’t go wrong with Helvetica.

    Actually, you can. It’s not included in the Windows operating systems, so the user’s browser will substitute a similar font, probably Arial, which looks almost the same. BUT, if the Windows user has a cheap knockoff of Helvetica among their fonts, it will use that. And sometimes look horrid.

    So when specifying a font family, I suggest “Arial, Helvetica, sans-serif” in that order. The user’s browser will choose the first one on the list that is available to it, keeping both Windows and Mac displays looking good. On portable devices, … ah, but that’s another reply.

  9. Avatar

    Comic Sans is pretty much the only free dyslexic-friendly font available, certainly the only web-safe one, and it’s only “fugly” at large sizes. Please don’t bash it, and don’t bash designers who use it, or who use it as a fallback.

  10. Avatar

    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).

  11. Avatar

    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?

  12. Avatar

    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.

  13. Avatar

    The following are not installed in Windows 7, but can be added.

    Helvetica
    Palatino (but ‘Palatino Linotype’ is)
    Bookman (but ‘Bookman Old Style’ is)

  14. Avatar

    Hello WebsiteSetup Editorial,

    Thanks for your concise, helpful overview.

    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.
    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.

    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?

    Thank you for your patience and expertise.
    — Liana

    • Avatar

      Hello Liana, you may find letter-spacing and font-stretch properties useful, as they are the only css properties I need when modifying the text.

      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.