Advanced Search

Pixels to Ems Conversion Table for CSS

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. Jon Tangerine / silo / CSS / Pixels to Ems Conversion Table for CSS
  2.  
  3. A companion reference to the article, The Incredible Em and Elastic Layouts With CSS.
  4.  
  5. The em values in the table assume that the generic browser default setting of 16px font size has not being changed. It also assumes that the <body> has font size set to 1em or 100%.
  6. px font-size	em equivalent	* Rounded to 3dp 	1px in ems	Notes
  7. 11	0.689	*	0.091	
  8. 12	0.750		0.083	
  9. 13	0.814	*	0.077	
  10. 14	0.875		0.071	
  11. 15	0.938	*	0.067	
  12. 16	1.000		0.063	Browser standard default
  13. 17	1.064	*	0.059	
  14. 18	1.125		0.056	
  15. 19	1.188	*	0.053	
  16. 20	1.250		0.050	
  17. 21	1.313	*	0.048	
  18. 22	1.375		0.046	
  19. 23	1.438	*	0.044	
  20. 24	1.500		0.042	
  21. 25	1.563	*	0.040	
  22. 26	1.625		0.039	
  23. 27	1.688	*	0.037	
  24. 28	1.750		0.036	
  25. 29	1.813	*	0.035	
  26. 30	1.875		0.033	
  27. Formula to calculate em equivalent for any pixel value required
  28.  
  29. 1 ÷ parent font size (px) × required pixels = em equivalent
  30. Example: 770px wide, centred elastic layout using CSS and ems
  31.  
  32. N.B. This assumes the browser default font size is unchanged at 16px. body{} selector set to font-size:1em;. Using the forumla*:
  33.  
  34. 1 ÷ 16 × 770 = 48.125em
  35. CSS:
  36.  
  37. body{
  38. font-size:1em;
  39. text-align:center;
  40. }
  41.  
  42. div{
  43. width:48.125em;
  44. margin;0 auto;
  45. }
  46.  
  47. HTML:
  48.  
  49. <html>
  50. <body>
  51.  
  52. <div>
  53. …
  54. </div>
  55.  
  56. </body>
  57. </html>
  58.  
  59. *I deliberately hooked the formula for the tutorial around 1px, as a value that designers can easily relate to. However, there is a faster way of calculating an em value that I use. You need to be familliar with the sticky issue of CSS inheritance and know the font size of the parent, but it goes like this:
  60.  
  61. Required element pixel value ÷ parent font size in pixels = em value
  62.  
  63. So, our required width of 770px in ems can be calculated like this:
  64.  
  65. 770 ÷ 16 = 48.125em
  66.  
  67.  
  68. Jon Tan fecit, 2006–2008. download vCard (via X2V).

URL: http://jontangerine.com/silo/css/pixels-to-ems/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.