5 ms·

What about the font-size: = 62.5% trick? html { font-size: 62.5%; } https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/ https://www.ale

What about the font-size: = 62.5% trick? html { font-size: 62.5%; } https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/ https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font... Has it gone by the wayside? Is it no longer a best practice?

JimDabell 3y ago
This was always a terrible thing to do. The idea behind it was that the browser default font size was 16px, so if you set the root font size for your document to 62.5%, then 1em = 10px, and designers who really, really wanted to work with pixels could use ems and pretend they were using pixels without doing complicated maths every time they wanted to set the size of something – they just needed to divide or multiply by ten. The reason for not just using pixels was partly because it was drummed into everybody’s heads at the time that ems were better than pixels (which, in context, they were, but not when you pretend they are pixels), and partly because Internet Explorer at the time was unable to resize text set in pixels when you increased the text size, which was an accessibility failure. The problem with this idea is that pixels and ems are fundamentally different types of unit. You can’t make them equivalent using any kind of calculation in CSS. Pixels are objective, whereas ems are based on user preferences. The browser might default to 16px font size, but users can pick something else. So if somebody had poor vision and increased their default font size; or if they had a small laptop screen and decreased their default font size, 1em * 62.5% != 10px, everything the designer set in ems was a different size than they intended, and a lot of their page layouts disintegrated into an unholy mess. You can’t convert between ems and pixels in CSS. Any calculation like this is fundamentally broken from the start. Nobody should have ever used the 62.5% hack.
- semolino 3y ago
  I use: html {font-size: 16px;} ...and then use ems throughout the rest of the CSS in increments of 0.0625 as "virtual pixels." This, in practice, keeps everything proportional, scaling properly if the user zooms. Only rarely do I run into floating-point quirks, but they're never a big deal.
  - JimDabell 3y ago
    This is very bad for a different reason. It makes it impossible to ensure the size of your text is readable for the user. Your source for this information is the font size of the root element. If you override that using a fixed unit like pixels, you discard this information. Is 16px too large? Too small? How far away are your text size choices from being readable? You have no way of knowing because you threw that information away and decided 16px was good enough. 16px is not good enough for a lot of people. The only way to ensure that the size of your text is readable for the user is to use a unit that is derived from their preferences somehow. That means that if you set a font size on the root element, it needs to be a unit like ems. Pixels break this mechanism completely. Really, just give up trying to make ems work like pixels. You can’t, and everything you do to try to force the issue hurts your design. Design your text to be readable first and foremost. That’s its entire purpose for existing; to be read. If you can’t answer the question “is my body text a size that is readable to the user?”, then it’s bad design.
    - semolino 3y ago
      You're right… your reply made me realize that was a bad habit carried over from a pixel art website. I need to remit control of my site's base font size. Taking this line off my other projects.
