Working with fonts | Web Design Articles

If you are designing for print perhaps a new logo or designing a brochure there are literally hundreds of fonts that you can use and are easy to read in print.

Serif fonts, which are fonts that have horizontal marks or serifs at the corners and tips of the letters, are often used in printed material. Usually a serif font was used for the main body of a document, and sans-serif (without-serifs) for headings. In web design the opposite is true, body text is easiest to read in a sans-serif font, like Verdana.

Screen fonts

There have been a number of fonts specifically designed for use on screen display. The best-known are Georgia and Verdana, designed by Matthew Carter for Microsoft. Tahoma and Nina (also by Carter); Trebuchet by Vincent Connare. Because of careful hinting and special adaptation for computer displays, these screen fonts are generally more pleasant and easier to read than many other fonts.

Common fonts used in web design

The next problem is that the text on your website needs to be displayed by your browser. The browser can only display fonts that the user’s computer system uses. This means that you should only design websites using fonts most likely to be installed on the majority of people’s computers.

The following fonts shown below have been installed on almost all Macs and Windows machines for the past several years and so will show up on most machines in the world. Arial, Arial Black, Comic Sans, Courier New, Georgia, Impact, Times New Roman, Trebuchet, and Verdana.

Using text as images in web design

If you do not like any of the standard fonts that are on people’s computers what can you do? Can you just create the text in a program like Adobe Photoshop and display the text as an image. Going down this route is a big mistake. Only text on the web page is readable by a search engine. Search engines do not "read" any text that is embedded in an image (JPEG or GIF). So it is best to make your headings throughout a page using HTML text instead of making headings in an image program such as Adobe Photoshop. Another issue with using images is that content management systems rarely produce good text on the fly using a custom font.

Using Flash to dynamically generate text

It is possible to dynamically generate text using any font using flash. I would strongly recommend this only be done for headings and not body text. This method still had the issue that the text was not picked up by search engines. Search engines pay particular attention to heading, so if the search engine does not find any text in your heading 1 (<h1>) tag then you will not be ranked highly.

sIFR  - The next generation of flash

A small group of web developers and designers have been hard at work perfecting a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics! The process, dubbed (or Scalable Inman Flash Replacement), is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.
In short is flash and javascript is present then normal xhtml headings are dynamically replaced with flash versions in the typeface of your choice.

More information about sifr can be found below:
http://www.mikeindustries.com/sifr/
http://wiki.novemberborn.net/sifr/

Search Search | Explore Creo

More | Additional pages

UKWDA Text size: 1|2|3