How to calculate CSS letter-spacing v.s. "tracking" in typography?

tags:

css
html

views:

196

answers:

+1 Q:

How to calculate CSS letter-spacing v.s. "tracking" in typography?

I have instructions from a graphic designer for a layout that specifies "track 100" for some elements. In CSS letter-spacing is the equivalent property for "tracking".

Given a value for tracking, how do you express this as a value for CSS in pixels?

+2 A:

Do you have to use pixels? The conversions I found is a tracking value of 1000 is equal to 1 em in CSS, so in your case tracking 100 should be 0.1 em.

EDIT

To go from EM to pixels use this site PXtoEM.com. For your specific case 0.1 em converts to 2px. However this is based on a 16pt font, so you will have to adjust for the specific font size you're using.

Alex Larzelere 2010-05-03 19:59:03

Everything else in the CSS is in pixels.

Diodeus 2010-05-03 20:15:53

@Diodeus: Why? Visitors can enlarge or shrink a web page, so why not use relative sizes?

Marcel Korpel 2010-05-03 21:05:40

@Diodeus: Here's the problem with using pixels in this case. Let's say you've got a standard sized font (so you've applied no changes to the size of the text). Now give it a tracking of 10px. Looks good right? Now let's triple the size of the font, 10px tracking squishes all the letters together. Now you would have to specify a new tracking for every size change you have in your page, where as using EM for relative sizing allows you to specify one tracking for all fonts on your site, and it will adjust itself based on the size of the font it was applied to.

Alex Larzelere 2010-05-04 11:51:17

Why? Because I can look at the artwork in Photoshop and easily measure things in pixels. I see your point with the tracking/zoom issue, but I still need to solve the problem as it exists.

Diodeus 2010-05-04 13:32:40

Awesome! Thanks for the link.

Diodeus 2010-05-04 15:27:12

ansaurus

tags:

views:

answers:

How to calculate CSS letter-spacing v.s. "tracking" in typography?

related questions