Building an Effective Logo – What You Need

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
Windows	Microsoft Sans Serif	99.40%	99.40%	Sample	Image
Windows	Franklin Gothic Medium	96.79%	96.79%	Sample	Image
Mac	Arial	96.37%	96.37%	Sample	Image
Windows	Palatino Linotype	96.33%	96.33%	Sample	Image
Mac	Monaco	96.09%	96.09%	Sample	Image
Windows	Verdana	95.97%	95.97%	Sample	Image
Mac	Arial Black	95.96%	95.96%	Sample
Mac	Helvetica	95.96%	95.96%	Sample	Image
Mac	Courier	95.82%	95.82%	Sample	Image
Windows	Comic Sans MS	95.44%	95.44%	Sample	Image
Windows	Arial	95.40%	95.40%	Sample	Image
Windows	Lucida Console	95.29%	95.29%	Sample	Image
Windows	Courier New	95.14%	95.14%	Sample	Image
Windows	Impact	95.02%	95.02%	Sample	Image
Windows	Tahoma	94.95%	94.95%	Sample	Image
Windows	Sylfaen	94.19%	94.19%	Sample
Mac	American Typewriter	93.68%	93.68%	Sample
Windows	Sylfaen	94.19%	94.19%	Sample
Mac	Verdana	93.17%	93.17%	Sample	Image
Mac	Georgia	92.89%	92.89%	Sample	Image
Mac	Gill Sans	92.71%	92.71%	Sample
Mac	Helvetica Neue	92.71%	92.71%	Sample
Mac	Comic Sans MS	92.47%	92.47%	Sample	Image
Mac	Trebuchet MS	92.05%	92.05%	Sample	Image
Mac	Courier New	91.91%	91.91%	Sample	Image
Windows	Baskerville	91.67%	91.67%	Sample
Windows	Lucida Sans Unicode	91.57%	91.57%	Sample	Image
Mac	Geneva	91.07%	91.07%	Sample	Image
Mac	Lucida Bright	91.07%	91.07%	Sample
Mac	Arial Narrow	90.93%	90.93%	Sample
Mac	Marker Felt	90.63%	90.63%	Sample
Mac	Skia	89.96%	89.96%	Sample	Image
Mac	Times New Roman	89.82%	89.82%	Sample	Image
Mac	Zapfino	89.58%	89.58%	Sample
Mac	Lucida Sans	89.29%	89.29%	Sample
Mac	Lucida Sans Typewriter	89.29%	89.29%	Sample
Windows	Georgia	89.18%	89.18%	Sample	Image
Mac	Apple Chancery	88.70%	88.70%	Sample	Image
Mac	Didot	88.54%	88.54%	Sample

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.

Good example: Black on white is good contrast.

Maroon on black is bad contrast.

Bad example: Green on red is bad contrast.