Basic Guide to Typography

Wikipedia defines typography as, "the art and technique of arranging type in order to make the language it forms most appealing to transparent learning and recognition." It is an art form that dates back to when Gutenberg printed his first works. The entry goes on to explain how until the digital age, typography was a specialized occupation but is now something that everybody does. For those who work in web design typography is one of the foundations of what you do, and if it isn't, then you better begin taking it into consideration more often.

What typography entails

Typography is more than cool looking fonts and to define everything that it entails would take much more than one article, but in its most basic form typography consists of:

• Typefaces (fonts)
• Line height
• Point size
• Line length
• Line spacing
• Tracking (the spacing between groups of letters)
• Kerning (the spacing between pairs of letters)

In layman's terms, it is the art of making the site more readable and engaging through the use of type.

Typography as a part of web design

In 2006 Oliver Reichenstein stated that since 95 percent of the information on the web is written language so, as a result, web design is 95 percent typography. Since then multimedia has become more prevalent on the web, but text still comprises a large majority of content on the Internet. Even those who disagree with Reichenstein's statement can't argue the fact that content on the web has to be easy to read, easy to understand and has to convey the right emotion to engage visitors. "Web typography includes good readability, scalability and a character that matches the nature of the website," says Sabina Idler of Usabilla.

Adding character

Take a look at the fonts people rely on in everyday use. In the workplace they might use Times New Roman or Cambria. Emails rely heavily on Arial and Verdana. These are the go to font-families because they are serious looking fonts. They aren't trying to be flashy or silly. But not all websites need to portray the seriousness of a corporate boardroom. Choose fonts that are appropriate for your subject matter and the overall design of your site, but don't choose too many. A good rule of thumb is to choose one base font and one display font and that is it.

Use colors carefully

It is amazing that so many people don't realize that a majority of websites rely on a black on white color scheme because it works so well when it comes to displaying text. This principle is one that every designer needs to understand when it comes to font colors.To make the claim that the color of the font need only contrast with the background is not enough. Take, for example, a dark blue font on a pink background. The colors contrast rather sharply and this works. Now reverse that; while it might work the light pink text on the dark background is likely to cause some visitors to complain.

Layout for larger text

Designers tend to layout their sites for font sizes between 10 to 12 pixels. However, as the first group of web savvy individuals begins to age you can count on those display types to enlarge proportionately. If the font size grows too big for the screen real estate two things are likely to happen. First, the page will look cluttered and second, the visitor will have to scroll horizontally. Both situations can send them looking for another site in a hurry, so make sure that the typography is large enough for visitors to see without having them zoom in and mess up your design.

Readability factors

People are becoming more and more comfortable with reading text on the web, however it still is not preferable for everyone. To help keep visitors engaged with your content two elements of typography can be applied to your website that makes reading even easier.The width of your columns is one area that is often overlooked, even though it has a strong impact on readability. In printed materials columns are set between 45 and 75 characters, but on the web these guidelines are ignored. To make things easier, make sure that columns do not exceed 80 characters, or a width of 80 ems.The second element involves proper spacing. Setting the leading (space between lines) and the tracking (space between letters) using the CSS property for line-height and letter-spacing conversely will help make your content easier on the eyes.

Typography is fundamental to good web design. Not taking the time to learn how to apply the basics to your text could turn even the most elegant aesthetics into a nightmare for your visitors.

Related posts:

• How to Select Winning Typeface Each and Every Time
• Using Typography to Your Advantage to Create Breathtaking Website Text
• Web Typography: 7 Typography Rules You Can't Pass By
• Typography in Web Design: 100 Irresistible Examples
• The Greatest Tools Ever for Superior Website Typography