Welcome to Type Tips

Share on Facebook6Tweet about this on Twitter9Share on Google+0Share on LinkedIn0Pin on Pinterest0Share on Reddit0

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 “Type Tips,” 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 Thomas Phinney’s recent post ‘Anatomy of Type‘).

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 (Note: some web font services will strip kerning from their fonts, but WebINK leaves it intact by default). 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.

In CSS, the first thing to do is enable the kerning already built into your fonts to actually work. The following isn’t yet compatible with all browsers (sorry to all you folks on IE 9 and earlier), but here’s some code from our own Thomas Phinney that will make it work as many places as possible:

body {
   -moz-font-feature-settings:"kern=1";
   -moz-font-feature-settings:"kern" 1,;
   -ms-font-feature-settings:"kern";
   -o-font-feature-settings:"kern";
   -webkit-font-feature-settings:"kern";
   font-feature-settings:"kern";
   text-rendering:optimizeLegibility; 
}

That “optimizeLegibility” line even works in some older versions of Firefox, going pretty far back. It enables kerning and ligatures at sizes below 20 px where they would otherwise be off. While you’re at it, you might want to also enable ligatures and contextual alternates consistently across other browsers, with code that would look like this:

body {
   -moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1";
   -moz-font-feature-settings:"calt" 1, "liga" 1, "clig" 1, "kern" 1,;
   -ms-font-feature-settings:"calt", "liga", "clig", "kern";
   -o-font-feature-settings:"calt", "liga", "clig", "kern";
   -webkit-font-feature-settings:"calt", "liga", "clig", "kern";
   font-feature-settings:"calt", "liga", "clig", "kern";
   text-rendering:optimizeLegibility; 
}
WebINK-TypeTips-Kerning

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.

WebINK Type Tips: Kerning logotype

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.

WebINK Type Tips: Display Type

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.

WebINK-typetips-special-characters

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.

WebINK Type Tips: Hang your punctuation

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. (Note: to apply hanging text in CSS, try using the BLOCKQUOTE tag, creating a negative indent of around .3em for the first line of text. Caveat: this won’t work in certain browsers or CSS3).

Want more Type Tips? Check our archives.

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

If you’re not already a regular follower of the blog, we encourage you to check out our full archive of posts starting with May 2010. The archives are filled with tons of useful typography-related information, including everything from classic WorkHorse Web Fonts to Designer and Developer profiles. Use the right-hand column menu to browse Recent Posts, Categories and Tags.

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.

3 Responses to “Welcome to Type Tips”

  1. Jose Antonio Mijares

    excellent article, the author managed to combine a very good starting point in web typography specially for all people involved in web development who had no opportunity to have a formal design education
    Keep up the good articles like this one

    Reply
  2. Rich Turgeon

    Thanks so much, guys, for the nice feedback and reading the WebINK blog! Let us know if you have any topics you’d like us to cover in the future. : )

    Reply

Leave a Reply