views:

202

answers:

3

When you specify font sizes in "em" units, the browser calculates the pixel values based upon its parents. Is there a way to view the final computed pixel size? Can Firebug do this or is there another tool.

A: 

One way would be to make a list with text in different font sizes, and compare them:

<ul>
    <li style="font-size:10px;">10px</li>
    <li style="font-size:10.5px;">10px</li>
    <li style="font-size:11px;">10px</li>
</ul>

This is not accurate, but I don't think there is another option. Maybe using JavaScript.

Time Machine
+3  A: 

Yes, in Firebug, select "Show Computed Style" on the style tab

rlovtang
Or, equivalently, the DOM Inspector Computed Style view on the element.
Steve Gilham
Does it always show in pixels?
Jenko
+1  A: 

This conversion table between points, pixes, ems and percent isn't 100% accurate, but I've found it to be useful:

http://sureshjain.wordpress.com/2007/07/06/53/

Keltex