Mastering Typography in Web Design with Inspiration & Tools

Mastering Typography in Web Design with Inspiration & 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.

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.

Mastering Typography in Web Design with Inspiration & Tools

In the past, websites used a wide variety of fonts or images for headers. However, times have changed and trends evolve very quickly. We see a huge number of sites using new technology and tools to enhance fonts. API utilization, @font-face, CSS3 and possibly many more alternatives in the future.

Most Common Web Typography Mistakes

The abundant resources today allow us to use various fonts to enhance our websites. It is as exciting for visitors to view as for the web designers who can explore further in font usage.

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 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 fuse the concept of the font with the design piece.

Choice of Font Type Will Affect First Impression to Visitors

The first impression you want your visitors to have when they view it is so crucial. Make sure that visitors don’t get the idea about your website. Do you want it to look conservative and professional; or unique and creative? It is now time to research on the target audience of your website. A website for the young and creative audience and a website for the older and mature crowd plays a big part in the kind of fonts you choose.

Using Too Many Fonts

Using too many fonts will blur the impression you want to paint. The worst thing that could happen is that it does not allow your visitors’ to stay focus on your website, this is called focus level. Besides, if you’re using recent and common technology, like API, an over use of fonts will slow down the loading of your website. A great tip is to use a minimum of 2 and a maximum of 3-4 different fonts.

Incorrect Font Scale : Too Big or Much Too Small

Other than catering the right font sizes for your website’s audience, we should also be aware of display fonts with appropriate sizes. However, if your target audience are both young and old, it is wise to create functions to increase or decrease the text size.

As designers, we often face the challenge of achieving the right harmony of different font and sizes and sometimes together with images. Finding the sense of proportion and balance often help to create an interplay of fonts in your site. If you are just starting out and not confident yet, start slow by using less variety of fonts and sizes.

Tracking, Kerning, Leading and The Margin Is Your Best Friend For Good Typography

Bad typography can be spotted very easily with bad tracking, kerning and leading. These 3 work hand in hand to help you achieve quality typography and help readers to read your content at ease. The ‘Character window’ can be found in most creative software that will help you to adjust the spaces of sentences or characters. Be patient, as it takes awhile to have the sense of good spacing.

Do not let your paragraphs touch the edge of a page. Leave an acceptable margin away from your content. Let the header, paragraph, title, sidebar and footer have their own space. This helps the page to appear more organized, and pleasing to the readers’ eye.

Websites With Nice Typography

This section contains a selection of examples that uses good typography.

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

Here are some online typography tools to aid in your content design.

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.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.