However, not all font sets are created equal. Different computers can have very different sets of fonts installed, and most casual computer users never know the difference. When you are designing a Webpage, you need to keep this in mind. If you decide to use a font on your page that a visitor doesn’t have, that font will render differently (and often unattractively) on the visitor’s machine.

So, how do you make sure that your fonts will look good on the largest number of computers out there? Easy: use Web safe fonts. As computing evolves, considerations for the Web have taken effect for modern operating systems and Web browsers. Among these considerations is a list of Web safe fonts that Web designers can use to make sure their fonts render properly. Web safe fonts are a set of highly common fonts that come installed on just about every computer out there. Some (really) older computers may not have a few of the fonts that we consider Web safe today, but they are a minority.

Who should use Web Safe Fonts?

Every Web designer should use Web safe fonts. There are some cases where you will want to use a special, non-Web-safe font, but these cases are rare (and we’ll discuss cases like this in a bit). You want to make sure your fonts are always easily read by your users. By keeping your fonts readable with Web safe fonts, you retain readership and make your site more accessible to a wider range of people.

I guess the best answer to the question “who should use Web safe fonts” can be summed up in one word: “you.”

Why use web safe fonts?

As explained above, if you use a font on your page that your visitor doesn’t have installed, their browser will pick a fallback font that you may not intend to appear on your page. Often, the result is ugly text that is not at all pleasing to read.

If a visitor can’t fluidly read your site, then he or she can’t get the information you provided, and this is the whole reason your visitors are at your site! Even if the text on your site is ugly and someone decides to trudge through it for your content, it will still look displeasing and you will retain fewer readers. A Website with no readers is a waste.

Using Web safe fonts is just one part of a larger set of design practices that keep your site user friendly. Don’t strain a reader’s eyes, don’t make information difficult to find, and make sure they can progress through your site and content without having to think about it. If at any point someone looks at your site and takes even a millisecond to think, “Ugh, that’s some ugly text,” you’ve jarred the experience. Ideally, the entire encounter with your site should be smooth as silk, and using a Web safe font is a big part of attaining that goal.

When to use Web safe fonts?

As a general rule, always use Web safe fonts for your page’s content.

Where are web safe fonts applicable?

Your plain text headers, links, and content should all use Web safe fonts. If you plan to use normal text for your logo, you should also use a Web safe font for that. In fact, one of the few exceptions to using Web safe fonts is if you decide to use text in your images. If you plan to use images for some of your text, then it’s safe to use other fonts because images will appear the same on the visitor’s computer as it does on your own. However, you should never use images for all of your text. Images for text should be used sparingly. Logos and some headers may use images. Everything that’s content or otherwise normal text, though, should use a Web safe font.

How do I use Web safe fonts, and which ones are safe?

Include Web safe fonts in your CSS with font or font-family rules. (I’ve included the most useful ones below for you.)

There are a good number of Web safe fonts. Many of them look very similar to other Web safe fonts, and in practice they are essentially the same. A CSS rule for your font family, for example, may look like this:

font-family: Arial, Helvetica, sans-serif;

The first font listed, Arial, is an extremely common font available on most computers, so you can safely bet that it will show up properly on a visitor’s screen when they visit your site. In rare cases, a computer may not have Arial installed, however. Older Apple computers, for example, may not have Arial, as well as several other fonts. Helvetica, though, is widely installed among Apple computers, and it looks very similar to Arial, so Helvetica is listed second. When a browser cannot find the first font listed, it looks for the next fonts in order. In this case, Helvetica will be used when Arial is not installed.

And in extremely rare cases, some computers may not have Arial or Helvetica installed. In this case, “sans-serif” is used. This is a fallback, default font that the Web browser will use if it cannot find any of the previously listed fonts.

There are four types (or families) of Web safe fonts: serif, sans serif, cursive, and monospace. Each of these has their own fallback font (like sans-serif above). The fallbacks for each family, respectively, are: serif, sans-serif, cursive, and monospace. You will find that font rules almost always include one of these fallbacks, and always last.

