Forums

Give help. Get help.

  • # May 15, 2017 at 2:01 pm

    The reasons I’ve heard so far is either that
    -you must use em to make the page zoom consistently (if the user zooms using cmd +/-)
    -you must use em for accessibility reasons (if the user sets a minimum font size in settings)

    I never liked using em or rem because it’s either a hassle to recalculate box sizes, or because it’s hacky to use the solution to set the default font size to 62.5%.

    But since (almost) every web blogger said you should, I decided I should start teaching the noobs using ems/rems instead of px. But since my dear noobs are graphic designers, I realised I needed to motivate them somehow to go the extra mile and use em’s.

    As I was setting up examples to show that you have to use rem’s even when setting sizes on layout boxes (for the page zoom to zoom boxes and text in proportion), I discovered that It made no difference in either chrome or safari.
    (like this one: https://codepen.io/jkohlin/pen/EmRMGr?editors=1100)

    However there was a difference when setting the minimum font size in the browser settings to bigger than 10px, making the rem sized boxes grow in width, and potentially break the layout.

    So, Is this really such an important rule to stand by? That all sizes should be set using ems or rems instead of px?

    # May 16, 2017 at 7:20 am

    The inconsistencies with zooming was in older browsers, like you discovered in your examples, this will make no difference in modern browsers. In this way it will become less important using one over the other, and in the end they all are recomputed into pixel values I think.

    I never liked using em or rem because it’s either a hassle to recalculate box sizes, or because it’s hacky to use the solution to set the default font size to 62.5%.

    Maybe you don’t ask for this, so this is just my two cents in; I would say there could be different use-cases that can lead to the choice for a certain unit.

    I got used to setting font-size: 100% on the body element, which in most cases would mean 16px. This feels less hacky to me then the 62.5 trick, because 16px font-size on paragraphs is a nice default, and when after that setting all typographic elements with em-units for font-size, padding and margin works out fine as well, not much of a hassle either: h2: font-size: 2em , h3: font-size: 1.5em : it’s all relative and interdependent/connected. Percentages for box-sizes, maybe even view-port units like vw or vmin. There is also this upscaling for all font-sizes on all elements possible in media-queries (handy for larger screen-sizes) when setting a font-size in rem-units on the HTML-element.

    html {
      font-size: 16rem;
    }
    @media (min-width: 80em) {
      html {
        font-size: 18rem;
      }
    }
    

    On which unit best to use for media-queries: this article on media-query-units on zellwk dot com explores this with several experiments in detail.

    # May 16, 2017 at 2:42 pm

    I totally agree on the upsides of using em and rem for font sizes, especially your example with media queries. Very useful.
    My main issue is with using it for layout purposes. And actually going back to pixels isn’t really the best option when it comes to layout either, but percentage and vh, vw over em any day.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag