 |
Fonts and Typefaces
|
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 CancerSupportiveCare.com 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:
- serif
sans serif
monospace
cursive
fantasy
-
Have you read the previous Website Creation Tips and Tricks for Publishing articles to prepare for your website?
Getting Started with Websites - cancerlynx.com/webhost.html
cancerlynx.com/design.html
cancerlynx.com/graphic.html - Accessibility, Usability, and Navigation
- cancerlynx.com/navigate.html
Alexandra Andrews is a Linux Webmaster for many websites including CancerSupportiveCare.com, CancerLynx.com, and CancerLinks.com
Lydia Idem is currently a professor at California Design College and
Webmaster for BlackTree Media (www.blacktreemedia.com and
www.blacktree.tv).
|
|
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 |
|
