Question

I am creating large web application using Foundation 3.0 UI framework and it have px based layout and font-sizing.

In design there is “em” based font-size/line-height and padding/margins. I want to know that Is it good option to choose “em” based font size and padding for responsive layout for smartphones?

Answer 1

I think the main advantage for em in terms of responsive design is the way that you can so easily change the font size for different screen sizes.

E.g. if you use media queries for large screens and small screens (say, mobiles and TV’s) you’re going to want to change the font size for both of them.

If you have everything sized in em‘s you can simply change the font-size on the body, like so:

    /* For TV's (or other large screens */
    @media screen and (min-width: 1800px) {
        body { font-size: 1.4em; }
    }

    /* For mobiles */
    @media screen and (max-width: 400px) {
        body { font-size: 0.9em; }
    }

Where as if you had everything sizes in px you’ve have to do a LOT more work resizing the font’s.

EDIT: Using em for margins + padding may also be a good idea for a responsive layout, as I understand it, if you resize the body font size (as shown above) you’ll also resize the margins + padding (making them either smaller or larger) which could also be very beneficial for a responsive design.