Type Treatments

0

Posted by JP | Posted in Typography | Posted on 25-05-2008

kern-what?
Text kerning refers the space between the letters. Now, this is not to be confused with tracking, which is the space between the words. Or leading: the space between lines (known as line-height in Web circles). Good typography utilizes both. The more white space in your layout the more reader-friendly your text will be.

 

By adding kerning to display text you can create a lighter, modern feel to your design. Similarly, by tightening the kerning you can create a denser feel to the layout, making it heavy and bulky on the page.

Kerning Example

 

 

 

 

 

Adjusting the tracking can alleviate bad breaks in the copy caused by justified text. Slightly adjusting the tracking in a line is not noticeable, however for a light and airy effect try adding a little extra trackingto a paragraph for an easy-reading experience.

 

Tracking Example

 

 

 

 

 

 

Last but not least, leading (pronounced ledding) is the space between the lines. As with everything else, the more space you have between lines the easier it is for the reader to separate the lines of text as they read. A good rule of thumb is to have at least a 4 pt increase in size (i.e. 12 pt font, 16 pt leading). Obviously, this guideline is based on a perfect world. Often you have to adjust your text to fit within the space determined by the size of the piece you’re working on. Just remember, using a little more space and making the piece readable will benefit everyone in the long run.

Leading Example

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

These terms, ideas and suggestions are just the tip of the iceberg that is Typography. Pay close attention to the text around you and you too will start to notice typography in action!

Ins and Outs of Typography

0

Posted by JP | Posted in Typography | Posted on 25-05-2008

The term typography refers to exactly what you’re reading. Yep, you just read some more. Any text you see with the eye is an element of typography. But typography is not simply letters arranged into words. Typography is an art. But if you know what to look for even a novice can tell the good from the bad.

 

to serif or not to serif: Those who specialize in typography will often throw around words like serif, sans serif and kerning. So what does it all mean? Like everything else in the design world there are several rules of thumb to use when deciding which type of font to use. Broken down into the most basic format there are 2 main types of fonts: Serif and Sans Serif (there are others like slab & script, but for the sake of this article we’ll deal only with these two).

 

Serif refers to any font that has “tails”. Tails are the little extension that appear at the bases of the letters. A classic example of this type of font is anything in the Times family. Serif fonts are great to use for large blocks of text. Most books and magazine columns are set in a serif font. The little tails on the letters guide the readers eye from letter to letter allowing the human brain to quickly scan a word.

 

 

Typography Example

 

 

 

 

 

 

 

 

Serif fonts are perfect for printed pieces where print resolution is high (at least 300 dpi). The letters are crisp and clear and the tails can aid the reader without obstructions.

 

 

For screen resolutions such as a Web page, a sans-serif font is optimal. Sans-serif simply means “no-serif” Breaking it down further these fonts are the ones that do NOT contain “tails”. Sans-serif fonts are commonly used for display text (anything over 16pts in size) and headlines in print work.

 

Because the letters are “clean” they have become more and more popular in the current minimalistic society we live in. Most designers still shy away from using a sans-serif font for large blocks of printed text, though it is
almost always used in Web design.

 

 

With screen resolution at only 72 dpi, Web page text is already harder to read than a printed page. Never would you want to us a serif font at such low resolution as the added tails will cause the letters to blur and make reading difficult.

Typography Example