1

I brought up to a group the 62.5% trick for scalability (Placing 62.5% as font size in root and using rem throughout css for easier scalability when users change default browser font size) and they're arguments were :

"A browser may set any font size it wishes, if you want to be certain about the size you use you need to specify a size in CSS"

"I also don't think you need to use REM at all to set and use a certain size in your styles, with custom properties you can say --unit: 10px; and then re-use --unit to size other things, and it doesn't need to be set as the font size of the HTML tag to do that Don't build your CSS on top of assumptions about what the browsers stylesheet may contain, set what you know you want, if you know you want 10px, set 10px"

"I've found REM next to useless, and some people go out of their way with all kinds of magic formulas and conversions and all kinds of mental math instead of just setting what they're thinking about in their mind Eg, I know I want this heading to be 24px, so I had better set the font-size of the element to 10px so I can say the H1 is 2.4 times whatever the font size of the HTML tag is! Versus saying "I know I want it to be 24px, so I set it to 24px" and done"

As a side question, in some articles using rem, they change the font size in body when using media queries and it affects the rem? I thought only fonts size affected rem?

Alexander H
  • 39
  • 1
  • 8
  • 1
    Please clarify “the 62.5% trick” for context… – deceze Jan 26 '20 at 16:53
  • you can check the answer for very similar question here. [CSS Font rem trick](https://stackoverflow.com/questions/47923397/css-fonts-rem-trick-62-5-or-6-25) Answer by: [@BoltClock](https://stackoverflow.com/users/106224/boltclock) – Kumar Gaurav Jan 26 '20 at 17:06
  • "Would that mean 100% of browsers default font size is 16px?" – No. The exact root font size is not specified and browser vendors are free to choose whatever they think is the most suitable (this might or might not include OS settings, screen configuration, user settings, ...). – str Jan 26 '20 at 17:13

1 Answers1

2

If accessibility is important to your project (it should be), then using relative methods for font size, as you are proposing, is the right choice. The vast majority of browsers use a computed value of 16px display size as their default.

MDN says this about font-size:

Defining font sizes in px is not accessible, because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.

One way to show a real-world example of what happens, this example using Chrome, is to set your browser's preference for font size to something larger. Note that the px set font sizes will not adhere to your preferences (you can zoom the page). So a user could zoom a webpage each time, for each tab they visit, but we shouldn't be forcing that on someone.

The 62.5% method simplifies things for developers to see the relationships between the px value and the em or rem - 2.7rem = 27px is a lot easier to associate with than 27 / 16 = 1.6875rem. There are other methods, but I like the 62.5% choice. See this CSS-Tricks article for a great write-up on this topic: Accessible Font-Sizing Explained

Robin Rowell
  • 21
  • 2