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

Webstock
Webstock

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

Pulchry
Pulchry

Chirp – Twitter Developer Conference
Chirp - Twitter Developer Conference

Gap Medics
Gap Medics

Cogaoke
Cogaoke

37signals
37signals

Fajnechlopaki
Fajnechlopaki

Online Typography Tools

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

Flipping Typical
Flipping Typical

TypeNavigator
TypeNavigator

Typetester
Typetester

WhatTheFont
WhatTheFont

CSS Type Set
CSS Type Set

PXtoEM
PXtoEM

FontStructor
FontStructor

Serif Font Identification Guide
Serif Font Identification Guide

Lorem Ipsum Generator
Lorem Ipsum Generator

Identifont
Identifont

Font Squirrel
Font Squirrel

Google Font Previewer
Google Font Directory

TypeKit
Typekit

Type Chart
Type Chart

Cufon
Cufon

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

[http://www.onextrapixel.com/2010/08/17/mastering-typography-in-web-design-with-inspirations-tools]

Enhanced by Zemanta
About these ads

Todos los días un parte de cada uno de nosotros pierde una parte de sí mismo pero con cierta travesura se postula al infinito digital. Every day. Bit of me®. I'm a Thinker and a Doer Coordinator #OPEN365. Mentoring, Online Advertising Advisor, RRHH, Speaker. Google Adwords Search Engine Optimization & Marketing (SEO - SEM) Linkedin Groups Admin. Strategy and Operations Consulting.

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

Gabriel Catalano

Gabriel Catalano

agosto 2010
L M X J V S D
« jul   sep »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

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

Únete a otros 5.948 seguidores

Comunidad
Cruces, Sol y La Imaginación

Cuando la imaginación y la creatividad suman infinito

MarketingActivo

el mundo del marketing se activa para ti

tranquicomix

fanzine bejarano de historietas hecho en los 80

A Stairway To Fashion

contact: ralucastoica23@gmail.com

Vinod833's Blog

This WordPress.com 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

LOS PROGRAMAS DE MBA Y POSTGRADO MAS INFLUYENTES DE TODO EL MUNDO

La realidad alterna

Diario de sueños, cuentos, poesías y una novela en proceso

TechCrunch

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

TEA PTLS NACHO

AUTISMO.TEA..PTLS

Comunicación & Marketing

De Lilian Lanzieri

Xtratexia

Dirección estratégica para la vida

Silvia Altamirano

An editorial designer that writes

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 WordPress.com site

Matt on Not-WordPress

Stuff and things.

BLOGTEC

Noticias de Tecnologia.

Talento en Expansión

Tendencias y Mejores Prácticas en la Gestión de Personas de la Empresa 2.0

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 Clase.com

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

littlegreybox

Travel & Lifestyle Blog

déborah rueda

Un sitio más pero diferente sobre marketing on line

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 y negocios

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

CNNEspañol.com

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

aloyn

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

Mashamour

Ensalada de Manjares

Infographic List

For those who love Infographics - www.infographiclist.com

Seguir

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

Únete a otros 5.948 seguidores