We briefly talked about picking out the colors for fonts in the 4 steps to choosing perfect color for the web. But what about the fonts themselves? Can you use any font you like? Are there only certain fonts people have on their computers? Below I’ll take you through the process of narrowing down your choices.
Serif vs Sans Serif
I’m sure you’ve noticed not all fonts look the same. One of the main classifications of fonts is if its a Serif or Sans Serif. Here are the two:
Notice that a serif font has extra “ending” at the end of most of its letters. Take for example the “f” – the serif font has an extra base the letter is standing on. Sans-serif font quite simply means “without” serifs.
Serif fonts in a printed piece are primarily used in large bodies of copy, such as a book. But online, serif fonts are usually kept to headers and sub-headers. Why? On a computer screen it is easier to read large bodies of type as sans-serif fonts. So, to make your website easy to read, use sans serif font for paragraphs and either a serif or sans serif for headers and sub-headers.
Understanding how a web page picks fonts
To understand what fonts are showing up, its best to understand a little coding. When a programmer puts in the font choices they’ll make on a CSS style sheet it will look like this:
font-family: Arial, Helvetica, sans-serif
Notice it is not just one font, but several. This is why when you look at your website on someone else’s computer, the type may look a little different. This tells each computers browser, if the font “Arial” is installed on their computer to use that first. If it is not, use “Helvetica.” If Helvetica is not installed, use any sans-serif font they have.
While Arial and New York Times are the most common fonts on computers, here is a great list of fonts that most computers (Mac and PC) have installed.
What if you have a really cool font that isn’t on the above list? You could have your programmer use an image of the word, such as a jpeg, if it has to be used. But, in general, try not to use images of fonts. Why? If many of your fonts are images, it will not be picked up by search engines, such as Google. And if search engines can’t read what your website is about, you will be low in the search engine rankings.