1. 34

Not sure that I agree, but interesting nonetheless.

  1.  

  2. 16

    On behalf of old people and Linux users everywhere, I fully agree and look forward to the end of the scourge of tiny text.

    1. 16

      I browse Lobste.rs at 120% scale and Hacker News at 170%, but I know some people like the type small so that more of it fits onto one screen. The important part is that a site responds well to zoom or other text size adjustments, or at least works well under Reader View, so everyone can read the content in the way they’re most comfortable.

      1. 12

        Completely agreed. Making it flexible is more important than guessing what a particular set of users will find optimal.

        1. 4

          I do break the pixel-specified CSS here, so everything is relative to firefox’s 16px default and when I change that, it should change everywhere.

          body, textarea, input, button { font-size: 100%; }
          li .link a { font-size: 110%; }
          li .byline { font-size: 90%; }
          

          While I’m mentioning ✨lobste.rs modding✨, I also shuffle things around and space them evenly when previews are enabled:

          // If story previews are enabled, set regular spacing and place byline below
          // title.
          if (document.querySelector('div.story_content')) {
            var sheet = document.createElement('style')
            sheet.innerHTML = "\
              ol.list li.story { height: 7.5em; } \
              li.story div.byline { color: #777; } \
              li.story div.byline a { color: #777; } \
              li.story div.story_content { color: #999; font-size: 95%; }"
            document.body.appendChild(sheet)
          
            var bylines = document.querySelectorAll('div.story_content + div.byline')
            for (var e of bylines) {
              e.parentNode.insertBefore(e, e.previousElementSibling)
            }
          }
          

          That all comes out like this

          1. 4

            Better have small text that’s easy for users to scale than large headlines that don’t wrap well and take ages to scroll through. In lots of ways, I think Lobste.rs and Hacker News do this best: text in simple divs, with straightforward constant sizing and no crazy wrapping techniques.

        2. 6

          Interestingly, reading that on my phone, I found the text to be uncomfortably big.

          1. 3

            I find 20px font sizes obnoxious on my Retina display. I almost always have to zoom out, I don’t know if I agree with this at all, at least for me.

              1. 3

                FWIW, desktop firefox also has reader view.

                1. 2

                  Firefox for Android as well.

                  1. 2

                    i might have to give firefox another look the next time i switch browsers.

              2. 6

                Profoundly agreed. I read lobste.rs at a 175% zoom. It would be completely unusable for me with anything smaller.

                It only gets a passing mention in this article, but a lot of sites are designed such that the layout completely breaks with any significant zoom factor. It’s disappointing.

                1. 3

                  Currently reading at 160% zoom myself.

                  1. 3

                    Reading at 100% zoom (with max-width turned off via inspector) and wouldn’t want it any larger FWIW. I tried 90% and that’s fine too.

                  2. 1

                    Even though I use a readability plugin for Hacker News, here I haven’t felt the need. Granted, the 10pt font here is small but it’s much more readable due to the light background. HN text has a medium grey background, which makes it hard to read.

                  3. 5

                    My personal sweet spot is 16-20px. However, I have realized that I won’t even notice text larger than that, so long as the content’s container is scaled appropriately.

                    Big text only feels “clunky” to me if
                    it causes you to fit significantly fewer
                    words on the line than I would usually
                    expect you to, because the container
                    is not scaled as well.

                    Most sites I have made in the last 3 years use either 18px or 16px for primary body copy. The deciding factor tends to be whether or not the majority of copy is long-form paragraphs (articles, technical explanations, so forth) or is on a brochure-style page with most “paragraphs” being one or two declarative sentences. Long-form paragraph copy leans toward 16px, brochure-like declarative chunks lean toward 18px.

                    Of course in the actual CSS it’s implemented as rems rather than raw px, because I value my sanity.

                    1. 3

                      Definitely agree on the container scaling/sizing. Rule of thumb from my university typography class was to have the font-size produce about 15-20 words per line for long form reading. Applicable to print as it is to the web!

                    2. 5

                      The problem is partly web browser defaults. I didn’t specify the font-size on my blog’s CSS and it turns out quite small.

                      1. 5

                        I wish the author talked more about how screen resolution affects the optimal text size. My monitor is 85 DPI, so the text of the article looks ludicrously huge and I had to zoom out. It seems a simple fact that users with lower DPI displays will need to zoom out and users with high DPI displays will need to zoom in, at least if you’re specifying text size in px.

                        1. 1

                          Text size should be specified in em.

                        2. 7

                          I configured my font size in the OS. It’s not too big or too small – unless a web designer overrides it.

                          If you don’t mess with font sizes, they’re going to be the size that the user wants them to be, neither too big nor too small.

                          1. 4

                            Unfortunately, this:

                            If you don’t mess with font sizes, they’re going to be the size that the user wants them to be

                            is almost always false. Most users will never adjust either OS or browser default font size.

                            Sane defaults could mitigate the problem, but unfortunately we’re in an intermediate stage between low-res and high-res screens where operating systems don’t have a good idea what information density is appropriate, to an extent they can’t have a good idea of that (e.g. I have in front of me right now screens ranging in resolution from 96ppi to 160ppi), and APIs and design aesthetic are still very beholden to a heavily pixel-focused recent past.

                          2. 2

                            Do you all find the text on angersock.com too big?

                            1. 4

                              No, but deep black together with bright yellow is a bit aggressive for MY taste.

                              1. 2

                                Agreed. Reminds me of the old black and orange monochrome monitors

                                1. 4

                                  That is what I was going for. :)

                                  Figured an amber implementation of a color scheme like on JWZs site.

                                  1. 1

                                    I actually prefer a similar color scheme for my terminal windows.

                                  2. 3
                                  3. 2

                                    I kinda like how it looks the other way around: https://www.spinda.net/files/black-on-orange.png

                                  4. 4

                                    No. I use 27" 2560x1440 on Linux w/ no scaling, seated 1.5-2 ft away. It’s about right IMO, but I wear glasses and have not-great vision. I have to use most websites at 125% or so.

                                    1. 1

                                      I have near-perfect vision and I think the font size is fine as well. :)

                                    2. 3

                                      It’s about right for me. The color scheme would keep me from reading for any long period of time (as would any light-on-dark scheme), but I could imagine reading an article or two like this.

                                      1. 2

                                        Piggybacking on your comment, but what do y'all think about the font size on my blog? Too big?

                                        1. 3

                                          Font looks fine. The header is far too tall though - takes up half the page on first load.

                                          1. 2

                                            I’d suggest that the combination of the font serifs, the varying spacing of the letters, and the overall weight of the font make it seem a little smeared out–if you don’t want to bump the size slightly.

                                            Then again, I’ve got terrible eyesight.

                                            1. 2

                                              Thanks for the feedback! I’ll see if I can improve that sometime this week. :)

                                          2. 2

                                            Not at all, on my iPhone 6. A touch on the small side. (Or perhaps it’s the letter spacing hat is too tight.)

                                            1. 2

                                              Client who’s site I’m working at appears to block your CSS, so your site looks perfect as far as I’m concerned.

                                              1. 1

                                                appears to block your CSS

                                                Just curious, what do you mean by that? The client’s site is affecting my CSS?

                                                1. 2

                                                  I mean I’m working at a client’s site (place of business) where their internet connection blocks some HTTP requests, including the one for angersock.com’s CSS.

                                                  1. 1

                                                    Ah, gotcha. Makes sense now :)

                                              2. 1

                                                I personally do, and the code sections are smaller so that if I scale down the page the code is too small. Just my 2¢.

                                              3. 2

                                                A large amount of the web will never change. Important sites (particularly academic sites that contain some of the most useful information) will continue to look like http://motherfuckingwebsite.com/ - whatever it is that site looks like.

                                                Let me talk about two possible futures. In future A, designers increase font sizes on new sites. Old sites have sizes around 16px, new sites follow this site’s advice and use larger-than-20px fonts. There are inconsistent text sizes all over the web; users get used to either reading text at different sizes, adjusting the zoom for the site they’re visiting, or just not visiting old sites any more. In future B, designers keep the font size around 12pt, and browser (and to a lesser extent OS) vendors ensure that their software displays sites with a body text around 12pt to look good.

                                                I know which I want. The big problem is that people foolishly think that appropriate scaling of fonts is a DPI issue. Browsers need to start displaying text at a size appropriate to the monitor it’s on; that doesn’t mean trying to always make 12pt be x mm, it means making an educated guess at the size that will be appropriate for the reader. In particular, someone using a larger monitor is likely sitting further back and wants larger text.

                                                Which brings me to the real problem: the browser vendors are asleep at the wheel. Default stylesheets haven’t changed in forever. I have no idea how to fix that, unfortunately.

                                                1. 1

                                                  I wish academic websites actually did look like that. Sadly, most of the good info is in PDFs instead of HTML.

                                                2. -1

                                                  What?