When you are working on your website, there are many elements to the page that are crucial so that they work in harmony and not against your overall goal of the page -- to attract a visitor and keep them there so that you can share your message. Some of these elements are images, color, layout but the one I want to discuss today is fonts. What fonts are, why they are important and tips for making your fonts look good on your website.
Golden Rule: When thinking about your website, think about how your CUSTOMER will perceive it. Can they find what they need? This is something you should always keep in mind. It really doesn't matter if your wife likes the color blue or your favorite team colors are purple and green. Think about your site from what your CUSTOMERS might like. Ok enough about that.
Keeping the golden rule in mind, lets talk about fonts. The fonts that you choose for your site are extremely important to the overall design of the site. The color, size, is it an italic, script, etc. all sets a tone. Are you serious? Are you fun loving. Are you clearly communicating your message? All of these things can be determined by your font choice. Really? Yes. For instance, if you choose a bright pink font with a blink style in a script face, are you going to be taken seriously if your subject matter is the greatest football team of all time? Probably not.
Here are some tips on using fonts for the web:
1. The font should be web safe. Pick a font that is common to most operating systems. The basic web safe fonts are: Arial, Comic Sans (but please don't EVER use this), Courier, Georgia, Ludica Console, Lucida Sans Unicode, Palatino, Tahoma, Geneva, Times New Roman, Trebuchet, Vergana, sans-serif, serif. There are also these fancy type kits that you can use, Adobe has one as does Google as well as others, but we'll save that conversation for another day.
The thing is, if you use a face that you have on your computer and another person does not have on their computer, the computer will make the decision to replace it with a default system font. Often times the font is courier - which looks like an old typewriter. Having your entire body copy look like an old typewriter font may not be the image that you want to display.
2. The font should be EASY TO READ. Seriously, if you can't read it easily its not going to be read. Period. Personally, I don't like ANY body copy in white on a black background. It makes my eyes vibrate and it gives me a headache. If your font is too small, it may be hard to read. If you choose something too big it may feel like your tone is SCREAMING...and you may not want that.
3. Serif or sans-serif? There two basic types of fonts, serif and sans-serif. Serifs are like little feet or details at the end of a letter. They are typically used in body copy, especially in books and in the paper. Here's adescription of what I'm talking about. Decide if you want to go with a serif or sans-serif or a mixture of both. Depending on the site I am working on, I might use a sans-serif font for the header and a serif font for the body copy. It's up to you.
4. Know your limits. As a rule of thumb, never use more than 3 faces on a page. I try not to use more than 2. If I need a third, I will use that only as a special or decorative piece. Also, watch how many variations of the font you decided to use. Make your body consistent, all the same color/size and limiting the bolds, italics, etc. That you use. Try to only use underlines on LINKS. Otherwise, your visitors may get confused.
5. Experiment. Try different sizes, serifs, sans-serifs, etc. and see what works best. Just make it consistent throughout your site. Otherwise, your marketing message may become convoluted to your visitor.
That is it for now. Please comment below if you have anything to add!