Using Web 2.0 Fonts
Nov 18, 2009 I Don't Like to Work, The Graphics Guy
By: Jim Masie
Fonts are an important part of design – but there are thousands of styles to choose from. Today I’ll cover “Web 2.0” Fonts – styles that are ideal for designing Web 2.0 websites.
There is no official standard for what makes a font “Web 2.0”. But there is a select group of font styles that are specifically Web 2.0 compliant (helpful hint: when choosing fonts… just keep one word in mind: CLEAN).
Font Styles
In Web 2.0 Web Design, one major aspect is readability, so choosing an easy-to-read font style is very important. It’s also a good idea to use a font style that’s installed on most computers. Failure to do so… the body copy can appear funky or seem out of place.
Click here for a list of the most common font styles installed on computers.
When I design a web page I use the following fonts:
- Trebuchet MS
- Tahoma
- Verdana
- Georgia
- Lucida Sans
My favorite is Trebuchet MS. It’s very clean, easy-to-read, and has uniqueness to it. Additionally when reduced and/or enlarged, Trebuchet remains crisp (some fonts appear fuzzy when changing size). Tahoma and Verdana are similar (to Trebuchet) and Georgia is a good “business-like” style font.
On occasion I will use Arial and Times New Roman (but only if directed to do so). In my opinion both styles are web 1.0 and really boring fonts. One font I avoid “like the plague” is Helvetica – boring, and most importantly, not installed on most computers running Windows.
Color
Web 2.0 fonts use the following colors: orange, blue, cyan, grays, green and on occasion… red. The idea is to use “soft” (lighter shades) and bright colors.
Black is acceptable, especially in long paragraphs of body copy.
My preferences are red headlines with black for body copy. On occasion… I like mixing in an accent color (blue, green, grays, or orange). I do not use more than 3 font colors. Beyond that is just what I call “circus” (too much color = too much going on).
Using a light background color is important. The majority of the sites I have built utilize a white background or sometimes a light gray. Try to avoid white text on dark backgrounds… it’s hard on the eyes along with violating the major Web 2.0 rule: CLEAN.
Colors I avoid: purple, pink, brown, and bright yellow.
Size
Standard size for reading body copy is 9-11 points. Headlines should be anywhere between 18-36 points. Sub Headers are 13-17 points. I use 11-12 points for body copy and around
18-24 points for headlines.
Never go below 9 points for body copy. Studies show people have difficulty reading large amounts of copy below 9 points. It’s ok to use smaller sizes for legalese (at the bottom of your web page).
Formatting
For the most part use regular formatting. Headlines and Sub Headers should always be bold. It’s also a good technique to bold important lines of copy within your paragraphs. It brings attention to the important parts, along with breaking up endless lines of body copy.
Limit your use of italics… some font styles can be unreadable. A good place for italics is in testimonials. Some designers use underlines. I personally avoid underlines (because with some font styles… the line is too close to the bottom of the font).
Helpful Hints
- When selecting a font style, make sure to choose secondary fonts that are similar. This allows for any missing fonts (not installed on your computer). Most web design software programs will have this option under your font tool (in Dreamweaver… under properties, select the drop down menu next the Font header).
- Avoid the font style “cursive”. Although very cool on Windows based systems, there are issues with MAC based systems.
- Never use a font style that is not listed as a “common” font. Click here for a list of the most common font styles installed on computers.
- It’s ok to use a few font styles. I suggest a maximum of 2 font styles per web page.
- If you are unsure which font(s) to use… select “serif” (similar to Times New Roman) or “sans-serif” (close to Arial). Using these font styles will allow the computer to choose your web browser’s default settings.
- Keep in mind readability is key. Use your best judgment when formatting.
Once again… just keep in mind: Keep It Clean!
Popularity: 16% [?]
