-1

I'm finally learning responsive design and I need to know the best practices for em and percentage units of measurement. If I were to set the font-size of the body to be 10px, would I run into problems down the line declaring all font-sizes em's (1em = 10px, 2.5em = 25px, etc.)?

Also, when is the correct time to use em units vs percentages? Are em units mainly for typography, and then percentages would be used for sizing, margin, padding, etc.?

I love the idea that I can scale font-size proportionally at media queries by changing the body font-size, but I don't think I would want my layout and spacing to shift based on the size of text (or do I?).

2 Answers 2

1

It is best practice to allow the browser's font size setting to affect your design–avoid setting the font-size of the body in pixels.

rem units are great for ensuring that everything scales proportionally to the browser font-size. em units are calculated based on the font-size of the parent element so they can become trickier to use when elements are nested. rem is always relative to the font-size of the html element (the root element). If you assume 1rem = 16px and build everything relative to that, then even if the user has set the browser so that 1rem = 20px, for example, then the entire design will scale up accordingly.

With responsive design, it is best practice to define media query "breakpoints" at screen widths where the content starts to become unusable (rather than at arbitrary widths based on popular devices). When your whole site is scaled up or down by the browser's font-size change, you will want the break points to also respect that font-size. However, since Safari treats rem media queries differently than other browsers, it is best to use em for media queries.

2
  • This is enormously helpful. After experimenting with the different relative units in my last project, I more or less figured out the relationships in how the units are sized. I've still been using pixel min-width values at breakpoints (relative to my design, not the popular screen sizes). I may just have tunnel vision, but what's the benefit of using em values for media queries?
    – Koshua
    Mar 15, 2017 at 18:36
  • Try changing the default font size of a browser to see how well the pixel breakpoints hold up. If you use ems, then the breakpoint will scale along with the design much better. If your media query is 600px, for example, then just divide by 16 (the assumed default font size) and make it 37.5em.
    – Lee Floyd
    Apr 7, 2017 at 20:52
0

ok, first if you want using responsive design, i suggest strongly to you to use a framework like bootstrap or fondation to have a responsive design. You seem newbie in that way and responsivity is a bunch of css and preprocessor for most complicate cases.

But, to answer to your question, we dont resize fonts in media queries for most cases. Set per exemple your fonts in rem. So you must test on many devices your responsivity. By layout you must probably mean divs. Best practice is viweport vw (width) and vh (height) except if you want a proportionnal measure inside annother element. In that case, use %. Rem is better than em cause it is root em. The true size of a font difined in html. When the screen become too small on a device, you must collapsing your menu, and the text on your site must goes down in a div. I can continue like this a while, but like i said, use a framework, faster learning and faster development. Most devs like me use frameworks for their clients.

1
  • 2
    Terrible grammar aside, I have to disagree with this completely on content. Learn to use frameworks, yes, but also learn WHEN to use them. They're not always necessary and it's actually better to learn to code from scratch and THEN use them so you can better understand everything they're doing and how to efficiently work with them. Using vh and vw has never been considered 'best practice'. I, personally, always set font sizes in media queries. Support has always been shaky at best for vh and vw. If you're going to use them, know your limitations: caniuse.com/#feat=viewport-units
    – DawnPatrol
    Jan 22, 2017 at 8:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.