Mastering Typography in Web Design with Inspirations & Tools

Typography is one of the most difficult trends to tackle which is why it will remain fresh in 2010. With all the cries for usability, web designers are afraid of using new and different fonts. We realize that nowadays, knowledge in typography can be applied into various forms in almost all of media fields, including graphic design and the publishing world.

Mastering Typography in Web Design

To apply typography effectively in a media, we need to understand how it was developed and how people around made it possible. This not only enriches us by having a deeper comprehension about type usage, we would be able to be choose fonts more wisely.

Sometimes in the past, I often noticed the way websites applied typography by using quite varied and unique fonts on their simple headers. And in the past, everyone was still using images when applying writing on the header. A while later, JavaScript was used to enhance the font usage. And now? We can’t count on it any more, many things are changing in web typography in this modern age. Such as API utilization, @font-face, CSS3 and possibly there will be many more alternatives in the future.

Most Common Web Typography Mistakes

With the resources that we have today, allowing us to use various kinds of fonts to make our websites much more interesting. It’s obviously more exciting for visitors to read our websites and also for a web designer to explore further the intensity of the font usage on a website. So a web designer has knowledge of when to use some particular fonts and when to use standard fonts for reading.

Most Common Web Typography Mistakes
Image credit: Lee | Quoteskine

There are a huge number of fonts available on the web, but that doesn’t mean all of them work and are suitable to be applied to a certain design. Every font is designed with certain characteristics for a certain idea, purpose, impression, and project design. So, our job as a designer is to make the concept meet the design supported with the correct font usage.

Inappropriate Font Type as A First Impression to The Visitors

How do you want your website to look when visitors visit it for the very first time? Make sure that visitors don’t get the wrong impression about your website. You want to look conservative, appear as a professional, show up impressively, or maybe you want to look completely different, unique, creative and seem out of the box? Ask yourself. And it’s important to observe what type of visitors visit your website, are they the older or “the ones who call themselves young and creative”? At this point you can also determine the differences in font size in a section. Like in the header, title, menu, content section, etc. It is important if you can determine them hierarchically to make any future development easier for yourself.

Using Too Many Fonts

Too many fonts used can also blur the impression that you want to appear on your website. The worst thing is, if it doesn’t allow your visitors eyes to stay still on your website, or often called focus level. Besides, if you’re using recent common technology, like API, overusing fonts will only make your website load much slower. The typography world is now enriched with various kinds of fonts, but that doesn’t mean you can apply them all on your website, yes, it’s possible, but you have also to consider some of the points we’ve discussed above. Use a minimum of 2 and a maximum of 3-4 kinds of fonts on your website.

Incorrect Font Scale : Too Big or Much Too Small

Misunderstandings often happen in perception by using a font bigger than it should be displayed. But not always, the point is everything has to look proportionally. More important is its usage on a website. Will this website be seen from long distances by visitors? Of course not. What I mean by proportional here is the balance between type and scale of fonts that will be used in all the elements on your website. And we also need to pay attention to the preferences of the visitors’ monitor resolution.

It’s important to avoid having the fonts look too big or even too small, so it’s hard to be read. Alternatively, you can create small buttons which have functions to increase or decrease the text size, that may be better.

Less Space for Margin or Distance Between Words

There are many reasons not to touch the edge of a page with content on a website. Give enough space for your content. Let the header, paragraph, title, sidebar and footer have their own space. Also it will look more organized, it will also make your visitors stay focused on what they see, what they read and where they want to refer for their further reading on your website. And give space between your text lines to make reading easier.

Websites With Nice Typography

This section contains list of websites which have examples of good typography usage.

Veerle’s Blog 3.0
Veerle's Blog 3.0

Elysium Burns
Elysium Burns

Ordered List
Ordered List


Happy Cog
Happy Cog

What a Lovely Name
What a Lovely Name

Joao Andrade
Joao Andrade

Design Wise
Design Wise

Made By Giant
Made By Giant


Chirp – Twitter Developer Conference
Chirp - Twitter Developer Conference

Gap Medics
Gap Medics




Online Typography Tools

There are a good handful of typography tools on the web listed in this section.

Flipping Typical
Flipping Typical




CSS Type Set
CSS Type Set



Serif Font Identification Guide
Serif Font Identification Guide

Lorem Ipsum Generator
Lorem Ipsum Generator


Font Squirrel
Font Squirrel

Google Font Previewer
Google Font Directory


Type Chart
Type Chart


