Questions about fonts and how best to use then in web design come up often. Questions about which family of font to use or what font size is the best are common issues that face web designers. Your font choices will make a huge difference in the readability of your site. And a sure way to lose visitors is to provide content they have trouble reading. So what are some basic rules to follow with the fonts you use on your website.
As with most everything in design there are no hard and fast rules, though there are some general guidelines you can follow. One of the most important guidelines is to remember that online you don’t have the same control over things that you have with print. For example I can set my browser to render text in whatever font I want no matter what font you would prefer I use to view your pages. It’s also possible that the font you’ve chosen to use is one I don’t have installed on my computer and it simply won’t be able to display. This leads us to the first general rule. If you absolutely want to ensure your text displays in a specific font you need to make that text an image.
For the most part I wouldn’t recommend making all your text an image, especially if you ever want a search engine to see it. Using images for all your text will also increase the download time of your pages considerably. However there are places where it’s appropriate to use an image to display text. A good example would be your company logo. Chances are your logo will be an image anyway so feel free to knock yourself out in your choice of font in your logo. Limit your use of images for text. Most of your text really should be text and images are for very special occasions like your logo.
Provide Options In Font Families
The choice of font family is usually one of the first you’ll make with your type. Remember the above advice about the loss of control online. You can’t really do much about the person who insists on setting their browser to use their font, but you can do something about those computers that don’t have every font installed. You can make sure that you use a font they are likely to have installed and even use a generic default, offering you some measure of control over the typeface they’ll see.
You don’t have to limit yourself to only the most generic fonts, but rather provide browsers options in a sense of what to use. Joe Gillespie in an article about Web Type offers a good way to think about these options. In css your font-family code might look something like:
font-family: <ideal>, <alternative>, <common>, <generic>;
Browsers will display the first font-family they come across in the above code that’s installed on that computer. Go ahead and choose an ideal font, but fall back on more common fonts for anyone who doesn’t have your ideal font installed. Make sure to use a generic font as the last option to capture all those computers that don’t have any of your other options installed. A common set of fonts you might use for your main content text is:
font-family: verdana, arial, helvetica, sans-serif;
The first three fonts are pretty common and chances are most computers will have at least one installed, but in case one doesn’t you provide the generic sans-serif font which will allow the browser to use whatever it has set as it’s default sans-serif font.
Types Of Font
There are quite a few different types of fonts, but I’m going to limit things to four basic groups, serif, sans-serif, script, and decorative. In general the fonts you choose will likely fit into one of these four types. Serifs are the small decorations or embellishments you’ll find at the ends of letters. Serif fonts are typically easier to read in print, but generally harder to read on a monitor, particularly at smaller sizes. For that reason you’re better choice of font for your main content is a sans-serif font. Sans means ‘without’ in French, so naturally a sans-serif font doesn’t have the embellishments at the end of each stroke. Script fonts as the name implies is any font that looks like handwriting. Decorative fonts are probably the most fun, but also the most difficult to read if it’s used for more than a few words. Think of fonts that look as though someone created them to entertain you. They’re pretty easy to spot.
As I mentioned above sans-serif fonts are the most readable on a monitor so the bulk of your content really should be in sans-serif. If you want to experiment with fonts and there’s no reason you shouldn’t save those experiments for things like page headings. The issues in readability typically become less as the font size increases. Page headings will often be larger than your main content so using something other than a san-serif font should work fine and can convey things that plain sans-serif fonts can’t. Script fonts will convey more elegance and it’s not uncommon to see them on wedding sites. Decorative fonts can convey a sense of whimsy and might be appropriate for a kids site. Yet both should still be used sparingly and avoided for the main body of text which demands readability above all else.
It’s ok to mix it up a little with fonts. While you may opt to use verdana for your text you don’t need to be confined to verdana in your logo or your headings or in your sidebars. Be careful though with how many different fonts you use. As a general guideline keep it to three different fonts maximum. Too many can be confusing and make all harder to read. Using more than one font on your site can add interest and help different page elements stand apart from each other, but it’s best not to overdue it.
How Large Should My Text Be
You probably won’t find an ideal size font to please everyone. So don’t try. Use relative measurements in your fonts and let your visitors resize your text to suit their needs. You’ll see many different units of measurement with font sizes. The most common fixed size is pixels (px) which is the only fixed size you should use online. Points (pt) are a common measurement in print, but they really have no meaning on a monitor so if you are going to use fixed sizes opt for px.
Better though is to use relative measurements like % or em. Relative measurements allow anyone to increase or decrease the size to one they find more readable. It’s a good idea for accessibility and gives someone with poorer eyesight the chance to still read your text. Books have come in oversized print for years for a reason. Not everyone can read smaller print. Be kind to your visitors and allow them to resize your text.
Relative font sizes can sometimes lead to your layout breaking apart so it can require a little extra work, but it really is worth it. As a compromise you can give the majority of your text a relative size and save fixed sizes for a few key places in your layout like your navigation. Still work toward creating layouts that allow for all text to be resizable.
1.0em should be equivalent to 16px and I find a font size of about 14px or 0.90em to be comfortable to read, but everyone has different preferences. To be on the safe side set your default font size to something between 0.8em and 1.0em (12px – 16px) and the let your visitors adjust to their wishes.
Other Things To Enhance Readability
Aside from your choice in font family and font size there are some things you can do to improve the readability of your text. One very important thing is the contrast between the color of your text and the color of the background behind the text. The more the two contrast the easier the text will be to read. Black text on a white background will be best, but it’s ok to use different colors. Think one dark and the other light and try to keep them as far apart as possible. Too often I’ve seen sites break this rule with less than stellar results. If I can’t read your content there isn’t any reason for me to stay so while it’s ok to experiment, and you should experiment in all your designs, make sure your text color stands out against your background color.
Line length is another issue in readability. Too many words on one line makes it hard to follow a block of text. With the increase in fluid designs and the lack of support for the max-width property in Internet Explorer, more and more sites are displaying long lines of text that are difficult to read. You can usually get away with a longer line of text online than in print, but try to keep those lines from getting too long. I’ve often seen 60 characters mentioned as an absolute limit, but in truth I just use my own eye and will often go a little past what’s recommended. The main point is to not allow your text to stretch across the entire window. At a certain point the longer line just gets difficult to read.
As I mentioned at the start there really aren’t any absolute rules when it comes to design and your choices with font is a design decision. Keep the guidelines above in mind as you make your choices and remember while they are guidelines they are pretty good guidelines to follow. Sans-serif many not always be the most exciting choice of font, but it will be the easiest to read. Allow your text to be resized and try not to vary your fonts too much on any page, though please experiment a little and be creative where appropriate. Most importantly remember that as much as you’d like you’ll never have total control over your design online. The medium is about interactivity and flexibility so provide options for your visitors while setting defaults that make the most sense for the most people.
Resources
All you wanted to know about Web type but were afraid to ask goes into much of what’s said here in a little more depth and includes among other things a list of common and safe choices for fonts that can be found as defaults on both Windows and Mac operating systems.
Download a free sample from my book, Design Fundamentals.
0 comments