13 ms·

Rethinking Text Resizing on Web

259 points by GavCo 2y ago

ximm 2y ago
AirBnB's designers have trouble understanding em and rem that have been part of CSS since at least 1999? I wonder what they do in their professional lives.
acl777 2y ago
https://archive.ph/vYY8I https://archive.ph/vYY8I
warpech 2y ago
I find the experience of Airbnb user hostile. The last time I checked, the app pushed irrelevant search results on me with no option of turning that off. Now they give advice on UX? The advice might be sound, but it comes from an authority in marketing, not UX
- onion2k 2y ago
  Airbnb has some of dark patterns that I guess are pushed by the product team and the engineers accept, and that's infuriating as a user, but as an engineer I still have a lot of respect for the Airbnb team's open source work in frontend web tech. They really do know what they're doing and there's a ton to learn from them. You can do that while choosing not to use the company's products.
  - warpech 2y ago
    You are right. I edited my comment to remove the negative sentiment towards the advice itself. I also admire the craftsmanship there. Still, the dark patterns are just increasingly unbearable. Same can be said about many market leaders in other categories.
  - whoopdedo 2y ago
    One of the side-effects of text scaling is content will be pushed further down the page. So if you place promoted content on top as most do, the normal content will fall below the fold. That "small" ad then becomes the only thing the user sees.
  - kevin_thibedeau 2y ago
    They don't actually use their namesake eslint rules.
- diego_sandoval 2y ago
  The other day I was with my girlfriend trying to book a listing in Airbnb. She couldn't add her phone number to her account, because her phone number was already registered in an old (2013) account of hers that she didn't remember existed, and she didn't remember the credentials. Once she found a way to log into the old account, she was unable to remove her phone number from it without adding in a new number. We had to add my phone number to her old account so that we could use her number in her current account. We couldn't add a 'fake' number because it requires SMS verification. So, I guess I will not be able to add my phone number to Airbnb if I ever want to use it. I suppose they do it like this so that phone numbers can be used as username, but they end up pushing this kind of problem onto their users. We were in a hurry and it really was not the appropiate moment for Airbnb to act stupid.
  - jakub_g 2y ago
    Everyone enforces phone numbers everywhere now due to spammers and scammers and other assholes. We can't have nice things.
mperham 2y ago
Using the default 12px text size is a pretty good indicator that a website's entire engineering team is under 40.
- lagniappe 2y ago
  Not necessarily, I still run small fonts because that's all I've known. In the 90s we had very tiny resolutions so we needed to get as much info on the screen as possible.
  - voiceblue 2y ago
    I think you missed their point. Most people end up needing reading glasses as they age. I tried to look for a specific number, but the consensus on who eventually needs them seems to be: everyone.
    - rjsw 2y ago
      I have been short sighted since my teens but my eyesight is improving as I age, don't bother wearing glasses now to use a computer.
      - trallnag 2y ago
        You sure it is improving and not just getting worse the other way
        ksenzee 2y ago
        It’s the same in practice.
- deathanatos 2y ago
  … the default is 12 pt, or 16px. I can somewhat comfortably read HN (though it is a touch small); it's 12px/9pt. I wouldn't recommend anything less than 10pt myself for normal text. I did hit a site recently whose main copy was 9px, and that was quite annoying, I agree there.
wonger_ 2y ago
200% font scaling sounds so innocent and fundamental. Is it hard because they waited too long and have too many teams / frontend systems? Or is font scaling CSS just tough for everybody?
- fwip 2y ago
  From the WCAG 2.1 specification they cite: > The working group feels that 200% is a reasonable accommodation that can support a wide range of designs and layouts, and complements older screen magnifiers that provide a minimum magnification of 200%. Above 200%, zoom (which resizes text, images, and layout regions and creates a larger canvas that may require both horizontal and vertical scrolling) may be more effective than text resizing. Assistive technology dedicated to zoom support would usually be used in such a situation and may provide better accessibility than attempts by the author to support the user directly.
- SuperNinKenDo 2y ago
  It is tough for everybody. It's one of those pernicious things that sounds simple until you try it and start to realise just how many assumptions about the relationship between things are baked into both your mental model, as well as tooling. A lot of things in UI are like this, but given the way the web has developed, it's particularly true. The article goes over some of this, although I think it kind of assumes the reader is more or less familiar with some of the issues that come up, but it could probably still give a naive reader some idea.
- wmil 2y ago
  It's the intersection of a few problems. - Scaling / reshaping a UI is a fundamentally hard problem that people love to pretend is easy. There are all kinds of tradeoffs that need to be made based on the layout. Which text needs to be preserved? When is it appropriate to show ellipsis? Should padding be dynamic? Apart from CSS another major attempt was GridBagLayout in early Java, which was also a mess. - Designers tend to be visual arts people who aren't of the correct personality type to dive in and solve all of the nitty gritty issues when making their design. They also like to make complex designs to show how creative they are. They also use their superior social skills to rope high level people to develop and approve the designs with them so that things are final before a dev gets to have a look. Once that happens ego comes into play and they can't be simplified. - CSS fundamentally doesn't have the correct tools to solve a lot of the issues. CSS first came out in 1996. Line clamping seems like an obvious problem to solve. Yet 28 years later we're still stuck with a prefixed -webkit-line-clamp. In general CSS sees overflowing text as a problem it doesn't want to deal with.
ec109685 2y ago
While not directly related to the post, I have found that a surprising number of people with limited vision do not know about iOS’s Display Zoom feature, which is much better supported than Dynamic Text given the former only relies on developers handling different screen resolutions properly. While it doesn’t blow things up by 200% like what AirBnb’s approach supports, it’s a quick way to make a big difference for people.
- jwells89 2y ago
  On iOS, if devs are building with UIKit or SwiftUI, Dynamic Text can be well supported by just using parameterized fonts or font sizes alongside SF Symbols, no need to concern oneself with specific resolutions. With a little extra work, custom fonts are capable of this too[0]. Apps built this way will work well on devices with new resolutions or even form factors with little manual involvement on the dev’s part. [0]: https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically/ https://developer.apple.com/documentation/uikit/uifont/scali...
- pornel 2y ago
  I've set it up for an elderly person, and it backfired terribly — they lacked dexterity to reliably turn it on and off, forgot the feature existed, and then one day accidentally zoomed in screen by only a few percent, and though the phone broke, because "the status bar has disappeared".
  - ec109685 2y ago
    That I think is a different feature. I am talking about the one that changes the resolution of the phone, essentially. Display & Brightness -> Display Zoom