Further Resources

  • 20 Do’s and Don’ts of Effective Web Typography – It’s an important part of designing for the web, yet it’s often overlooked (even by me previously). Below are the 20 do’s and don’ts and in the comments section, you’re free to let us know of any of the items we might have missed.
  • 50 Useful Design Tools For Beautiful Web Typography – Today, we will look at 50 most useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly. These tools are great for experimenting with different font types for your website.
  • 40+ Excellent Free Fonts For Professional Design – A tip that is very often not told, there are free quality fonts out there. If you are a student graphic designer, you may not be able to afford to buy fonts just yet so this may be a good alternative.
  • 30 of the Best Web Typography Resources Online – The resources below can help you improve your web typography, regardless of which camp you fall into. There are tools for creating unique typography, references and articles that can teach you typographic principles, and plenty of inspiration and news to keep you updated on the state of web typography.

Bima Arafah

He is a 22 year old creative and also freelance web designer and developer from Jakarta, Indonesia. Write about everything related to design, trending topics in web development and symbian phone. Loves color, design, blog, WordPress, and has an unhealthy addictions to smiles and laughs. You can visit his site below or follow him on twitter.

Visit my Website | Follow me on Twitter


Enhanced by Zemanta

Lo importante es el camino que recorremos, las metas son apenas el resultado de ese recorrido. Llegar generalmente significa, volver a empezar!

Tagged with: , , , , , , , ,
Publicado en
10:00 am to 05:00 pm | Mon-Fri
+5411 4954.0022 / +54 911 6259.7231
Gabriel Catalano

agosto 2010
« jul   sep »

Enter your email address to follow this blog and receive notifications of new posts by email.

Únete a otros 6.188 seguidores

Being Your Brand

Branding and Strategy for Business and Life

Cruces, Sol y La Imaginación

Cuando la imaginación y la creatividad suman infinito


el mundo del marketing se activa para ti


fanzine bejarano de historietas hecho en los 80

A Stairway To Fashion


Vinod833's Blog

This site is the bee's knees

Apasionada de las Redes Sociales

Compartir conocimientos 2.0 y Marketing Online

Zona de Promesas

Blog de Tecnología en Español - Internet - Redes Sociales - Entrepreneurship - Innovación

Top Master | Blog


La realidad alterna

Poesías, relatos, diario de sueños


Startup and Technology News

Unencumbered by Facts

Taking unsubstantiation to new levels

Carlos Cordero

Blog de tecnología

PsicoEmocions Blog

Un Pont entre la Psique i les Emocions



Comunicación & Marketing

De Lilian Lanzieri


Dirección estratégica para la vida

Silvia Altamirano

Writing, English to Spanish

StellarHIRE Partners

Founding Partner, StellarHire Partners - Executive Search Consultants. Recent engagements include Eloqua, SFDC, Tibco and Veeam.

ivanbrunpr's Blog

4 out of 5 dentists recommend this site

Matt on Not-WordPress

Stuff and things.


Noticias de Tecnologia.

T a l e n t o  en  E x p a n s i ó n

Gestión de personas para las organizaciones líderes de la Era del Conocimiento

Two Leaves Tea SPAIN

Great Organic Tea! ✫✫✫✫✫ Te Organico en Piramides

Escuela de Dinero

El mejor Sitio en Español sobre lo básico para entender el Dinero y sus matemáticas relacionadas.

Intentando dejar huella...

...en cada uno de los visitantes

Ideas Para la

Portafolio de experiencias en la clase de español para Middle School.

Little Grey Box

Travel & Intuitive Living

déborah rueda

Un sitio más pero diferente sobre marketing digital

No solo los 80's

La mejor música de la historia

Molly Balloon's Blog

Identity + Dressing + Colour

El OJO PUBLICO. / Глаз общественности

Ver para contar & contar para ver. / Чтобы рассказать

Think Creative Idea

Marketing, publicidad, web, stat ups, emprendedores

Social Media y más

Social Media, Redes Sociales, Marketing, SEO

The Coaching Alliance

El camino hacia el éxito

Luces y sombras de las marcas

Social Media, Marketing y Comunicación


Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Javier GM Photography - México y más.

“Un fotógrafo tiene que ser auténtico y en su obra, debe expresar emociones, provocar reacciones y despertar pasiones.” ~ Javier García-Moreno E.

Natalia Gómez del Pozuelo

Experta en comunicación y oratoria


Alimentación, ocio y negocios, ALOYN, es un Grupo dirigido a Directivos y Propietarios de empresas, interesados en el mundo de la industria de alimentación y bebidas. Tanto por la parte de la industria productora como por la parte de la industria consumidora y/o distribuidora (Distribución Comercial, Horeca, Vending, Venta Directa, etc). También nos interesan las actividades ligadas al agroturismo y el enoturismo como magníficas actividades de promoción y difusión de la cultura gastronómica.

Blog de Jack Moreno

Un blog de Joaquín Moreno sobre recursos, literatura y ciencia ficción


Ensalada de Manjares


Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 6.188 seguidores