4 ms·

I'm not buying the font size argument at all. When you zoom in or out on a webpage, your base font size isn't changed, the whole page is zoomed instead, making

I'm not buying the font size argument at all. When you zoom in or out on a webpage, your base font size isn't changed, the whole page is zoomed instead, making this whole discussion moot. I would wager many (most?) nontechnical users don't even know they can change the base font size.

ehutch79 4y ago
It's not zooming (ctrl +), it's when you literally set the font size in the browser. This is typically done for people with vision issues, or assistive technology
- chrisweekly 4y ago
  Something like 10% [EDIT: 3%? point remains] of people change their browser's default font size - a larger userbase than that of many browsers deemed worthy of support.
  - IshKebab 4y ago
    3% according to the first result I found, which sounds way more plausible. https://css-tricks.com/users-do-change-font-size https://css-tricks.com/users-do-change-font-size I couldn't find stats on zoom but I'd guess far far more people use zoom than font size which makes sense because it works reliably and doesn't break site layouts.
  - croes 4y ago
    Where is the disadvantage in supporting these 10% by using rem instead of px?
    - chrisweekly 4y ago
      Sorry I wasn't clearer! Use of rem is preferable to px because it supports this cohort of users who change their default font size. Using px ignores their preferences. There are other benefits to adopting a typographic scale as the basis for truly responsive design. See https://every-layout.dev https://every-layout.dev for a masterclass in exposition of this idea.
      - lelandfe 4y ago
        > There are other benefits to adopting a typographic scale as the basis for truly responsive design Can you give some examples? I was of the belief that there weren't other benefits. Nb I also dislike sources that use block and inline box model properties. It is a fictitious need: when will you ever add traditional Asian writing to your site?
    - martyfmelb 4y ago
      Increased UI testing surface, tracing responsibility when things go wrong, and inserting a new decision for every single metric any FE developer ever writes. - The more obscure combinations of viewing options you support, the more likely you'll miss some weird combination in your VRT or manual testing until an actual user in production finds it for you. - But maybe your manual tester or VRT has excellent coverage. Still, it got more expensive. Supporting just one more text zoom level doubles your VRT expense. Your team has finite QA resources and VRT compute. Scope/quality/cost/time of something, somewhere, had to be dropped. Generally, is it worth it? - If you are supporting REM and your designers don't distinguish between REM and PX, you have created new states that designers haven't planned for. You introduced a new cross-cutting source of design bugs, but if your designers didn't ask for this feature, they can't stem the flow of bugs! - If you are supporting REM without coding guidelines to recommend what should be REM vs. what should be PX -- sans a hero dev who sees the impending mess and writes those docs for you -- you will get a chaotic and inconsistent mix of REMs and PX in your code.
  - lelandfe 4y ago
    It has been substantially below 2% in the tests I’ve done for various medium-sized business sites. We had to have serious discussions about the work involved to convert values between pixels and rems relative to the amount of people it serves. (Especially when browser-based scale zooms are totally sufficient)
- Wowfunhappy 4y ago
  Honest question: why do people increase the font size instead of just changing the default zoom level? I feel that the latter creates a more consistent experience.
  - croes 4y ago
    Maybe because they just want bigger text and not a bigger site.
    - csande17 4y ago
      Unfortunately, if web developers follow the advice from the article to use rem units everywhere, they'll get a bigger site.
      - ehutch79 4y ago
        You are correct! REM for text, PX for layout But if you're going to choose one, use rem with the body text-size hack.
  - nailer 4y ago
    Because old web browsers didn't let people zoom properly. I think IE7 was one of the first.
    - Wowfunhappy 4y ago
      Yeah, and that maybe makes sense in 2012, but not in 2022.
  - lmm 4y ago
    Maybe I want to keep seeing images at 1:1. Maybe the font sizes are bad. I remember the days when the user was supposed to be in control of how websites were styled.
  - ehutch79 4y ago
    Depending on your vision, you might be able to see a button is a button, but the font is just too small by a few pts. You don't need borders or whatever zoomed, just the font size bumped a bit.
muspimerol 4y ago
Exactly, zooming and base font size are two fundamentally different things. Forcing users to zoom to get a legible text size is not an acceptable solution.
- cuu508 4y ago
  Wouldn't users also want legible icons, pictures, margins, etc.?
  - Filligree 4y ago
    Most pictures can be shrunk significantly and remain legible. They don't need to be zoomed in on.
  - layer8 4y ago
    It depends on the icons and pictures. With pixel-based graphics, you want to keep those 1:1 for crispness, and not get a blurry interpolation due to zooming, at least on lower-DPI screens.
  - muspimerol 4y ago
    No, not really. The browser setting is for default _font_ size for a reason. People want legible text. Design elements like icons, pictures, margins are generally decorative and not functional. If a user wants to set a default _zoom_ level, then they can set that as well. As I said, these are two different things.