The fonts are listed in CSS format so you can easily copy and paste them if you don’t feel like typing them out. This is likely how you will be seeing the fonts most of the time, anyway.

Serif Web Safe Fonts

The art of Web design has many general guidelines that have taken hold as the Web has become more firmly rooted in the Web 2.0 setting.  Below are the Web safe fonts that you can use for your serifs.

Sans Serif Web Safe Fonts

Sans serifs are typically used for the bulk of the content on a Web site.

Monospace Web Safe Fonts

Monospace fonts are useful when you want to make sure characters all line up with exactly the same width. Displaying code or tabular data without using a table are good uses for monospace fonts.

“Cursive” Web Safe Fonts

Currently, there aren’t many Web safe cursive fonts. There is a “cursive” fallback, like sans-serif, serif, and monospace, but for the most part this is highly unused. There’s some debate whether Comic Sans MS is a compatible match with the cursive fallback font. Some think Comic Sans MS belongs with sans serif fonts, and others say it’s the closest font to a normal “cursive”-like feel that you can currently get in a Web safe font.

In any case, cursive and Comic Sans MS are typically avoided. Personally, my opinion is that you should avoid both of these altogether.

In some cases, can I use other fonts?

Yes, there are some exceptions to the “always use Web safe fonts” rule. Sometimes due to circumstances out of your control, you simply must use a font that is not considered Web safe. A client, for example, may have a business that has used the same font for their company’s signs, trademarks, and logos for over a century. Bringing a business like that to the Web without losing its long-standing integrity and brand recognition would likely be impossible with a Web safe font.

Or, perhaps you, as a designer, want to experiment with design and take things to the bleeding edge. I’ve always believed that true artistry and experimentation lies in the artist’s ability to see beyond the normal scope and step away from standard practices. If you share this idea, then undoubtedly at some point you’re going to look for ways to tinker with non-Web-safe fonts in your pages.

Below are the best ways to use non-Web-safe fonts in your page, and still have them render properly on most computers out there.

Provide downloads for your users

If you want to use a very specific font for your site, you can include a link to the font file on your page. In this way, visitors can download and install the font, then visit your page and see the font rendered properly with no real drawbacks.

This is a lot of work to expect the visitor to do, though, just to view your site as you want them to see it. The visitor doesn’t usually want to do anything special just to view a Webpage. Requiring that someone go through the trouble of downloading and installing a font just to view your site is a great way to lose visitors. Odds are, most of your visitors won’t even know where to begin installing the font, anyway.

There are also some potential legal issues if you take this route. If you are not the person who created the font, then most likely you do not have the legal rights to distribute it.

Because of these major flaws, this method is widely avoided.

Use images

When you use an image editor like Photoshop, The GIMP, or even MS Paint, you can create images that use any font you like. Put the image on your page and it will look the same on a visitor’s computer as it does on yours. Below is an image that uses three non-Web-safe fonts that came pre-installed on my Macbook.

Whether you, as this site’s visitor, are on a Mac, a Windows PC, in your favorite flavor of Linux, or even surfing on something else like a PDA or iPhone, the fonts above show up properly. This is true even if your PC doesn’t have these fonts installed.

This is a great way to display any font you like for your logo, advertisements, or some of your headers. However, you cannot rely on images for actual content. A visitor cannot highlight text with the mouse, meaning that if they want to copy and paste your text somewhere (say, to send your business name to a friend), they can’t do it. Also, text in images cannot be read by screen readers, which some handicapped people use to browse the web. Any text you have in your images will not be accessible to these people. Plus, some people browse with images turned off or have their images blocked by a third party, like in some corporate offices that use a proxy server. Finally, search engines cannot properly read and catalogue text within images.

All in all, any text you use in your images should primarily serve as purposeful decoration. There is an alternative though: use an image replacement technique.

age replacement techniques