kibwen 2y ago
The vertical candybar formfactor of smartphones really is just a total nightmare when it comes to usability. Coupled with the fact that touchscreens are a nadir of effective user input design, it really feels like phones were a regression in every respect except fit-in-your-pocket portability. Here's hoping that whatever eventually disrupts smartphones turns out better.
- sanjit 2y ago
  As someone who’s lost much ability due to an illness, the touch input, accessibility features and intimacy of my phone have been a lifesaver. Desktop web versus phone/tablet/tocuhscreen? I’d take the innovations and how forward they’ve moved us and society over anything in the past… they’re not just about input but forced new solutions and took us to new places. Can anything be implemented better? Of course, and I agree with you: the next disruption will be better. BUT will also expose more challenges in how we deal with tech, each other, and the planet.
- poisonborz 2y ago
  Should be awarded with the typical HN comment badge - smartphones effectively replaced PCs for most of the population, but what a regression nevertheless! I think the format is perfect for consumption. That this became so separated from creation is another problem.
  - dexwiz 2y ago
    Replaced? I'm pretty sure for the majority of smartphone users, it is their first computer. You have to be above 25 and and live in a developed nation for you to have had a PC before a smartphone.
    - naitgacem 2y ago
      In a developing country here. For people below 25, the majority are only familiar with smartphones. I think this comes down to the versatility of these devices(Camera, media consumption, browsing social media, ... ), and sadly that is most, if not all, of their needs in computers ...
ludamn 2y ago
I would recommend reading Josh Comeau's brilliant article[0] on this subject, I prefer his more intuitive approach for deciding when to choose `rem` or `px` for CSS values. For example, from this Airbnb article: > In the case of Airbnb, the team decided to prioritize the use of rem units specifically for font scaling, rather than scaling all elements proportionally. This can lead to undesirable outcomes as sometimes spacing between elements can have a functional purpose, e.g. making it easier to vertically separate one paragraph from another. If you use `rem` solely for font-size and nothing else users with `32px` as their default font-size would not have the necessary amount of space to help discern one paragraph from another in this case. PS It looks like they use Linaria, one can simplify the transition from `px` to `rem` by declaring this helper function and using inside their `css` rules: ```ts export const px = (...spacing: number[]) => spacing.map(s => `${s * (1 / 16)}rem`).join(" ") // Example usage const styles = css` p { // This inline padding is for aesthetic reasons, we don't want this to scale // with users preferred font-size padding-inline: 16px; // This serves a functional purpose, it will become `0.5rem 1rem` // which should match `8px 16px` if users are using the default 16px font-size margin-block: ${px(8, 16)}; }` ``` [0] https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/ https://www.joshwcomeau.com/css/surprising-truth-about-pixel...
whoopdedo 2y ago
I miss the way the original Opera handled scaling which was to resize the entire draw surface after rendering. So everything, including pictures, kept the same relative sizes and there was no reflow or jumping around. That meant you had to horizontal scroll but so what?
- kevincox 2y ago
  You can do this on Firefox if (and only if I think) you have a multi-touch input device. So on my trackpad (a Wacom tablet) or my touchscreen laptop I can pinch to pan and zoom like this. But I don't think there is a way to trigger this with a keyboard and mouse. I don't think I prefer it most of the time, as scrolling is annoying. But it is super useful for sites that break the browser-default scrolling.
  - daemonologist 2y ago
    In Firefox, you can configure the mouse to scale-zoom. In `about:config`, change `mousewheel.with_control.action` to 5 (default is 3 if you want it back). Holding Ctrl and scrolling will zoom in on the cursor location like a touchscreen pinch. Credit: https://superuser.com/questions/1659519/firefox-pinch-zoom-without-trackpad https://superuser.com/questions/1659519/firefox-pinch-zoom-w...
- tda 2y ago
  Opera also had a mode where it reflowed individual div's to fit the screen, without reflowing the entire page. I remember looking for an alternative browser with this feature back when, but never finding one
  - mths 2y ago
    Actually it did reflow the entire page. In particular, it inserted line breaks where ever text was being laid out, without ever messing with the width of divs or other elements. It then made a seamless jump with the viewport to keep the point of interest where you expect it to be on the screen. That's years ago when the Chromium version came out, however. I don't know how or if it works today, or how it was implemented in Presto before then.
alex_young 2y ago
There’s a graphic with giant text that claims that “200% Zoom = 1/2 Viewport”. If I’m understanding them correctly isn’t it worse than that? 200% Zoom leaves you with 1/4 of the space you had at 100% I think.
- david422 2y ago
  I'd be interested to see what his sample graphic looks like after his "font scaling" solution. It is 1/4 the total space.
- mminer237 2y ago
  It's a quarter the total space, yeah. He probably meant half the viewport width though, since that's what you really run up against trying to make sites accessible on phones.
lerpgame 2y ago
just use tailwind, and everything else just ask ai
tlogan 2y ago
The problem with most "resize/zoom" solutions is that they assume everything needs to be resized, which is not ideal. This approach makes well-known buttons and text unnecessarily large, reducing overall visibility. For Gmail, I use this small extension [1] that only resizes the message text and subject line, keeping other elements like the search bar, buttons, and labels unchanged. I wish every website does this way. [1] https://chromewebstore.google.com/detail/email-zoom-text-reader-by/kllnaciiffhiobclgfhldgobnoajnbpa https://chromewebstore.google.com/detail/email-zoom-text-rea...
- naitgacem 2y ago
  One great feature on laptops' trackpad which is hard to get on a mouse is the pinch-to-zoom thing. It zooms you in without changing the layout or anything.
  - sorahn 2y ago
    macOS has an accessibility feature where you can hold ctrl (or something) and use the scroll wheel to zoom the entire screen in. Not quite the same, but works really well for not breaking any layouts because it just scales the entire display out of the viewable area.
    - naitgacem 2y ago
      ctrl+scroll on Windows generally scales the text only. Even the built-in magnifier is extremly clunky and zooms only to 200%, 300% ...
    - Vegenoid 2y ago
      There is also a great piece of software that allows you to use ctrl+scroll to do the trackpad pinch-style zoom (and some other mouse-related things): https://macmousefix.com/ https://macmousefix.com/
  - dredmorbius 2y ago
    On mice, that's usually available via the scroll wheel. (Something ... notably missing from Apple's desktop mice.)
dangoodmanUT 2y ago
[flagged]
drewtato 2y ago
This is also important for being able to show normal size text on smaller phones. I've got a 5.8" screen and basically every app is visually broken, with about 10% functionally broken as well. Every web or app designer should get an iPhone Mini or similar, crank the font size accessibility setting, and make sure everything works. In particular, any text that is truncated needs to have a line-wrapped version available somewhere, every page with content needs to be scrollable, and the input box needs to be functional (e.g. it must show at least one line) when the keyboard is out. On web, use `overflow-wrap: break-word` and make sure your header can shrink.
- niutech 2y ago
  5.8" is "smaller" screen? So what will you tell about my 4.5" BQ Aquaris E4.5 Ubuntu Edition, which I use for daily web browsing? 5.8" is huge, it cannot fit in the pocket!
