Switch from px to em

In order to achieve real flexible layouts, one should develop the css code using ems, not pxs. Pixels can cripple your designs if the visitors use browser features to increase text size or to reduce it. Using em helps you develop websites that will look beautifully if such a thing happens.

Reset default value of text

Most web developers reset the default font-size of text so that further problems are easily tackled. Without proper resets it would be very difficult to set font-sizes of 11 px, 13px and so on. 1 em is equal to 16 px by default. In order to rapidly convert your pixel thoughts to ems, you'd be better of resetting 1 em to 10 px, which is setting it to 62.5%. We achieve this by placing in the body css tag the following: "font-size:62.5%;". This will make 1 em equal exactly 10 pixels.

Some issues

Many users set for links a font size that is smaller or bigger than the actual font size of the paragraph text. This is ok, but when ems are used, their settings are relative to their parent. Having the paragraph text set to 1.2 em (12 pixels), will not make a link 10 pixels if you use 1em setting. 10 pixels are actually 83% out of 12 pixels. This means that the link settings should be 0.83em instead of 1em. Similarly, to achieve 13 pixels links, you shouldn't use 1.3em, but 1.08em instead, as 13 pixels is 108% out of 12 pixels. It is as simple as that.

Check out a demo and download the source files. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

Published on Friday, June 19th, 2009 at 10:12 am in code, css.