There are techniques you can use in your CSS and (X)HTML that will let you use images in place of regular text while maintaining your site’s accessibility and search engine friendliness. Notice the header above that reads “Image replacement techniques” is an image. It uses a font called Rockwell (which also came installed on my Macbook) and the font is green rather than the typical black we’ve been using.

This header utilizes an image replacement technique called Single Pixel <img> Replacement. It uses CSS and (X)HTML to display the image, but if someone has CSS turned off, the image will not show. To solve this problem, there is a hidden span element that will still neatly display the text “Image replacement techniques” for this header.

As for screen readers and other situations where images might not be accessible, there is a 1-pixel image with alt text that reads “Image replacement techniques.” This way, we aren’t harming accessibility and screen readers will still pick up the text as we intend it.

One of the only disadvantages to using this technique is that it adds some extraneous elements to your (X)HTML. They don’t harm anything, but they do add more bulk to your work and the filesize of your document. It also makes it more difficult to follow when reading your site’s code. Even still, it’s a fantastic way to add rich typography to your site.

The astute reader may have already taken a peek at this section of the article to get a look at the CSS I used here. Please note that I had to modify the technique a bit for use on WPDFD since it already has pre-existing styles.

Second, add this code to your CSS file.

	#header {
	    width: 250px;
	    height: 30px;
	    background-image: url(irt.gif);
	    }
	#header span {
	    display: none;
	    }

Finally, implement the image replacement with this in your (X)HTML:

	<h3 id="header">
	    <img src="spacer.gif" alt="Image replacement techniques" />
	    <span>Image replacement techniques</span>
	</h3>

View it in a browser, and you should see the effect at work.

Use sIFR

sIFR (Scalable Inman Flash Replacement) is perhaps the most popular way of using rich, beautiful fonts on your page. Indeed, you can see an example of it at the top of every WPDFD article. This article’s title, “Knowing About Web Safe Fonts,” is displayed for most users in a font called Interstate, which is not typically a Web safe font.

There are only a few steps to setting up sIFR, including a process called “font tuning” (don’t worry, it’s not tough), but it still generally takes even an experienced Web designer/developer roughly 10 minutes to set it up across a site that didn’t previously use it.

It is easy to set up, however, and its benefits are many. It provides scalable, accessible text in a font of your choosing by dropping a Flash element with a transparent background in place of your original text. If a visitor to your site doesn’t have javascript, Flash, or either installed, then your text is still displayed on your page in a CSS-styled, normal header.

Personally, sIFR is the method I would recommend if you want to really strengthen your site’s typography. It’s important to note, though, that sIFR should not be used for the main content of your site. Use it for headers, quotes, slogans, and other small, but significant, bits of text.

Well, you came upon this page and read through this article so you can stay informed on Web safe fonts, and now you know all the most important aspects of them. It’s probably a good idea to bookmark this page so you can have a list of Web safe fonts handy at all times.

Sometimes I get the same feeling when I’m surfing the web. Everyone feels this sensation to some degree, and it triggers the “fight or flight” response hard-wired into our brains (stay here and fight through this mess, or get out as fast as you can). It’s no wonder most web pages are abandoned within a few seconds of viewing.

Whether intended or not, a person’s home and the way he presents it are physical manifestations of his personality just as the design and content of a corporate web site are virtual manifestations of a brand. Environments, both real and virtual, affect human perception and behavior.

Clutter comes mostly from a couple of sources. As a natural progression, a home and a web site seem to accumulate things. At the same time, they are rarely purged of non-essentials. There is also the “design by committee” effect where everyone from every department wants their information front and center. It’s better to decide what is most crucial and provide easy access to the rest. In a living room, the kids’ toys should be contained in a designated basket or toy chest, while on a typical corporate web site, the HR information should be kept on the HR page. Most people are not coming to the home page to look for employment.

In someone’s home, a quick escape is not always easy, but on a homepage, the “back” button is just a click away. If a web site is like a house, and its pages are like rooms, and people want visitors at their homes, how do they make visitors feel comfortable enough to stay? And come back again? How do we as designers create environments to attract, comfort and retain visitors? These are the things both interior and web designers stew over.