- Civitello 2y ago
  As someone who has worked in compliance testing for tightly controlled software platforms, things like this piss me off. These problems have known solutions.
  - kevin_thibedeau 2y ago
    Works on my <1yr old iPhone phablet. Ship it.
  - nikanj 2y ago
    But the known solutions are old, and new is always better
- naitgacem 2y ago
  I still use the Galaxy S8 with a 5.8" screen as well. It is actually quite amusing that nowadays this is considered "Small phone". I find it to be the perfect size and refuse to carry a brick around with me. Good thing in my country we still have 2G for when this breaks :P
- 2y ago
enriquto 2y ago
I honestly don't understand what the whole issue with web design is about (it's as far away as possible from my domain of expertise, so this is a statement of ignorance, not of arrogance). A "motherfucking website" without any css nor js is perfectly readable and usable on all devices and browsers. Users can select their preferred font sizes, and even colors. It is just like an ebook, that is readable everywhere, and responsive with user-chosen display setups and settings. What is the problem, then? Some websites want to look "fancier", and then they specify styles in manner that is incompatible with some usage patterns? This is an entirely self-inflicted problem. The problem did not exist in the first place, they created it. I have real trouble accepting that "web design" is not a bogus and fully useless human endeavour. I hope someone around here enlightens me to the contrary.
- wcrichton 2y ago
  Do you believe that you could implement the Airbnb interface without any CSS or Javascript?
  - marssaxman 2y ago
    Does the Airbnb interface need to be implemented at all?
    - recursive 2y ago
      Only if they intend for their business to continue existing.
      - marssaxman 2y ago
        An interface, sure; but the specific interface they are currently using, to which the previous comment was referring? Of course not.
  - enriquto 2y ago
    > Do you believe that you could implement the Airbnb interface without any CSS or Javascript? No, I don't. It has scrollable maps, for example. Those require a Javascript-operated canvas. What I don't understand is why it needs CSS or Javascript for the rest of the interface. It's just text and photos. An empty css with static html would be enough for that, and convey exactly the same information.
mjw1007 2y ago
Looking at the example near the bottom of the page, they seem to be making the common mistake of thinking that if I want 16px text turning into 32px, then I also want 24px text turning into 48px. I really really don't. I'm already much shorter of screen space than the designer planned for, and huge headings make that much worse.
- DrewADesign 2y ago
  Accommodating inconsistent content-- especially in variable-shape elements like navigation link lists or headlines-- on many screen sizes and aspect ratios is really difficult. It's easy to look at a janky combo and assume incompetence, but someone probably pored over edge cases until their eyes bled to even get it that usable. If you change one thing, 3 other things break.
  - skydhash 2y ago
    That's why you don't. Designers often want to assume fixed sizes for their designs and the result is beautiful, but not flexible. You want to assume that everything is reflowable and define devices classes. Optimize for use cases instead of branding/marketing.
    - DrewADesign 2y ago
      > Optimize for use cases instead of branding/marketing. Even if a company had in-house people for both branding/identity and interface design, which isn't common, they probably wouldn't even go to each others meetings, just like a database administrator wouldn't go to front-end dev meetings. My having professional experience in both is the exception, not the rule. The overwhelming majority of the interface work I've done was for applications published by a nonprofit that didn't give a shit about branding or prettiness. They needed their interaction-heavy applications to be very visually parseable and have things like action status and next actions be clear and intuitive instantly. That doesn't happen by accident: you must delve deep into the minutiae of what you communicate with information hierarchy, implied relationships through gestalt or implied lines, and other visual cues that help people subconsciously understand what they're looking at. While these things are very important to everyone trying to use an interface, it's triply so for people that aren't used to staring at dense screens of text all day long, which is why other developers are the only ones that don't hate interfaces made by developers. Branding people care about very general look and feel and are usually satisfied if you use the appropriate colors and typefaces. Interface design is the hard part with layout, has little to do with aesthetics, and is 100% about the use case.
tambourine_man 2y ago
The solution to text resizing according to AirBnB engineering is CSS in JS. These frontend web dev tendencies are devastating to me. I feel like these people haven't lived through the CSS Zen Garden days or the fight for semantic HTML. I still love the web, but the current frontend culture is batshit.
- jacobp100 2y ago
  The output is actual an CSS file - so it’s not quite the same as other CSS in JS libs
- robertoandred 2y ago
  That’s not at all what they said.
hypertexthero 2y ago
I’m not sure if this is related, but recently I began to *omit* this viewport <meta> tag from the <head> of my sites, so that I can pinch-and-zoom instead of having a fixed scale set and needing to mess with text size controls: <meta name="viewport" content="width=device-width, initial-scale=1" /> I find it makes sites much more pleasant to browse.
- lxgr 2y ago
  > so that I can pinch-and-zoom Without requiring horizontal scrolling?
  - hypertexthero 2y ago
    Zooming in far enough does require horizontal scrolling. Still, I find it preferable to messing with font sizes as I hate reading on the phone and want to spend as little time as possible looking at the small screen, so I usually zoom in to what I want to see/read/click on, switching phone orientation if necessary for a 2nd option for the text size. I could be wrong, or in a minority opinion group.
- jrochkind1 2y ago
  Wait does viewport `width=device-width, initial-scale=1` prevent pinch-zoom? I thought it just set the initial zoom with initial scale, but didn't prevent zooming in further? But I don't pinch zoom websites much, and maybe I haven't tested my own in a while... googling the usual sources are not clarifying to me the interaction of all these things according to standard.
  - hypertexthero 2y ago
    Looks like you can enable zooming with the maximum-scale property: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0"> Found this info here, and will try it out: https://stackoverflow.com/a/17891937 https://stackoverflow.com/a/17891937
