The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

62.5% font size?

  • # April 4, 2012 at 6:21 pm

    I’ve been in the habit of declaring a 62.5% font-size in the body for quite a while and then using EM’s throughout my CSS. It makes it super easy as 1em is then 10px and so forth.

    I was thinking about it earlier today but this is probably wrong isn’t it? I use a standard CSS reset beforehand but I’m thinking there’s got to be a better way of going about it and I’m not sure of potential ramifications.

    # April 4, 2012 at 6:50 pm

    I remember this being pretty much an industry standard, though I have moved away from ems since. I don’t think you’re wrong in using it.

    # April 4, 2012 at 6:56 pm

    This reply has been reported for inappropriate content.

    I may be completely wrong but I just use px (so shoot me)
    I thought the reasoning behind em’s was scalability on zoom, but modern browsers are smart enough

    # April 4, 2012 at 8:51 pm

    I don’t think it’s wrong as such, and I’ve done it myself as well for a long time. However, I started to run into problems when I gave a font size of, say, 1.2em to a div (so all text would be 12px), and then I had a specific child div in there that needed to be 10px. In that case, I couldn’t apply 1em, because that would be 100% of its container font = 12px anyway.

    I mean, it wasn’t an issue to set the text to 10px, it was just messing up the rule “1em = 10px”. Or rather, it because “1em = 10px but only if any parent doesn’t have a font size setting“, and so I didn’t see much advantage to that anymore.

    I always thought em’s were handy since they were relative to their container font size — change it somewhere and all it’s children would change with it. I just never really found actual use for it.

    # April 4, 2012 at 8:56 pm

    I’ve written an article on how I set up my baseline:

    But it’s probably easier these days to just use rems with pixels as a fallback.

    # April 5, 2012 at 12:56 am

    This reply has been reported for inappropriate content.

    the whole point of ems was to not use pixels – since pixel density is getting higher, “10px” is getting smaller. ems allow the user/browser to choose the best default size.

    resetting the font-size to 62.5%, or using rems with a set pixel value for the base size (and/or a pixel-based fallback), is completely counter-productive. You’re using px anyway; you’re just going to some length to hide that fact.

    (rems will be much more useful once there’s wider browser support, but not for pixel-related reasons.)

    basically, I agree with @karlpcrowley: if you want to use px, use px!

    # April 5, 2012 at 4:12 am

    @treq I think you missed my point completely. Ems are way harder to work out than rems, so you would generally do one or the other. Not both.

    If you want full browser support, use ems. If you want to use rems, but also want it to work in older browsers, use a fallback (pixels, as no point using rems currently if you are using ems).

    # April 5, 2012 at 4:16 pm

    This reply has been reported for inappropriate content.

    Cheers for the input everyone – it’s one of those habits I got into way back but I think if it’s not necessarily damaging to the end users then I’ll keep using it.

    Sure I’m effectively using pixels but eyeing it at a baseline 1em=10px – but I want it to be more scalable and relative to containers etc so it’s probably the best choice for me and I do alot with responsive design.

    # April 6, 2012 at 12:49 am

    This reply has been reported for inappropriate content.

    @joshuanhibbert – I wasn’t referring directly to your article, but I stand by my position: if you want to use pixels to size your fonts, then you should simply do so. There’s no need to convert your pixel sizes to ems at all.

    I do like the way you set up your baseline (I do something similar) — not because it equates pixels sizes with ems, but because it sets up the proportions you want without forcing a particular font-size upon the user. You define your default font size as “100%” – in other words, the browser’s default size. (It’s almost -but not always- 16px.)

    As for ems vs. rems, ems are only “harder” because they cascade. They’re identical units of measure in all other respects. I agree that you wouldn’t use them interchangeably, but it wouldn’t be automatically “wrong” to use both in the same stylesheet. Which one you use would depend on context – i.e., whether you want the cascading effect or not:

    p{ font-size: 1em; }
    p.fixed-font-size{ font-size: 1rem; }
    article.featured{ font-size: 1.5em; }

    Normal-sized text, here.
    (16px, or whatever the browser default is.)

    # December 20, 2012 at 9:58 pm

    This reply has been reported for inappropriate content.

    @traq Sorry for the late reply; I forgot about this thread. You are missing one pretty big benefit of using ems: you can change the font-size for the entire site by simply changing the root font-size. This is incredibly handy when designing responsively.

    # December 21, 2012 at 12:14 am

    This reply has been reported for inappropriate content.

    I was all over the place for while till I settled on 100% font-size in HTML, ems, using % for horizontal margins, padding and text indent and px for vertical margins and padding.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed