Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on Reddit

In most disciplines, you need to know the rules before you break them. Typography is no different. There are rules, and following them correctly results in a clean, professional appearance. Breaking them deliberately and correctly can also have nice results, making your type unique and maybe even out-of-the-box brilliant.

To help designers and developers put their best foot forward, we’re happy to present “Tips for Better Typography,” where we’ll cover some basic rules of typography and related tips to help you set type in a way that’s professional and beautiful. Below, we’ll cover some tips and guidelines around line measure, line-height, kerning and special characters.

Line Measure

The width of a body of type, or line length, is also known as the measure. In content-heavy design especially, you don’t want to make your lines of copy too long; it can cause eye fatigue and make the reader lose interest. A good rule of thumb is to limit lines of copy to around 65 characters per line, including space and punctuation. Another good rule of thumb is to increase your leading in proportion to the measure.

webink-measure-typetips

Line-height (leading)

Leading is the print typography term for what CSS calls “line-height” and most non-typographers think of as line spacing. Speaking of line height, when setting type in ALL CAPS (which should be done sparingly, unless it’s a headline), one doesn’t need as much line speacing as the lack of lack of descenders means there is nothing to collide with the top of next line (…and if you don’t know what a descender is, may we refer you to our recent post ‘Anatomy of Letters‘).

A few more leading-related tips: larger text typically requires less leading. Lastly, set your line-height for body text about 20-35% larger than the type size. To provide an example, 15-px text might be set on 18- or 20-px line-spacing. Line height is best set as a multiple of the type size, such as 1.25.

webink-lineheight-typetips

Kerning

Kerning refers to both the process of adding or reducing the space between a pair of characters set in type. It also refers to the data defining preset kerning pairs built into most fonts. This isn’t to be confused with tracking, which adjusts spacing uniformly over a range of characters, or leading, which refers to the vertical distance between the baselines of lines of type (Note: in CSS, tracking = “letter-spacing” and leading = “line-spacing”). Well considered kerning with good rhythm and consistency results in a clean, professional appearance, whether the type appears online or in print.

Learn more about the two ways to enabling kerning in CSS with this informative post by Typekit.

Pay special attention to kerning letters with strong slants like the uppercase “A”, “W”, “V” and “Y” and to other letter combinations that need extra love.

Pay special attention to kerning letters with strong slants like the uppercase “A”, “W”, “V” and “Y” and to other letter combinations that need extra love.

For something like a logo, or even a really important large heading, if the kerning built into the font doesn’t look good enough, you might consider kerning by hand using your graphics editing app, or kerning.js for live HTML/CSS. Kerning isn’t an exact science, so one needs to rely on their trained eye and good judgment to see what’s working or not. A good technique for gauging the right kerning in a logo design, for example, is to print it out and color the negative space between letters with a pencil. The space should be consistent.

Gauge kerning by printing it out and coloring in the negative space with a pencil.

Gauge kerning by printing it out and coloring in the negative space with a pencil.

For display type, try turning it upside-down to look at the white space; you may see some areas for improvement you wouldn’t have otherwise.

Get a better feel for white space by turning your type upside-down.

Get a better feel for white space by turning your type upside-down.

Finally, you can try simply squinting at your type to see where there might be opportunities to tighten or loosen the kerning.

Special Characters

I’m probably dating myself here, but when I started out as a designer, before the internet gained traction, a more experienced designer gave me a photocopy of a sheet full of special characters (like †, ™ or ®), along with the keyboard shortcuts (like ALT+2) used to generate them. I still have that sheet on file to this day, perhaps out of superstition in case the interweb ever goes dark and I’m on a deadline. If you like, I can mail you a photocopy, or you can simply visit a comprehensive online reference like this with keyboard shortcuts and HTML code, or this one from Wired with just HTML code, or this one from the Design Cubicle with just the keyboard shortcuts.

Properly executed typography requires proper use of special characters. For example, avoid the rookie move of using “straight” typewriter quotes and apostrophes in place of “curly” quotation and apostrophe marks. This is the kind of common mistake that screams typographic malpractice.

Use proper ellipsis, quotation and apostrophe marks. Use hyphens en dashes and em dashes properly.

Use proper ellipsis, quotation and apostrophe marks. Use hyphens en dashes and em dashes properly.

 

To list some “DOs,” DO use real ellipsis (Option-semicolon on Mac, or ALT 0133 on Windows) instead of three successive periods. DO use “curly” apostrophes and quotes instead of the “straight” typewriter versions. For punctuation, DO use hyphens, en dashes and em dashes (shortest to widest) properly: hyphens for two-word descriptors (“super-fast”), en dashes for ranges (Monday–Friday), and em dashes for related phrases at the middle or end of a sentence—like this.

Hang your punctuation and reduce special character size by 10-20% for a better fit.

Hang your punctuation and reduce special character size by 10-20% for a better fit.

 

And while we’re on the topic of special characters, any tips on punctuation, you ask? Hang it. Even Gutenberg did it. Also, if your punctuation looks oversized in comparison to the corresponding display type, try reducing it by 10–20% for a more aesthetically-pleasing fit.

Want more tips for better typography?

If you enjoyed this post, don’t forget to follow Extensis on Twitter for the latest tips and posts on the blog.

Until next time, let’s keep that typography tight!

 

Reference

Kerning.js – Simple code for your CSS pages to get full control over your web typography.

Also see Additional Resources at the end of this fantastic post from Noupe.com

More information on how to apply hanging text in CSS here and here.

Tags: , , , , , , ,

No Comments »

Leave a Reply

Your email address will not be published. Required fields are marked *