rrr_oh_man 2y ago
Here's what I used in my app [1] to do scaling with CSS only, no breaking points or JS complicated needed. All sizes of fonts and elements (like cards) are derived from the visible viewport and the golden ratio: :root { --gr: 1.618; --font-baseline: clamp(16px, calc(5.725vh + 5.725vw), 72px) !important; --font-baseline: clamp(16px, calc(5.725svh + 5.725svw), 72px) !important; --baseline-unit-1: var(--font-baseline); --baseline-unit-2: calc(var(--font-baseline) / var(--gr)); --baseline-unit-3: calc(var(--font-baseline) / pow(var(--gr), 1)); --baseline-unit-4: calc(var(--font-baseline) / pow(var(--gr), 2)); --baseline-unit-5: calc(var(--font-baseline) / pow(var(--gr), 3)); --baseline-unit-6: calc(var(--font-baseline) / pow(var(--gr), 4)); --baseline-unit-7: calc(var(--font-baseline) / pow(var(--gr), 5)); --baseline-unit-8: calc(var(--font-baseline) / pow(var(--gr), 6)); } (Initially there was no `clamp()`, but I had to concede that point for a better UX on really large and really small screens.) [1] https://news.ycombinator.com/item?id=40408418 https://news.ycombinator.com/item?id=40408418
- dwallin 2y ago
  That article about the golden ratio lost me with that horribly cropped image. It ignores all the things that actually matter when composing and cropping a shot, and gives some absurd advice that will actively lead people astray. The end result cuts off valuable content in favor of blurry background nonsense, leaving a random pencil end sticking up out of nowhere and a massively distracting board that is uncomfortably lined up with an outer edge. Learning some basic compositional techniques would be far more helpful both for the author and its readers.
  - rrr_oh_man 2y ago
    Agree! I cleaned up my comment. Hopefully it's a bit clearer.
dizhn 2y ago
I guess nobody bothers to mention the text size issues on this very site anymore knowing it won't be fixed.
- skydhash 2y ago
  Zoom is what you need. I have it at 150% on my 24 inch screen. The default size is ok for my phone as the distance is usually smaller.
  - hot_gril 2y ago
    Yeah, HN responds well to zooming.
  - dizhn 2y ago
    On my android phone using Firefox, I either have to scroll 2x the default witdh to the right, or zoom out completely to fit the text on the screen. The text is barely readable to begin with, becomes impossible when the whole thing fits. Zooming is not a solution because the text won't reflow. Does it not behave like this for you? I think Chrome handles it better. What browser do you use?
    - skydhash 2y ago
      I use Safari on mobile (iPhone 13). I’ve seen what you described on the search page for some result items, but the main site has always been ok.
    - jakub_g 2y ago
      Opera on Android supports reflowing text (in settings).
deleted 2y ago
[deleted]
GalaxyNova 2y ago
The newly standardized css `zoom` property might help with this.
smileson2 2y ago
[dead]
hot_gril 2y ago
Image and text resizing both seem rather broken in HTML/CSS. Especially images. If I care somewhat precisely about how a mixed-media site is going to show on different screen sizes, I have to set up React and start calculating stuff based on window dimensions.
deleted 2y ago
[deleted]
perilunar 2y ago
I think the change in browsers from text-only zoom to whole-page zoom was a huge mistake. At least Firefox still gives you the option. Front-end developers: test your layouts in Firefox with "Zoom text only" set. It should work for all settings from 50% to 200%.
- zerreh50 2y ago
  Annoyingly, Firefox on Android lacks these options completely. You can't even control zoom for individual websites, it's all or nothing. It gets even worse on a foldable phone where you have two different displays. It's a bit off topic, but I am not aware of any browser that has reliable sync, working ad block, and per site zoom control on both Android and Windows.
eviks 2y ago
> the same screen shown at 200% showing the search and categories are cut off entirely and not able to even see the first listing. Well, duh, that's because you retain so much useless whitespace where you can only fit a single short word "Display" (~30% width vs 70% whitespace) in a line And the example in the video isn't much rethinking - instead of hiding crucial info with "California" becoming "Ca..." not only can you fit more info if you squeeze the overly wide ... (so readable Cali would fit), but also you could expand into the half-empty 3/4 lines, where a price unit could also be moved to a separate column instead off "night" being repeated, that would fit the whole California right there at high text size (and again you could fit more relatively valuable text if you remove some of the relatively less valuable spacing)
globular-toast 2y ago
Things were heading in the right direction in the early 2000s. Browsers had default font sizes built in and everything else could be scaled with the font using the em unit. Then browsers made zoom increase the pixel size. That was it. They fucked it. To this day it's still broken. Now you get phones where the zoom in does something utterly useless and people still can't reliably set their own font size.
dredmorbius 2y ago
Websites should set the base font size to the browser default, and scale that only for text other than body default: larger for headings, smaller only for truly superflous text, or notional elements such as super- and sub-scripts. Readers who are aware of the ability to set a browser-level font default will be annoyed at any other behaviour or choices. Readers who are unaware of that capacity, the overwhelming majority, are a lost cause regardless, but will likely use other mechanisms to zoom pages to a comfortable reading level. Otherwise, Air UI/UX are Beyond the Bend.
azangru 2y ago
> Moving from pixel-based values to rem units as a company-wide change in CSS practice can be a significant challenge, especially when working across multiple teams. What bothers me is why does a company find itself in this situation. Why does it not include web accessibility in the building of its product from the start? Why do designers talk to developers in pixels instead of checking how their design decisions on different screens, in different browsers, and with different accessibility settiongs?
jrochkind1 2y ago
The tldr is basically that if you size your text in `rem` but everything else (the grid, whitespace) in `px`, you allow the user-agent to increase font size _without_ zooming in everything else. Which can be useful for those who can't read small fonts, especially on small (mobile) screens. If you size _everything_ in rem, then user-agent font scaling ends up doing pretty much exactly the same thing as user-agent zooming, which is less useful than allowing user-agent font-scaling and zooming to do _different_ things, each of which may have a different context of use. This seems obvious once said -- but is there an argument against it? I don't think it is the common advice -- I feel like there was a _lot_ of talk about sizing _everything_ using `rem` for accessiblity (that began back before most people knew about sizing anything with rem). And that this is what most people (including me) are doing -- using rem for all sizing. And what many design frameworks (bootstrap?) have and are doing. It's making me think the standard advice should be as in OP instead, rem for text, px for everything else. And of course to maximize accessibility benfits you then need to actually test under text-scaling (on small screens), but to begin with (and avoid the need for a huge refactor later), it seems like you should start with `px` for grid spacing etc, contrary to much current common conventional wisdom?
- peter_l_downs 2y ago
  I'd never heard of this approach before and I can't think of any downsides. I'll probably start using this with my new work.
llimos 2y ago
> extremely impossible seriously?
- mmkos 2y ago
  Nitpicky, but I admit I stopped there for a second too.. like how did it get past even a half assed editorial review
sarahrod 2y ago
[dead]
LimeLimestone 2y ago
I used WAVE browser addon on the Airbnb website and it showed 37 errors, 1 contrast error and 98 alerts. And they want to talk about accessibility? Accessibility aside, their website is an unusable, resource-hogging mess which doesn't even use proper cursor pointers for <a> tags and tries to mess with my scroll.
sotix 2y ago
Apple’s own webpage[0] doesn’t properly resize text on my iPad using safari with the text set to 125%. [0]: https://www.apple.com/shop/buy-ipad/ipad-pro https://www.apple.com/shop/buy-ipad/ipad-pro