- IshKebab 4y ago
  Why not? If you have trouble reading text are you not also going to have trouble reading icons, pictures, etc. too?
  - layer8 4y ago
    It depends on the icons and pictures. With pixel-based graphics, you want to keep those 1:1 for crispness, and not get a blurry interpolation due to zooming, at least on lower-DPI screens. And the custom base font size may just be e.g. two pixels larger than the default for comfortable reading.

ehutch79 4y ago

It's not zooming (ctrl +), it's when you literally set the font size in the browser. This is typically done for people with vision issues, or assistive technology

chrisweekly 4y ago
Something like 10% [EDIT: 3%? point remains] of people change their browser's default font size - a larger userbase than that of many browsers deemed worthy of support.
- IshKebab 4y ago
  3% according to the first result I found, which sounds way more plausible. https://css-tricks.com/users-do-change-font-size https://css-tricks.com/users-do-change-font-size I couldn't find stats on zoom but I'd guess far far more people use zoom than font size which makes sense because it works reliably and doesn't break site layouts.
- croes 4y ago
  Where is the disadvantage in supporting these 10% by using rem instead of px?
  - chrisweekly 4y ago
    Sorry I wasn't clearer! Use of rem is preferable to px because it supports this cohort of users who change their default font size. Using px ignores their preferences. There are other benefits to adopting a typographic scale as the basis for truly responsive design. See https://every-layout.dev https://every-layout.dev for a masterclass in exposition of this idea.
    - lelandfe 4y ago
      > There are other benefits to adopting a typographic scale as the basis for truly responsive design Can you give some examples? I was of the belief that there weren't other benefits. Nb I also dislike sources that use block and inline box model properties. It is a fictitious need: when will you ever add traditional Asian writing to your site?
  - martyfmelb 4y ago
    Increased UI testing surface, tracing responsibility when things go wrong, and inserting a new decision for every single metric any FE developer ever writes. - The more obscure combinations of viewing options you support, the more likely you'll miss some weird combination in your VRT or manual testing until an actual user in production finds it for you. - But maybe your manual tester or VRT has excellent coverage. Still, it got more expensive. Supporting just one more text zoom level doubles your VRT expense. Your team has finite QA resources and VRT compute. Scope/quality/cost/time of something, somewhere, had to be dropped. Generally, is it worth it? - If you are supporting REM and your designers don't distinguish between REM and PX, you have created new states that designers haven't planned for. You introduced a new cross-cutting source of design bugs, but if your designers didn't ask for this feature, they can't stem the flow of bugs! - If you are supporting REM without coding guidelines to recommend what should be REM vs. what should be PX -- sans a hero dev who sees the impending mess and writes those docs for you -- you will get a chaotic and inconsistent mix of REMs and PX in your code.
- lelandfe 4y ago
  It has been substantially below 2% in the tests I’ve done for various medium-sized business sites. We had to have serious discussions about the work involved to convert values between pixels and rems relative to the amount of people it serves. (Especially when browser-based scale zooms are totally sufficient)
Wowfunhappy 4y ago
Honest question: why do people increase the font size instead of just changing the default zoom level? I feel that the latter creates a more consistent experience.
- croes 4y ago
  Maybe because they just want bigger text and not a bigger site.
  - csande17 4y ago
    Unfortunately, if web developers follow the advice from the article to use rem units everywhere, they'll get a bigger site.
    - ehutch79 4y ago
      You are correct! REM for text, PX for layout But if you're going to choose one, use rem with the body text-size hack.
- nailer 4y ago
  Because old web browsers didn't let people zoom properly. I think IE7 was one of the first.
  - Wowfunhappy 4y ago
    Yeah, and that maybe makes sense in 2012, but not in 2022.
- lmm 4y ago
  Maybe I want to keep seeing images at 1:1. Maybe the font sizes are bad. I remember the days when the user was supposed to be in control of how websites were styled.
- ehutch79 4y ago
  Depending on your vision, you might be able to see a button is a button, but the font is just too small by a few pts. You don't need borders or whatever zoomed, just the font size bumped a bit.

muspimerol 4y ago

Exactly, zooming and base font size are two fundamentally different things. Forcing users to zoom to get a legible text size is not an acceptable solution.

cuu508 4y ago
Wouldn't users also want legible icons, pictures, margins, etc.?
- Filligree 4y ago
  Most pictures can be shrunk significantly and remain legible. They don't need to be zoomed in on.
- layer8 4y ago
  It depends on the icons and pictures. With pixel-based graphics, you want to keep those 1:1 for crispness, and not get a blurry interpolation due to zooming, at least on lower-DPI screens.
- muspimerol 4y ago
  No, not really. The browser setting is for default _font_ size for a reason. People want legible text. Design elements like icons, pictures, margins are generally decorative and not functional. If a user wants to set a default _zoom_ level, then they can set that as well. As I said, these are two different things.
IshKebab 4y ago
Why not? If you have trouble reading text are you not also going to have trouble reading icons, pictures, etc. too?
- layer8 4y ago
  It depends on the icons and pictures. With pixel-based graphics, you want to keep those 1:1 for crispness, and not get a blurry interpolation due to zooming, at least on lower-DPI screens. And the custom base font size may just be e.g. two pixels larger than the default for comfortable reading.