Visual Elements: On a web site, color, typography, iconography and other imagery should be considered as carefully as an interior designer considers surfaces, furnishings and art. Are they appropriate for the target user? A site targeting “metal heads” will not appeal to its market if it is bathed in soft pastels and cutesy typefaces.

Color: There are appropriate uses of color for specific messages targeted at specific end users. Once an appropriate color palette is defined, a designer can use it to direct users to specific content, organize that content, and create an appropriate environment. Too many colors, colors that clash, or use of too much strong color can make a space feel cramped and cluttered.

Typography: Too many typefaces in one place is like cramming a room with furnishings from different eras. Stick to a theme, and visitors will be more comfortable and get a better sense of the message the type is sending.

Imagery: We have all seen web pages with the cheerful customer service woman, or the close-up of the two hands shaking - “closing the deal.” This is clutter, just like the faded Matisse prints we hung on our walls in college with scotch tape. Imagery (photos, illustrations, icons) should enhance an environment by promoting a message or feeling. Imagery becomes clutter when it serves no purpose, lacks quality, or is poorly presented.

Content: A clearly defined hierarchy of information is crucial to helping users understand what a site has to offer and finding the information they seek. If too many elements are shouting at visitors (flashing, bold, large, bright….), they are likely to be overwhelmed and move on. Sites that have a clear focus and logically organize less critical messages and elements provide a more approachable environment. Information that is presented with one voice and sticks to message is more likely to keep viewers engaged and confident.

Navigation/User Feedback: A house is generally set up with its rooms in logical locations; the entry way generally does not lead to a bedroom. The same is true for a well-designed web site. If a visitor has to think about where they can click to get more information, or click through multiple pages to get to specific information, they are not likely to stick around. The best web sites clearly map out what information is available where, and lead viewers to critical content via subtle feedback, like buttons or text that highlight when the mouse travels over them.

The bottom line is “web clutter” affects a business’ bottom line. It has been well documented how clutter can drain us of time, energy, and trigger stress. When considered in the realm of the Internet, cluttered web pages make finding information difficult and lead to abandonment. Web sites that are “sticky” present viewers with a comfortable and organized environment and logical organization of content that helps viewers understand what is available and where to find it. The goal is to create an organized “home” with only the necessary things in their logical places to allow customers to find what they’re seeking.

Ahhh. Peace at home and on the homepage through good design.

1. Little Boxes
CSS Templates for various page layouts

2. Snipplr
Collection of code snippets - JavaScript, HTML, PHP, CSS, Ruby, Objective C

3. AJAX, DHTML and JavaScript Libraries
An extensive list with over 60 Ajax, Javascript and DHTML Libraries - with detailed descriptions.

4. Javascript Framework
Easy Ajax and DOM manipulation for dynamic Web applications

5. AJAX Javascript Solutions for Professional Coding
Over 90 useful AJAX-based techniques you should always have ready to hand

6. DHTML and AJAX samples
Nice looking simple downloadable DHTML and AJAX code

7. AJAX Patterns
A Wiki of reusable AJAX code, and huge AJAX resource

8. Mozilla Developer Center - AJAX
Mozilla’s offering on AJAX

9. CSS Typeset
Interactive CSS generator

10. Open Source Directory
An archive of the Web’s best Open Source software, applications and references.

11. .htaccess Creator
Online tool to create .htaccess files

12. PHP Form
Create HTML Forms in seconds and get the code

13. Best Solutions for Images
30 scripts of impressive slideshows, lightboxes and galleries you can use for effective presentations of your images.

14. Lightbox
Lightbox is a simple unobtrusive script used to overlay images on a page

15. Design patterns and tips
101 Design Patterns and Tips for Developers

16. Spanky Corners
Creates CSS and GIF images for rounded corners

17. Nifty Corners Cube
Rounded corners with no images

18. How to redirect a Web page the right way
Don’t lose PageRank! Steven Hargrove gives you the code to redirect using htaccess, Mod_Rewrite, IIS, ColdFusion, ASP, Java, Perl, Ruby and PHP.

