Grow your CSS skills. Land your dream job.

Which font sizing is best? EM vs PX vs %

  • # December 13, 2012 at 9:23 pm

    This what works very well for me in responsive design lately. All the headings will be sized with em’s. No bottom margins required in headings due to 1.8 line height in body which takes care of vertical rhythm nicely. Also, no reset of any kind with exception of html and body margin and padding.

    html {
    font-size:100%;
    overflow-y:scroll;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    }
    html, body {
    margin:0;padding:0;height:100%;
    }
    body {
    color: #333;
    font-family: sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 1.8;
    }
    p, h1, h2, h3, h4, h5, h6 {
    width:96%;
    font-weight:500;
    margin:0 0 0 2%;
    text-rendering:optimizeLegibility;
    }
    p {font-size:1em;margin-bottom:18px;}

    @media only screen
    and (max-width : 640px) {
    html {font-size:93.8%;}
    }

    # December 13, 2012 at 9:29 pm

    I’m personally not a fan for large type that you can see a mile away (e.g. Trent Walton’s site).

    # December 13, 2012 at 9:38 pm

    I wasn’t a fan either of larger font size than .875em on p. Going to 100% width, larger font size looks much better to me.

    # December 13, 2012 at 10:01 pm

    Like most things, it’s personal preference, but I think the pros outweigh the cons when talking about large type (as long as you adjust it accordingly for handheld devices).

    # December 13, 2012 at 10:17 pm

    I just want to make it clear that I don’t find anything wrong with Trent’s site, I just don’t care for such large type on websites. It takes longer to read articles and introduces more scrolling. But as Josh stated, it does come down to personal preference.

    adr
    # December 13, 2012 at 11:44 pm

    This Lyza Gardner article did a great job reinforcing why ems are so great: [The EMs have it: Proportional Media Queries FTW!](http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/).

    You can set everything (padding, widths, etc) in ems and the site will gracefully zoom. This is nice because of the various devices that have a strange default zoom.

    @GMB Re: Vertical Rhythm. Chris Coyier in [Smashing Magazine](http://coding.smashingmagazine.com/2012/10/15/css-qa-4/) had this to say:

    > But I think it’s a bit of a fool’s errand to enforce perfection on it up and down every page of a website. One image inside the content will most likely throw the whole thing out of whack.

    >Does it matter if the rhythm gets off? I don’t think so. Well set text will still look good. Remember: the type will still be in rhythm with the text right around it. So who cares if it’s off with text thousands of pixels away from it, and perhaps off screen? Making sure the type looks good in general is far more important than adhering to an invisible grid dogmatically.

    For similar reasons as the ems w/ zoom. You don’t know how a person is viewing your website, and you want to create an experience that is flexible and will look as good as is reasonable possible in most situations.

    # December 14, 2012 at 3:13 am

    If you are after responsive px is out.
    So i think you should use em or in css3 there is rem witch is relative to base font size.

    # January 24, 2013 at 2:42 pm

    It all depends on what you want to achieve. I think we miss the whole point of designing for the web when we adopt a “one size fit’s all” approach. However, if you are like me, working to achieve elegant user experiences with responsive web design (I actually do care about device resolutions and such) while at the same time attempting to remain loyal to the graphic design principles that were drilled into me at school, here is a Goldilocks approach: http://goldilocksapproach.com/

    # January 24, 2013 at 3:03 pm

    I use px now that ie6/7 are dead to me.

    # January 24, 2013 at 3:11 pm

    I use PX because it’s easier. However, for stuff where I don’t need to worry about legacy stuff (IE8 and lower) I’m starting to use REM’s as they offer a lot of flexibility without the downside of EM’s.

    However, if I do need semi-legacy support, I go with PX. Why? It’s easier. A lot easier than EM’s. Yes, you can get used to EM’s and make them work but, let’s be honest, there’s extra hassle.

    # February 7, 2013 at 11:00 pm

    Wow, I can’t believe so many people are so biased towards em.

    Now with rem, it’s no different than px.

    If you set it to:

    html {
    font-size:62.5%
    }

    It’s exactly the same, but you move the decimal one place to the left, 12px = 1.2em.
    With rem, you don’t have to worry about context vs target relationship, but still get the advantages of em. Use some media queries and it’s like zooming in and out on photoshop. Your designs will scale with ease, otherwise you’d have to write a media query that re-establishes every class/element/id that you specified a font-size in px with to achieve the same result. What sounds more logical?

    Just build your site out with px, then go through and convert it to rem/em.
    Same with percentages. Figure out your target/context relationships and it will be scalable all of a sudden.

    The whole beef with this is simply ignorance or the unwillingness to do something in a different way than you are used to.

    I’m just getting into it myself, but fundamentally, it makes sense with the variance in viewing sizes nowadays.

    As someone that develops as well as designs, I’m constantly getting hit with new ways to do stuff… OOP vs. procedural, new “hipper” languages, etc., so having to start from square one happens a lot.
    Whereas, as a designer you can get stuck in your groove and the world will blow past you.

    Responsive design is the way things will be from now on, so get used to it and be smart and learn it as soon as possible. Otherwise, someone possibly a decade younger than you will snatch your job/contracts from you and you’ll be eating fish heads and rice.

    # February 9, 2013 at 12:57 am

    I didn’t read all comments but too answer in general: relative size of content is only relevant for future. So drop your Pixels and adapt Ems. You just can’t design app or website that will look great ok 4k tv and 500px mobile phone. Zooming is fine but absurd. Who wish to see squared text on 4k tv? Why most of sites still use px? Well of course those sites were made some time ago or company that made site still didn’t switched on new “technology”. But go take a look at known web designers sites you’ll see just responsiveness.

    Take a look at this video. http://channel9.msdn.com/Events/Build/2012/2-116

    Designing for screen was under influence of print design, this is now changing in good way. Content is important not a shiny button you wish to shine exactly on all devices as it shines on yours.

    # February 9, 2013 at 1:21 pm

    Personally I like how em’s behave within percentage based layout frameworks, and if you couple that with em based media queries you can set your breakpoints based on your content instead of chasing different devices view port size.

    # February 9, 2013 at 1:36 pm

    I always use em’s for text, unless said text is in a container with a pixel height/width. I just like things to be scalable.

    Working with em’s isn’t that difficult once you understand how they work.

    That said, I still use pixels for things like margins/padding.

Viewing 14 posts - 31 through 44 (of 44 total)

You must be logged in to reply to this topic.

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