259 points by GavCo 2y ago

ximm 2y ago

AirBnB's designers have trouble understanding em and rem that have been part of CSS since at least 1999? I wonder what they do in their professional lives.

acl777 2y ago

https://archive.ph/vYY8I https://archive.ph/vYY8I

warpech 2y ago

I find the experience of Airbnb user hostile. The last time I checked, the app pushed irrelevant search results on me with no option of turning that off. Now they give advice on UX? The advice might be sound, but it comes from an authority in marketing, not UX

onion2k 2y ago
Airbnb has some of dark patterns that I guess are pushed by the product team and the engineers accept, and that's infuriating as a user, but as an engineer I still have a lot of respect for the Airbnb team's open source work in frontend web tech. They really do know what they're doing and there's a ton to learn from them. You can do that while choosing not to use the company's products.
- warpech 2y ago
  You are right. I edited my comment to remove the negative sentiment towards the advice itself. I also admire the craftsmanship there. Still, the dark patterns are just increasingly unbearable. Same can be said about many market leaders in other categories.
- whoopdedo 2y ago
  One of the side-effects of text scaling is content will be pushed further down the page. So if you place promoted content on top as most do, the normal content will fall below the fold. That "small" ad then becomes the only thing the user sees.
- kevin_thibedeau 2y ago
  They don't actually use their namesake eslint rules.
diego_sandoval 2y ago
The other day I was with my girlfriend trying to book a listing in Airbnb. She couldn't add her phone number to her account, because her phone number was already registered in an old (2013) account of hers that she didn't remember existed, and she didn't remember the credentials. Once she found a way to log into the old account, she was unable to remove her phone number from it without adding in a new number. We had to add my phone number to her old account so that we could use her number in her current account. We couldn't add a 'fake' number because it requires SMS verification. So, I guess I will not be able to add my phone number to Airbnb if I ever want to use it. I suppose they do it like this so that phone numbers can be used as username, but they end up pushing this kind of problem onto their users. We were in a hurry and it really was not the appropiate moment for Airbnb to act stupid.
- jakub_g 2y ago
  Everyone enforces phone numbers everywhere now due to spammers and scammers and other assholes. We can't have nice things.

mperham 2y ago

Using the default 12px text size is a pretty good indicator that a website's entire engineering team is under 40.

lagniappe 2y ago
Not necessarily, I still run small fonts because that's all I've known. In the 90s we had very tiny resolutions so we needed to get as much info on the screen as possible.
- voiceblue 2y ago
  I think you missed their point. Most people end up needing reading glasses as they age. I tried to look for a specific number, but the consensus on who eventually needs them seems to be: everyone.
  - rjsw 2y ago
    I have been short sighted since my teens but my eyesight is improving as I age, don't bother wearing glasses now to use a computer.
    - trallnag 2y ago
      You sure it is improving and not just getting worse the other way
      - ksenzee 2y ago
        It’s the same in practice.
deathanatos 2y ago
… the default is 12 pt, or 16px. I can somewhat comfortably read HN (though it is a touch small); it's 12px/9pt. I wouldn't recommend anything less than 10pt myself for normal text. I did hit a site recently whose main copy was 9px, and that was quite annoying, I agree there.

wonger_ 2y ago

200% font scaling sounds so innocent and fundamental. Is it hard because they waited too long and have too many teams / frontend systems? Or is font scaling CSS just tough for everybody?

fwip 2y ago
From the WCAG 2.1 specification they cite: > The working group feels that 200% is a reasonable accommodation that can support a wide range of designs and layouts, and complements older screen magnifiers that provide a minimum magnification of 200%. Above 200%, zoom (which resizes text, images, and layout regions and creates a larger canvas that may require both horizontal and vertical scrolling) may be more effective than text resizing. Assistive technology dedicated to zoom support would usually be used in such a situation and may provide better accessibility than attempts by the author to support the user directly.
SuperNinKenDo 2y ago
It is tough for everybody. It's one of those pernicious things that sounds simple until you try it and start to realise just how many assumptions about the relationship between things are baked into both your mental model, as well as tooling. A lot of things in UI are like this, but given the way the web has developed, it's particularly true. The article goes over some of this, although I think it kind of assumes the reader is more or less familiar with some of the issues that come up, but it could probably still give a naive reader some idea.
wmil 2y ago
It's the intersection of a few problems. - Scaling / reshaping a UI is a fundamentally hard problem that people love to pretend is easy. There are all kinds of tradeoffs that need to be made based on the layout. Which text needs to be preserved? When is it appropriate to show ellipsis? Should padding be dynamic? Apart from CSS another major attempt was GridBagLayout in early Java, which was also a mess. - Designers tend to be visual arts people who aren't of the correct personality type to dive in and solve all of the nitty gritty issues when making their design. They also like to make complex designs to show how creative they are. They also use their superior social skills to rope high level people to develop and approve the designs with them so that things are final before a dev gets to have a look. Once that happens ego comes into play and they can't be simplified. - CSS fundamentally doesn't have the correct tools to solve a lot of the issues. CSS first came out in 1996. Line clamping seems like an obvious problem to solve. Yet 28 years later we're still stuck with a prefixed -webkit-line-clamp. In general CSS sees overflowing text as a problem it doesn't want to deal with.

ec109685 2y ago

While not directly related to the post, I have found that a surprising number of people with limited vision do not know about iOS’s Display Zoom feature, which is much better supported than Dynamic Text given the former only relies on developers handling different screen resolutions properly. While it doesn’t blow things up by 200% like what AirBnb’s approach supports, it’s a quick way to make a big difference for people.

jwells89 2y ago
On iOS, if devs are building with UIKit or SwiftUI, Dynamic Text can be well supported by just using parameterized fonts or font sizes alongside SF Symbols, no need to concern oneself with specific resolutions. With a little extra work, custom fonts are capable of this too[0]. Apps built this way will work well on devices with new resolutions or even form factors with little manual involvement on the dev’s part. [0]: https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically/ https://developer.apple.com/documentation/uikit/uifont/scali...
pornel 2y ago
I've set it up for an elderly person, and it backfired terribly — they lacked dexterity to reliably turn it on and off, forgot the feature existed, and then one day accidentally zoomed in screen by only a few percent, and though the phone broke, because "the status bar has disappeared".
- ec109685 2y ago
  That I think is a different feature. I am talking about the one that changes the resolution of the phone, essentially. Display & Brightness -> Display Zoom

kibwen 2y ago

