Flog: The Official Fluid Blog

In reviewing the style guide for a client, we realized that Photoshop and CSS use different units for controlling the tracking and leading for text. So, how do you make sure that the typography on the site that’s built matches the designer’s intent as closely as possible? You could tinker with a simple HTML file and play with the CSS styles until they match the PSDs, but that could be tedious.

Fortunately, Doctor Hogue did a bit of research and found some simple conversion formulas. Thanks Dave! We’re posting the information here for reference for anyone who may need it.

TRACKING & KERNING

“Tracking and kerning are both measured in 1/1000 em, a unit of measure that is relative to the current type size. In a 6-point font, 1 em equals 6 points; in a 10-point font, 1 em equals 10 points. Kerning and tracking are strictly proportional to the current type size.”
Source: Adobe LiveDocs
———————————————————————————
Tracking Conversion CSS “letter-spacing”
———————————————————————————

1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em

———————————————————————————

LEADING

“The vertical space between lines of type is called leading. Leading is measured from the baseline of one line of text to the baseline of the line above it. Baseline is the invisible line on which most letters sit—that is, those without descenders.

“The default auto-leading option sets the leading at 120% of the type size (for example, 12‑point leading for 10‑point type). When auto-leading is in use, InDesign displays the leading value in parentheses in the Leading menu of the Character panel.”

Source: Adobe LiveDocs

As I’m sure most of you out there already know, recent changes to Microsoft’s Internet Explorer force a change in the way we embed Flash files in our HTML. At Fluid we’ve been using SWFObject , a useful bit of JavaScript that handles these changes quite nicely. The other day, after publishing several .fla files and having to update the generated HTML each time and eventually growing quite tired of the process, I decided it was time to give SWFObject a more permanent home.

The solution, modify Flash’s default publish profile to include a modified HTML template that uses SWFObject instead of the standard Object and Embed tags. Now, when I publish HTML with my .fla files Flash uses this new SWFObject enabled HTML. I was so happy with the result that I decided to package it up into an extension for others to enjoy.

You can find the extension along with release notes here.

I decided to take a bit of time this morning and update to Mozilla Firefox 1.5 and took a look at the latest and greatest extensions. Here is my personal list of must-have extensions for both productivity and fun.

• Foxpose View all of your tabs in one window like in OSX Exposé. Fun!
• Web developer Toolbar The defacto standard plugin if you do any web development.
• IE Tab Open Internet Explorer within a Firefox tab. Very useful for cross-browser testing.
• Dictionary Tooltip Double-click a word to get a popup dictionary definition.
• Foxytunes Control your music apps via your browser toolbar.

Have fun!