13 replies

1. Thomas Kräftner 1 min later

   @zachleat Wait, how can this ever work? Doesn't that resolve to different fonts depending on browser, OS etc?

   1. Zach Leatherman 6 min later

      @kraftner ha—the browser would need to ship a different metric-compatible version sans-serif for *every* possible fallback 😅

      1. Thomas Kräftner 31 min later

         @zachleat That would already be a lot. Also in most browsers this seems to potentially be a user choice... 😬
         I'd now like to revise my answer from 0% to 100%. 😂

2. your auntifa liza 🇵🇷 🦛 🦦 18 min later

   why is this necessary?

   been developing with web techs since the 1990s (yes, literally since i got hold of Mosaic sometime in 1994-1995) because am dyslexic and have spent an inordinate amount of decades finding the right combination of fonts and css to attend to my dyslexia needs.

   i wouldn't care from that perspective given i change all my browsers and create very intentional CSS themes for my web projects, but it would irritate me with the random browser i couldn't control

   @zachleat

   1. Zach Leatherman 34 min later

      @blogdiva are you asking why metric-compatibility is a necessity? I’d bet there are a lot of web sites that rely on fixed sizing of default fonts

      1. your auntifa liza 🇵🇷 🦛 🦦 55 min later

         @zachleat had to re-read your ¿? and, yup, read it backwards. sorry about that. my dyslexia swaps whole words. misunderstood it as sans-serif the default and changing it to serif.

         been changing fonts for so long, didn't remember serif is the default. back in the day, screen dottiness made it hard for me to read most serif body.

         there's another reason for my hating serifs for body: 16px is too small. ligatures blend at that size. i prefer serifs for headings, sidebars, even emphasis.

3. webbureaucrat 46 min later

   @zachleat I clicked your code pen and got four of the same font—all sans serif.

   I'm on Firefox Nightly for Android.

   1. Zach Leatherman 51 min later

      @webbureaucrat that means your fallback is already sans-serif! I pushed a change to make the test more explicit for you

4. Cole Peters 49 min later

   @zachleat I'm curious about the ‘breaking the web’ part. `serif` and `sans-serif` are fallbacks for otherwise unstyled text, so… what would there be to break? 🤓

   1. Zach Leatherman 53 min later

      @colepeters if a web site relied on the fallback as serif, it could potentially break if the default changed to sans-serif (especially since sans-serif seems to be wider)

      1. Cole Peters 1 hr later

         @zachleat I suppose if a layout was strictly dependent on the specific fallback's metrics? But even then, that layout would only be 'not broken' on platforms that made that specific fallback available 😅 (I realize this is all hypothetical and I don't have a strong opinion on it changing, just wanted to understand your point better)

         1. Zach Leatherman 1 hr later

            @colepeters I’m not sure we’re quite connecting on the point

            If a serif label on a navigation menu suddenly changed to sans-serif, the assumptions about the dimensions at which it was coded (especially for responsive design breakpoints or text overflow) would change. Of course this would only impact sites that did not have font-family application styles but that’s certainly more than zero and would still count as breaking the web

5. Rasmus Kaj 🎼🦀 2 hr later

   @zachleat
   Big nope. Sites that relies on font metrics keeping the same has allways been broken on every computer except possibly on the specific client / version / desktop / settings the developer / tester has used.