Convert em,px,pt and % in css

July 6, 2007

Conversion from Points to Pixels (and Ems and %)
Here’s a chart that converts points to pixels (and ems and %). It’s an approximation, which will depend on font, browser and OS, but it’s a good starting point.

 Points Pixels Ems Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%

Entry Filed under: css. .

23 Comments Add your own

  • 1. Vicente Pellegrini  |  July 10, 2007 at 2:08 pm

    Finally the conversion table that I seek makes time!
    thanks.
    Vicente
    Sao Paulo-SP-Brazil

  • 2. szombat  |  July 31, 2007 at 5:05 am

    yes, but whit what font have you calculated this?
    ’cause 1em will always be 100% but I’m not sure about the px pt relationship, i think thats strongly depends on the actual font.

  • 3. Another handy cheat sheet&hellip  |  August 29, 2007 at 8:21 am

    [...] Well today again i found an interesting cheat sheet to have near: a conversion table between ems, pixels, points and percentages for the font size in css. [...]

  • 4. Tabla de Equivalencias en&hellip  |  December 18, 2007 at 9:18 pm

    [...] el blog WorldTechies han hecho una tabla de equivalencias entre px, %, pt y em en CSS muy útil para darnos una idea de [...]

  • 5. Actualidad, Entretenimien&hellip  |  December 18, 2007 at 9:41 pm

    [...] el blog WorldTechies han hecho una tabla de equivalencias entre px, %, pt y em en CSS muy útil para darnos una idea de [...]

  • 6. [Recursos] Tabla de equiv&hellip  |  December 18, 2007 at 9:59 pm

    [...] La fuente esta aqui http://sureshjain.wordpress.com/2007/07/06/53/ [...]

  • 7. CSS: Tabla de Equivalenci&hellip  |  December 19, 2007 at 5:32 am

    [...] tabla fue publicada originalmente en WorldTechnies y de hecho ellos mencionan que esta tabla puede tener ciertas variaciones, dependiendo del Sistema [...]

  • 8. CoderLab’s Blog &ra&hellip  |  January 14, 2008 at 8:54 pm

    [...] looking for a way to convert pixels to ems for a website project I was working on, and came across this conversion table which, I’m sure, will be a useful reference to you if you ever need to convert pixels to [...]

  • 9. sandman6665  |  January 31, 2008 at 1:29 am

    been looking for this..thank you very much.. great post!

  • 10. 2clicks  |  February 10, 2008 at 2:45 pm

    Exactly what I was looking for!!!! THANKS A LOT! :D

  • 11. Yokko  |  February 12, 2008 at 12:59 pm

    This makes no sense since em and ex depends on font size.

  • 12. penta  |  February 26, 2008 at 7:03 pm

    doesn’t make no sense?

    if 1 em is set to 12 pt then 1,4 em will be approximately 16 pt

    isn’t it?

  • 13. Enlaces 27/02/2008 -- los&hellip  |  February 27, 2008 at 6:02 pm

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

  • 14. Z  |  February 29, 2008 at 1:24 am

    From my understanding, em is dependent on parent elements, which often throws a wrench in the works of my employment (laymen terms - suiqshing user code into back end .asp/.net and make it all look purdy)

    Why do you say using px is bad?

  • 15. rey mendoza  |  March 3, 2008 at 5:49 am

    most browsers when no pixel size is declared (in the body) approximately converts 1em=16px so the chart is fairly accurate.

    But if a px size is declared, say 12px (on the body) then all this will be in vain, you have to recalculate all of it.

    But again, this will work in most browsers

  • 16. Web design resources | gr&hellip  |  March 5, 2008 at 10:21 am

    [...] Convert em,px,pt and % in css [...]

  • 17. seven  |  March 14, 2008 at 4:56 am

    I want to have the size table like this.
    Maybe I’ll use this table many time,Thanks a lot!

  • 18. my so-called blog »&hellip  |  March 17, 2008 at 2:18 am

    [...] Convert em,px,pt and % in css « Worldtechies Convert em,px,pt and % in css July 6, 2007 Conversion from Points to Pixels (and Ems and %) Here’s a chart that converts points to pixels (and ems and %). It’s an approximation, which will depend on font, browser and OS, but it’s a good starting poi (tags: css typography type webdesign) [...]

  • 19. xmulambox  |  May 5, 2008 at 1:42 pm

    http://www.reeddesign.co.uk/test/points-pixels.html

  • 20. Equivalencias entre pixel&hellip  |  May 26, 2008 at 9:27 pm

    [...] aproximadas entre éstas cuatro medidas que me encontré en webadictos qué a su vez la sacaron de WorldTechies. Ya saben esto de la RED trabajando al [...]

  • 21. sasa eh · Converti&hellip  |  May 28, 2008 at 6:19 pm

    [...] (Casi) Fácil. Aquí va una pequeña tabla de equivalencia sacada de (Worldtechies) [...]

  • 22. DCNY » Blog Archive&hellip  |  May 31, 2008 at 8:12 am

    [...] http://sureshjain.wordpress.com/2007/07/06/53/ by Suresh kumar [...]

  • 23. Cheat Sheets for PHP, Rub&hellip  |  July 15, 2008 at 6:51 am

    [...] Conversion table for em, px, pt & % in CSS by Suresh Jain [...]

Leave a Comment

Required

Required, hidden

Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackback this post  |  Subscribe to the comments via RSS Feed


Spam Blocked

Flickr Photos

THE-GROUP-YOU-CANNOT-GET-INTO-ANYMORE

.pouting.

L'informarsi, prima di tutto

More Photos

Categories

Links

Calendar

July 2007
M T W T F S S
« Jun   Aug »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Recent Posts

Recent Comments

Sachin Gajraj on Top 50 Govt Engineering C…
Sachin Gajraj on Top 50 Govt Engineering C…
KUSHAGRA on Top 50 Govt Engineering C…
Siber on 5 useful PHP functions for MyS…
Daniel Tome on Applying background to Iframe …

Pages

Top Clicks

Top Posts

Blog Stats