The best fonts for websites (web safe fonts)

The best fonts for websitesBeginners to website design often scratch their heads in confusion and ask themselves “What are the best fonts for web design?” The answer to this question is both easy and a little complicated. You see, while there are some good fonts for websites, there are also the highly necessary standard fonts for websites as well. Throw into the mix the fact that you can have any font on your website using images and you’ll undoubtedly scratch the hair right off your head.

In this post, I’d like to clear up the confusion and offer some solid “web font” advice to help make choosing your website fonts easier (and to prevent premature balding as well.)

Let’s begin with a little background information:

Text vs. images

The first thing you need to know is that you can safely use any font on a website provided that it is part of an image. How can you tell the difference? Easy: if you can use your mouse to select individual words or even letters of the text your see on a website, then what you have is pure text. Below is an example:

You can easily select this text.



But below is an image that contains text. You can’t select individual words or letters because they are part of an image:


Image of text


The font used in the image above is called “Moderna” — and you probably don’t have it on your computer. But since it’s used in an image, you can see it just as I do.

Which brings me to the next point:

If they ain’t got it, they won’t see it

So, you just downloaded the coolest grunge font from your favorite free site. You then decided to make all of the main headings (<h1> </h1> tags) on your website this font. Awesome! But when showing your masterpiece of website creativity to your friend at his house, your eyes widen in shock. “Where is my font?!”

If you read the post titled You actually DON’T visit websites then you’d know that, in truth, websites come to you. And if you don’t have a font installed on your computer that a designer used for pure text on his website, then you won’t see that font. Instead, your browser will replace it with some other font that is on your computer.

Common fonts for websites

Since not everyone is using the same operating system, it’s actually a little challenging to prepare a list of web safe fonts that you can use as pure text on your websites. Some people use Windows Vista or Mac OS X. Others use Linux. And others are still using older versions like Windows 98 or Mac OS 8! So to keep things safe, here is a list of the most common, standard fonts for websites that even people using ancient operating systems can see:

  • Arial
  • Courier New
  • Georgia
  • Helvetica
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Webdings

Here’s an image of what they look like:

100% safe!


I realize that this is a pretty short list, but remember that these fonts are to be used as pure text and not as logos or other fancy website design elements.

If you’re sure that most of your website visitors are using more recent operating systems, then you can also add these common website fonts to the list:

  • Andale Mono
  • Arial Black
  • Century Gothic
  • Comic Sans MS
  • Impact
  • Tahoma
  • Zapf Dingbats

Here’s an image of what they look like:

Could be safe

(There are a few more, but I’m the kind of website designer who prefers to use fonts that everyone can see.)

Final thoughts

In answer to the question “What are the best fonts for web design?” I would recommend for pure text that you stick with the most common fonts in the first list above. This will ensure that everyone visiting your site can see it the way you intend it to be seen. For your website logo, navigation, and other website design elements, you can use any font you want as long as it’s part of an image.

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!



