3 ms·
> The default is 16px The default is absolutely not 16px. 16px is a common default value but different browsers and devices will have different defaults and mo
by kevincox 3y ago
> The default is 16px
The default is absolutely not 16px. 16px is a common default value but different browsers and devices will have different defaults and most browsers will let the user customize their font size. By assuming that 1em == 16px you are ignoring the user's preference and likely making the text hard for them to read.
https://nicolas-hoizey.com/articles/2016/03/02/people-don-t-change-the-default-16px-font-size-in-their-browser/ https://nicolas-hoizey.com/articles/2016/03/02/people-don-t-...
1rem == the font size of :root and 1em == the font size of the current element. It is true that these have some equivalent in pixels and 1rem very often is 16px. But that isn't guaranteed and shouldn't be assumed. You should respect the user's preferred font size.
- arp242 3y ago> You should respect the user's preferred font size. This is impossible because what's desired depends on the font. Of course I can foresee the "we should respect the user's preferred font" response, but that's also impossible because you don't know the font metrics of that are and then it turns out that stuff breaks because the font is tons wider or whatnot. This is also the problem with "respecting the font size". Never mind the aesthetical reasons for choosing a different font of course. This is why browsers have zoom, which solves the problem without tons of downsides. It's not always perfect, but much more manageable for everyone. Firefox can set a default zoom level too, and it remembers the zoom level per-site. For all practical purposes the default is 16px. All browsers ship with that as a default, and those that don't should be doing that. This entire feature is fundamentally broken and a holdover from the past.
- kevincox 3y agoI think you have some good points, but others just don't make sense. > you don't know the font metrics of that are and then it turns out that stuff breaks because the font is tons wider or whatnot Your site breaks so you make the text too small for the user to read? Browsers also have accessibility options to override website's custom fonts. So your site is broken either way, best to fix it an let the user have their preferred experience than mitigate it for some users and leave other users broken. > This is why browsers have zoom, which solves the problem without tons of downsides Zoom is great as well. But what downsides does it avoid? If the user wants their text wider your layout that assumes a max width for text is still going to break. The main downside that it avoids is web developers assuming that 12px text is easy to read. I could argue that zoom is a hack to mitigate websites that use px for things that need to be readable. It scales px, which fixes a problem that wouldn't exist in the first place if the developer just used em. > All browsers Not all browsers. But most common browsers. But I think at the end is what is the point of all of this? You are dismissing an approach with clear upsides without arguing what advantages the px approach brings. Sure, maybe most browsers are 1rem == 16px and maybe zoom is a good enough mitigation. But what advantage do you get by relying on this? I think you are right that browsers have done lots of good work to mitigate sites that set the body text to 12px, but it still seems that doing that doesn't have any advantages over just using em.
- dutchCourage 3y ago>> You should respect the user's preferred font size. >This is impossible because what's desired depends on the font. I'm confused by this statement. Let's say I'm using a font that looks smaller than average. To compensate for that I (the developer/designer) set the font-size of my body text to 20px instead of 16px. Using rem, it'll be 1.25rem. Now when someone with bad eyesight comes on my website and they have their default font-size set to 18px instead of 16px, the body text is 18*1.25=22.5 They will still see a larger text (22.5px) than the average person (20px), regardless of the font I picked. If I had set the font-size in px, everyone would get the same size regardless of their preference.