So many fonts on the Web to chose from, but what is the best? This depends on many variables such as availability, readability, character and application. What is the feeling or style you want to convey to the reader? Is it fun and friendly or formal and old fashioned? Does it have to be smaller than a certain point size or is it for headlines? Is it live text or an image? There are two basic types of fonts, Serifs and Sans-Serifs.For the purpose of this post I will get into web-safe fonts within these two font families.
These typefaces have the little decorative, ornamented “legs” or structural elements on the ends of some of the strokes that make up letters and symbols. The idea behind the formation of serifs is that the extra detail helps to guide the eye around the letter form and improve readability. Examples of web-safe Serif fonts would be Georgia and Times New-Roman.
These are the typefaces that do not have the extra elements at the end of the letter forms. The term comes from the French word sans, meaning “without”. Serifs have become the most popular typeface that is used online because of low screen resolutions that show serifs poorly, especially on smaller fonts sizes and details. The most common Web-safe font examples for sans serif would be Arial (the most common), Helvetica, Tahoma and Verdana.
This is a font that has a fixed width and the letter forms all occupy the same amount of space. This was used in typewriters where the head of the machine could only move the same distance forward or backward after each letter. Computer code is displayed in monospace because of it is easier to read; however, body text is far less readable and should be avoided. The opposite of monospaced would be a variable-width font.
Web-safe fonts:
For a typeface to be used as live text on the Web (like this text here), it must be installed on the user’s computer. When a significant amount of computers have this font installed, it is considered a web-safe font. If a designer specifies a font for use online and the user’s computer does not have this font installed, the browser will select an alternative. For a great list of web-safe fonts and various sizes, check out Font Testers preview page.
Top Web-safe fonts:
These are the most popular and common sans-serif fonts and are a modern looking typeface. Readability gets worse the smaller the font size and Jakob Nielsen’s Top 10 Web Design Mistakes has small font sizes, or frozen fonts, as the number 1 mistake.
These are the most common serif fonts and are considered serious or formal. These get harder to read any smaller than 12 pt. on screen.
This modern, friendly font is easy to read and widely available. Even at smaller pt. sizes this font retains its readability with its wider body size, making it the best choice for the screen.
This modern, friendly looking serif font was designed specifically for readability on the screen.
This font mimics the mechanical typewriter and was commissioned by IBM in the 1950′s. This slab serif (Serif family) font is monospaced and is used to display computer code.
What to avoid:
Comic sans looks like comic handwriting text and is not appropriate for a serious formal look. Trebuchet is similar to Arial but can have readability issues at smaller sizes.
Further Reading:
Check out the font matrix and see more fonts to consider than what is generally accepted.
The Complete Guide to Pre-Installed Fonts in Windows and Linux has some great comparison charts.
Or you can just say To Hell With Web-Safe Fonts. It’s a basic and informative slide presentation of ways to get around the problem of web-safe fonts not being available.
17 Comments
Wow, telling people to avoid Trebuchet! Comic Sans is an abomination that has long since seen any real amount of use, but Trebuchet is a thing of beauty! =)
As far as readability issues – sure, at 8 point or less, but that goes for any font…
Long live Trebuchet!!! =P
Man, you and Trebuchet need to get a room. ;P
Me and Trebuchet have shared a room many times my friend! The font is that good!
Yes maid,
Trebuchet is one of the best fonts for the web. Stylish and different from others like Arial or Verdana.
It is a pretty font for sure, just small point sizes I find it gets sharp forms that look distorted. Nothing against it though
anyone who ever uses a serif font on the web, should be drawn & quartered, keel hauled, eviscerated, and spend a cozy night inside of a brazen bull … and if you tell me you used a serif font in a PDF I'll really get mad >-)
Spoken like a true wolf!
New Times Roman reminds me of MS Frontpage ala 1996, I like Verdana most.
I am glad you covered this subject as it was pertinent to some of the work I have been doing recently.
This blog is really worth reading. You guys hit all of the key subjects, with enough detail to actually convey useful information. Well done 10e20 team! This blog, slashdot, and a ton of useless crap about my my fantasy team are about the only things I bother with these days.
Haha at "a ton of useless crap." I'm glad we've made your reading roll!
I never use Comic sans even in MS Word. It looks little bit weird .
And when guys from different areas start writing on a blog its always worth reading
Fonts convey moods, so I agree that the fonts choosen for your site should reflect the mood of your site
I used to be a big fan of serif fonts for headings with a sans font for body text. I blame ALA.
Georgia is a great web safe font – Its great looking, creates a conversational feel and is also easy to read on screen.
How is it still possible that we can tweet from the floor of Congress while a representative of the people is being drawn & quartered, keel hauled, and eviscerated, and these eight fonts that came with the Mac SE are the only ones we can use in HTML best practices? It's a head-scratcher to be sure.
Wow, Thanks for the info Patrick. I think verdana is the most used font.
Comic Sans is an abomination that has long since seen any real amount of use, but Trebuchet is a thing of beauty!