Web Typography

Typography is not just a simple selection of typefaces for a magazine or web page design. It is an interplay of letterforms on the page, be it in print or online, a visual display that helps the reader to follow the flow of text and absorb the substance of the page content. Typography plays a dual role as both verbal and visual communication. As discuss in Smashing Magazine, users don’t read, they scan and they are subconsciously aware of both functions: first they survey the overall design patterns of the page, then they parse the language, or search for some key words or anchors which guide them along the content of a page.

Good typography establishes a visual hierarchy for rendering prose on the page by providing visual punctuation and graphic elements that help readers understand relations between prose and pictures, headlines and sub-headings and blocks of text.

The treatment and layout of text have to fulfill the fundamental principle of web typography. They are contrast, size, hierarchy, and space .

Web typography can be manipulated using CSS which is not possible 10 years ago. If you are a beginner in CSS, Typetester is a good resource which generate the CSS code for you. It is a wysiwyg application which gives you options to compare screen type. It even provides you options to manipulate the size, leading, tracking and even word spacing of the font to achieve the best result for display on the screen.

“A guide to web typography”, I love typography, viewed 08 September 2008

“10 Principles Of Effective Web Design”, Smashing Magazine, viewed 08 september 2008

Wikipedia, viewed 08 September 2008,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s