Grow your CSS skills. Land your dream job.

Which font sizing is best? EM vs PX vs %

  • # January 17, 2012 at 4:13 am

    Here is what works for me… I set my font body to 72.5% at the body tag.
    So it looks something like this:
    body font-size:72.5% {in my CSS}
    then I can use:
    P {font-size:1.em} or whatever size you need.. you can even do 1.1em, 1.2em, 1.3em you get the idea…

    # July 14, 2012 at 8:55 am

    html { font-size: 62.5%; }
    body { font-size: 14px; font-size: 1.4rem; } /* =14px */
    h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */

    # July 14, 2012 at 9:35 am

    Throwing in my 2 cents…. I personally prefer pixels, exactly because they are so absolute and defined.

    With ems, and rems, the fonts are all so relative. If the HTML is set to 62.5%, and the body is set to 1.4em, and then the P is set to 1.1em, then you’ll have to calculate what the font size in P is (in this case, it ends up being 15px I think).

    With px, you can just set it right away and you don’t have to calculate: set P to 15px, done. I want it to be 15px, so I set it to 15px — instead of 62.5 * 1.4 * 1.1.

    Now of course that gives less flexibility (I have not done enough responsive sites to take advantage of rems and ems), and maybe it’s a little lazy, but I find it personally easier to work with.

    # July 14, 2012 at 11:35 am

    @Senff In today’s world of media queries, being able to alter the typography of an entire site by simply adjusting the root font-size percentage is quite a blessing.

    # July 14, 2012 at 12:42 pm

    @joshuanhibbert Yea, I know you’re right — I just never had to need for it, really, since I haven’t done many true responsive sites yet…which is why I’ve been sticking with PX so far.

    On the other hand, I did use EMs on big e-commerce sites a few years ago, and even though I saw the potential for it, I never actually executed that. In the end, it was all about pixels anyway. None of the sites I ever had to do for a client (freelance or work) was ever meant to be responsive, most of them just want things to work on desktop and “usable” on mobile (not “optimized”). Soooo….

    In the end, I just have to do a good responsive site, and that’s when I will probably start using it! :)

    # October 20, 2012 at 4:28 pm

    I’ve done plenty of responsive sites and still don’t see the benefit of using EMs.

    I set grid measurements in % and use PX for typography, and it works out splendidly – responsive and scalable across all devices while maintaining vertical rhythm.

    As opposed to my experience with EMs, which always ended in disaster. First I’d have to do a lot of math converting PX to EMs and would end up with crazy numbers like:

    li { font-size: 0.75em; line-height: 1.333333333333333em; }

    And then there’s the compounding issue – any child element of that list is no longer 12px, it’s 9px! Now I’d have to write extra code to reset every nested element on the entire site. And if at some point client nested things incorrectly in WYSIWYG of CMS, the layout would break.

    So, to keep my job (and sanity) I’m sticking with pixels.

    GMB
    # October 20, 2012 at 4:44 pm

    I want to maintain a consistent “vertical rhythm” for my sites, so I use pixels for both font-size, line-height, and any padding or margin that’s going to introduce vertical space.

    FWIW I have found the following two articles helpful:

    http://24ways.org/2006/compose-to-a-vertical-rhythm

    http://www.alistapart.com/articles/settingtypeontheweb

    # October 20, 2012 at 10:10 pm

    REM ftw. That is all. If not, go with EMs.

    I think you need to definitely have and or develop a solid understanding of each type however, most people i think use what they understand the best. Perfect example: @kf420 perfectly illustrates this point… just do your research and find what works best for you.

    # October 21, 2012 at 2:17 am

    I use px…however I do understand the benefits of using em and % given the way mobile use is growing now and you are dealing with two different screen sizes, at the least. However, I share the OP’s point of view–I basically program for myself and for my friends, and none of the websites I make are on demand for being responsive and mobile. And then, em has its cons too.

    Therefore I prefer px, basically because I do not need the benefits em gives.

    # October 21, 2012 at 3:48 am

    At the root, (insert your number here)px, 1em, and 1rem are all the same. After that, it breaks down to whether or not you want to stay relative to the root (rem), or stay relative to the parent (em). For me, I like having one base number (usually 100%, or 16px), then base the rest on the parent, so I prefer ems. The reason I like ems over pxs is because, if I want to change all the font sizes for any reason, I only have to change the one base size, and the rest scale accordingly. Some, however, might find rems easier to work with since you base everything on the root size and don’t have to do as much math, but in all reality, I don’t see that it really makes a difference which option you choose aside from just personal preference. RWD will work with any option.

    # October 21, 2012 at 6:31 pm

    @GMB It is quite easy to maintain vertical rhythm using ems. I’ve written an article that explains it: http://joshnh.com/2011/08/03/how-to-set-up-a-baseline-grid/

    # December 13, 2012 at 3:51 am

    Altough browsers currently zoom better whether you use px or em, not all visitors know how to zoom or are used to other tools. Furthermore, what if you want to zoom the text but not the entire site? For instance, there are some sites which have buttons to enlarge all the text. In those cases by using em, you only have to enlarge the base font-size, and all the text will scale relative to that (but without scaling the entire site).

    And you can argue if it’s a waste of time for such small a group. Yet, how much extra time does it take? If you know your base font-size, how much work is it to calculate it in em? After you have done this a few times, it will just get easier. I am used to it right now and using em takes just as much time as using px.

    # December 13, 2012 at 5:39 am

    All the work I’ve done has been using px for text, as I find it easier to work with, however I have been planning to start using rem/em for future projects.

    In a course I completed in the last couple of months (which focussed on Accessible Web Design), the tutor was pretty adamant that we use rem/em for font. She reasoned that people with visual impairments would increase the base font size on the browser, rather than zoom in.

    In any case, the reason I want to move to using rem/em is because I think it will be easier to keep the proportions between headings, texts and links, regardless of any future changes to the base font.

    # December 13, 2012 at 6:16 am

    @David_Leitch It also makes it so much easier when working with media queries. Here is an example:

    @media (min-width: 1120px) {
    html {
    font-size: 120%;
    }
    }

    And just like that you have increased the font-size for larger screens!

    # December 13, 2012 at 6:24 am

    Glorious, will keep in mind :)

Viewing 15 posts - 16 through 30 (of 44 total)

You must be logged in to reply to this topic.

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