Advanced Search

Return to Snippet

Revision: 17424
at September 4, 2009 10:31 by thesmu
Initial Code 
Jon Tangerine / silo / CSS / Pixels to Ems Conversion Table for CSS

A companion reference to the article, The Incredible Em and Elastic Layouts With CSS.

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%.
px font-size	em equivalent	* Rounded to 3dp 	1px in ems	Notes
11	0.689	*	0.091	
12	0.750		0.083	
13	0.814	*	0.077	
14	0.875		0.071	
15	0.938	*	0.067	
16	1.000		0.063	Browser standard default
17	1.064	*	0.059	
18	1.125		0.056	
19	1.188	*	0.053	
20	1.250		0.050	
21	1.313	*	0.048	
22	1.375		0.046	
23	1.438	*	0.044	
24	1.500		0.042	
25	1.563	*	0.040	
26	1.625		0.039	
27	1.688	*	0.037	
28	1.750		0.036	
29	1.813	*	0.035	
30	1.875		0.033	
Formula to calculate em equivalent for any pixel value required

1 ÷ parent font size (px) × required pixels = em equivalent
Example: 770px wide, centred elastic layout using CSS and ems

N.B. This assumes the browser default font size is unchanged at 16px. body{} selector set to font-size:1em;. Using the forumla*:

1 ÷ 16 × 770 = 48.125em
CSS:

body{
font-size:1em;
text-align:center;
}

div{
width:48.125em;
margin;0 auto;
}

HTML:

<html>
<body>

<div>
…
</div>

</body>
</html>

*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:

Required element pixel value ÷ parent font size in pixels = em value

So, our required width of 770px in ems can be calculated like this:

770 ÷ 16 = 48.125em


Jon Tan fecit, 2006–2008. download vCard (via X2V).
Initial URL 
http://jontangerine.com/silo/css/pixels-to-ems/
Initial Description 

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Pixels to Ems Conversion Table for CSS

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS