best practices when using em instead of px

Question

I'm starting a new project and considering to use em.

What are the best practices to be followed when using em instead of px (to create a scalable layout).

I would also welcome any pitfalls with this approach and possible solutions to it

possible duplicate of [Why em instead of px?](http://stackoverflow.com/questions/609517/why-em-instead-of-px) — BoltClock, Dec 10 '11 at 16:32
I searched for this on google, found this questions, and *gasp* its closed. Too bad SO is so hostile towards useful questions. +1 anyway. — Nick, May 16 '14 at 23:28

score 1 · Accepted Answer · answered Dec 10 '11 at 16:32

1

Here's a great article on Fluid Grids that can help get you started:

http://www.alistapart.com/articles/fluidgrids/

answered Dec 10 '11 at 16:32

Phil Klein

7,344
3
30
33

score 1 · Answer 2 · answered Dec 10 '11 at 16:35

1

The best trick I know is to set the body text size to 62.5%. This way any em value you use will have a direct correlation to px sizes. Eg 1.2em = 12px

This is of course assuming the element you are setting the em size on does not have any parents which have already had their size set, in which case you will need to do some maths to work out the relative size.

answered Dec 10 '11 at 16:35

Rory McCrossan

331,213
40
305
339

Not exactly a panacea, but a better approach would be to set `body` text size to `10px`. http://css-tricks.com/forums/discussion/1230/the-problem-with-bodyfont-size62.5-and-ems/p1 – m33lky Mar 24 '12 at 23:46

score 0 · Answer 3 · answered Dec 10 '11 at 17:50

0

You may want to check out a book called "Responsive Web Design". It has some great best practices when it comes to using EMs and %s for layout, type, and images: http://www.abookapart.com/products/responsive-web-design

answered Dec 10 '11 at 17:50

MarkT.

33
5

best practices when using em instead of px

3 Answers3