15

REM and 62.5% font-size

over 6 years ago from , front-end design/shopify optimization

When sizing fonts, I've often done something like this. (as seen here: http://snook.ca/archives/html_and_css/font-size-with-rem)

html {font-size:16px}

body{font-size:62.5%}

And then I can set all of type using REMs in increments of "1 REM=10px".

But why don't people just do this

html{font-size:10px;}

Wouldn't that accomplish the same goal?

10 comments

  • Howard JonesHoward Jones, over 6 years ago

    I believe it's in case someone has increased their font size in their browser settings. I believe that hardcoding a 10px font size on the body would override that browser setting. So it's deference to usability using a percentage rather than a hard-coded value.

    3 points
  • Aaron MoodieAaron Moodie, over 6 years ago (edited over 6 years ago )

    One reason is that it comes in handy whey you're using media queries and want to reduce type and padding/margin sizes for mobile.

    When things are in rem, (font sizes, padding, margins etc) you can change the body font-size from 62.5% to 50%, for example, and everything is scaled proportionately across the site.

    1 point
    • Patrick SmithPatrick Smith, over 6 years ago (edited over 6 years ago )

      Would this also happen if you changed the body font-size from 10px to 8px?

      (not trying to be snarky!)

      1 point
  • Lucian MarinLucian Marin, over 6 years ago

    Using em comes from an age when developers/designers where trying to use the same typography units for both print and screen stylesheets. There was also a bug in IE5/6 that didn't let users increase the font size if it was set in px. This was long before "zoom" feature was introduced in modern browsers.

    I'm using only px units since they give you precision for both layout and images.

    1 point
    • Andrew CrockerAndrew Crocker, over 6 years ago

      Even though they're based in print units, EMs have a lot of really useful applications. Here's a quick primer: http://trentwalton.com/2013/01/07/flexible-foundations/

      tl'dr: Using EMs you can proportionally scale whole blocks with one line of CSS. As opposed to changing PX values for margin/padding/border/border-radius/font-size etc individually.

      0 points
      • Marc EdwardsMarc Edwards, over 6 years ago

        Sure, but I’m with Lucian on this one — px is a great starting point, unless you need the other features. I’ve found px really easy to work with, even for responsive sites.

        1 point
  • benny chia, over 4 years ago

    The percent unit depends on the set of the browser. In case of web accessibility, the default setting of most browsers make 16px equals to 100%, so 10px equals to 62.5%. However, if you set the browser's default font size setting to smaller or bigger, the 62.5% does't equals to 10px yet.

    0 points
  • Palash KariaPalash Karia, over 6 years ago

    Hey, I have always had this doubt about using rems, refer this: http://wtfhtmlcss.com/#rems-mobile-safari

    "While Mobile Safari supports the use of rems in all property values, it seems to shit the bed when rems are used in dimensional media queries and infinitely flashes the page's text in different sizes."

    Do you face this issue? I have never tested this.

    0 points
    • Shane BolandShane Boland, over 6 years ago

      Yeah I have noticed that problem before. I use REMs in all of my projects, and i always make sure to set a pixel based fallback.

      For example: .class-name { font-size: 12px; font-size: 1.2rem; }

      0 points