enavu webdevmania tutsvalley psdestination
visit the enavu network
One Comment Article Title Overlay

Typography in Web Design – Complete Guide

This article reveals information about typography as seen and used in today’s web world. It goes over techniques that will help you create pleasing typography in your website designs.

Introduction
Why is Typography important? How do we go about making it good?
Typography in general is thought to be the font you use in your designs… well it’s [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

This article reveals information about typography as seen and used in today’s web world. It goes over techniques that will help you create pleasing typography in your website designs.

Introduction

Why is Typography important? How do we go about making it good?

Typography in general is thought to be the font you use in your designs… well it’s quite a bit more than that. Typography includes the font you are using, the space between your lines of text, the size of the font you use, the style, and a bunch of other important factors i will be going over. If you read every paragraph in this article i guarantee you will leave here implementing some great techniques for the rest of your life. This guide will go over the certain aspects that Typography presents to us in web design. For example you can use it to display a certain website style, or to present information in a very clear understandable way.

image

Fonts and Serif/Sans-Serif

The first rule in web typography is sticking with the default fonts. This is because not a lot of people have the fancy collection of fonts that you posses, so you need to use the fonts that all computers have. Here is a list of fonts to always consider when creating your designs:

Sans-Serif:
Arial,
Helvetica,
Verdana,
Geneva,
Lucida Sans Unicode,
Lucida Grande,
Tahoma

Serif:
Georgia,
Times New Roman,
Times,
Palatino Linotype,
Book Antiqua,
Palatino

Serif and Sans-Serif are used for different purposes, portraying a certain emotion or a feeling. Using sans-serif makes a clean, easy to ready websites. Using serif is used for a book feel, or a more unique design. Mixing the two is not a bad thing what so ever, i have found it actually rather rewarding when you do it right.

Reasons behind both of these font types are well argued in the Typography community. Here are some of those arguments:

Serifs are used as a guide of horizontal flow for your eyes, therefore the lack of serifs in the sans-serifs brings a vertical stress to the eyes. This theory however has been argued against, some say that people read in a sporadic manner where their eyes make jumps across rather than a continues vertical flow.  In the past studies have been shown to people preferring Serif fonts over Sans-Serif but the time the studies were done suggests that people were just more use to Serif fonts. The more recent Studies suggest the opposite effect. Sans-Serif being favorited. Researchers have brought a lot of evidence as to Serifs being a historical artifact. The Romans used Serif to make their text look more even because of their tools not allowing a perfect horizontal line. Also arguments for Serif are less than convincing when attempting to analyze the fonts yourself. Also there are studies that show that Sans-Serifs are better digitiesed because of their pixel to pixel translation. Sans-Serif has also been proven to be much cleaner to read in smaller sizes. And last but not least importantly, kids books use Sans-Serif because teachers claim kids have an easier time recognizing the letter in that form/shape meaning this can carry over into adults reading faster.

In today’s world of web development using external fonts is becoming more and more common. By external fonts i am referring to fonts that are not in the default set of computers, and are embedded via a plethora of techniques. You can achieve this with @font-face, sifr, and cufon. But using the default fonts for your paragraph text is very important as the rendering of these methods is not as cross-browser as one would like.

Techniques for clearer typography

image

Line Height

Even though most people in web development already know this, line height is a very important factor of how readable your text is and how well it looks on your page. Using the em measurement in CSS is the best way to achieve a very organic vertical balance in your typography. For example for paragraph copy it is a safe bet to use between 1.2em and 1.4em. This ensures that the reader has an easy time distinguishin between the lines of text you are presenting and comprehends the text better.

image

Limit Font Faces

It seems really easy to get lost in using a rather large amount of font faces in your designs. This one looks good for this, and that one looks good for that. But in reality pages that contain a large amount of fonts are unpleasent to look at, you remove the factor of consistency you should have in your designs. This doesn’t mean you should only use one font, but try to limit it to 2-3 fonts in a page.

image

Paragraph width

When i first started designing fluid layouts i made a huge mistake of not accounting for people with huge screen resolution. When the paragraph is too wide it’s much less likely that your audience will take the time to read it as it seems forever to finish a line of text. So try to account for that in your designs.

White space and page Hierarchy

Using white space to your advantage is very important. The myth of the below the fold things get ignored is just a myth. You should use a pleasant amount of white space to distinguish certain areas of your designs. It allows for the eyes to rest and to keep a certain focus to important areas of the page. While white space is a great way to keep things clear, there is also an important element of hierarchy you need to maintain. That means that if an element is more important than another one you should show that with a larger font size, or adding a font weight. Keeping a hierarchy helps your viewers decrypt your page and find whats important to them faster.

Tools to help you with typography

some information taken from: http://www.alexpoole.info/academic/literaturereview.html

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. SEO – The Complete Comprehensive Guide
  2. Fonts Web 2.0 Edition
  3. Web Application Interface Design Guide
  4. 7 Design Elements and Techniques that will make your Website stand OUT!
  5. How to plan out a new website – Definitive Guide

Did you absolutely LOVE this article... share it!

Comments

  • This has been very helpful. I’ve been looking for good ways to incorporate some typography in my designs. Thanks for sharing.

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting