Use of right fonts is one of the decisive factors that builds up a successful website. A website becomes more desirable and user friendly with the choice of attractive yet simple fonts.
Font-ology of Website:
Popular fonts namely Serif, Georgia used in print media are not used in the Internet although they are easily comprehensible to the common reader. A website is likely to loose traffic if it uses clumsy and stylish fonts. Viewers tend to move to other sites as it becomes difficult to infer the content. Fonts in the
website design must be simple and easily readable to retain and invite more visitors. One of the basic hindrances is that the browser displays only the fonts of a particular computer system. Any content designed in other fonts either gets changed or it is not legible to the viewer. A golden rule is to use fonts, which are most likely to be found globally in all computers.
Common Fonts of Website Design:
Arial, Arial Black, Comic Sans, Courier New, Georgia, Impact, Lucida Console, Times New Roman are used fonts in
website design. Verdana (Sans Serif) a new typeface released in 1996 has the most commonly used font in the web world. These fonts are easily readable on computer screens with low resolutions.
Information Table of Code Style
The table below is a periodically updated listing of font survey results for all platforms, the cumulative total of all valid font survey submissions since January 2003. This is the latest cross-platform snapshot of the Code Style font survey and should give you greater confidence in selecting a font. Common fonts used on all systems till 12 January 2008.
Platform and font name |
Installed (%) |
Sample |
Image |
|
Microsoft Sans Serif |
99.40% |
|
Sample |
Image |
|
Arial Black |
96.85% |
|
Sample |
Image |
|
Franklin Gothic Medium |
96.79% |
|
Sample |
Image |
|
Arial |
96.37% |
|
Sample |
Image |
|
Palatino Linotype |
96.33% |
|
Sample |
Image |
|
Monaco |
96.09% |
|
Sample |
Image |
|
Verdana |
95.97% |
|
Sample |
Image |
|
Arial Black |
95.96% |
|
Sample |
|
|
Helvetica |
95.96% |
|
Sample |
Image |
|
Courier |
95.82% |
|
Sample |
Image |
|
Comic Sans MS |
95.44% |
|
Sample |
Image |
|
Arial |
95.40% |
|
Sample |
Image |
|
Lucida Console |
95.29% |
|
Sample |
Image |
|
Courier New |
95.14% |
|
Sample |
Image |
|
Impact |
95.02% |
|
Sample |
Image |
|
Tahoma |
94.95% |
|
Sample |
Image |
|
Sylfaen |
94.19% |
|
Sample |
|
|
American Typewriter |
93.68% |
|
Sample |
|
|
Trebuchet MS |
93.66% |
|
Sample |
Image |
|
Verdana |
93.17% |
|
Sample |
Image |
|
Georgia |
92.89% |
|
Sample |
Image |
|
Gill Sans |
92.71% |
|
Sample |
|
|
Helvetica Neue |
92.71% |
|
Sample |
|
|
Comic Sans MS |
92.47% |
|
Sample |
Image |
|
Trebuchet MS |
92.05% |
|
Sample |
Image |
|
Courier New |
91.91% |
|
Sample |
Image |
|
Baskerville |
91.67% |
|
Sample |
|
|
Lucida Sans Unicode |
91.57% |
|
Sample |
Image |
|
Geneva |
91.07% |
|
Sample |
Image |
|
Lucida Bright |
91.07% |
|
Sample |
|
|
Arial Narrow |
90.93% |
|
Sample |
|
|
Marker Felt |
90.63% |
|
Sample |
|
|
Skia |
89.96% |
|
Sample |
Image |
|
Times New Roman |
89.82% |
|
Sample |
Image |
|
Zapfino |
89.58% |
|
Sample |
|
|
Lucida Sans |
89.29% |
|
Sample |
|
|
Lucida Sans Typewriter |
89.29% |
|
Sample |
|
|
Georgia |
89.18% |
|
Sample |
Image |
|
Apple Chancery |
88.70% |
|
Sample |
Image |
|
Didot |
88.54% |
|
Sample |
|
Courtsey :www.codestyle.org
Guidelines for developing fonts of websites:
- Size of Fonts in Text: There is no specific best font size in website design. The user is able to adjust sizes according to their requirements using relative units such as percentage or EM (external CSS file). Generally, the visitors face trouble to read small fonts. It is wise to use big fonts as they easily seen, read, and found by visitors. However, there are exceptions, as many websites are opting for small font size. With the help of CSS file the heading, sub- heading, body text and other text elements is used in different font sizes according to need.
Suggested font sizes
Text: 10px or 12px
Main Headings: 14px, 16px or 18px
Sub-Headings: 12px or 14px
Captions: 8px, 9px or 10px
- Selecting the font type: Basic types of fonts include the Serif, Sans Serif, Cursive or decorative, Fancy and Monospace.
Serif Font. |
Sans Serif Font |
Cursive Font |
Fantasy Font |
Monospace Font |
Serif and Sans Serif fonts are widely used. Websites conveying personal, artistic, intellectual, traditional, warm qualities must use serif fonts. The serif fonts have blurred effect as resolutions vary from machine to machine. However, Sans Serif is the most comprehensible and offers the best readability in a low resolution to the visitors. This type of font is used mainly technical, cool, clean, modern websites.
- Use of fonts in Heading: Headings in fonts are more useful than a flash. Although dynamic flash adds up to the overall beauty of a website, the headings with fonts makes it seo friendly as the search engine robots can easily crawl the information.
- Use of fonts in Image Alt text: The use of fonts in the alt text of a website is also seo friendly.
- Use of Style for Fonts: Fonts can be used in basic style –bold, italics and normal, underline, capitals. Generally in a web page the fonts are written in normal style.
- Normal fonts are used in main body text and large headings.
- Bold fonts are emphatic and used in headings, sub-headings, key words, text menus, small blocks of words and also within main body text.
- Keywords, quotes, photo credits, captions and titles are written in italics for emphasis.
- Use capital letters either a lower case or capital letter for the first letter of the heading.
- Use capital letters except for very short words.
- Do not underline because they can be confused with links.
- Use of colour in fonts: Use color to invite attention or to emphasize a word or select group of words. There is, however, no cardinal rule for the specific use of colours in the fonts in a website design.
Color Brightness Formula:
(Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
Color Difference Formula:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) +(maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))
Web designers ensure a high degree of contrast for the general population of readers. It is easy to read when there is a high degree of contrast between the background and the text. Black text on a white background is widely used in both print media and the web. However, this combination is not ideal for all users. Low vision visitors may set the background to black and the text to white or yellow. Users suffering from dyslexia may set the background to an off-white color or light yellow, with black text. While some other people with dyslexia lay a clear sheet of tinted plastic over the screen.
 Yellow on black is good contrast. |
 Black on white is good contrast. |
 Maroon on black is bad contrast. |
 Green on red is bad contrast. |
Fonts are selected with due purpose to communicate information to the viewer. The font size and shape have very significant influence on the visitor. Fonts that are easily readable helps to tell the story of a website and invites more and more traffic.
