lynx picture  

CancerLynx - we prowl the net
July 2, 2007

Fonts and Typefaces
Website Creation Tips and Tricks for Publishing.
Alexandra Andrews and Lydia Idem

Keep your fonts (typefaces) scalable. Keep in mind older readers wearing bifocals or those who are colorblind. Grey text on white may be aesthetically pleasing to you but frankly, is unreadable. Users will leave your website if they cannot read the information.

Alexandra: When I first did the pages of I set the font size. Little did I realize that on flat screen monitors the text size is rendered about 1-2 points smaller. While you might think the size is 12 points, it is actually rendered about 10-11 points in size. I sat up all night ripping out the font size from the pages. I recommend letting the browser set the size of the fonts. Use proportional sizing; for instance, font size="+1" or font size="-1".

My acupuncturist Nancy Rakela, OMD, Lac, has the tale of going out for dinner with family and friends. No one could read the menu. The restaurant had chosen green text on a brown background.

Lydia: Let's first cancel this misconception or just plain misinformation about fonts and font use: The font you see may not be the font your end users (those individuals who will actually be using your website) will see. Fonts used on websites are entirely dependent on the fonts installed on that person's computer. So how do we get fonts anyway? Fonts are installed with the operating system on your computer but also with the various software packages that people will install on their computer. So, users of Microsoft Office suite of software will have the same fonts that come with Office. Unfortunately, there is no consistency between Windows, Macs, and UNIX. The best solution is to use the default font as set by each individual's own browser. But for you designers who absolutely must use a particular font or your design is ruined, use CSS which allows you to specify multiple fonts as well as a generic font family. To specify multiple fonts, you list your preferred font first and then list back up fonts so that if the user does not have your preferred font installed on his/her computer, you are instructing the browser to use another font that he/she may have which will still render your design beautiful.

Generic Font Families

Generic font families are built into CSS, not HTML unfortunately. All compatible browsers will automatically match an appropriate font to each generic family. Even older browsers have a default font so even if they do not support generic font families they will support a default font: Times New Roman. Using generic font families is not a requirement when using fonts but is a good rule of thumb for those of you who are true designers and want to be sure that your design is rendered for each user as you intended. Be sure to test your design with the generic and default fonts to ensure that it is acceptable to you for your users.

The five generic font families are:
sans serif
Have you read the previous Website Creation Tips and Tricks for Publishing articles to prepare for your website?
Getting Started with Websites
Accessibility, Usability, and Navigation

Alexandra Andrews is a Linux Webmaster for many websites including,, and
Lydia Idem is currently a professor at California Design College and Webmaster for BlackTree Media ( and

You are welcome to share this © article with friends, but do not forget to include the author name and web address. Permission needed to use articles on commercial and non commercial websites. Thank you.

Search CancerLynx

one one pawprintWhat do you think? one pawprintTop of Page

kitten picture