49 replies

1. Matt Steele 5 min later

   @zachleat is `fantasy` not an option?

   1. Zach Leatherman 12 min later

      @mattdsteele `fantasy` is a collective hallucination, like the american dream or a fast react web site

      1. Michal Bryxí 🌱 6 hr later

         @zachleat That's an instant follow 😂

         1. Zach Leatherman 1 day later

            @MichalBryxi 🙌🏻🙌🏻🙌🏻

2. Zach Leatherman 10 min later

   for this to happen without breaking the web they’d need to use a sans-serif metric-compatible version of `serif` (`sans-serif` is not this)

   https://codepen.io/zachleat/pen/MWMgBNj

   1. Thomas Kräftner 12 min later

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

      1. Zach Leatherman 16 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 42 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 🇵🇷 🦛 🦦 29 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 45 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 🇵🇷 🦛 🦦 1 hr 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 57 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 1 hr 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 1 hr 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 1 hr 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 🎼🦀 3 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.

3. Axel Rauschmayer 11 min later

   @zachleat I much prefer serif fonts. I find them easier to read (Al vs. AI etc.) and we now have high-resolution displays everywhere so that they always look good.

   My impression is that sans-serif fonts were a trend a while ago but that seems to be changing.

   1. Zach Leatherman 14 min later

      @rauschma serifs are still dominating most long-form reading so surely there’s some truth to that

      1. Axel Rauschmayer 30 min later

         @zachleat Genuinely curious where things will go in the future—ATM sans-serif fonts still dominate user interfaces.

         I personally like Palatino: https://exploringjs.com/js/book/ch_new-javascript-features.html#ch_new-javascript-features

         1. Zach Leatherman 47 min later

            @rauschma your web site genuinely has a great and unique typeface brand to it!

            Now I’m curious to look into monospace serif fonts for code—are those a thing?

            1. Axel Rauschmayer 1 hr later

               @zachleat
               “Serif fonts for coding” by @george
               https://www.georgeho.org/fonts-for-coding/

               – Could also work as a coding font: https://fonts.google.com/specimen/Courier+Prime
               – Interestingly, even sans-serif coding fonts tend to add serifs to (e.g.): 1, I, l

               1. CJ Dunn 12 hr later

                  @zachleat @george @rauschma
                  My favorite serif typeface for coding is Input Serif by @djrrb
                  https://input.djr.com

                  1. Marek ‘saji’ 1 day later

                     @cjtype @zachleat @george @rauschma @djrrb I've been using Iosevka for years
                     https://typeof.net/Iosevka/customizer

            2. data0 3 hr later

               @zachleat @rauschma I'm a big fan of "Go Mono" for code https://go.dev/blog/go-fonts

               1. Zach Leatherman 3 hr later

                  @data0 @rauschma that’s how you know your language has made it—it has its own typeface

4. Christopher Kirk-Nielsen 13 min later

   @zachleat Yes, but counterpoint: how else would I know my CSS it totally borked?

   (I actually have noticed a font failing to load thanks to this in a recent project, so I'm only half joking)

   1. Zach Leatherman 17 min later

      @chriskirknielsen hah! Countercounterpoint your CSS is never borked if you use serif

5. Liam Newmarch 36 min later

   @zachleat make it system-ui and you’ve got yourself a deal

   1. Zach Leatherman 47 min later

      @liamnewmarch now we’re talking

6. Amelia Bellamy-Royds 37 min later

   @zachleat Why wait? You can make your default font MS Comic Sans now!

   (This also means: If any websites break when a browser changes the default fallback font, they are already broken for any users who are fussy about typography.)

   1. Zach Leatherman 48 min later

      @AmeliaBR this seems like a good time to me

7. prozacchiwawa 39 min later

   @zachleat the ugly default font tells me what i havent styled yet

8. Jason O'Neil 41 min later

   @zachleat I have my default browser set to comic sans as a way of noticing if I’ve accidentally left something on the page unstyled. Always amusing when you double take on a big famous website with some comic sans.

   All of which to say, changing to a sans fonts in general I’m fine with, but sans-serif itself seems a little not-fun-enough, don’t you think?

9. Jay 🆘 1 hr later

   @zachleat Every historical website and HTML document that didn’t specify a font would look different from the way it did when it was authored. I don’t like that idea.

   Plus, as in vogue as sans-serifs are, serifs are still better for reading long text (for most people).

   Is there a good reason to do this? Is it just because sans-serifs are cool? Might as well make browsers default to white text on black since everybody’s also obsessed with dark mode these days.

   1. Jay 🆘 1 hr later

      @zachleat If browsers chose defaults based on what’s trendy, they would have changed their default font size to 9px in the mid 2000s.

      1. Zach Leatherman 1 hr later

         @jsit for the record I would vote 100%—just a curious poll to see what other folks think 😅

10. Egor Kloos 1 hr later

    @zachleat I wouldn't be upset, but it is a (visual) breaking change. Why would browsers do that? Same if they change the default serif font itself.

    1. Zach Leatherman 1 hr later

       @dutchcelt I would assume that they wouldn’t do it!

11. Pascal 3 hr later

    @zachleat lol at the concept of “50% upset”

    1. Zach Leatherman 3 hr later

       @pascal I was a little proud at what I felt like was a novel polling method, thank you 😅

12. L. David Baron 6 hr later

    @zachleat These currently vary by script (Latin, Cyrillic, Greek, Arabic, Hebrew, etc.) See example of Firefox defaults at https://searchfox.org/mozilla-central/rev/4e0f4c612589c23344f22285520a44a3f45c9e6e/modules/libpref/init/all.js#2009-2155

    1. Zach Leatherman 6 hr later

       @dbaron Wild—I think I only see 3 variations in that giant list but the combinatorics here are quickly getting out of control

       1. L. David Baron 6 hr later

          @zachleat For what it's worth, I'm not sure whether Chromium or WebKit do the same...

13. Private reply 23 hr later
14. bkardell 1 day later

    @zachleat Better...

    1. Lindsay Evans 1 day later

       @bkardell @zachleat font-family: zinger; // 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive

15. niu tech 1 day later

    @zachleat Sans-serif font should be default in web browsers, to be consistent with system GUI fonts, which are always san-serif. Serif fonts such as Times New Roman are better suited for print rather than for display on websites.