The vertical candybar formfactor of smartphones really is just a total nightmare when it comes to usability. Coupled with the fact that touchscreens are a nadir of effective user input design, it really feels like phones were a regression in every respect except fit-in-your-pocket portability. Here's hoping that whatever eventually disrupts smartphones turns out better.

sanjit 2y ago
As someone who’s lost much ability due to an illness, the touch input, accessibility features and intimacy of my phone have been a lifesaver. Desktop web versus phone/tablet/tocuhscreen? I’d take the innovations and how forward they’ve moved us and society over anything in the past… they’re not just about input but forced new solutions and took us to new places. Can anything be implemented better? Of course, and I agree with you: the next disruption will be better. BUT will also expose more challenges in how we deal with tech, each other, and the planet.
poisonborz 2y ago
Should be awarded with the typical HN comment badge - smartphones effectively replaced PCs for most of the population, but what a regression nevertheless! I think the format is perfect for consumption. That this became so separated from creation is another problem.
- dexwiz 2y ago
  Replaced? I'm pretty sure for the majority of smartphone users, it is their first computer. You have to be above 25 and and live in a developed nation for you to have had a PC before a smartphone.
  - naitgacem 2y ago
    In a developing country here. For people below 25, the majority are only familiar with smartphones. I think this comes down to the versatility of these devices(Camera, media consumption, browsing social media, ... ), and sadly that is most, if not all, of their needs in computers ...

ludamn 2y ago

I would recommend reading Josh Comeau's brilliant article[0] on this subject, I prefer his more intuitive approach for deciding when to choose `rem` or `px` for CSS values. For example, from this Airbnb article: > In the case of Airbnb, the team decided to prioritize the use of rem units specifically for font scaling, rather than scaling all elements proportionally. This can lead to undesirable outcomes as sometimes spacing between elements can have a functional purpose, e.g. making it easier to vertically separate one paragraph from another. If you use `rem` solely for font-size and nothing else users with `32px` as their default font-size would not have the necessary amount of space to help discern one paragraph from another in this case. PS It looks like they use Linaria, one can simplify the transition from `px` to `rem` by declaring this helper function and using inside their `css` rules: ```ts export const px = (...spacing: number[]) => spacing.map(s => `${s * (1 / 16)}rem`).join(" ") // Example usage const styles = css` p { // This inline padding is for aesthetic reasons, we don't want this to scale // with users preferred font-size padding-inline: 16px; // This serves a functional purpose, it will become `0.5rem 1rem` // which should match `8px 16px` if users are using the default 16px font-size margin-block: ${px(8, 16)}; }` ``` [0] https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/ https://www.joshwcomeau.com/css/surprising-truth-about-pixel...

whoopdedo 2y ago

I miss the way the original Opera handled scaling which was to resize the entire draw surface after rendering. So everything, including pictures, kept the same relative sizes and there was no reflow or jumping around. That meant you had to horizontal scroll but so what?

kevincox 2y ago
You can do this on Firefox if (and only if I think) you have a multi-touch input device. So on my trackpad (a Wacom tablet) or my touchscreen laptop I can pinch to pan and zoom like this. But I don't think there is a way to trigger this with a keyboard and mouse. I don't think I prefer it most of the time, as scrolling is annoying. But it is super useful for sites that break the browser-default scrolling.
- daemonologist 2y ago
  In Firefox, you can configure the mouse to scale-zoom. In `about:config`, change `mousewheel.with_control.action` to 5 (default is 3 if you want it back). Holding Ctrl and scrolling will zoom in on the cursor location like a touchscreen pinch. Credit: https://superuser.com/questions/1659519/firefox-pinch-zoom-without-trackpad https://superuser.com/questions/1659519/firefox-pinch-zoom-w...
tda 2y ago
Opera also had a mode where it reflowed individual div's to fit the screen, without reflowing the entire page. I remember looking for an alternative browser with this feature back when, but never finding one
- mths 2y ago
  Actually it did reflow the entire page. In particular, it inserted line breaks where ever text was being laid out, without ever messing with the width of divs or other elements. It then made a seamless jump with the viewport to keep the point of interest where you expect it to be on the screen. That's years ago when the Chromium version came out, however. I don't know how or if it works today, or how it was implemented in Presto before then.

alex_young 2y ago

There’s a graphic with giant text that claims that “200% Zoom = 1/2 Viewport”. If I’m understanding them correctly isn’t it worse than that? 200% Zoom leaves you with 1/4 of the space you had at 100% I think.

david422 2y ago
I'd be interested to see what his sample graphic looks like after his "font scaling" solution. It is 1/4 the total space.
mminer237 2y ago
It's a quarter the total space, yeah. He probably meant half the viewport width though, since that's what you really run up against trying to make sites accessible on phones.

lerpgame 2y ago

just use tailwind, and everything else just ask ai

tlogan 2y ago

The problem with most "resize/zoom" solutions is that they assume everything needs to be resized, which is not ideal. This approach makes well-known buttons and text unnecessarily large, reducing overall visibility. For Gmail, I use this small extension [1] that only resizes the message text and subject line, keeping other elements like the search bar, buttons, and labels unchanged. I wish every website does this way. [1] https://chromewebstore.google.com/detail/email-zoom-text-reader-by/kllnaciiffhiobclgfhldgobnoajnbpa https://chromewebstore.google.com/detail/email-zoom-text-rea...

naitgacem 2y ago
One great feature on laptops' trackpad which is hard to get on a mouse is the pinch-to-zoom thing. It zooms you in without changing the layout or anything.
- sorahn 2y ago
  macOS has an accessibility feature where you can hold ctrl (or something) and use the scroll wheel to zoom the entire screen in. Not quite the same, but works really well for not breaking any layouts because it just scales the entire display out of the viewable area.
  - naitgacem 2y ago
    ctrl+scroll on Windows generally scales the text only. Even the built-in magnifier is extremly clunky and zooms only to 200%, 300% ...
  - Vegenoid 2y ago
    There is also a great piece of software that allows you to use ctrl+scroll to do the trackpad pinch-style zoom (and some other mouse-related things): https://macmousefix.com/ https://macmousefix.com/
- dredmorbius 2y ago
  On mice, that's usually available via the scroll wheel. (Something ... notably missing from Apple's desktop mice.)

dangoodmanUT 2y ago

[flagged]

drewtato 2y ago

This is also important for being able to show normal size text on smaller phones. I've got a 5.8" screen and basically every app is visually broken, with about 10% functionally broken as well. Every web or app designer should get an iPhone Mini or similar, crank the font size accessibility setting, and make sure everything works. In particular, any text that is truncated needs to have a line-wrapped version available somewhere, every page with content needs to be scrollable, and the input box needs to be functional (e.g. it must show at least one line) when the keyboard is out. On web, use `overflow-wrap: break-word` and make sure your header can shrink.