42 Responses:

  1. Free Icons Download

    thanks for sharing your information. having good time to read it.

  2. affordable bespoke web design

    Everything in this world comes on the internet. Hence for a proper exposure of our product or the services, we have to choose a right concern which provides us a best website design.

  3. Judy

    Thanks for the help. I’m designing my Web site, a first, and have run into a few questions along the way…..you were a great help. Plain and simple for a beginner like me.

  4. Adam Cleaner

    i’ve often gone down the route of just sticking with arial but lately i have found it rather boring. after reading this article i’ve decided georgia is a nice font as it works well when bold. the only downside is the numbers are terrible as they don’t site along a flat line so i need to change every phone number back to arial

  5. Vince

    I think fonts should go with the theme of the blog or website. There is really no clear “forbidden fonts”. What is important is that it is readable and attractive to look at for a certain theme.

  6. Kirstyn

    Thanks for the perfect response to a basic question!

  7. DesignBuddy

    Any designer using “comic sans” (for web or print) should second guess their profession.

  8. Rachel Firth

    A third option: Google Web Fonts. I wouldn’t use it for body text–many of these fonts would not be legible at small sizes–but an unusual font can be a nice touch in headers.

  9. Nick

    Well, I completely disagree.

    Those fonts are ugly and represent web sites, that are of my opinion ugly and not fun to use. Speaking for business sites mainly. When is the last time you heard, “Man I just love that Verdana font he used!” Nothing worse then having users that don’t like to use your site. The application is doomed to failure.

    You can easily download font’s to the users cache via css. I use a set of specially made fonts for all of my enterprise applications. You just put the link in the css file and all users can see it.

    We have sales people with tons of different pc’s both Mac and PC and it works fine.

    Nick

  10. Steph

    What is the font used in this article? Is it Arial…. I couldn’t quite tell.

    Thanks!

  11. Jeremy

    @Steph- From the CSS for this article:

    body{
    font-family: Helvetica, Arial, Verdana, sans-serif;
    }

  12. Meena dhyani

    but we can embed font in our website… so why use only common font..???

    but the only problem is the embedded font don’t show clear in small sizes… any idea abt how to solve this problem..??? thanks in advance

  13. Swebdizajn

    Because of its nature trebuchet font can be a little-read but it is important that he chooses beautiful wallpaper. What do you think you, is it still best to use Arial for the text site? Thanks for the post

  14. Kharllos

    Thanks man! You’ve gone straight to the point I was looking for. Good job.

  15. adwil

    Article is weirdly outdated, here is simple css script to load custom font into user’s cache:

    @font-face
    {
    font-family: font_name;
    src: url(‘font_name.eot’);
    src: local(my_font), url(‘font_name.ttf’) format(‘opentype’);
    }

    Font in .eot format is for IE, ttf is for rest browsers. You can convert any font to those formats by online converters. Use google: “.yourfonttype convert to .eot” or “.yourfonttype convert to .ttf”. After doing that and putting correct URLs in css You can use those fonts like any other, just use:

    font-family: font_name;

    Greetings

  16. kory

    Thank you for sharing the font family in this article! …thanks!

  17. Matthew Bennion

    I’m going to defend this article by sayign The fonts mentioned in it are outlined because they work within ANY browser without the need for CSS font importing via css, etc

    Beginners need the basics and that’s exactly whats been outlined here.

    Matt

  18. Prodajem kupujem

    We are thrilled with the fonts! One of the most important segments in the enrichment design web sites will be safe and nice choice of font. Thank you for your help in choosing.

  19. Elliott

    Question for anyone~ I was checking out the source for this page to see where the font for the general text was specified, but I don’t see it declared anywhere(of course i might be overlooking it) just curious how that is handled for this particular page

  20. Web dizajn kurs

    Do you agree that they are still true (not italic fonts) prettier and easier to read?
    Also, the font from your gallery we find a very attractive form that we want to incorporate into the new site design. Thank you.

  21. 321 rentacar

    Hello,
    someone knows where could I find the free fonts used in modern web 2.0 sites ?

  22. jeff

    Nice share dude! but i always wonder which is the most used fonts

  23. uk web designer

    are there any security issues for the user if you use font face? ie norton safe search etc?

  24. Dean

    Some harsh comments in this thread. Matthew is completely right, the first sentence had “beginners” in it. Needless to say, even the apparently experienced could do with some calming down in this area. Being clever isn’t being helpful. We develop a huge amount of corporate sites and we are always having issues with designers and agencies who want to use fonts that are simply not helpful to the audience and the browsers they use let alone content indexing with engines. Business web isn’t about ‘pretty’, some ugly sites work well and it’s far more important for websites to be functional than lovely. Viewers in this space a ruthless about doing what they came to do and are hell bent on action more than looks. However, a little attention to functional design can bring about a nice compromise.

  25. Drew

    Eliott asked above: “I was checking out the source for this page to see where the font for the general text was specified, but I don’t see it declared anywhere(of course i might be overlooking it) just curious how that is handled for this particular page”

    If you view the source again, notice the line: “”

    This line loads a CSS file from another location on this server and uses that as the stylesheet for this page. You should be able to click on the href and go to the CSS file. The line containing the font is one of the first lines after the comments. Sorry no one responded quicker.

  26. Drew

    Sorry, it read the HTML line as actual html, should have known. The line in the CSS file is: “<!—->”

  27. Drew

    Wow. “<link rel="stylesheet" href=…"

  28. Popravka ra?unara

    Fonts are the first thing a web designer must have in mind when creating the site. Softened the edges of fonts and unusual appearance are certainly appealing and winning visitors. thank you

  29. Kiropraktika

    Unlike most designers, I think it still needs to maintain a standard font of this beautiful and stylized fonts only used for headings and subheadings. What do you think about it?

  30. Baju Muslimah

    Fonts For Safety First..?

  31. Birmingham Website Design

    Dont personally like to load fonts via css for websites unless client really wants a certain font

    This is because on slower connections you have that horrible load period when the font reverts from the standard one to the css loaded font

    But i suppose now internet connections are getting quicker it has more validity.

  32. kupujem prodajem

    Sometimes it happens that some fonts are displayed on the bad sites. The problem is most prevalent in regions that use letters with check marks. However, it is pretty nice form letter used everywhere where possible. Thank you.

  33. Globeview Webdesign

    Good piece of info, has anyone an artistic variation of this already made?? with css? Let me know please.

    Thank you

  34. Doug Wilson

    Georgia isn’t (100%). I’m using Linux Mint and Firefox – no georgia for me. I used to use georgia too but changed to “times new roman” as an alternative.

    Seems silly that OS’s and Browsers would be without a font, when it’s so easy and user friendly.

  35. Neferu

    Thank you your article was easy,simple and straight to the point.You did a great job especailly showing the examples.
    Thank you

  36. Zak

    I am newbie and building a site..what is the best font to use?..i am not into CSS etc..Many thanks

  37. Daniel Casey

    Sorry about the last comment my bro was mad at me and tried to make me look bad. Actually I think this website is COOL !!!!!!!

  38. wine dine

    Using Georgia as well and noticed it has some browser differences, especially on versions of explorer.

  39. Passagens Aereas

    A third option: Google Web Fonts. I wouldn’t use it for body text–many of these fonts would not be legible at small sizes–but an unusual font can be a nice touch in headers.

  40. praveen kumar

    thanks….

  41. Niels

    Nice article, but I think it is better to not use standard fonts to create a more unique look. So take a look on the google fonts or Fontsquirrel (I prefer google ) website and enjoy!

  42. RonahK

    Thanks you have helped me alot! your article is short and precise which makes it easier for me to understand!


Share your thoughts below: