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 [...]
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.
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
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.
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.
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
Related posts:
- SEO – The Complete Comprehensive Guide
- Fonts Web 2.0 Edition
- Web Application Interface Design Guide
- How to plan out a new website – Definitive Guide
- 7 Design Elements and Techniques that will make your Website stand OUT!
Did you absolutely LOVE this article... share it!
Comments
Leave your own!