5 ms·

> Originally this website's font-family simply requested monospace. This approach resulted in varying reading experience depending on the OS. Windows browsers g

> 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.

qbasic_forever 4y ago
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.
- kevincox 4y ago
  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?
  - KerrAvon 4y ago
    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.
  - qbasic_forever 4y ago
    Depends on your use, in the screenplay world Courier is mandated as the required font and anything not written in it is immediately trashed.
  - myfonj 4y ago
    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.
    - myfonj 4y ago
      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.
- pxc 4y ago
  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.
webstrand 4y ago
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.
- kevincox 4y ago
  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.
LeifCarrotson 4y ago
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.
- kitsunesoba 4y ago
  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.
  - PaulHoule 4y ago
    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.
    - robertoandred 4y ago
      "Apple hates websites because I don't like Safari's default monospace font."
      - PaulHoule 4y ago
        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.
- account42 4y ago
toastal 4y ago
> 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.
deleted 4y ago
[deleted]
devinprater 4y ago
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.
cxr 4y ago
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.)
j45 4y ago
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.
manuelmoreale 4y ago
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.
xjay 4y ago
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).
- kevincox 4y ago
  https://www.figma.com/file/zQUSuJaUeIWStngFKgpgsz/Plato-Design-System?node-id=713%3A6850&t=mviqQkzpS6UWoPK1-4 https://www.figma.com/file/zQUSuJaUeIWStngFKgpgsz/Plato-Desi...
deleted 4y ago
[deleted]
kerkeslager 4y ago
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.
- hbn 4y ago
  If you bought a magazine you don't get to choose the fonts either.
  - xigoi 4y ago
    That's a limitation of the physical medium, not something we should aspire to.
- schwartzworld 4y ago
  User defined styles trump those defined in a website stylesheet. You can absolutely insist that all websites use whatever font you want.
  - kerkeslager 4y ago

qbasic_forever 4y ago

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.

kevincox 4y ago
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?
- KerrAvon 4y ago
  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.
- qbasic_forever 4y ago
  Depends on your use, in the screenplay world Courier is mandated as the required font and anything not written in it is immediately trashed.
- myfonj 4y ago
  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.
  - myfonj 4y ago
    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.
pxc 4y ago
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.

webstrand 4y ago

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.

kevincox 4y ago
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.

LeifCarrotson 4y ago

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.

kitsunesoba 4y ago
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.
- PaulHoule 4y ago
  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.
  - robertoandred 4y ago
    "Apple hates websites because I don't like Safari's default monospace font."
    - PaulHoule 4y ago
      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.
account42 4y ago

toastal 4y ago

> 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.

deleted 4y ago

[deleted]

devinprater 4y ago

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.

cxr 4y ago

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.)

j45 4y ago

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.

manuelmoreale 4y ago

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.

xjay 4y ago

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).

kevincox 4y ago
https://www.figma.com/file/zQUSuJaUeIWStngFKgpgsz/Plato-Design-System?node-id=713%3A6850&t=mviqQkzpS6UWoPK1-4 https://www.figma.com/file/zQUSuJaUeIWStngFKgpgsz/Plato-Desi...

deleted 4y ago

[deleted]

kerkeslager 4y ago

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.

hbn 4y ago
If you bought a magazine you don't get to choose the fonts either.
- xigoi 4y ago
  That's a limitation of the physical medium, not something we should aspire to.
schwartzworld 4y ago
User defined styles trump those defined in a website stylesheet. You can absolutely insist that all websites use whatever font you want.
- kerkeslager 4y ago