Grow your CSS skills. Land your dream job.

font-size : PX vs EM

  • # February 9, 2013 at 12:40 pm

    Hey guys ! I’m not sure that i understand why its recommand to use EM more than PX in responsive web design. Can you guys explain me the reason why everybody use EM? thanks !

    # February 9, 2013 at 1:12 pm

    This subject has been covered: http://css-tricks.com/forums/discussion/15558/which-font-sizing-is-best-em-vs-px-vs-#Item_42

    Please don’t start it all up again.

    http://css-tricks.com/why-ems/

    # February 20, 2013 at 1:31 am

    I think it’s a fun discussion to ‘start it all up again’ because of what I read here: [Beginner's Course on HTML CSS by Shay Howe](http://learn.shayhowe.com/html-css/typography “Beginner’s Course on HTML CSS by Shay Howe”)

    Scroll to the portion on text sizes. That course’s advanced course was suggested by Chris so I assume the Basic one holds water too.

    # February 20, 2013 at 4:13 am

    @LWTBP That brief statement misses out on a bunch of stuff that is explained in the thread @Paulie_D linked to. If you need to continue the conversation, please do it there.

    # February 20, 2013 at 5:09 am

    Just to add a little extra to this, I use REM’s instead of EM’s as the math gets complex using EM’s.

    REM’s base themselves on the HTML font-size. So nested font-sizes don’t get exponentially bigger/smaller/more complex.

    If you use SASS/SCSS – don’t go alone, take this Mixin;


    @mixin font-size($sizeValue){
    font-size: $sizeValue + px;
    font-size: ($sizeValue / 10) + rem;
    }

    // To use it;

    html { font-size: 10px; } // or whatever size you want

    .element { @include font-size(14); }

    //This outputs;

    .element {
    font-size: 14px;
    font-size: 1.4rem;
    }

    # February 20, 2013 at 12:35 pm

    > REM’s base themselves on the HTML font-size. So nested font-sizes don’t get exponentially bigger/smaller/more complex.

    Thank you! I thought it was my imagination the first time I saw that happening. I hate using EMs just for that reason.

    # February 20, 2013 at 3:08 pm

    > joshuanhibbert

    Yes, I will read everything on that link.

    # February 20, 2013 at 3:40 pm

    @Dami – Only thing to watch out for with REM’s is that IE8 and below don’t support them, so make sure to use a PX fallback, placed before the REM in the code, just in case.

    # February 20, 2013 at 3:53 pm

    Ditto for vw, vh and vmin

    http://www.sitepoint.com/new-css3-relative-font-size/

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".