I recently had to convert fixed font sizes in a sites CSS to and was wondering if there were any formulas to convert from Points to Pixels to Em to % …
As usual the answers were to be found at the http://webstandardsgroup.org/:
- To go from Pixels to Em’s, simply divide by 16
- Use Reed Design’s table which lists conversions from Points to Pixels to Em to %. It’s an approximation, which will depend on font, browser and OS, but it’s a good starting point.
{ 7 comments… read them below or add one }
Isn’t the pixel to em conversion dependant on the text size of the browser?
I came across this page while searching for a way to do exactly that, but in Javascript.
I eventually just used a trick that works in both FFox and IE to figure out the DPI, so that conversion is easy.
—–
function findDPI() {
var outer=document.createElement(“div”);
document.body.appendChild(outer);
outer.style.position = “absolute”;
outer.style.width=”1in”;
var ret=outer.offsetWidth;
outer.style.display=”none”;
return ret;
}
—–
Mind you, it only works on square-pixel displays (for example, at 1280×1024, your pixels aren’t square. I wrote a complement function to get the vertical dpi; all you have to do is change the ‘width’s to ‘height’s)
For percent conversions, it works like this: Pv * document.body.offsetWidth / 100 (or Height, depending on the dimention the % is for).
For font size %’s, it’s much the same, but you do it like so: Pv * FSz * DPI / 7200
1 Pt = DPI / 72
EM’s are equal to the font size, so 1 EM == FSz * DPI / 72
In all, Pv is % value, FSz is font size.
The most common DPI is 72, but my screen does 96. YMMV.
By the way, STORE your DPI; don’t go running the function repeatedly. If you do, you’ll find that your DOM tree has a whole buncha DIVs at the end that do nothing but eat up memory.
Neerav,
Thanks a lot for this essential piece of information. I have read so many articles about using ems for image sizes and none of them tell the most essential clue necessary to achieve the feat: divide dimensions by 16!
I tried by myself and got to 16.4 which was not giving the most accurate measurements after the conversion.
Well done.
Cheers,
Luis
I never really understood the difference and until now have just been making changes blind and hoping they look good. Hopefully this will reduce the amount of refreshing I need to do
You might find this useful as well. http://pixel2em.kleptomac.com
This provides an online pixel to em converter and you can also do a complete CSS file conversion.
I don’t understand the difference b/w pt and px etc… still i am looking its solution