Website Fonts have come along way babe.
Just like shoes can make or break an outfit, a good font is the perfect accessory for your website design. When selecting a font for your site you want to choose a font that fits your brand, is appropriate for your audience (think size does matter here) and creates a pleasant online experience for your audience (yeah so that means no yellow body copy, please).
First off, when talking about fonts for your website it’s important to know the term “web safe fonts”. A web safe font is a font that appears on a majority of computers and is compatible with multiple operating systems (i.e. Times New Roman is considered a “web safe font” because every computer has it installed.) This is critical because when you have poured hard work and money into your ideal website you want to ensure your website looks the same for all your visitors.
There are two ways to guarantee a consistent look for all visitors of your website.
One way is to make those fonts images, this can be used for unique fonts that you want in your design that aren’t web safe. You should really limit how often you do this on your website because images (images of text included) are limited by search engines and cannot be read like traditional coded text.
The second option is to make sure your font is a standard web safe font, google font and/or a font stack which is created by your developer.
Let’s explore some of these options.
Web Safe Fonts
As mentioned these are a few fonts that are standards on the majority of computers and browser operating systems. There are two types of fonts, serif and sans serif. A serif font has a small decorative line added as embellishment to the basic form of a character and a sans serif font is without that embellishment. Below is a list of the standard “web safe” serif and sans serif fonts.
Serif – Georgia, Palatino Linotype, Times New Roman, Times
Sans Serif – Arial, Arial Narrow, Arial Black, Helvetica, Comic Sans, Impact, Lucida Sans Unicode, Lucida Grande, Tahoma, Geneva, Trebuchet MS, Verdana, Courier New, Lucida Console, Century Gothic, Copperplate Gothic Light, Gill Sans
Google Web Fonts
Google web fonts are open source fonts (meaning you can use them in print as well as web – personally and commercially) developed by professional designers and developers that help make beautiful fonts more accessible on your website. Google started this open source web font project in 2010 and today there are over 600+ fonts available and it continues to grow.
So how the heck does it work? The fonts run on Google’s servers, you can browse the huge selection available on their site and add them to your collection. Then let your developer know your font preferences and your website developer will add a snippet of code into your website and stylesheet web files.
A font stack is a list of fonts, usually about four to six, that are laid out in order of preference by your web designer in your websites css stylesheet. Font stacks are used because it gives a web designer more control over the look of the fonts on your website pages. If a visitor to your site doesn’t have that one special font that you have your heart set on then a font stacks will dictate a list of secondary fonts for that computer to use that are good substitutions.
Here is an example of what a font stack would like in your website style code:
Futura, ‘Century Gothic’, AppleGothic, sans-serif
When choosing fonts for your website it’s best to talk to your web designer and let them know your preferences. Now that you understand more about fonts you can help make an educated assesment of what is possible in terms of font on your site. If you have been looking to spice up your site, get out there font shop and let you creativity run wild.