19. jQuery
jQuery is a fast, concise, JavaScript Library that simplifies how you write your web pages.#

20. Pipe Bytes
Send files of any size through any Web browser. No software to install, private and the recipient can start downloading while you’re still uploading

21. PHP FTP Synchronizer
Free program to update your website from local files

22. Dummy Text Generator
Generate text by number of paragraphs, words, bytes or lists

23. UTF-8 decoder
Unicode Decoder

24. CSS Tidy
Open source CSS parser and optimizer

25. HTML Tidy
Open source utility for tidying up HTML

26. FireFTP
Free, secure, cross-platform FTP client for Mozilla Firefox

27. FileZilla
Free FTP client and FTP server

28. Dust-Me Selectors
Firefox extension that finds unused CSS selectors

29. ColorZilla
Get a color reading from any point within Firefox

30. FireFox IE Tab
Run IE inside Firefox

31. Font Sizer
Let visitors change the font size on your site. XHTML, CSS, and PHP source available

32. Recaptcha
Captcha helps prevent automated abuse of your site, ensuring only humans perform certain actions; free

33. Super Screenshot
Take a full sized screenshot of any Web page

34. Web Site Thumbnails
Get thumbnails of any Web site

35. Back Orifice
A remote admin system that enables a user to control a computer over a network

36. CoPilot
Remote control another computer – free on weekends, otherwise $5 for 24 hours

37. Ajax: A New Approach to Web Applications
The ultimate AJAX introduction

38. Cheat Sheet Round Up
Your one stop shop for all cheat sheets including: Actionscript, Ajax, Apache, ASCII, ASP, C#, CSS, CVS, C++, Django, Firefox, Google, HTML/XHTML, Java, JavaScript, LaTeX, MySQL, Perl, Photoshop, GIMP, PHP, Python, Regular Expressions, Ruby, Unix, Linux, Weblogs, Windows, XML.

39. Quick reference
Searches for references on C, C++, CSS, HTML, HTML DOM, Java, JavaScript, MySQL, Perl, PHP, Python, and Ruby

40. Got API
Easily search sites for API documentation

41. CSS Basics
Cascading Style Sheets made easy

42. The Ultimate CSS Resource

43. RSS Specifications
The authority on RSS - from Harvard

44. RSS Best Design Practices and Icons
All things RSS including free icons

45. Go To and Learn
Free video tutorials on Flash

46. Optimize Your PHP code
40 Tips to optimize your PHP code

47. Optimizing MYSQL queries
10 Tips to optimize MYSQL queries

48. How to Create a Dynamic BlogRoll
Using Feedjumbler - it takes 5 minutes

49. CSS Validation
At W3C

50. HTML/XHTML Validation
At W3C