niutech 2y ago
5.8" is "smaller" screen? So what will you tell about my 4.5" BQ Aquaris E4.5 Ubuntu Edition, which I use for daily web browsing? 5.8" is huge, it cannot fit in the pocket!
Civitello 2y ago
As someone who has worked in compliance testing for tightly controlled software platforms, things like this piss me off. These problems have known solutions.
- kevin_thibedeau 2y ago
  Works on my <1yr old iPhone phablet. Ship it.
- nikanj 2y ago
  But the known solutions are old, and new is always better
naitgacem 2y ago
I still use the Galaxy S8 with a 5.8" screen as well. It is actually quite amusing that nowadays this is considered "Small phone". I find it to be the perfect size and refuse to carry a brick around with me. Good thing in my country we still have 2G for when this breaks :P
2y ago

enriquto 2y ago

I honestly don't understand what the whole issue with web design is about (it's as far away as possible from my domain of expertise, so this is a statement of ignorance, not of arrogance). A "motherfucking website" without any css nor js is perfectly readable and usable on all devices and browsers. Users can select their preferred font sizes, and even colors. It is just like an ebook, that is readable everywhere, and responsive with user-chosen display setups and settings. What is the problem, then? Some websites want to look "fancier", and then they specify styles in manner that is incompatible with some usage patterns? This is an entirely self-inflicted problem. The problem did not exist in the first place, they created it. I have real trouble accepting that "web design" is not a bogus and fully useless human endeavour. I hope someone around here enlightens me to the contrary.

wcrichton 2y ago
Do you believe that you could implement the Airbnb interface without any CSS or Javascript?
- marssaxman 2y ago
  Does the Airbnb interface need to be implemented at all?
  - recursive 2y ago
    Only if they intend for their business to continue existing.
    - marssaxman 2y ago
      An interface, sure; but the specific interface they are currently using, to which the previous comment was referring? Of course not.
- enriquto 2y ago
  > Do you believe that you could implement the Airbnb interface without any CSS or Javascript? No, I don't. It has scrollable maps, for example. Those require a Javascript-operated canvas. What I don't understand is why it needs CSS or Javascript for the rest of the interface. It's just text and photos. An empty css with static html would be enough for that, and convey exactly the same information.

mjw1007 2y ago

Looking at the example near the bottom of the page, they seem to be making the common mistake of thinking that if I want 16px text turning into 32px, then I also want 24px text turning into 48px. I really really don't. I'm already much shorter of screen space than the designer planned for, and huge headings make that much worse.

DrewADesign 2y ago
Accommodating inconsistent content-- especially in variable-shape elements like navigation link lists or headlines-- on many screen sizes and aspect ratios is really difficult. It's easy to look at a janky combo and assume incompetence, but someone probably pored over edge cases until their eyes bled to even get it that usable. If you change one thing, 3 other things break.
- skydhash 2y ago
  That's why you don't. Designers often want to assume fixed sizes for their designs and the result is beautiful, but not flexible. You want to assume that everything is reflowable and define devices classes. Optimize for use cases instead of branding/marketing.
  - DrewADesign 2y ago
    > Optimize for use cases instead of branding/marketing. Even if a company had in-house people for both branding/identity and interface design, which isn't common, they probably wouldn't even go to each others meetings, just like a database administrator wouldn't go to front-end dev meetings. My having professional experience in both is the exception, not the rule. The overwhelming majority of the interface work I've done was for applications published by a nonprofit that didn't give a shit about branding or prettiness. They needed their interaction-heavy applications to be very visually parseable and have things like action status and next actions be clear and intuitive instantly. That doesn't happen by accident: you must delve deep into the minutiae of what you communicate with information hierarchy, implied relationships through gestalt or implied lines, and other visual cues that help people subconsciously understand what they're looking at. While these things are very important to everyone trying to use an interface, it's triply so for people that aren't used to staring at dense screens of text all day long, which is why other developers are the only ones that don't hate interfaces made by developers. Branding people care about very general look and feel and are usually satisfied if you use the appropriate colors and typefaces. Interface design is the hard part with layout, has little to do with aesthetics, and is 100% about the use case.

tambourine_man 2y ago

The solution to text resizing according to AirBnB engineering is CSS in JS. These frontend web dev tendencies are devastating to me. I feel like these people haven't lived through the CSS Zen Garden days or the fight for semantic HTML. I still love the web, but the current frontend culture is batshit.

jacobp100 2y ago
The output is actual an CSS file - so it’s not quite the same as other CSS in JS libs
robertoandred 2y ago
That’s not at all what they said.

hypertexthero 2y ago

I’m not sure if this is related, but recently I began to *omit* this viewport <meta> tag from the <head> of my sites, so that I can pinch-and-zoom instead of having a fixed scale set and needing to mess with text size controls: <meta name="viewport" content="width=device-width, initial-scale=1" /> I find it makes sites much more pleasant to browse.

lxgr 2y ago
> so that I can pinch-and-zoom Without requiring horizontal scrolling?
- hypertexthero 2y ago
  Zooming in far enough does require horizontal scrolling. Still, I find it preferable to messing with font sizes as I hate reading on the phone and want to spend as little time as possible looking at the small screen, so I usually zoom in to what I want to see/read/click on, switching phone orientation if necessary for a 2nd option for the text size. I could be wrong, or in a minority opinion group.
jrochkind1 2y ago
Wait does viewport `width=device-width, initial-scale=1` prevent pinch-zoom? I thought it just set the initial zoom with initial scale, but didn't prevent zooming in further? But I don't pinch zoom websites much, and maybe I haven't tested my own in a while... googling the usual sources are not clarifying to me the interaction of all these things according to standard.
- hypertexthero 2y ago
  Looks like you can enable zooming with the maximum-scale property: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0"> Found this info here, and will try it out: https://stackoverflow.com/a/17891937 https://stackoverflow.com/a/17891937

rrr_oh_man 2y ago

Here's what I used in my app [1] to do scaling with CSS only, no breaking points or JS complicated needed. All sizes of fonts and elements (like cards) are derived from the visible viewport and the golden ratio: :root { --gr: 1.618; --font-baseline: clamp(16px, calc(5.725vh + 5.725vw), 72px) !important; --font-baseline: clamp(16px, calc(5.725svh + 5.725svw), 72px) !important; --baseline-unit-1: var(--font-baseline); --baseline-unit-2: calc(var(--font-baseline) / var(--gr)); --baseline-unit-3: calc(var(--font-baseline) / pow(var(--gr), 1)); --baseline-unit-4: calc(var(--font-baseline) / pow(var(--gr), 2)); --baseline-unit-5: calc(var(--font-baseline) / pow(var(--gr), 3)); --baseline-unit-6: calc(var(--font-baseline) / pow(var(--gr), 4)); --baseline-unit-7: calc(var(--font-baseline) / pow(var(--gr), 5)); --baseline-unit-8: calc(var(--font-baseline) / pow(var(--gr), 6)); } (Initially there was no `clamp()`, but I had to concede that point for a better UX on really large and really small screens.) [1] https://news.ycombinator.com/item?id=40408418 https://news.ycombinator.com/item?id=40408418

