font-family recommendations
64 points by runxiyu
64 points by runxiyu
As you may note, this is a draft, quite incomplete, got bits and pieces in two or three different shapes, bit of a mess. It’ll probably end up more than one page, in quite a different form, possibly at least partly hand-written/-drawn/-laid-out (it’s really liberating! try it!).
But for now I’ve been focusing on the implementation of my lightweight markup language instead; it’s just about usable now, probably even less than one last 90% left. Then I’ll get back to writing and publishing more.
Ugly bit of browser history which doesn’t seem to be documented in any spec I can find, but everyone that old remembers.
If you use
font-family: monospace;(explicitly or implicitly),font-sizewill probably default to 81.25% instead of 100%. (Users can change the generic fonts, the base font size, and the base monospace font size.)If there’s a second family in the list, this doesn’t happen; so
font-family: my-web-font, monospace;is fine, andfont-family: monospace, monospace;is fine.
This is a really interesting tidbit. I can confirm that it isn't currently documented on MDN (unless my searching is bad). Does anyone have an explanation for why this happened and/or why isn't it documented?
From what I remember, Firefox doesn't actually do the font-size thing, but Chrome does. So it's also a source of inconsistency between browsers.
Fifteen years ago there were major inconsistencies between engines, but if I remember correctly (sorry, no link, I’d need to find it again) something like a decade ago they settled on a consistent behaviour.
One guess for why it happens is maybe to ensure that the monospace text looks the same size visually as the body text?
For https://lindenii.org I’ve taken the solution of simply not specifying a font-family at all, and respect whatever default font the user chose on their user agent. I prefer sans-serif. But if the user uses a serif default, I don’t see a good reason to override it.
Unfortunately this kinda breaks down for https://runxiyu.org/soc/ta/ where I’m using characters that the vast majority of typefaces do not have. Hence, I included web fonts that have them:
@font-face {
font-family: "PlangothicFallback";
src: url("/fonts/PlangothicP1-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "PlangothicFallback";
src: url("/fonts/PlangothicP2-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
html {
font-family: sans-serif, "PlangothicFallback";
}
Which forces the rest of the text to sans-serif instead of the user’s default. I'm not sure if there’s a better way to do this, short of wrapping every unusual character in <unusual-character> or such.
I wish there was a way to specify something like “the user’s preferred font for code”.
Thanks a lot for the “monospace, monospace” trick! The sizing did confuse me quite a bit.
About point 2, would it be a good fallback to have a image next to those more unusual characters? That's what those sites that list unicode characters do.
I do similar thing on my blog (https://hauleth.dev), but I use monospace. I heard some praise about the site design, but it is just adopted one of the Zola themes (I have reduced amount of CSS, custom CSS and stuff).
So I pretty much feel the article, especially for personal pages.
I’m personally not a huge fan of forcing prose to be monospace, to be honest…
TBH it is purely aesthetic choice. I assume that most readers will probably use reader view or some Feed reader that will format it for them. That is why I try to test how website looks and works using these views as well.
“Please don’t use monospace for body text” is on my list of things to write (though it probably won’t go on this page itself).
Monospaced fonts are terrible for long-form reading.
Honestly, they’re probably bad for code too. I really want to try ditching monospace for editor and preferably terminal, but I’d need to either implement a radically different terminal (which I’d very much like to do, but it’s currently at least five years down my fifty-year-long prioritised mental TODO list), or move away from Vim.
One of the interesting things with Stroustrup's C++ book from way back, was that he decided that the code listings would not be in monospace....
Honestly, they’re probably bad for code too
Why?
The Monaspace page with its texture healing section and the section on Input by DJR explain this in detail.
A monospace grid assigns equal width to all characters so "i" and "m" get the same width, even if that doesn't make sense. The alphabet "i" should get lesser width and the alphabet "m" should get more. When writing text in markup languages, there's no reason to use monospace fonts at all but if people write markup text in their IDEs and text editors (including myself) which only support monospace fonts, they lose the ability to read and write text in proportional fonts.
It’s well-established that for long-form reading proportional fonts are significantly better than monospaced. I don’t see any reason to expect code to be different, beyond familiarity.
mlterm is a terminal with proportional font support, I once gave it a shot with vim. I generally found that because spaces are so much narrower than letters, the UI ends up really broken in an unpleasant way.
VSCode and Emacs both support proportional fonts, I've taken to using a duospace font (iA Writer Duo or a custom Iosevka Extension-only build) for code, which I quite like.
I'd be very curious regarding your journey on this.
Also cf. https://ecs.d2evs.net/posts/2024-05-27-terminals-bad.gmi
I also haven't found a satisfactory text editor with support for proportional fonts, though a wayland port of acme might come close. Currently using gram though.
On “don’t specify font-family at all”: I suspect it might actually be better for users if browsers changed their default default font from serif to sans-serif. You must admit that the overwhelming majority of users don’t choose their own fonts, and so there’s no way to distinguish between “user’s chosen fonts” and “browser’s default fonts”. I like serif, but I suspect most would actually prefer sans-serif these days.
I’m sure you’d love how your website appears for me: not only do I not let pages specify fonts, I don’t even have any proper CJK fonts installed, because I figured a box saying “4E2D” meant just as much to me as the ideograph! But for that kind of fallback font—nice job. Unfortunately no, there’s no way of naming the default font. You can, however, work it out with JavaScript: in a blank document, getComputedStyle(document.documentElement).fontFamily is "serif" or "sans-serif" depending on my advanced font configuration.
What exactly do you mean? You’re clearly thinking of something other than monospace.
[I do] not let pages specify fonts
I used to be the same way, but some sites use a web font to render buttons and other small UI elements, and it was a lot of work to learn how to navigate without those small visual aids.
I usually use either the sans-serif Go font, or Inter with the ss02 opentype feature (stylistic set for disambiguiation), for code, and I'd prefer some way of specifying “the user’s preferred font for code”...
I don't want to override “monospace” with it, since there are legitimate reasons to use monospace otherwise (e.g., ASCII-art)
I don’t even have any proper CJK fonts installed, because I figured a box saying “4E2D” meant just as much to me as the ideograph!
Surely seeing the actual glyphs would make it easier to know if something is in Chinese or Korean than reading 4E2D or C1D2. This might be relevant to what you're reading from time to time.
I can’t think when I last interacted with text where the difference between C, J and K mattered to me.
I disagree with "stop enumerating fonts that the system might have installed" but the examples are OK, so this is unclear if the author only wants one system font or is OK with "non-random" font stacks.
With Windows, macOS and Linux, plus iOS and Android, you might end up with one alternative per OS. For example, for headings, I use:
--lf-font-heading:
PrettyAmpersand, Bahnschrift /* Windows 10+ */,
"DIN Alternate" /* MacOS/iOS */, "Nimbus Sans Narrow" /* Linux */,
sans-serif-condensed /* Android */, sans-serif;
Modern Font Stacks helps to build such font stacks.
I also disagree with the "stop enumerating possible system fonts" take. I like and use the Modern Font Stacks approach, which lets you suggest basically finer-grained font categories than the generic families, as a hint towards preferred presentation. Within sans-serif fonts, for example, there's a big difference between humanist and neo-grotesque fonts. They always use a generic family for a fallback, so they are never worse than using a generic family, and they are usually better.
The one thing stopping me from using only serif and sans-serif is that the default serif font is often the in my opinion not-so-great Times. I'm actually moving from serif to sans-serif for main text because of this.
Like some people, I was also kinda advocating for not using anything but the default many years ago, but apparently now I am very, very unhappy how Times looks and I'd rather see a mildly bad font than no styling. Shame, but that's just how emotional reactions work.
Unfortunately the default monospace for way too many devices is the obscenely inaccessible Courier New: https://news.ycombinator.com/item?id=47208088. It looks acceptable on print, but not on displays.
It's very hard to replace it completely, and I went to lengths to do that in a non-hacky way. Finally, I've renamed some other font, and just dropped it in my accounts` font directory.
The tip with disabling custom website fonts would be incredible, if it weren't for <censored> who use fonts to deliver graphical button labels, instead of reaching for SVG.
I believe Firefox was the last holdout on Courier New, and it switched to Consolas four years ago.
Oh, TIL. I'll keep my hack though, Courier New has still impact big enough that it's hardcoded in many sites' font stacks. Defaults matter, and that was one for far too long.
I think if I were still on Windows, I’d have just deleted the file from C:\Windows\Fonts!
I know it says it is a draft, but there is some really strange repetition going on in this post where the author just copy/pastes one of the sections a second time. It probably bothers me the most because it implied my favorite monospace font sucks.
Parts of incomplete restructuring. Read it carefully and there’s even mild contradiction where I’m still sorting out which things to consider firm recommendations and whether actually a more nuanced take is unfortunately justified.
What is your favourite monospace font?
Yeah, I caught that as well. Again, I know it is a draft, but I feel like the completely duplicated text should have been something you'd catch before sharing in a post. Also since you asked, Liberation Mono is still my favorite monospace font even after trying probably hundreds of fonts. I also would never put that in my CSS styling, I agree with most of your general premises in the post.
Neat post – I didn’t know the monospace, monospace thing at all!
Minor formatting nitpick: in my browser, the text of .unimportant paragraphs goes in front of the yellow background but behind the text of the sticky .status bar, so it looks weird when you scroll past an .unimportant passage. Something similar also appears to be going on with the diagonal DRAFT watermark.
Well, those days have passed. Browser defaults are all better now.
Funny how the author assumes I have updated all my pages in the last 25 years.
Jokes aside, most of it sounds reasonable, except that I don't like the tone of telling people what to do, but I like some of the explanations and I'm probably gonna even implement some of that stuff. For example I found a stray system-ui that is probably a copy/paste remainder of some earlier CSS framework shenanigans.
But personal websites often don't have thousands of visitors and if I can reasonably assume that I visit mine more often than other, I'd rather prefer to have a font I like. ;)
I'd rather prefer to have a font I like.
Then set your preferred fonts in your browser! Better still, stop letting pages override your font choices, and enjoy your preferred fonts everywhere!
But part of the fun is discovering what choices other people have made. :)
Maybe I'm odd in the way of not styling everything the same way. People regularly tell me it's nuts that I operate the same software with different color schemes (e.g. my IRC client is light on dark on some machines and dark on light on others, if I use 2 different Discord or Slack accounts, one is dark mode and one is light mode)
re: "Stop enumerating fonts that the system might have installed" and "Strongly consider using only a generic family, even for monospace", I have the following for my website:
:root {
--sans-serif: Adwaita Sans, Adwaita Sans Bundled, Inter, sans-serif;
--monospace: Iosevka, Iosevka Web, Cascadia Code, monospace;
}
and my thinking was:
similarly for monospace:
monospace on Windows and is terrible, and new Windows versions have Cascadia Code installed).what do you think of this @chrismorgan (apart from Cascadia Code being very different from Iosevka in metrics, this is bad yes)
since I have basically zero web programming knowledge I suspect I might be missing a nicer way to specify "download font only if not installed on the system"
Really useful article, even if it is a draft! Just checked my site and I was using system-ui in my fallback fonts, removed it now.
Relaying for sls on IRC: Atkinson Hyperlegible https://www.brailleinstitute.org/freefont/ (I had also read about this in the past, but I've not tried it)