The Internet is dominated by 3 fonts: Helvetica/Arial, Trebuchet MS, and Times New Roman (TNR). These fonts all offer a different “feel” for websites. If I could, I would hand everyone in the world a CD of 5,000 fonts to install onto their computers.
Web Safety
There are many people complaining about the “Web Safety” of fonts. While I understand their concern, I don’t feel it’s 100% valid. Many unexperienced people limit themselves to Serif and Sans-Serif period. The solution to this problem is simply using this in your CSS:
#content {
font-family: 1st choice font, 2nd choice font, etc;
}
If the user doesn’t have the first choice, it skips to the second choice rather than displaying the default browser stylesheet (which most likely will display TNR). Personally, I opted to override my browser’s stylesheet and show Myriad Pro just because I hate TNR. Yes, I hate it with a passion.
Underused Techniques of Using Basic Fonts
For those still sticking with the basic fonts, I want to show some underused techniques. Because I wasn’t formally taught CSS, HTML, PHP, or Web Design, I didn’t know of these techniques and I’d love to see them used more.
“Small Font, Capital Letters” Technique
This is something I’ve seen used a little bit. As you see the metadata (author, category, etc), there is that technique being used. Here was used a small font and barely contrasting color. I’ve been using this for metadata for a while. This also works well with a nice, dotted border.
“Color Significance” Technique
Without changing the font size or family, significance of an element can be determined by the color of it. This is shown via contrast between background and font color. This is used at Lafable to show importance. The idea of this is to make the user not consciously understand the importance.
“Hard to Find Borders”
When creating a new div container, it is important to use a “Hard to Find Border”. These help to establish a sense of boundary for elements and keep the layout feeling clean and structured. WordPress themselves use this. (Yes, that’s a picture of me making the post)
