Understanding Line-height vs Leading

This is a big pet-peeve of mine.

Designers who measure pixel-by-pixel spacing between lines of text or use the leading number set in their photoshop file for their style guides. It's a very common theme that I see from time-to-time that results in angry designers who complain about developers sense of aesthetics and in retort, developers who claim they are just "following the style guide".

This can all be avoided folks! Either the designer needs to convert their numbers for line-height the right way or developers need to ask how the designer came up with their spacing numbers and convert it themselves.

Here are the rules:

1. Photoshop uses what they call "leading" to measure the distance between lines.

2. CSS/HTML uses "line-height" to establish the distance between lines.

3. Leading is the distance between the bottom of a line of text and the top of the line of text underneath it

4. Line-height is the distance between half of the leading above a line and half the leading below it.

5. Here's a great illustration of the aforementioned rules: http://www.w3.org/Talks/2008/0911-CSS-Amsterdam/line-height.png

6. Therefore the formula is: Line-height = Font-size + Leading/2

7. However, if leading is set to "auto", the actual leading number is 120% of the font size.

For example:

If your font size in your PSD file is 10px and your leading is set to 20px. Then you should put 20px for line-height in your style guides.

If your font size in your PSD file is 10px and your leading is set to auto. Then you should put 22px for line-height in your style guides.

Using Axure to Create Style Guides?

Most recently, I experimented with using Axure to produce both product AND design specifications. I'm not sure if anybody has tried this, but it actually works quite brilliantly!

Although certainly not perfect, I found that it was a very effective way to create specifications for styles, spacing and sizing. It was surprisingly easy and accurate, using Axure's tools to create the measurements. The goal was not to be pixel perfect, but to convey the intended dimensions and styles to the presentation developers. With that in mind, it was perfect.

The func specs were added via image maps on top of the UI jpgs. I added additional fields for design specs. And then used red text, markers and dotted lines for spacing/sizing/bgcolor guidelines. Finally, I found, that if I kept all the visual markers in a dynamic panel, the prototype can double as a virtual or online pinup. You can even create a button that shows/hide the markers.

Overall, there are obvious benefits to using Axure for more than just UX and FA needs. With it's easy-to-use collaboration tools, a designer or art director can easily jump in to add their design definitions. Developers will no longer need to look in multiple areas for design, ux and functional directions.

Innovation Award! Yay!

Very surprised and humbled when they announced my name for the quarterly "Jane Goodall Award for Innovation" at the monthly Town Hall meeting last week. Special thanks to Karen, who ran to my desk to get me, Andrew for presenting me the award and Tom for recommending me for it. There are lots of great minds at Razorfish and I am still astonished for receiving the monkey.

Syndicate content