Menu
I understand the advantages of using ems in favor of static measurements like pixels and points, but why do most of the CSS people out there (SO excepted) prefer using ems instead of % values?
430
The main reason for using em or percentages is to allow the user to change the text size without breaking the design. If you design with fonts specified in px, they do not change size (in IE 6 and others) if the user chooses text size - larger. This is very bad for users with visual handicaps.
Ems are awesome for making flexible grids and measurements. For example, if a container width is specified in ems, I can proportionally resize the container and its contents in my media queries with one declaration. In this example, resizing the font also resizes its container proportionally.
What is the difference between PX, EM and Percent? Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16).
The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion.
For font sizes:
For everything else (e.g. the width of an element):
… so they do completely different things and need to be considered on a case by case basis.
65
Ems are based on a known and consistent value (the font-size) whereas percentage is based on the size of the container. It's much harder to design and understand CSS when the basis of your dimensions and sizes is changing depending on the context (which element/container you are in).
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
