14

I would like to use font sizing with REM and on internet I found following trick:

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

due to set font-size: 62.5%; coversion rem <-> px (pixels) is very easy (just divide pixel value by 10).

However I wonder - why not use value 6.25% - in that case our trick will be look like this:

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

and this approach look to be more direct that for value 62.5% (we can convert rem to px without changing number value) - however I have question - why people "on internet" not use this approach - may be it cause some problems (that I'm not aware)?

Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345
  • Opinion1: Because I want to. Opinion2: Because I don't want to. – Rob Dec 21 '17 at 11:25
  • @Rob In other words The question was: do second approach brings some problems - and as BoltClock answers - indeed - it brings some problems with backward browsers compatibility. – Kamil Kiełczewski Dec 21 '17 at 12:14
  • The problem he lists is with rem, not setting the percentage. Why you should set the percentage to what you list is opinion. – Rob Dec 21 '17 at 12:16
  • This problem is also connected with percentage value - the 62.5% is more safe than 6.25% because the second value will case that page will be unreadable in old browsers (as BoltClock write in his answer). – Kamil Kiełczewski Dec 21 '17 at 12:18
  • How does setting it to 6.25% make it unreadable? – Rob Dec 21 '17 at 12:19
  • In old browsers `css-rem` statements will be ignored so all your fonts (if we assume that you use `rem` only) will have size 1px as BoltClock says in his answer (read it for more details). – Kamil Kiełczewski Dec 21 '17 at 12:26
  • That's my point. You are asking about percentages but the answer is about a problem with rem. The answer isn't answering your question. – Rob Dec 21 '17 at 12:28
  • @Rob: If the asker were to state in their question, "Assume that browser support is not an issue", then certainly it makes no difference where you put the decimal point. They didn't, though. They asked what sort of problems would arise from their proposed approach. – BoltClock Dec 21 '17 at 14:12
  • @Rob: Sure looks it to me. The snippets are comparing different percentage base font sizes used with different multipliers in rems. And the question contains one more occurrence of the word "rem" than the % sign (two if you don't count the title). If this wasn't about rems, I don't know why the asker didn't just post a one-liner "Why do people write font-size: 62.5% and not font-size: 6.25%?" – BoltClock Dec 21 '17 at 14:35
  • @BoltClock I didn't state that correctly so I'll delete it. My point is that rem doesn't matter. The question is about using percentages, not rem. That he's using rem is of no consequence to what he wants to know. – Rob Dec 21 '17 at 14:53

4 Answers4

20

62.5% of 16px is 10px, a much more reasonable base font size that can serve as a fallback for older browsers that don't support the rem unit such as IE8, Firefox 3.5, Safari 4 and Opera 11. If you set font-size: 6.25%, older browsers that don't understand rems will ignore all your rem declarations and see your entire site in the same very small print, making it unreadable. Keep in mind that 6.25% of 16px (user-defined font sizes notwithstanding) is one pixel. Google Chrome even enforces a minimum font size of 6px (by default anyway; it's possible to override this with a configuration change, but it's not recommended), which will actually interfere with all your rem calculations even though it understands rems just fine.

There has been nothing wrong with the traditional 62.5% approach and there are no benefits to deviating from it the way you have — only pitfalls. Yes, you can say that you're not supporting older browsers, and that's fine, but that doesn't change the fact that someone who happens across your site in an older browser is going to get an unreadable experience that wouldn't happen with the traditional approach just because you, the author, wanted 1:1 px-to-rem mappings in your stylesheet.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 62.5 isn't "exactly" equal to 10px but more of the approximation. –  Dec 21 '17 at 11:03
  • 1
    @Highdef: 62.5% of 16px is exactly, not approximately, equal to 10px. Of course, users may set their preferred base font size to a different value. The point is that you want to set a base value that's actually a reasonable font size, rather than some sort of multiplier just so you can avoid using decimal points in your rems. – BoltClock Dec 21 '17 at 11:04
  • Okay taking the tradition into consideration, then 6.25% is exactly 1px right? And alright, if the reason is to make a reasonable font size, but we do actually use our font sizes most of the times > 10px. So, following that, 1rem = 1px and then 10px = 10rem. But I guess, the point being there would be no reason to use it if we're actually just going to assign both equal values? –  Dec 21 '17 at 11:07
  • @Highdef: I edited my answer. I used the wrong verbiage altogether in my first sentence. Still, my point about having a reasonable font size to fall back to remains. – BoltClock Dec 21 '17 at 11:20
  • 2
    I choose `6.25%` because - who are slaves: people or machines? Don't forget who we are - lets machines make calculations - we are the masters :P (quote: https://en.wikiquote.org/wiki/Yukihiro_Matsumoto ) – Kamil Kiełczewski Dec 21 '17 at 11:36
  • 1
    I thought the question was why he shouldn't set the percentage, not why will rem cause problems. – Rob Dec 21 '17 at 12:18
  • @Rob: Yes, and I'm saying browser support is the reason why he shouldn't set such a low percentage value. There is a reason it is set to 62.5% even with the traditional em approach before the rem unit gained widespread support. Changing it introduces at least one problem that may or may not be relevant to the author depending on their needs; following tradition has no known problems whatsoever (having to use decimal points for your rem values is not the kind of "problem" I imagine the question is referring to). – BoltClock Dec 21 '17 at 14:09
  • How does setting font to 6.25%, and then adjusting to 16em for 16px not work in older browsers? – Rob Dec 21 '17 at 14:13
  • @Rob: For ems, the issue isn't browser support: the font-size declaration was usually applied to body, not html, so you pretty much needed to set it to 62.5% since ems are always relative to the current or parent font size. For *rems*, setting the base font size to 6.25% means that older browsers that don't understand rems will ignore them and, without any fallbacks, all the text on the page would render based on 1px print (UA default adjustments notwithstanding). If you have fallbacks, you don't have to worry about that, but then you might as well just use those fallbacks *and not the rems*. – BoltClock Dec 21 '17 at 14:20
  • @BoltClock Are you aware of any drawbacks or cross-browser issues with setting `html { font-size: 62.5%; }` and then putting `body` back to whatever design base font size is chosen in `em`s? It seemed to have gotten out of fashion to set it to this simpler calculation base without being clear why? My guess is pre- and postprocessors. But browser bugs? – Volker E. Mar 31 '21 at 11:30
  • 1
    @Volker E.: There are no cross-browser issues. I'm not sure why it's fallen out of fashion, though. I can only speak for myself that I don't use it on my personal website because I don't need it, but I wouldn't rule out using it in some other project if it's the most sensible option (for example, if I were working with a team that could benefit from its ease of use). – BoltClock Mar 31 '21 at 11:40
  • 1
    @Volker E.: I added information about behavior unique to Chrome to my answer. Perhaps it's what you had in mind? Nevertheless it's not an issue with font-size: 62.5% but with the unreadably small sizes I was talking about. – BoltClock Apr 06 '21 at 15:50
12

You could use 6.25% so that you get your nice 1:1 rem values, then set font-size: 16em; on body to get the best of both worlds. It'll fix the tiny font problem in old browsers, and browsers that do understand your rem declarations will ignore it by looking to html's font-size when calculating sizes. As far as I can tell there are no drawbacks to doing it this way and you actually get a better sized fallback than you do with 62.5%, but there may be something I've missed so use it with caution.

Jon
  • 129
  • 1
  • 3
  • 3
    Can somebody say something about this? In my opinion, it's such a good way of dealing with this. But I read at the source code of a lot of websites, and not any of them uses this (SO, Twitter, Instagram). I can't understand why, it seems so helpful to me. – Jose Carlos Ramírez Vásquez Mar 29 '19 at 05:14
  • Found an issue with this in Chrome that I haven't gotten to the bottom of but can be seen in this pen: https://codepen.io/jonedge_fwm/pen/MRQozb - if you open it in Firefox the height of the red box is correct, but in Chrome it's far too big. I've pinpointed the cause to be using a `font-size` of less than 19% on `html`, so if you change it from 10% to 20% in the pen the issue goes away. Maybe Chrome has some sort of minimum value when it's calculating sizes. The issue only seems to affect rems when they're used for layout - the font sizes are absolutely fine. – Jon Apr 17 '19 at 13:22
  • There is a little issue. rem unit has wider support than em unit. so your approach totally wrong. I nearly believe that interesting approach. nice try:) (rem has 99.14% support and em has 98.01% support ) – mustafa kemal tuna Mar 16 '21 at 20:49
  • but if you refer to IE 9-10 as old browser your approach is right btw – mustafa kemal tuna Mar 16 '21 at 21:01
  • 2
    That's not correct @mustafakemaltuna, ems are older than rems and have better browser support. From what I can tell it looks as though they've been around since CSS1: https://www.w3.org/TR/CSS1/ – Jon Apr 08 '21 at 14:30
  • @Jon yes you are right. caniuse.com misguided me. Thank you for reference. – mustafa kemal tuna Apr 09 '21 at 15:24
  • 1
    Just an update on the Chrome issue I mentioned above, it appears to have been fixed in the years since so as far as I can tell this font-size solution is now completely safe to use. – Jon Aug 17 '22 at 14:32
1

this answer depends on Jon's answer, but supports more old browsers.

html {
  font-size: 6.25%;
}

body {
  font-size: 1600%;
}

% unit is older than em unit. So Internet Explorer and many other popular browsers has wider support for % unit than em unit.

IE supporting of units

% IE 6-10

em IE 10

rem IE 11

mustafa kemal tuna
  • 861
  • 8
  • 18
  • The caniuse page you've linked to for `em`s is for Email, telephone & URL input types, not the `em` unit. `em`s are so widely supported that caniuse doesn't seem to even list them. – Jon Apr 08 '21 at 14:33
  • yes you are right it is wrong reference. But how do you know support level of em for browsers. is there any reference? – mustafa kemal tuna Apr 09 '21 at 15:08
  • 1
    All I could find was that they were in the spec for CSS1. I suspect there's not a lot of information out there on their support because all browsers support them. I imagine you'd find the same if you went looking for support of the `px` unit. – Jon Apr 12 '21 at 14:42
  • @Jon I got it. I have read your answer above. Thanks for detailed answer. – mustafa kemal tuna Apr 12 '21 at 15:39
-1

You can also use pixels - the default font-size is 16px by default, setting 10px as a base allows you to use rems whereby 1rem = 10px because the root is set as 10px.

html { font-size: 10px}
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */
Larry DaBig Meech
  • 136
  • 5