I’m kinda tired of seeing blog posts advocate
html { font-size: 62.5%; }
In case you’re not aware, this makes the default font size for your entire website 10px (assuming the browser’s default font size is 16px, which is the standard but is also user-configurable). Sure, it makes the math easier when you’re working with relative font sizes from that point on (either ems or the more future-friendly rems), but it kinda ignores the point of setting a default font size in the first place.
If you’re going to set a master font size for your entire website, I’d wager that you wouldn’t want that size to be 10 pixels. That would be hideously small for most applications, even for visitors with 20/20 vision viewing your site on the latest, greatest Retina MacBook Pro.
Instead, I believe that a website’s default font size should be what you actually want your text to be by default. I know, sounds crazy. This is usually going to fall somewhere in the 12-14 pixel range, although it can vary.
“But Tracy,” I can hear you say, “the math! You’re making the math harder!” Well, first off, there are calculators built into every major operating system you’re likely to be developing on. If you think that calculating the proper font size over and over is incredibly tedious, well, you’re right. I’ve been there and I’ve done that. But that’s still preferable to a litany of jobs out there in the world.
Secondly, there are tools to help you. CSS preprocessors (which you may have noticed I’ve become rather fond of) will let you create functions that do all the math for you. All you have to put in your Sass or LESS stylesheet is something along the lines of:
h1 { font-size: calc-em(20px, 13px); }
This would produce the following CSS:
h1 { font-size: 1.53846153846154em; }
Oooh, that’s an ugly em. But what do you care? It’s the browser’s problem, and it doesn’t really have a problem with it.
Lastly, if you’re using ems, then nesting is going to wreak havoc with your “simplified” math anyway. Of course, this problem is solved by rems, but rems introduce their own problems. I know, you can’t win. Fortunately, if you’re using CSS preprocessors (there it is again), you can use a mixin to get around the lack of rem support in some browsers (or just grab my responsive sass mixins off GitHub).
So please, stop thinking in terms of easy math, and start thinking in terms of easy maintenance. Set your default font size in terms of what you want the default font size to be, and build your other elements around that.
Your default font size for <code> blocks in your blog post is 10.5667px Ems work for me so long as you just apply them to “leaf nodes”, Ps, LIs instead of DIVs, OLs. If you do have nested LIs you can keep things straight by defining “li li { font-size:1em; }”;
Thank you for this. I am so tired of seeing websites with 10px font in the content section. Even with my glasses on, I have to enlarge the page to read it.
There are several popular WordPress themes that use 62.5% as their base font size (such as P2). If you must use %, up that to 87.5% (14px) and give your readers’ eyes a break.
This makes a good point, but the whole idea of converting pixels to ems is pointless. Use ems where you need something to scale with the font size of the component, rems for something that scales with the base font-size and pixels where you need an absolute value that doesn’t depend on the font-size whatsoever etc. Different units have different purposes. It’s that simple, really. I never got why people are so keen on doing pixel math with ems. It made sense back in the day when IE6 was cool shit, to overcome its zooming issues. It doesn’t make any sense now.
Awesome point. I found myself lately using rems everywhere when, as you point out, they shouldn’t be used everywhere. So I’m going back to using ems to set the font sizes for items within a component. That is, set a base size in rems, and perhaps the headings in ems. That sort of thing.
As an aside, thank you so much for your comment. Your work is amazing and I’m a huge admirer!
I think we might be missing the point here. I don’t run into, nor have ever developed, a website with 10px base font size. Well, so to speak… I use 62.5% as my base on every site. And I see this in a vast majority of well-designed sites as well. Once set, the main content area is explicitly defined. Typically 1.6em – 1.8em which translates to 16px – 18px. Never 10px (or 1em). The header block (nav, etc) is also explicitly defined, as is the footer (and sometimes sidebar if it doesn’t fall under the main content umbrella), etc.
Defining a base font of 62.5% does not equate to having a 10px body copy. I mean sure, you can go ahead and set your content container to 1em if you so please, but I don’t think many (if any) do. It’s setting a base metric to work off. A good one at that.
Cheers!
Bingo Matt. I wish the author would look at how Skeleton does this. The 62.5% rule is on the root (html) element and the default font-size is set on the body.
Thanks!
Just want to check what I’m missing here… If I use 62.5% to make the math easy, and then set all paragraphs to have
font-size: 16px;font-size: 1.6rem;
Where’s the bad there?
The bad is now you have to explicitly set what should be default (i.e., the paragraphs). Better to set what you want your default to be for the <HTML> element, then base all the special cases off of that.
A little late in the game for this post, but going by that logic, “The bad is now you have to explicitly set what should be default”, why do you even bother styling your websites? Not trying to sound arrogant here but isn’t that why browsers come with a default style sheet?
Which many developers (myself included) overwrite from the get-go with a reset or normalize stylesheet.
I literally cannot think of a website I’ve built in the 21st century that wasn’t a radical departure from the “browser default” stylesheet. It’s just not done in modern web design and development.
I prefer the method that whatever the bulk of your text is going to look like (article copy for posts, usually), _that_ is what you should set your element’s font properties to be, and then diverge from there for other elements and other contexts.
Isn’t that the same thing? Setting a default font property, for which the rest of your elements will diverge from. That is literally all this rule is doing…. by setting the global to 62.5%, it makes it super convenient for those of us that are accustomed to thinking in pixel sizes.
If the global font-size was set to the default value of 100%, making a paragraph 14px would be 0.875em, not an easy number to remember when you’re trying to write code. Sure, you could get out your calculator or EM to PX website but that’s time consuming. An easier solution is setting the global to 62.5% and setting the em value to 1.4em, for 14 pixels.
1 . 4 = 14.
IT’S THAT EASY. HOW DO YOU NOT GET THIS? Most of the comments here are trying to politely explain to you why this is a helpful tip, and you just completely miss the point every. single. time. This is the most glorious WOOSH I’ve ever seen considering it’s still going strong after 2 years.
You actually should set the 62.5 rule on the root and the base-font-size on the body.
html {
font-size: 62.5%;
}
/* 16px will be the base-font-size */
body {
font: 1.6em/1.5 ‘Open Sans’, sans-serif;
color: #222;
}
Hope it helps!
But, um, I think this misses the point I was trying to make…?
There is no default. If the user set his font size lets say to 20px (instead of 16) i don’t care. 62.5% are relative to this value. the paragraph is 1.6rem, thats no fixed value.
Could you give an code-example what you mean with “to set what you want your default to be”? How do you set this value
‘rem’ don’t bring any issues at all. As a matter of fact it brings a huge awesome feature: if the user decides to zoom in, the site will use its responsive layouts instead of zooming without changing the layout.
It’s IE that has issues with ‘rem’ units.
Looking into your mixins 🙂
Thanks!
There is also a few nice polyfills out there for making IE8 play nice with Rems (if you don’t want to write fallbacks).
I concur Tracy. Setting the font-size of the html tag at 62.5% is pretty worthless. I opt for setting it at 100%, then setting the font-size for global text in the body tag. From there, I can use ems for media queries. I’ve found that using ems for media queries (instead of pixels) is pretty awesome. If the user zooms in, the site adapts to that zoom level. Regarding font-sizes, the ’ems, rems, pixels’ debate should definitely be determined by your site’s goals, design, etc.
Well…I don’t really see the big deal.
If you mad about the 10px stuff set the default font-size body to 12px ?
html{ font-size: 62.5% }
body {font-size:1.2rem}
Did I miss something ?
It just seems silly to me to do it that way. Why change it in two places when you can change it in one? That’s all.
html{font-size:62.5%;}
body{font-size:1.6rem;}
Solved.
And trust me, even if Operating Systems had 20 calculator apps on them, getting 1px in (r)em when 1(r)em is 16px will always be annoying. Being able to do quick mental computations saves a lot of time.
Another issue is when I use 16px as base, I always end up commenting the actual pixel value at the end so that when I need to quickly look at something I know exactly what 4.6875rem is. (It’s 75px.)
16px as a default font size is hideously large (usually, there are exceptions). My point is why go through the fancy tricks just to get you to base 10, instead of setting your default font size to what you would actually want your default font size to be? Then changing headers and other one-offs based off of that?
And CSS preprocessors can easily fix your math annoyances.
Just my $0.02.
html{font-size:62.5%;}
body{font-size:1.4rem;}
? 🙂
16px was just to show you don’t need to set the default size for every other element on the page.
If want my default font to be 14 I can do like above, no?
Nothing fancy or complicated and it’s super-easy to make mental calculations for widths, paddings etc.
Headings? h1{font-size:2rem;}
Easy.
I dislike preprocessors so that’s not an option for me.
And if I were to use that just to get easy-to-read sizes, well that would be way over-complicating things.
I also think you may have missed the point of 62.5%.
The industry-standard
html { font-size: 62.5% }declaration makes the math a lot easier when writing CSS for the rest of the site. The intention is not to actually set the main content of a website to be 10px in size, but to make the body declaration incredibly straightforward. For instance,body { font-size: 1.4em }for 14px.Sure, preprocessors like LESS and SASS can “fix everything” and handle this for you, but I think the initial motivation for your post doesn’t make sense.
No, I understand that that’s exactly the point, I just don’t agree with it. I don’t think that “making the math easier” is justification enough for a practice that adds in extra lines of CSS. Set your default font size to what you truly want it to be, then use a calculator (or better yet, a CSS preprocessor) to figure out the rest.
Thanks for the feedback.
so instead of adding 2 lines of CSS, you prefer to add a complete CSS-preprocessor…
i think i’m missing the point here.
Obviously (or not?) CSS preprocessors have many more benefits than just calculating font sizes.
Great post, but i have a doubt the html{font-size:62.5%;} comes handy to base 10 but, what about scalability, i think is great. Is something wrong in (sass):
html {
font-size: 58.3%;
@media (min-width: 60em) {
font-size: 62.5%;
}
@media (min-width: 78em) {
font-size: 66.6%;
}
}
body {
font-size: 1.5rem;
}
What you think about this?
ps- A bug using html{font-size:62.5%;} and rem units.
Totally agree.
You don’t know the user’s default font size, you don’t know the resolution, so why reasoning in pixels? Why not using the user’s default font size as the basis, and use %s or ems? What math is there to make? I simply don’t get it (I am not a web designer).
Because of this “rule”, visually impaired users who want to set a default size of 16 have to set it to 20 or something. Now that‘s intuitive and user-friendly! (And then, of course, websites that do respect their settings become ugly…)
Maybe one of the reasons for all this is the fact that browsers’s “default default font size” is 16 and not 12 or 14. I’d be curious to know why.
Most commentators here are missing another point, though: The user can (and does) set the default font size in their browser – just as they can set the default background color, text color, font family, etc., and the 62.5% rule always assumes that the user has the default at 16px. Sure, most people are stupid and don’t change anything. But that’s the same stupid assumption as the assumption that everybody has JavaScript enabled/available and not caring about the rest. Those people that have a different default font size set in their browsers will get a site that’s messed up because all you wannabe web developers care about is yourself and the calculation you have to do, and not the user.
Hi, this is an article written in 2004, this is the original 62.5 percenter…
http://clagnut.com/blog/348/
One thing of interest if you do use 62.5% concerning inheritence:
child pixels / parent pixels = child ems
De Gustibus Non Desputandum 🙂
I’ve always been curious as to whether there is any basis for not simply setting the body font size to 10px instead of 62.5%? Does that not accomplish the same thing in terms of ’ems’ and leave out any doubt as to whether the browser is configured a certain way?
It has to do with legacy versions (let’s be honest about it, IE) which can choke if you use ems on the HTML or BODY elements. Best practices state to set your font size initially in percentages, then ems (or rems) after that.
for those concerned about website maintenance, is anyone using Sass?
Thank you for this. I stumbled across this when looking for a solution at work. This was a great read and helped confirm that we need to get rid of the body {62.5%}.
I don’t understand why you would want to do this for a easy calculation when in sass you can write .whatever { font-size: rem(14px); } and it instantly calculates REM or EM based on your px you specify… rem(14px) em(22px) etc. You all act like you are writing raw CSS which I haven’t done since 2008. We have sass for a reason and there are plenty of mixins that allow you to easily convert any unit to rem / em or back to px.