Just as it’s important to choose the right colors for your design, it’s also very important to make good choices about the fonts you use in your design.
As with color the fonts you choose can reveal a great deal about your company and your site and the image you want to convey to your audience. Fonts are also an important accessibility consideration for your website.
One of the most important things to understand about fonts is that not everyone has the same ones installed on their computer. The only way you can absolutely be sure your visitors will see the font you choose is to make your text an image. There are many reasons though, why this isn’t a good idea and you should limit the amount of images you use to display text. It’s ok for your logo. It’s very bad for your main copy.
How Many Font Families Should I Use?
The web is about flexibility and your choice in which families of fonts you use should take advantage of this flexibility. Ideally you should provide options for which font your visitors will see. I like to offer an ideal font, followed by a common font, and then offer a generic font to capture all those who don’t have either of the first two fonts installed. If you were coding your font famil in CSS it might look something like:
font-family: "ideal, common, generic";
font-family: "franklin gothic, verdana, sans-serif"
Browsers will display the first one they encounter on the list that’s installed, so if a visitor does have your ideal font they will see it. If not they may still have the common font you specified, and if all else fails they should be able to see your generic option. It’s also ok to use a different list of fonts for different elements in your design, but try to limit it.
It can become very distracting to see every heading in a different font, your navigation links in another, and your body copy in yet another font. Best practice would be to keep the total number of fonts on the page to three.
Serif? What’s A Serif?
Serifs are the small decorations you’ll find at the end of letters. Serif fonts are generally easier to read in print, but the situation is just the opposite on a computer monitor. At smaller size serif fonts can become unreadable and a sans-serif font is preferred. The font you are seeing now is a serif font, but to give you a comparison here is a serf font against a sans-serif font.
- This is Times New Roman a common serif font
- This is Verdana a common sans-serif font
You should generally stick to a sans-serif font for your main body copy. It will be much easier for your visitors to read. You can use other font types for page headings or in your logo, but the bulk of your text should really use a sans-serif font. Other types of font you may encounter are decorative and script fonts. Both can be used, but as with serif fonts they are best left to only some page elements and the text in those elements should be larger enough to make the font readable.
Is My Font Too Small?
Perhaps the biggest accessibility issue with font is the size. Pesonanlly I’m most comfortable reading text at 14px, but that may not be the case with everyone. Your best bet is to use a relative measurement like em’ when specifying the size of your font.
Using a relative measurement will allow your visitors to more easily adjust the size to whatever works best for them. If you think 12px is a great size then use the equivalent em size. I can increase the font to see it at my preferred 14px (0.9em) or similar if I choose.
As we get older we typically have a harder time reading small text. Know your audience and if your audience is aging you probably want to use a larger default size. You may like that 12px font, but if your audience can’t read anything below 16px (1.0em) make sure your default size is 16px or above. But remember to use the relative measurement instead of px.
Relative measurements can play havoc with your design, if you’re not careful. You will need to code your site to account for the possibility of your font size being displayed at sizes other than the default you set. Most of the time this isn’t too difficult to deal with, but it may be important for your font to remain the same size for your layout.
Your navigation might be a good example where using a fixed size might work better for your design. I will sometimes use absolute measurements for the font size of my navigation, but remember if you do to set it at a size that’s larger enough for people to read. If it’s too small, your visitors may never find your other pages.
Contrast, I Need Contrast
Have you ever visited a site where the color of the text was so close to the color of the background behind it that you couldn’t read the words no matter what size of font family was being used? I know I have. It’s an example of poor contrast.
You want to use as much contrast as possible between the color of your text and the color of the background. Black text on a white background will be the easiest to read, followed by white text on a balck background. You can use other color combinations, but provide as much contrast as you can.
Remember too that just because you can read the text not everyone else will. Not everyone can discern your light blue text on your medium blue background. Make it as easy as possible for your visitors. No matter how great it looks if no one can read your text they’re going to leave pretty fast and they probably won’t be coming back.
Even when the colors contrast well the choice still may not be idea. Red text will usually stand out well against a green background. Unless of course you’re one of the many people who suffer from red-green color blindness. In that case the two colors will likely look more alike than you’d like.
Summary And Resources
Remeber that as with many other aspects of your design flexibilty is important to help make your site more accessible to a variety of people. Keep in mind that not everyone has the same fonts installed and provide options for them. Know which types of fonts are easier to read and know too that people prefer different sizes. Provide as much contrast as you can, but remember that contrast or not there are still some combinations that will prove to be difficult for some people.
Here are additional resources about fonts and accessibility:
- Website Type and Colour for the Visually Impaired
- Fonts and how they affect accessibility
- Perception of fonts: personality and traits of fonts
- A Comparison of Two Computer Fonts: Serif versus Ornate Sans Serif
- A comparison of popular online fonts: which type and size is best?
Related posts:
- How to gain a competitive advantage with an accessible website
- Integrating web design, SEO, usability and accessibility in design process
- Providing value to build a business
Tag:
Bookmark murdok:
Steven Bradley is a web designer and search engine optimization
specialist. Known to many in the webmaster/seo community by the username
vangogh, he is the author of TheVanBlog, which focuses on how to build
and optimize websites and market them online.