- aleksandrh 3y ago
  > The browser might default to 16px font size, but users can pick something else. So if somebody had poor vision and increased their default font size; or if they had a small laptop screen and decreased their default font size, 1em * 62.5% != 10px, everything the designer set in ems was a different size than they intended, and a lot of their page layouts disintegrated into an unholy mess. Howdy, author of the article you're responding to (but not the person who originally discovered/pioneered this trick). This is not true, and my article explains why. The 62.5% trick is rarely used on its own, but people often cite it this way, leading to confusion. In practice, you set the root font size to 62.5% (of the user agent font size) and then also scale all body text back up to 1.6rem so it's not stuck at 10px. From here on out, all font sizes remain proportional no matter what, even if a user changes their preferred root font size in browser settings. Play around with the math if you doubt it (the article offers examples). > everything the designer set in ems was a different size than they intended That's working as intended—your design will scale up or down, according to the user's preferred font size. If you don't like this, your only option is to set font sizes in pixels, which [you shouldn't be doing anyway](https://www.aleksandrhovhannisyan.com/blog/use-rems-for-font-size/ https://www.aleksandrhovhannisyan.com/blog/use-rems-for-font...) (disclaimer: also written by me).
  - JimDabell 3y ago
    > From here on out, all font sizes remain proportional no matter what, even if a user changes their preferred root font size in browser settings. I think you might have misunderstood my point. My point is not that font size is no longer proportional. It’s actually critical to my point that it is proportional. The 62.5% trick became popular because designers were used to designing with pixels and didn’t want to design with more fluid units like em. They were forced to by external requirements or often they were just following trends without really understanding them. So they used ems with the 62.5% trick as a substitute for pixels but didn’t change how they designed. So they were still designing with pixels in theory, but using ems as a really bad placeholder. So if they wanted something to be 100px wide, using the 62.5% trick, they would set it to 10em. This will not get them something that is 100px wide though. This will get them something that is 10em wide, which will happen to be rendered 100px wide only when the browser is using a 16px default font size. What happens when that fake-100px-but-actually-10em wide element is meant to coexist with something that is actually set in pixels? For instance, a 120px skyscraper ad? The things sized in fake-pixels-but-actually-ems will change proportionally with the user’s font size, but the things sized in real pixels will not. All of a sudden different elements on the page have different ideas about what scale they should be rendered at, and the layout falls apart. Were you surfing the web with a non-default font size when this particular practice took off? I was, and I could always tell when a site started to use it because their layouts all got screwed up. If you want to design in pixels, design in pixels. If you want to design in ems, design in ems. But don’t use ems as fake pixels because it cannot work reliably. The two units are fundamentally different and you cannot convert between them. One is rooted in a subjective user preference that can be different on every device, one is an objective measurement.

JimDabell 3y ago

This was always a terrible thing to do. The idea behind it was that the browser default font size was 16px, so if you set the root font size for your document to 62.5%, then 1em = 10px, and designers who really, really wanted to work with pixels could use ems and pretend they were using pixels without doing complicated maths every time they wanted to set the size of something – they just needed to divide or multiply by ten. The reason for not just using pixels was partly because it was drummed into everybody’s heads at the time that ems were better than pixels (which, in context, they were, but not when you pretend they are pixels), and partly because Internet Explorer at the time was unable to resize text set in pixels when you increased the text size, which was an accessibility failure. The problem with this idea is that pixels and ems are fundamentally different types of unit. You can’t make them equivalent using any kind of calculation in CSS. Pixels are objective, whereas ems are based on user preferences. The browser might default to 16px font size, but users can pick something else. So if somebody had poor vision and increased their default font size; or if they had a small laptop screen and decreased their default font size, 1em * 62.5% != 10px, everything the designer set in ems was a different size than they intended, and a lot of their page layouts disintegrated into an unholy mess. You can’t convert between ems and pixels in CSS. Any calculation like this is fundamentally broken from the start. Nobody should have ever used the 62.5% hack.

semolino 3y ago
I use: html {font-size: 16px;} ...and then use ems throughout the rest of the CSS in increments of 0.0625 as "virtual pixels." This, in practice, keeps everything proportional, scaling properly if the user zooms. Only rarely do I run into floating-point quirks, but they're never a big deal.
- JimDabell 3y ago
  This is very bad for a different reason. It makes it impossible to ensure the size of your text is readable for the user. Your source for this information is the font size of the root element. If you override that using a fixed unit like pixels, you discard this information. Is 16px too large? Too small? How far away are your text size choices from being readable? You have no way of knowing because you threw that information away and decided 16px was good enough. 16px is not good enough for a lot of people. The only way to ensure that the size of your text is readable for the user is to use a unit that is derived from their preferences somehow. That means that if you set a font size on the root element, it needs to be a unit like ems. Pixels break this mechanism completely. Really, just give up trying to make ems work like pixels. You can’t, and everything you do to try to force the issue hurts your design. Design your text to be readable first and foremost. That’s its entire purpose for existing; to be read. If you can’t answer the question “is my body text a size that is readable to the user?”, then it’s bad design.
  - semolino 3y ago
    You're right… your reply made me realize that was a bad habit carried over from a pixel art website. I need to remit control of my site's base font size. Taking this line off my other projects.
aleksandrh 3y ago
> The browser might default to 16px font size, but users can pick something else. So if somebody had poor vision and increased their default font size; or if they had a small laptop screen and decreased their default font size, 1em * 62.5% != 10px, everything the designer set in ems was a different size than they intended, and a lot of their page layouts disintegrated into an unholy mess. Howdy, author of the article you're responding to (but not the person who originally discovered/pioneered this trick). This is not true, and my article explains why. The 62.5% trick is rarely used on its own, but people often cite it this way, leading to confusion. In practice, you set the root font size to 62.5% (of the user agent font size) and then also scale all body text back up to 1.6rem so it's not stuck at 10px. From here on out, all font sizes remain proportional no matter what, even if a user changes their preferred root font size in browser settings. Play around with the math if you doubt it (the article offers examples). > everything the designer set in ems was a different size than they intended That's working as intended—your design will scale up or down, according to the user's preferred font size. If you don't like this, your only option is to set font sizes in pixels, which [you shouldn't be doing anyway](https://www.aleksandrhovhannisyan.com/blog/use-rems-for-font-size/ https://www.aleksandrhovhannisyan.com/blog/use-rems-for-font...) (disclaimer: also written by me).
- JimDabell 3y ago
  > From here on out, all font sizes remain proportional no matter what, even if a user changes their preferred root font size in browser settings. I think you might have misunderstood my point. My point is not that font size is no longer proportional. It’s actually critical to my point that it is proportional. The 62.5% trick became popular because designers were used to designing with pixels and didn’t want to design with more fluid units like em. They were forced to by external requirements or often they were just following trends without really understanding them. So they used ems with the 62.5% trick as a substitute for pixels but didn’t change how they designed. So they were still designing with pixels in theory, but using ems as a really bad placeholder. So if they wanted something to be 100px wide, using the 62.5% trick, they would set it to 10em. This will not get them something that is 100px wide though. This will get them something that is 10em wide, which will happen to be rendered 100px wide only when the browser is using a 16px default font size. What happens when that fake-100px-but-actually-10em wide element is meant to coexist with something that is actually set in pixels? For instance, a 120px skyscraper ad? The things sized in fake-pixels-but-actually-ems will change proportionally with the user’s font size, but the things sized in real pixels will not. All of a sudden different elements on the page have different ideas about what scale they should be rendered at, and the layout falls apart. Were you surfing the web with a non-default font size when this particular practice took off? I was, and I could always tell when a site started to use it because their layouts all got screwed up. If you want to design in pixels, design in pixels. If you want to design in ems, design in ems. But don’t use ems as fake pixels because it cannot work reliably. The two units are fundamentally different and you cannot convert between them. One is rooted in a subjective user preference that can be different on every device, one is an objective measurement.