Fonts To Use Or Avoid In Web Design: 10 Great Examples

Fonts To Use Or Avoid In Web Design: 10 Great Examples

There are several factors to be considered while designing a website and selecting appropriate types of font constitutes a major decision as whatever content is written must be easy on eyes and readable. It is often observed that designers, in order to make the site visually attractive, choose a stylish font but which offers poor readability. Such a mistake leads to negative effect; it can even result in high bounce rate. Thus a Font must be carefully selected which provides good readability and aesthetic appeal.

Different varieties of Fonts are available for free but here we are going to mention those that can add value to a site having excellent characteristics. In addition to this, we will dwell on some Fonts which should be avoided.

5 Free and Quality Fonts

Pompadour Numeral Set

It is a numeral font beautifully crafted and is available under the Creative Commons license. The font is suitable for logo design and packaging design. The font can lend a unique character to a site.

Pompadour

Lobster Font

This condensed script font has drawn attention as it can make the content appear good and attractive with its ligatures and alternates. The font currently offers 70 ligatures and 37 terminal forms. This font offers the right mixture of style and quality.

the-lobster-font

Piron

Piron is another quality font which apart from offering utility as a website font, can be suitably used for magazines, brochures, logos, posters, flyers, etc. This highly legible font is available for free in OpenType format.

piron-1

Lato

The font belongs to the sanserif family and is available under the Open Font License. It can be efficiently used for web use or for desktop usage. It comes with five weights which also includes a hairline style. The current version includes Western character set while pan-European Latin, Cyrillic and Greek extensions are expected to be available in 2011.

Lato

Vador

Developed by the Deviant art community this font contains an elegant mix of letters and numbers.

vador

These 5 Fonts types are desirable for a web design and can be advantageously used to develop a legible and readable content for a site. Now we are going to have a glance into those fonts which should be avoided.

5 Fonts to Avoid for web design

Comic Sans

Though there is nothing bad about this Font but its suitability for web content is less. The font is apt to be used in matters that are not of serious nature. It would be highly inappropriate to use it for a corporate site. This can be attributed to the fact that it has been over used.

220px-ComicSansSpec3.svg

Bradley Hand

This hand written style font suffers because of excessive usage for personal matters whether it is invitation, wishes, greetings, etc. As it is more often regarded as depicting personality, Bradley Hand is not suitable to be utilized for a website.

bradley-JpEg

Franklin Gothic

This Classic look that the font lends lessens its appeal to be used for a website. Though it can be used for Headlines but it is not suitable for usage everywhere on a site.

220px-FranklinGothicSP.svg

Impact

The font has been type casted for use in office and mail documents which has reduced its appeal for web. The font also is too thin making it unfit for highlighting which is often required on web.

Impact

Papyrus

A designer cannot hope to draw attention from the visitors if this Font is used on the site. The Font is considered misfit as it lacks the appeal which is always needed for a site.

Papyrus

As the choice of Font affects the effectiveness of a site, it is important to spend a little time on gauging out its appropriateness. It helps in selecting the right font and makes the users feel good about it.

Author Bio

