The best fonts for websites (web safe fonts)
Beginners 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:
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:
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:
(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.
Jul 27, 2009 at 8:36 am
thanks for sharing your information. having good time to read it.
Aug 03, 2009 at 1:41 pm
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.
Oct 10, 2009 at 5:58 pm
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.
Apr 05, 2010 at 7:04 pm
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
Jun 15, 2010 at 8:25 am
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.
Jul 16, 2010 at 1:27 am
Thanks for the perfect response to a basic question!
Nov 28, 2010 at 2:45 am
Any designer using “comic sans” (for web or print) should second guess their profession.
Apr 18, 2011 at 8:18 pm
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.
May 01, 2011 at 6:38 pm
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
May 11, 2011 at 7:54 am
What is the font used in this article? Is it Arial…. I couldn’t quite tell.
Thanks!
May 24, 2011 at 8:20 pm
@Steph- From the CSS for this article:
body{
font-family: Helvetica, Arial, Verdana, sans-serif;
}
Jun 08, 2011 at 6:50 am
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
Jun 11, 2011 at 8:10 pm
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
Aug 03, 2011 at 11:35 pm
Thanks man! You’ve gone straight to the point I was looking for. Good job.
Aug 21, 2011 at 7:54 pm
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
Oct 11, 2011 at 2:27 am
Thank you for sharing the font family in this article! …thanks!
Oct 31, 2011 at 5:11 pm
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
Mar 20, 2012 at 9:19 pm
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.
Mar 20, 2012 at 9:40 pm
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
Mar 20, 2012 at 10:49 pm
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.
Apr 06, 2012 at 1:23 pm
Hello,
someone knows where could I find the free fonts used in modern web 2.0 sites ?
Apr 23, 2012 at 2:52 am
Nice share dude! but i always wonder which is the most used fonts
Apr 24, 2012 at 10:21 pm
are there any security issues for the user if you use font face? ie norton safe search etc?
Jun 13, 2012 at 7:56 am
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.
Jul 20, 2012 at 10:18 pm
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.
Jul 20, 2012 at 10:20 pm
Sorry, it read the HTML line as actual html, should have known. The line in the CSS file is: “<!—->”
Jul 20, 2012 at 10:21 pm
Wow. “<link rel="stylesheet" href=…"
Jul 20, 2012 at 11:13 pm
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
Jul 20, 2012 at 11:15 pm
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?
Aug 04, 2012 at 6:51 pm
Fonts For Safety First..?
Aug 30, 2012 at 9:15 am
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.
Sep 08, 2012 at 6:40 am
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.
Sep 12, 2012 at 11:51 am
Good piece of info, has anyone an artistic variation of this already made?? with css? Let me know please.
Thank you
Oct 09, 2012 at 3:53 pm
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.
Nov 04, 2012 at 3:22 am
Thank you your article was easy,simple and straight to the point.You did a great job especailly showing the examples.
Thank you
Nov 06, 2012 at 12:33 am
I am newbie and building a site..what is the best font to use?..i am not into CSS etc..Many thanks
Dec 15, 2012 at 3:53 pm
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 !!!!!!!
Jan 14, 2013 at 7:23 pm
Using Georgia as well and noticed it has some browser differences, especially on versions of explorer.
Jan 18, 2013 at 2:13 pm
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.
Feb 14, 2013 at 8:58 pm
thanks….
Jun 15, 2013 at 4:44 pm
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!
Aug 15, 2013 at 9:39 am
Thanks you have helped me alot! your article is short and precise which makes it easier for me to understand!