Jan 21, 2010

Fond of Fonts?

Fonts are one of the most important elements of any webpage for the simple reason that they provide a means to display textual content, which is vital to most webpages. Use of fonts is not only limited to the web, but extends to a variety of print designs as well as visual display signs. Wise and apt use of fonts can make any design come alive even without a graphic touch, while a bungling job with fonts can ruin the aura of other design elements as well.

Most web designers are always on the quest for new and superior fonts. Here is a list of the top ten fonts for website design. However, most visitors tend to get bored with the repetitive use of the “same old fonts” which is why designers constantly need to update their font database. I found this list of the top five font suppliers on the web, which might be helpful to you.

I had the misconception that fonts were synonymous with text until I came across this font art. I was taken aback by the creativity of artists who use fonts so innovatively and impeccably to sketch celebrity illustrations. Some more interesting artworks using fonts can be found here.



It is heartbreaking to note that fonts are one of the most erred aspects of website design, as postulated by this list. Not just the type of font, but sizes, spaces, colors and many other aspects have to be taken care of while using fonts. An interesting discussion on the font sizes can be found here.
I would like to list here some points to keep in mind while using fonts on webpages. This list has been compiled by the designers at Cheese after an extensive study of various sources on the net.


  • Headlines Font Size - 18-20 px or 24-26 px
  • Body text- 13 px most popular
  • Pure white background
  • Heading to Body Font-Size Ratio - 1.96
  • Line height (pixels) ÷ body copy font size (pixels) = 1.48
  • Line length (pixels) ÷ line height (pixels) = 27.8
  • Space between paragraphs (pixels) ÷ line height (pixels) = 0.754
  • Characters per line - 73 and 90
  • Left padding of on average 11.7 pixels
Also keep in mind that the fonts which you use on the website should be one of native font provided by Windows/Mac/Linux, otherwise the browser would replace it with something else and you would not get the desired effect
Reblog this post [with Zemanta]
blog comments powered by Disqus