Typography 101 (old)

Typography is the art of designing and arranging type. For the purpose of this article we are going to deal with how typography fits into Interaction Design. Our focus will be on:

1. The definition of Typography.
2. How poor usage of Type can break your page.
3. Basic guidelines to follow to maintain a legible layout.
4. CSS code for playing with type.

The definition of Typography.

Wikipedia says:

Typography is the art, craft and techniques of type design, modifying type glyphs, and arranging type.

Dictionary.com says:

The art or process of printing with type. The work of setting and arranging types and of printing from them. The general character or appearance of printed matter.

Typography, as far as it has to do with Interaction Design, is everything you do to the type itself; be it on buttons, forms, or paragraphs.

How poor usage of Type can break your page.

The way your text is laid out will have drastic effects on legibility. The space between each letter is called Letter Spacing. The space between each line is called Leading, which comes from the days when lead strips were placed between the lines on the masters for printing presses. The Alignment of the text is limited on computers, mainly to right, left, center, and justified. As you might have noticed, this paragraph is printed four times, each with a different set of these values.

The way your text is laid out will have drastic effects on legibility. The space between each letter is called Letter Spacing. The space between each line is called Leading, which comes from the days when lead strips were placed between the lines on the masters for printing presses. The Alignment of the text is limited on computers, mainly to right, left, center, and justified. As you might have noticed, this paragraph is printed four times, each with a different set of these values.

The way your text is laid out will have drastic effects on legibility. The space between each letter is called Letter Spacing. The space between each line is called Leading, which comes from the days when lead strips were placed between the lines on the masters for printing presses. The Alignment of the text is limited on computers, mainly to right, left, center, and justified. As you might have noticed, this paragraph is printed four times, each with a different set of these values.

The way your text is laid out will have drastic effects on legibility. The space between each letter is called Letter Spacing. The space between each line is called Leading, which comes from the days when lead strips were placed between the lines on the masters for printing presses. The Alignment of the text is limited on computers, mainly to right, left, center, and justified. As you might have noticed, this paragraph is printed four times, each with a different set of these values.

Basic guidelines to follow to maintain a legible layout.

If the Leading of your text is too tight, meaning the lines are too close together, the reader will have trouble finding what line they should move to next. The same is true if the lines are too far apart. Finding a balance between the extremes is the goal here. The same follows for letter spacing, too close and it is hard to pick the letters apart to read, too far and the reader will find it hard to know where words begin and end. In most cases the default values for leading and letter spacing will be just fine. However, when you are talking about a lot of text, relaxing these a bit can help prevent eye-strain.

Alignment is important, and while there is hot debate as to which is more legible, Justified or Left, in reality it depends on where and when you use them. Left alignment is most legible in situations where you are dealing with a large column width, because Left will retain the correct letter spacing. Justified text loses the even letter spacing, but will aid in moving from line to line, since both edges are even. This is why most newspapers and paper back books use this alignment. Centering should never be used for the body of text. It works alright for short blurbs of text, such as titles, and sometimes for poetry. Right alignment is again used mainly for dates, author names at the bottom of articles and other accent-based positioning. You shouldn't use it for a page, unless the native language you are writing in is read right to left, like Hebrew.

In addition to how the text is laid out, what type-face or font you are using is also going to effect legibility. You should always use Italics, Underline, and Bold for accents and not across large portions of text. You should chose a type-face that appears legible. Which typically means serif for large bodies of text and sans-serif for smaller bits of text. Also, use the smallest number of type-faces possible, as switching between them can cause confusion.

CSS code for playing with type.

While the rules here can be used in all typography, the focus of this blog is mainly websites. So I thought it might be nice to list some CSS code to use to change these settings.

/* This is a comment, comments won't effect how code renders */

.class {
 font-family: Arial; 
 text-align:Left; /* Options: Left, Right, Center, Justified. */
 line-height:1em;
 letter-spacing:.035em;
}

Following these guidelines will ensure that all of your text is legible. However, there is also an artistic side to typography which I have been avoiding. While it is beyond the scope of this article, I urge you to look into it as typographical artistry is a very overlooked form. Designing With Type, is a great place to start.