Pratima Paliwal, associated with Seo-Semantic-Xhtml, a specialized division of ipraxa, a full service – web agency, offering services like PSD to HTML, Ipad testing and Integration with third party applications like PSD to WordPress, Joomla, Drupal, Magento and much more. You can connect with us at Facebook.

  • http://designmodo.com Adrian

    Good fonts, high quality and very clean.

  • http://www.litmusonline.com Litmus Branding

    Use gray color font and i observed that many use Taohma. I personally feel Arial is good.

  • http://tjoepoe.deviantart.com Fajar

    I love this post

  • http://www.iconempire.com/cliparts/ cliparts

    very interesting, thanks. What about Cyrillic?

  • http://www.mediadog.ca/ Calgary Web Design

    The importance of typography in design can’t be overestimated. The accuracy, precision and balance of geometric forms can give letters the elegance and sharpness they deserve.

  • http://butch-villarama.com Butch V.

    This is great info for me to learn from. All my graphic design learning is self-taught and this is nice to come across. Should’ve showed more examples though for the bad ones in my opinion.

  • http://blog.powerserve.net Powerserve

    I’ve seen proper use of each of those “Bad” fonts, but in 99% of the cases, they indicate a non-professional web designer. For almost all cases, avoid them!

    Good list, thanks!

  • http://ecommerceconsultant.ws Ecommerce Consultant

    Generally TATHOMA, ARIAL and VERDANA are amongst the lot that renders most clarity in web pages. It may be recalled that though web design has come a lot way, it has not departed much from HTML, the original language of the web which has these fonts as native. So are browsers. Practically, fonts without serif are easier to read in browsers. If you have an old browser or a non-white background, serif font are difficult to read. Again, serif font looks awkward in H1 or bold. Of course, these assumptions are in reference to WINDOWS-based systems as other OS may render them differently.

  • http://www.webwhites.co.uk WebWhites Design

    I agree with Ecommerce Consultant ref: Tahoma, Verdana and Arial … My favourite font is Georgia!

    I found this article to show my client as they are wanting different fonts what I’ve never even heard of!

    Great piece of writing! Boomarked!

  • http://www.impresscreative.com.au bellingen website design

    I don’t often use Tahoma, Although Verdana is SUCH a nice find… i would love to start a campaign to kill Arial! my last website uses only Gorgia.

  • http://www.toucanwebdesign.com Web Design

    Always use Verdana but it amazes me how so many new fonts appear, you would think all the ideas would have run out by now.
    Great Article.

  • http://www.swankyweb.co.uk Website Design Hull

    I still use Franklin Gothic and Impact does that mean I’m stuck in the 90s or something? haha To be fair I see what you mean about fonts that are over used it makes them feel a little too common.

  • http://www.absolutewebdesign.co.uk/ Web Design Matt

    I hate it when clients ask me to use Papyrus :-)

    Recently used lobster in a website design.

  • http://www.e-crm.co.uk Richard Hill

    The importance of clarity in web pages is difficult to overstate and I hate the Lobster and Vador fonts mentioned. The fon’t not to use seems a bit personal, but then each to their own eh?

  • http://www.themilanogroup.com Website Designer Cleveland

    Fonts really make your website pop, but have to look out for browser capability.

  • http://123webdesignbournemouth.co.uk/ web design Bournemouth

    Fonts have a very important role in web design. They enhance a website’s appearance and readability. In my personal opinion, no font is bad as long as it suits the objectives of the website. Whether it’s serif or sanserif, or Tahoma, Arial or Verdana doesn’t really matter if the website calls for its use. For instance, fun script type fonts would be wonderful to use in kids’ websites especially where the objective is drawing or toys, while the same fonts have no place in serious websites like government and or company sites. Frankly, all the fonts cited, including those that were mentioned to be avoided, are good, depending on the website’s purpose and the system and browser used. This is my own assessment and I welcome any reactions.

  • http://www.riak.uk.com Riak

    Another excellent post, I have this site booked marked. keep up the good work :)

  • http://www.trinityac.com miami air conditioning

    Font is fundamental in any webdesign, it can make a website look incredible or ruin one with perfect content. Great post

  • http://www.jmawebconsulting.com Website Design NC

    very interesting, thanks. What about Cyrillic?

  • http://www.fluxspark.co.uk Flux Spark

    Definitely bookmarked for my next design. I have been using Georgia and Verdana alot recently

  • http://www.kaltechsolutions.com kaltech solutions

    Comic sans is the worst choice.

  • http://www.megastarmedia.com Sandy Rowley

    Great list of beautiful fonts. Going to create a poster using all of them somehow..will re post.
    ;)
    thanks for the inspiration.
    sandy rowley

  • http://google.com/ Apu Nahasapeemapetilon

    why does everyone hate comic sans! DAMMIT!

  • http://www.innokoda.nl Davey

    Nice list!

  • http://www.blueberryfish.com/services/ AlexsonMoore

    Great list of designs. I’m gonna check all other designs.

  • http://www.zeuscreative.co.uk Neil

    Haha good old comical comic sans. Good article though, I hope more website designers take note with the fonts that they use. I’ve probably been guilty in my earlier days, but I like to think I’ve learnt now!

  • Jussi Sivonen

    Lobster is the new Comic Sans!

  • http://www.mgtdesign.co.uk/ Zena

    This is a great article.Typography is considered very important for designers.The written skill is so good.I am very impress to this one.Thanks to share this blog with us.I will keep share in future.

  • http://www.vistanekol.info vistadkol

    Great list of beautiful fonts. Going to create a poster using all of them somehow..will re post.

    thanks for the inspiration.
    sandy rowley

  • http://creative-web-designer.com jelina tale

    nice fonts a nice piece of share

  • http://www.shockwavedesign.co.nz website making tips

    Comfortaa looks like a good font that can be used in websites.
    Being able to use customs fonts like these make websites look much more appealing and unique.
    I’ve used Vegur before on a website, and my client and I found the outcome to be much better than with the use of standard web safe fonts.
    The only issues I have using custom typefaces is getting the styling of all the text to look correct on the web when using sIFR, as the outcome always looks different on IE and all other browsers.

  • http://www.shockwavedesign.co.nz/ designing tips

    I appreciate this kind of useful information, this will really help me a lot to come up with the perfect font face for my website. You have some quality information for designing that any freelancer or designer would enjoy. Thanks for the tips and list of fonts!

  • http://www.focuspdm.com Focuspdm

    Nice blog with nice post!

  • http://twitter.com/MaxTheITpro Max – The IT Pro

    Many THANKS for this lovely blog post! That Lato font looks AMAZING!!! Me like! :-)

  • http://www.okezine.com Majalah

    I like Bradley Hand font. It looks nice for my little daughter birthday invitation card. ;)

  • http://www.workmanwebdesign.com Brian

    Fonts are the hardest thing for me to pick out when it comes to the design and set up of a website. Thanks for sharing this!

  • http://www.web-design-firms.net/ designfirm

    Thanks for the list……

  • http://www.simplybest10.com/ AjayKumar

    All of them are to good…

  • http://www.haydensweb.com/ websitedesigndenver

    “Fonts To Use Or Avoid In Web Design: 10 Great Examples.” In this article, It title is like the ocean in the pitcher.

  • http://www.tipsonsmoking.com jessica

    Many thanks for this loving blog post

  • http://www.seseo.com.au Melbourne search engine optimization company     

    Ths is such a great post.

  • http://www.thechesterwebsiteshop.co.uk/ Malandra Nowell

    Font application depends on the theme of the website – it must coordinate with the theme, but not to the extent of exaggeration. Use large font sizes for banners, covers, or titles, and small font for content (make sure it is readable because some are not feasible for reading).

  • Keri E. Colbert

    IMPACT!! I usually use Impact because it well, have an IMPACT on the design.

    Keri E. Colbert

  • http://williekennedy.webstarts.com/ Anthony David

    Great find, I’m going to have to check this one out. Thanks for sharing. Very informative….

  • http://www.intertainmentinfo.com wallpapers

    Nice blog with nice post!

  • http://www.sitelaunch.com.au web designers

    You have provided a great website.

  • http://users.atw.hu/bulletclan/e107_plugins/forum/forum_viewtopic.php?5271 Daryl

    Quality articles is the important to be a focus for the viewers
    to pay a visit the site, that’s what this website is providing.

  • http://www.dossaniplus.com Wedding photography karachi 

    These are great example I really love the thanks for providing it.

  • http://www.designbynewton.com Paul

    that’s really a fantastic example for us & I appreciate it, thanks a lot to share with us !

  • http://www.hasselaar.nl Arnout Hasselaar

    Just what I needed!

  • http://www.amortech.ca Ca;gary Web Design

    Good article! You surely hit the nail on the head with the DO NOT USE fonts… they should ban Comic Sans!

  • http://www.pinkzebradesigns.com.au/ Troy Wilson

    Really that’s wonderful information and I got so much knowledge about web designing and I was looking for the same and here I found this. So I appreciate and so much thankful for sharing this with us.