dwallin 2y ago
That article about the golden ratio lost me with that horribly cropped image. It ignores all the things that actually matter when composing and cropping a shot, and gives some absurd advice that will actively lead people astray. The end result cuts off valuable content in favor of blurry background nonsense, leaving a random pencil end sticking up out of nowhere and a massively distracting board that is uncomfortably lined up with an outer edge. Learning some basic compositional techniques would be far more helpful both for the author and its readers.
- rrr_oh_man 2y ago
  Agree! I cleaned up my comment. Hopefully it's a bit clearer.

dizhn 2y ago

I guess nobody bothers to mention the text size issues on this very site anymore knowing it won't be fixed.

skydhash 2y ago
Zoom is what you need. I have it at 150% on my 24 inch screen. The default size is ok for my phone as the distance is usually smaller.
- hot_gril 2y ago
  Yeah, HN responds well to zooming.
- dizhn 2y ago
  On my android phone using Firefox, I either have to scroll 2x the default witdh to the right, or zoom out completely to fit the text on the screen. The text is barely readable to begin with, becomes impossible when the whole thing fits. Zooming is not a solution because the text won't reflow. Does it not behave like this for you? I think Chrome handles it better. What browser do you use?
  - skydhash 2y ago
    I use Safari on mobile (iPhone 13). I’ve seen what you described on the search page for some result items, but the main site has always been ok.
  - jakub_g 2y ago
    Opera on Android supports reflowing text (in settings).

deleted 2y ago

[deleted]

GalaxyNova 2y ago

The newly standardized css `zoom` property might help with this.

smileson2 2y ago

[dead]

hot_gril 2y ago

Image and text resizing both seem rather broken in HTML/CSS. Especially images. If I care somewhat precisely about how a mixed-media site is going to show on different screen sizes, I have to set up React and start calculating stuff based on window dimensions.

deleted 2y ago

[deleted]

perilunar 2y ago

I think the change in browsers from text-only zoom to whole-page zoom was a huge mistake. At least Firefox still gives you the option. Front-end developers: test your layouts in Firefox with "Zoom text only" set. It should work for all settings from 50% to 200%.

zerreh50 2y ago
Annoyingly, Firefox on Android lacks these options completely. You can't even control zoom for individual websites, it's all or nothing. It gets even worse on a foldable phone where you have two different displays. It's a bit off topic, but I am not aware of any browser that has reliable sync, working ad block, and per site zoom control on both Android and Windows.

eviks 2y ago

> the same screen shown at 200% showing the search and categories are cut off entirely and not able to even see the first listing. Well, duh, that's because you retain so much useless whitespace where you can only fit a single short word "Display" (~30% width vs 70% whitespace) in a line And the example in the video isn't much rethinking - instead of hiding crucial info with "California" becoming "Ca..." not only can you fit more info if you squeeze the overly wide ... (so readable Cali would fit), but also you could expand into the half-empty 3/4 lines, where a price unit could also be moved to a separate column instead off "night" being repeated, that would fit the whole California right there at high text size (and again you could fit more relatively valuable text if you remove some of the relatively less valuable spacing)

globular-toast 2y ago

Things were heading in the right direction in the early 2000s. Browsers had default font sizes built in and everything else could be scaled with the font using the em unit. Then browsers made zoom increase the pixel size. That was it. They fucked it. To this day it's still broken. Now you get phones where the zoom in does something utterly useless and people still can't reliably set their own font size.

dredmorbius 2y ago

Websites should set the base font size to the browser default, and scale that only for text other than body default: larger for headings, smaller only for truly superflous text, or notional elements such as super- and sub-scripts. Readers who are aware of the ability to set a browser-level font default will be annoyed at any other behaviour or choices. Readers who are unaware of that capacity, the overwhelming majority, are a lost cause regardless, but will likely use other mechanisms to zoom pages to a comfortable reading level. Otherwise, Air UI/UX are Beyond the Bend.

azangru 2y ago

> Moving from pixel-based values to rem units as a company-wide change in CSS practice can be a significant challenge, especially when working across multiple teams. What bothers me is why does a company find itself in this situation. Why does it not include web accessibility in the building of its product from the start? Why do designers talk to developers in pixels instead of checking how their design decisions on different screens, in different browsers, and with different accessibility settiongs?

jrochkind1 2y ago

The tldr is basically that if you size your text in `rem` but everything else (the grid, whitespace) in `px`, you allow the user-agent to increase font size _without_ zooming in everything else. Which can be useful for those who can't read small fonts, especially on small (mobile) screens. If you size _everything_ in rem, then user-agent font scaling ends up doing pretty much exactly the same thing as user-agent zooming, which is less useful than allowing user-agent font-scaling and zooming to do _different_ things, each of which may have a different context of use. This seems obvious once said -- but is there an argument against it? I don't think it is the common advice -- I feel like there was a _lot_ of talk about sizing _everything_ using `rem` for accessiblity (that began back before most people knew about sizing anything with rem). And that this is what most people (including me) are doing -- using rem for all sizing. And what many design frameworks (bootstrap?) have and are doing. It's making me think the standard advice should be as in OP instead, rem for text, px for everything else. And of course to maximize accessibility benfits you then need to actually test under text-scaling (on small screens), but to begin with (and avoid the need for a huge refactor later), it seems like you should start with `px` for grid spacing etc, contrary to much current common conventional wisdom?

peter_l_downs 2y ago
I'd never heard of this approach before and I can't think of any downsides. I'll probably start using this with my new work.

llimos 2y ago

> extremely impossible seriously?

mmkos 2y ago
Nitpicky, but I admit I stopped there for a second too.. like how did it get past even a half assed editorial review

sarahrod 2y ago

[dead]

LimeLimestone 2y ago

I used WAVE browser addon on the Airbnb website and it showed 37 errors, 1 contrast error and 98 alerts. And they want to talk about accessibility? Accessibility aside, their website is an unusable, resource-hogging mess which doesn't even use proper cursor pointers for <a> tags and tries to mess with my scroll.

sotix 2y ago

Apple’s own webpage[0] doesn’t properly resize text on my iPad using safari with the text set to 125%. [0]: https://www.apple.com/shop/buy-ipad/ipad-pro https://www.apple.com/shop/buy-ipad/ipad-pro