Web Fonts: Back to Basics

Web Fonts: Back to Basics

Text is simply the most reliable and most expressive medium for passing across information on the web.  As a designer who designs for the web, having a sound understanding of how typography works on the web is a great skill that you should have under your belt.  Way back in elementary school, my teacher, (name withheld,) defined communication as “a means or medium of passing across understandable messages.” From this definition, it is absolutely clear that communication becomes ineffective if the consumer is unable to understand or comprehend the information that was intended for his consumption.

As web designers, when going in on a project, we are often tempted to sacrifice the legibility and readability of our textual content at the altar of aesthetics and usability. Truth be told, most web designers and usability experts have failed in this regard.  Despite the fact that the art of typography is one that predates the birth and existence of the web, most designers still pay little attention to it, and its poor application costs clients a lot through a subtle reduction in the effectiveness and conversion rates of their websites.

When it comes to designing for the web, as a designer, you should see yourself as an information architect of sorts. Most of your choices should be geared towards ensuring that your users get the textual information or textual content that that is intended for their consumption.

There are so many factors that could limit the ability of your users to consume content effectively on your website. Below are some of the factors.


Assigning the right or appropriate colors to fonts could make a whole world of difference. Here is a simple rule, the color of your fonts and that of the background of its containing element should bear a striking contrast. Also, site elements such as links should be styled with contrasting colors so that their current state (unselected, hover, selected,) is obvious.

Appropriate sizing

Site elements like titles, headings, links and paragraphs should all have distinctively uniform sizes. The sizes should be proportional and uniform throughout your entire site.


The styling that you apply to any block of text on your site should reflect the purpose that such a block of text is intended to serve. If a block of text is purely decorative, avoid using color tones that would grab the user’s attention. However, if the block of text is purely informational or functional,  you should consider applying a color tone that would attract and grab the user’s attention and cause him to act appropriately.


Following trends has it pros and cons. Young designers are the worst hit in this regard. If you have to apply certain styles to your fonts, you should double check to ensure that such styling wouldn’t affect the legibility and readability of your content. Certain fonts require more whitespace, letting-space and word-space than others. Some CSS styles are only best suited for certain fonts.

Agi Ogaga Fidelis is a web and mobile developer from Nigeria who hearts design and blogging in all its forms. He has an insane obsession for coding and enjoys experimenting with dynamic languages in his spare time.

 Agi on Google+

discuss this post

(1) responses


February 26, 2013

thanks for this information. i can now take time to adjust.


add to the conversation!

Thank you. Your video is being is emailed to you now!