You’re a D.I.Y. master, right? You’re building your own web page using tools that are readily available on the web for very little cost. Great. You’ve collected pictures, you’ve written text, you’ve even gotten out some markers and made sketches on a page. You know how many pages you want and how the navigation will work (check back for another post about effective navigation). Everything is going so well.
And then you start this new and strange process of ‘coding’ your web site. One of the things you notice immediately is that all the wonderful fonts that you want to work with don’t seem to be available. Web fonts and web typography are vastly different than traditional print typography. With the web you are not creating a static object that everyone will view the same way. You are actually creating a recipe. You are putting all the ingredients into small containers, writing all the instructions onto a page and then handing them off to someone else (or someone else’s web browser) to create your dish.
The web browser is the all powerful chef in the kitchen. What you intend to create can only be as palatable as the chef who makes it. And there are a bunch of chefs out there.
Common Browers and the percentages of people who use them:
Internet Explorer (66.82%)
Mozilla Firefox (22.05%)
Safari (8.23%)
Google Chrome (1.23%)
Opera (0.70%)
Other (0.97%)
[http://en.wikipedia.org/wiki/Comparison_of_web_browsers]
To complicate matters more, there are multiple versions of these browsers in common use. And they will all interpret your web page recipe in a slightly different way. And the computer on which these browsers are running will also impact the way they are viewed. And so we come back to fonts – the size and font face displayed when viewing a web page will depend on the Browser, the Computer and the Code.
Why can’t I use all my fonts to build my web page?
If you assign a font to your HTML document that looks really cool on your screen, it is vastly unlikely that someone viewing your page on another computer will have it installed. On their browser, a basic font will be substituted. Probably Arial or Times New Roman.
Here is a list of the basic font faces that are available on the majority of computer systems, both MAC and PC:
The fonts that are most safe to use are:
- Arial / Helvetica
- Times New Roman / Times
- Courier New / Courier
Other options that usually work cross-platform are:
- Palatino
- Garamond
- Bookman
- Avant Garde
Fonts that work on Windows and MacOS but not UNIX / Linux are:
- Verdana
- Georgia
- Comic Sans MS
- Trebuchet MS
- Arial Black
- Impact
When building web pages, these fonts are generally grouped into “Font Families”, so that if one of the options is not available, the browser will pick the next font in the list. The list of web safe font families is:
font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
font-family: ‘MS Serif’, ‘New York’, sans-serif;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;
If you use any other fonts in your HTML code – you are likely to run into problems. So using our handy chef and recipe analogy – you have a pretty short list of ingredients that you can assume most cooks will keep in the kitchen. If you specify a red curry powder only available at the Indian specialty store on the corner of E.28th and Lexington Ave., most people will choose another recipe … and you will be out of luck (or out of a new reader, a new client, or a new consumer!)
How come I see interesting fonts on other sites?
Great question. Here is the trick – you can use graphics to do all sorts of fascinating things on your page. Using the tools of the trade, like Gimp, Photoshop or Fireworks, you can create complicated graphics and text applications and then build them in to your site. All the bells and whistles are normally in the application of graphics and more advanced methods of styling, like CSS (Cascading Style Sheets).
So now you’ve got it figured out – you can use graphics to build your site and get exactly the fonts you want! Well, not really. These graphics are more like pictures of your fancy ingredients, rather than the ingredients themselves. The computer chef can show you what they look like, but they have no flavor.
The Down Side: Creating pages that are heavy in graphics and light on actual screen rendered text using default fonts will make it hard for search engines like Google to “read” and index your page. As a result you may not appear in search results the way you want to. This also applies to how your page may show up (or NOT show up) on today’s generation of Smart Phones, which rely on rendered text and will often skip graphics.
A comparison: Here is the same page shown on one hand with the fully displayed graphic elements and on the other with only the screen rendered text and no graphics. You can see how this could cause problems if you are hoping to be seen on search engines. Pretty bland, eh?
Most of the commonly available online D.I.Y. web site builders allow only a small amount of customization to the structure of the page. They do provide a wide number of templates to assist you in building a site, but the options are very limited in what you can change in terms of graphic interest or font treatments. They rely on the standard font families to make building the pages fast and relatively simple. (imagine your run of the mill generic Mac&Cheese)
So how do I create a professional looking site with such simple fonts?
By strategically using graphics and rendered text to create a hybrid that works! This is the winning combination that will get you a beautiful web site that ALSO works for you on the search engines. A truly custom web site that reflects your unique value proposition is not a one night job. The decision making process that you will need to engage is a series of trade-offs. How many ’secret ingredients’ and how many regular cupboard ingredients do you want to use?
If your goal is a dynamic, unique and professional web site, take the time to learn about combining graphics, typography and images that will give your customers a good first impression, and generate sales. If you need help getting started – or if you are ready to get your website out of the D.I.Y. Box – give Hen’s Teeth Network a call.