51. HTML Validator
Firefox extension to validate your HTML (as used within http://validator.w3.org/)

52. Link Checker
Checks for broken links in your HTML pages

53. Firebug
Edit, debug, and monitor CSS, HTML, and JavaScript live in any Web page

54. Gray Bit
Online testing tool; convert a full color page into grayscale to visually test contrast

55. Cross Browser Compatibility Testing
Check your site with multiple browsers on a single machine

56. Screen Sizer
Check out your site in different screen sizes

57. Feed Validator
If you’ve ever noticed invalid characters or XML markup in content items, check your feed for validity problems.

58. Windows Unlocker
Tells you the application that is stopping you from deleting a file

59. Windows Dependency Walker
See which DLLs are required for Windows applications

60. Pending Moves
Show files will be updated when you next restart Windows

61. Process Explorer
View active processes – Task Manager on steroids

62. Process Monitor
Monitors file system, registry and process/thread activity

63. Regulazy
Visual regular expression builder

64. WinDirStat
Display size of files and folders graphically

65. wget for Windows
Gets a HTML resource (HTML, image, document, javascript, css etc)

66. WinSnap
Takes a snap shot of your screen ($19.90)

67. Convert HTML to RSS
Generate an RSS feed for almost any Web page.

68. Convert RSS to HTML
Creates a widget displaying a specific RSS feed in HTML.

69. Binary to Base64
Create data streams for embedding images (or any type of file) in (X)HTML, CSS and XML

70. HTML To JS/PHP/Perl Converter
This tool will convert normal HTML code to a script based language such as JavaScript, PHP or Perl

71. Text to Voice
Create an MP3 of a voice reading your text

72. Free PDF online conversion
Converts various files (DOC, PUB, RTF, XLS, PPT, HTML, JPG, PNG, BMP, TIFF, WMF, EMF, GIF etc.), to PDF online, then e-mails you the PDF

73. Web 2 PDF
Allow your visitors to create PDFs of any Web page

74. Text to Hex converter
Write your name in hex

75. YotoPhoto
Search engine for royalty free images (over 250,000 indexed)

76. Background Image maker - http://lab.rails2u.com/bgmaker/
Create background images online with this quick and easy tool

77. Iconaholic
Lots of great free icons

78. Animated GIFs
Generate and preview animated GIFs, then download

79. 216 Color Webmasters Palette
Web Safe colors for webmasters

80. ASCII Art
The original Web Art

81. ASCII Generator

82. Image to ASCII
Convert images and text to ASCII

83. GIMP
GNU Image Manipulation Program

84. Inkscape
Open Source vector graphics editor, similar to Illustrator and CorelDraw

85. Create Web 2.0 Badges (image –png)
Ajax lessons show you how to create a shiny Web 2.0 badge in eight easy steps

86. Color Scheme Generator

87. Smashup Graphics
Smashups to create logos, backgrounds, buttons and menus.

88. IconFinder
Great looking resource with easy to identify licensing information.

89. Tabs Generator
Creates tab buttons on demand.

90. Who is the Owner?
Find out who owns a Web site quickly

91. Google Banned Tool
Quick way to find out whether your URL is in Google’s banned database

92. Crazy Egg
Variety of products to see what people are doing on your site using a heatmap or just plain hard data. Pricing plans start with free accounts that let you track up to 5000 visits per month and four pages, up to Pro an offering for $99 per month that lets you track 250,000 visits per month.

93. SiteScan
A free way to ensure that your website is configured properly for Google Analytics.

94. Reinvigorate’s Snoop
Real Time Web Analytics - free for PC and Mac. Greater flexibility than Google Analytics

95. PopURI
At-a-glance link popularity of any site based on its ranking (Google PageRank, Alexa Rank, Technorati etc.), social bookmarks (del.icio.us, etc), subscribers (Bloglines, etc) and more

96. Quantcast
Demographics for your site

97. Social Meter
Scans popular social websites to analyze your social popularity.

98. StatCounter
Highly configurable hit counter and real-time detailed web stats. Useful for European Web sites.

99. Clicky Web Analytics
Web analytics - nicely organised and oh so pretty.

Fortunately, there are alternatives. Here are 18 web design-related social media sites that are easier to rank well on and will keep sending quality traffic your way.

It’s worth pointing out that in the interest of keeping the signal-to-noise ratio high, only submit your best posts to these sites. This will help them to increase their readership and thus send more traffic your way — a virtuous circle, if you will.

Social Media Sites for Web Designers

1. design:related
2. Design Float
3. CSS Globe (Community News section)
4. Noupe
5. Pixel Groovy
6. DevelopersNiche
7. Stylegala (Public News section)
8. Behance Network (Tip Exchange section)
9. Markup Tutorials
10. Web Design Library
11. DZone
12. Design Sites Up
13. StyleIgnite
14. Mixx (Design category)
15. tweako (Web Design section)
16. TTiqq (Internet category)
17. Sphinn (SEO-focused)
18. SEO TAGG (SEO-focused)

Bonus: It’s worth submitting your very best posts to Smashing Magazine for inclusion in their best of the month digest. Newcomer Posh CSS will let you submit CSS-related articles for inclusion on their site.