Web Typography: Good And Bad Examples

Web Typography

With businesses increasingly becoming dependant on their online portals and websites to increase their sales, the importance of proper web typography has also increased manifolds. Determining the proper typographic method and choosing great interfaces for a given website have become one of the most crucial features in website development. And with a huge collection of fonts and interfaces available, people are sure to commit “typographical” mistakes. This article deals with what you should follow in the typographical department, and even throws light on the things you should avoid typographically. Interested enough? Read on.


Web typography has the most prominent effect on website design without any denial, and the first step to good typography is selecting apt interfaces. A great designer makes a great use of the resources available, and comes up with typographic masterpieces. Here are some of them.

Also Read: Global Web Design Industry: A Shift To Responsive Designing

1. MINGGroup.net

With minimal graphics, the MING Group website clearly shows that it doesn’t support overwhelming use of graphics in web design. Instead, it concentrates on text. It’s a well known fact that textual matters are easily forgotten and graphical representations are etched into the memory. Ironically, this website has that certain awesomeness about it that makes it linger in our minds. The animated rollovers and smooth-as-butter drop-down menu make you fall in love with it. The typeface used is classy and stylish as well. On the whole, a great example of typography.

2. EngineCreative.co.uk

A minimalistic design doesn’t necessarily mean a boring design, and this has been proven true by EngineCreative.co.uk, which proves to be a good example for web typography. The colour and typeface has been used in way as such that it seems restrained, and this restricted use has made it a great typographic example. Thanks to apt use of typefaces available, this site is gorgeous as well as simple to use.

3. KitchenSinkStudios.com

May be considered as one of the most elaborate and decorative examples of web typography, KitchenSinkStudios.com boasts of something even greater than the magnificent design it wears. The contents of the web page have been written in varied fonts, though they are all web text. So what does that actually mean? It means that the text will be indexed in the various search engines, and can be altered as and when required. KitchenSinkStudios.com, easily one of the best typographic examples, shows you a way to popularise your product while creating a great design.

4. CapsicumMediaworks.com

Examples Of Web Typography

Coming over to this website, you will feel it has more or less a standard website design- visually rich with great images. However, the web typography used makes it look sleek and stylish. Typefaces can easily popularise a website in both positive and negative ways, and the designers at CapsicumMediawork.com surely know how to trudge along the former ones. The majority of the textual content in this site is web-based, allowing it to be readily tweaked, and also opening up newer ways of digital marketing through search engine indexing. Great idea. Great Execution.

Typefaces are an integral part of web typography. A huge number of typefaces can be accessed through hosting services like Typekit and though the free font collections. Though the sheer number of options available to designers is overwhelming, still having so many choices at their disposal makes them commit mistakes. Below are given some examples that demonstrate bad typographic use.

5. Thefitnessclub.com

This is one example of how you should not design your web pages. With no clear branding of its name across the pages, the website looks inconsistent and boring in its appearance and feel. With haphazard arrangement of text coupled with a boring use of the Tahoma font, thefitnessclub.com easily makes it to the list of bad examples of typography. Add to that an annoying sound that plays whenever you enter the site, and this site quickly becomes one which you don’t want to remember!

6. Hellsbellescarclub.com

A great example of bad web typography, the hellsbellescarclub.com makes wrong choices and ends up being on this list instead of the one above. Central-aligned text makes for a difficult reading, and that is what exactly this website does. The home page has a bright red background and black typography which does not hinder readability. However, the other pages have pitch black background while the typography is in bright red, which strains the eye and restricts readability. Inconsistent typography and an unprofessional outlook make this website popular for all the wrong reasons.

7. wateronwheels.com

The final entrant into our list of bad typographic examples, wateronwheels.com shows you everything that your website SHOULD NOT be. Starting with an aquamarine background, this website looks like a hastily completed HTML project by a beginner. With unprofessional and childish use of images and typefaces, this website has the word inconsistent written all over it. The typography used in this is boring, to the point of being irritating, and that seems to reason enough to take it as a bad example in web typography.

Typography is very crucial in the process of website design and development, and should be taken up seriously enough. Minimalistic, professional and consistent design silently takes the website up through the popularity ranks, while amateurish and clumsy web typography brings it down. And with all the examples given above, you now know how your website should look and feel, and how it should not.v


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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s