Hacker News Reader

Comment by kevincox | Hacker News Reader

> Originally this website's font-family simply requested monospace. This approach resulted in varying reading experience depending on the OS. Windows browsers got Consolas, Linux users got DejaVu Sans Mono, and macOS people got Courier.

I find it so sad that our browsers have such bad default fonts that all websites feel the need to override them to get an acceptable look. It would be great if browsers had decent defaults for both the overall default as well as serf, sans-serif and monospace so that most websites who aren't worried about font branding can just stick with the default and users can get a good fond, or even their preferred font if they bothered to customize it.

View on HN

This is what you get when you prioritize companies over users.

There's no reason websites should even be able to set the font in my browser.

If it was just about websites achieving an acceptable look, you'd see people emulating industry leaders, but that's not what you see. Google, for example, uses Arial on its main page on my browsers at least--that's a font that's available on every browser I know of. If it's acceptable for Google, it seems like it's just acceptable in general.

Instead, the fonts being loaded are about websites achieving their own brand. I've built a lot of web frontends, and every time I get a rebrand contract, the designs I get contain a bunch of fonts.

As a user, I don't give a fuck about your brand. Being able to read your fonts clearly is a much higher priority for me than experiencing your brand. Fundamentally there's no reason at all that sites should be able to decide for me what font I read. I am lucky to have fairly good eyesight and no serious processing disorders, but users who have these issues are seriously negatively effected by sites overriding their browser defaults. And since few projects are given adequate accessibility budget, users are left with no recourse. Overriding a website's fonts with your browser settings doesn't really help, because sites often use pixels and other dimension units that make your site unreadable if you use a different font than what they tested with.

If you bought a magazine you don't get to choose the fonts either.

That's a limitation of the physical medium, not something we should aspire to.

User defined styles trump those defined in a website stylesheet. You can absolutely insist that all websites use whatever font you want.

As I said, "Overriding a website's fonts with your browser settings doesn't really help, because sites often use pixels and other dimension units that make your site unreadable if you use a different font than what they tested with."

Of course that can also be fixed, but there's only so far you can take this. I have the technical ability to edit CSS, but I don't reasonably have the time to do it for every site I visit.

Firefox: Settings → Fonts → Advanced → untick Allow pages to choose their own fonts, instead of your selections above. It’ll still load web fonts for Private Use Area code points (icon fonts) and Google’s misbegotten Material Icons with its awful ASCII + ligation technique (see the browser.display.use_document_fonts.icon_font_allowlist pref in about:config), but other than that will stick with your preferred fonts.

I tried this as a two-week experiment a year ago. I’ve never gone back, it improves the web so much.

(Well, actually I also block web font downloading altogether, for no particularly good reason, at the cost of icon fonts and Material Icons breakage, but it doesn’t often matter.)

Same here, my Firefox has disabled "allow pages to use choose their own fonts" for ages. I do use Stylus to override a bunch of fonts/sizes in various sites too.

Sure. But this isn't a viable solution for a lot of people.

Why not? Are you saying “because a lot of people don’t use Firefox”, or because of some problem you perceive in turning off custom fonts?

Open chess.com or lichess.org with that checkbox ticked off. You won't be able to play.

This is completely false. Both use images for the board and pieces, so you can play just fine.

Both do use icon fonts for some of their additional controls on the right hand side, but they all have tooltips so that you can identify them even without the icons. Chess.com uses a bad icon font that uses non-PUA code points (e.g. V = New Game, , = Move Back, … = Move Forward, g = Show Hint), so those ones will be broken. lichess.org uses PUA code points (except for “½” for “Offer draw”), so I think that those icons would even be loaded if you weren’t like me in just blocking web fonts outright.

Because a lot of people don't have the technical ability. The tab is called "Advanced" for a reason.

It quickly gets more complicated for some sites, which users might use often. There are folks talking about how you can use custom CSS to fix just about any site, and that's true, but how technical are we expecting users to be?

And even as a user who develops websites for a living and can definitely do all this, I don't want to. The web should be designed to work for users by default. I shouldn't have to fix websites to use them.

> Because a lot of people don't have the technical ability. The tab is called "Advanced" for a reason.

Come now, it doesn’t take any technical ability to use the checkbox. It’s called “Advanced” because it’s more complex tweaks that most people aren’t interested in and which take a moderate amount of space so they want to keep it out of the way lest the page get too long, not because it’s hard to use in any way.

> It quickly gets more complicated for some sites, which users might use often.

