30

I am new to web development and I learned that it's important to make your website accessible to everyone. Why doesn't Stack Overflow, the place where most people go for web development questions, adjust its font size to the user's browser defined font size?

The font is quite small, and I imagine people with impaired eyesight are having problems using the site.

5
  • 1
    Just checked: Font size support seems spotty at best, over the (many) different sites I have open at the moment. I imagine there's a design-related reason that supporting that is tricky.
    – Cerbrus
    Sep 9, 2021 at 9:11
  • 12
    Looks like you're using Windows. Hold down the Ctrl key and press +. Repeatedly if necessary, Ctrl-- if you overshoot. Sep 9, 2021 at 9:25
  • 1
    This very recent video on the subject is an interesting watch, it definitely put things in perspective for me: youtube.com/watch?v=wARbgs5Fmuw . (It's a Kevin Powell video, my personal goto for CSS stuff)
    – Gimby
    Sep 9, 2021 at 12:24
  • @HereticMonkey: Being in the state of needing it, I can absolutely say it's a better answer than trying to support the font size thing. The moment you use any spritesheets at all, zooming simply works better.
    – Joshua
    Sep 9, 2021 at 17:37
  • Probably for a similar reason to why they adjust the font to the system font and not the browser font. (though... I don't exactly understand that reason either.)
    – Kevin B
    Sep 9, 2021 at 18:06

3 Answers 3

13

Stack Overflow responds well to zooming (which is what @HansPassant's comment was about), which is what some people with impaired eyesight use. I would expect those with impaired eyesight use something tied to the OS that makes everything in the display larger, rather than the just the font size that is specific to web sites (in that specific browser). If they don't use an OS-provided facility, they'd have a hard time reading the titles on their browser tabs or text on their menus and things of that nature.

Now, that's not to say Stack shouldn't support users' font-size settings, but I think there's more to it than just "they must support every possible method users could use to support their accessibility needs". There are always trade-offs.

3
  • 3
    The zoom function in modern browsers is so good, I'm surprised that Firefox and Chrome let the user set a preference for a font size (and maybe other browsers too). The zoom feature pretty much always works as you expect, but the preference for a default font size only works on websites that aren't accidentally incompatible with it. I would appreciate input from someone who's knowledgeable in accessibility.
    – Flimm
    Sep 10, 2021 at 16:37
  • If I follow SO's suit and go with zoom support over font-size support, wouldn't I have to go back to using px instead of using the recommended rem? Or is there a way to use rem units without resizing based on browser font-size?
    – user15036136
    Sep 13, 2021 at 12:35
  • You can still use rem; it is relative to the font size set at the root level of the document. You just set the font-size at the root level of the document; :root, html { font-size: 16px; } or whatever you want. Sep 13, 2021 at 12:39
10

I think it's related to recent decision to switch to system fonts, see "Why?" section (bold mine):

Mark Otto put it really well on his personal blog, documenting GitHub’s rationale for switching. Like GitHub, our original font stack used [..]

So basically, they (hehe) copied solution from StackOverflow GitHub. From Mark Otto's post:

Larger base font-size for all pages, moving from 13px to 14px.

But, as you can see, no one realized that GitHub's solution is already 3 years old and may require some revision.

Setting font sizes in px is decades old and if you google why font size in px is bad you can get an idea why.

Font size in px in action on SO applied to post paragraphs: enter image description here

Ironically, related question on SO, where's accepted answer is dated 2012: TL;DR: use px. (are you sure, chief?).

10
  • 3
    And of course the question is closed as opinion-based. Voters read "Which should I use?" and go straight for the close link.
    – CodeCaster
    Sep 10, 2021 at 7:18
  • 3
    @CodeCaster Might be a question worth reopening IMO, but that should probably be a different meta question.
    – MegaIng
    Sep 10, 2021 at 7:44
  • 1
    “But, as you can see, no one realized that GitHub's solution is already 3 years old and may require some revision.” Could you please elaborate? I don't think that Stack Overflow followed GitHub blindly and didn't think about the pros and cons.
    – A.L
    Sep 10, 2021 at 10:23
  • @A.L I would say mistake was not follow GitHub, but follow only GitHub, it is a very very bad, in all not related to this question situations
    – Kos
    Sep 10, 2021 at 10:27
  • I checked the CSS of the current page and some texts uses rem. Maybe the text “13px to 14px” refers to the result on screen, not the units used in CSS stylesheets.
    – A.L
    Sep 10, 2021 at 10:35
  • @A.L Really, where they use rem? On newly designed pages, I guess. It's not what OP was complaining about clearly. Anyway, there always better solution then just relying on website creators for taking care of fonts, right?
    – Kos
    Sep 10, 2021 at 12:06
  • I'm not sure to understand the point of that answer. Does using px units prevent the browsers from zooming? In the screenshot, we can see that 100% replaces the other px rules, is there a better example?
    – A.L
    Sep 10, 2021 at 12:16
  • 1
    @A.L it prevents system font size to be applied, but it doesn't prevent zooming, as it doesn't prevent moving your monitor closed to your face
    – Kos
    Sep 10, 2021 at 12:24
  • This answer seems to just be a furtherance of the question's complaint, rather than an answer per se. I say that knowing full well that my answer does not answer the question fully either, but at least I offer some reasons as to why Stack Overflow may feel that they have "done enough" in regards to font size. Sep 10, 2021 at 12:26
  • @HereticMonkey well, I focused on OP being new to web development and may not know that there such thing as px font size, then my answer should help to understand how web worked back in 2010s, and that modern practices are sometimes applied slowly. I have not intended to offence any of SO decisions regarding readability options.
    – Kos
    Sep 10, 2021 at 12:38
1

Chrome has two font size properties:

Image showing the two settings in Chrome

The first, "Font Size" is the font size to be used when a website does not specify any. This property is not intended for accessibility, but just a personal preference. Stack Overflow specifies a font size so this property does not apply.

The second property "Minimum font size" will override a website's font size settings. Stack Overflow respects this setting just fine.

You must log in to answer this question.