Typography 101

Typography is kind of a hot topic right now, with Typekit is getting closer to launching & other technologies like sIFR ,FLIR, & Cufón. Typography is one of those things that's kinda hit & miss. Most of the time you just have to experiment with line-height, font-size, font-weight, text-indent, etc… But there are a few core concepts that you should keep in mind.

Leading


p { line-height: 15px; }

When I was building my first site I didn't give that much thought to line-height but it really can help or hurt the readability of your site. For example a nice average height is nice to read but if it's too short the letters can overlap and totally kill your readability. In contrast if the height is way too much it can make it a little tiring to read.

Measure

The length of a line of type is known as the measure. Your eyes get into a rhythm will reading & you should try not to disrupt that. When you read a paragraph, your eyes tend to wander & get distracted if a line is too long. A measure that is too short is tiring or even painful to read. Try to keep your measure to around 40, at the least, to 80, at the max, but this depends on your font size.

Rhythm

To achieve good readability using a baseline grid is essential. The key here is to Stay consistent! In order to do this keep all of the margins the same as the line-height, basically. On this site I did the following:


p { font-family: Helvetica; font-size: 14px; line-height: 20px; margin-bottom: 20px; }
h3 { font-family: Helvetica; font-size: 37px; font-weight: bold; letter-spacing: 0.1px; line-height: 20px; }

You'll want to play around & develop your own style but again stay consistent.

Contrast

Traditionally white text on black is the most readable type. Truthfully, black on white can get boring & may not fit your design in the first place. The concept remains, if your against white try to stay above #cccccc & don't go too dark if your against black.

Scale

If you've ever tried to read an article with a huge body type size, you'll know how important scale is. For body text I wouldn't go over 21px but I wouldn't go under 12px. Headers are a little more fexible, don't go over 60px in most cases.

Did I miss anything? Thing I'm an idiot? Leave a comment & let me know.

Post a Comment

Going Up?