It is rare for this to have any ill effect on any site (icon fonts that don’t use the PUA and aren’t Material Icons (for which Firefox has manual exceptions in place) are about the only case, and they’re distinctly rare nowadays—I only recall encountering about two cases last year, both of which were paired with labels and thus unimportant), and in those rare cases it’s unusual for it to be a real problem (they’ll almost always have labels or tooltips).

I will quite happily recommend changing this setting to completely untechnical users. It occasionally causes very mild harm, and can theoretically cause great harm for particular sites (but I haven’t found such a site for years, and any such sites were surely already broken anyway), but the rest of the time it improves matters markedly.

> Come now, it doesn’t take any technical ability to use the checkbox.

It's clear that you don't interact with average users very often if you think this.

Obviously you can direct the user through to the steps to check/uncheck a textbox, but understanding what that checkbox actually does and why they might want to check/uncheck it is far beyond the technical understanding of most users.

It's well past time for browsers' reader modes to be the default experience for unstyled pages. The arguments for not doing this—and keeping a single set of user agent style sheets containing rules that have to match how unstyled pages looked in the 90s—come from a place of good intentions, but are ultimately poorly reasoned and result in one of the worst forms of stop energy. (The strongest argument against is: "my browser's reader mode is worse than the unstyled page", which I sometimes agree with, but is still not a very good argument at all. It's solved by fixing the reader mode itself to be less bad.)

> even their preferred font if they bothered to customize it.

Felt. I actually do adjust my user agent fonts and system fonts, and I hate it when these "system UI font stacks" aren't just "sans-serif" and I end up with Arial or Ubuntu because some guru said this is how you do it. Especially irksome though is the monospace fonts--either Courier New (which hints way too thin to be readable on my main display) or using some hard-to-decipher custom font that abuses ligatures.

At least on linux, it's not the browser that picks the font used for "monospace" but part of fontconfig. I've reconfigured my fontconfig to use a different font for monospace.

At least on Firefox it is both. By default it uses raw fontconfig for default, serif, sans-serif and monospace. But it uses an override for emoji fonts. You can also explicitly override these in the preferences and then it doesn't consult fontconfig (or probably consults it with a precise font name).

But yes, I have seen decent browser fonts for most Linux distros.

Consolas is not bad. DejaVu is not bad. Only Courier/Courier New are so bad as to be unusable, it seems Apple wants to push web developers to use font overrides.

It is a bit odd that "monospace" in a mac browser gets you Courier/Courier New, because macOS has come standard with Menlo for ages and Monaco since the OS 9 days, both of which are excellent monospace fonts that are far and away better than either Courier. Even weirder, outside of browsers requesting a monospace font will get you Menlo.

Newer releases also have San Francisco Mono that it could use instead, which is even better since it's tuned for modern displays.

Apple is notorious for wanting to push people away from portable and easy-to-use web applications to non-portable, expensive to develop, and frequently worse mobile apps.

"Apple hates websites because I don't like Safari's default monospace font."

It’s more that they don’t put the high level of refinement into the web experience that they are famous for in their native (Mac/iOS) applications.

Though of course there are plenty of discontents with that. On balance I think the apps that ship with MacOS are much worse than their Windows counterparts. I think iOS on the iPad is truly superior but the settings app is dark pattern city, particularly the notification that never goes away about the Apple TV trial that is about to expire but actually expired years ago.

DejaVu is not a websafe font, meaning you cannot rely on it being available. Why we can't just require browsers to include DejaVu or another open font is another question - not like the size matters compared to all the other crap they ship. Heck, some even ship their own fonts already, but only for emojis.

Even having some defined meta fonts with rough metrics so that you could say font-face: monospace-standard or whatever and have the text be roughly the same size everywhere would save so much effort and wasted data.

> Why we can't just require browsers to include DejaVu or another open font is another question

Including a small set of open fonts does seem like a good idea. I'd like to see Inter UI[0] included because it's a very nice screen/UI-optimized font would serve a similar purpose as "system-ui" does now, except without some of the pitfalls[1] that comes with.

[0]: https://rsms.me/inter/ [1]: https://infinnie.github.io/blog/2017/systemui.html

As a Windows wizard, the first thing I do in any browser or text editor is change Consolas to Courier New.

I fucking can't stand Consolas, give me Courier New because that font is readable literally anywhere.

Ouch. It really does take all sorts.

Courier New is the most appalling piece of shit I've ever seen in my life. It's ugly at small sizes, jagged and unpleasant at medium sizes, and abhorrent at display sizes. WOW do I hate Courier. I hate it on Git Bash. I hate it in cmd, I hate that it exists. Consolas, by contrast, is lovely and beautifully-hinted at best, and inoffensive at worst.

Don’t lump Courier and Courier New together. Courier (which Apple includes) is fine; it’s only Courier New (which Windows includes) that’s atrociously light, because it was digitised very badly incorrectly. It actually used to be not so bad, because they kinda patched it to make it usable with hinting, and then special-cased it in ClearType, but those don’t really go far enough and aren’t consistently reliable anyway, so it’s just an awful font.

But no browser defaults to Courier New any more—Firefox on Windows was the last browser to finally update to a better font, just under a year ago (see https://bugzilla.mozilla.org/show_bug.cgi?id=1607913).

I noticed the web site has a downloadable font, which is fine as long as it's optional, the problem is that many web sites have the bad practice of using the private unicode range for icons. Now the web site has become an accessibility problem. Downloadable fonts are optional, and there is no fallback mechanism like we have with img and alt text.

I'll happily lump JavaScript in as a major accessibility concern. JS is most often used where it shouldn't (most recent in memory is the Unreal Engine docs). Using JS for such simple presentations is like building a 5000-story building to print a sheet of paper, when all you needed was the pre-printed sheet of paper (HTML, CSS).

https://www.figma.com/file/zQUSuJaUeIWStngFKgpgsz/Plato-Desi...

In my experience the default fonts on Apple devices are far and away the best fonts, period. They're better than almost every custom font, especially for readability.

I don't have an Apple device to test but does that mean that the author's point about the default `monospace` font "Courier New, is not legible" is out of date or just a rare opinion?

I think Courier is the only one of the fonts listed above that’s not sans-serif. The retro typewriter effect is not probably not what he wants for displaying a lot of prose in a modern context. I don’t think it’s actually illegible.

Depends on your use, in the screenplay world Courier is mandated as the required font and anything not written in it is immediately trashed.

Probably very subjective. I, for one, am still using Courier New as my main monospace font, especially for code, and actually prefer having typewriter-y "serifs". No other serif-y monospace I've found fitted.

I don't mind Consolas, and I like what is author using now (DejaVu Sans Mono), but their stance about varying reading experience depending on the OS makes me really, really devastated, because it just reflects a sad state of IT literacy and general adoption of basic philosophy of the web, which was built on premise that how content looks like depends both on author and user (through user agent) and fact that generic font family looks ugly is in other words defaults are bad combined with users have a bad taste and set bad default values.

As was said, we are supposed to express our preferences in (through) our (user) agent's preferences.

Most probably your browser will use four distinct fonts on this page, *all* of them (and more) you can define in your browser's or operating system's settings:

    data:text/html,<p lang="ja">iii<code>iii</code><p lang="en">iii<code>iii</code>

It's sad that it is not a general knowledge.

Fun fact: even though author have expressed a lot of opinions in their CSS, still for me the result is probably different from what they expected: since author does not define font colour, I see it in my default (not black but dark brown), plus paragraphs are slightly indented for me, since I limit their maximum width through userstyle. Funnily enough, background colour that author chose (and set, #F5F5F0) is nearly identical to my preferred background colour.

Authors defining background colour without defining text colour is the reason we cannot effectively have default dark background and light text default in our UAs, because in this case we would see authors (light) background and ours (light) text.

The Apple Color Emoji Font, the one you can't opt out of on Apple operating systems, is awful for readability. Pretty much inscrutable at small sizes.

They solution IMO is not to rely on default browser fonts but rather to pick a stack that’s available at the OS level.

On my site for example, I designed everything using Iowan as my main font because I know that it’s available on most Apple OS but then I manually picked a few fallback fonts that should be available on Windows, Android and the rest.

Default serif is just the last option if everything else doesn’t work.

Yes this! If I make websites as a blind person, I'd probably just have CSS give headings 20 PT font size, paragraphs line spacing 2, 16 PT. Something like that. But if browsers used good defaults I could just not worry about CSS and just go with plain HTML.

The bad fonts can be tweaked ever so slightly to remain eminently familiar and inviting, but slightly adjusted in positive ways.

It could be kerning, leading, default font size, all come together in very powerful ways before finding a very specific font to enhance the brand experience.

If we look at HN, the window we type a comment into continues to use a font when writing that can help induce more awareness of writing. Maybe it would be slightly different if it was a blinking square cursor. Or a slightly taller box.

Reply on news.ycombinator.com