Something I never liked about this game is its showing it in your browser at your chosen font size.
Chrome (assuming you're using Chrome) draws it a specific way. This does not match how Freetype (using typical tuning) or DirectWrite draws it. Chrome's choices in font renderer tuning and blending makes it kind of split the difference between Windows-style and OSX-style, and isn't native to either.
What it should be doing is showing you lossless screenshots of actual in-app renders at different sizes. Some in Chrome (to represent the Electron apps), some in DirectWrite, some in OSX post-Retina, etc.
Some fonts look amazing at larger sizes, but are unreadable at smaller ones. Some perform exceptionally well at smaller sizes. Some look great on every font renderer but OSX's, but some only look right on OSX and look bad everywhere else.
I've sorta played this game with myself, in a semi-objective way: take a bunch of fonts, ignore the subjective art nature of them, and throw them at a bunch of common renderers and see what the optimal size is, and then sort by smallest legible size.
If we define Fira Code, the most popular code font out there, as the bare minimum, 8 of the ones I tested beat it, while 17 were worse.
Totally agree, the same fonts at the same pixel sizes often look massively different in different environments. I -love- macOS’ native font rendering, but have been unsuccessfull in emulating it on Linux :/
Freetype can render almost indistinguishably from OSX post-Retina.
Set FREETYPE_PROPERTIES="cff:no-stem-darkening=0 autofitter:no-stem-darkening=0", and then also enable (S)light hinting on LoDPI, or None on HiDPI. Also, disable subpixel and use greyscale only.
OSX looks the way it does because they use excessive stem darkening combined with incorrect gamma blending. GDI, WPF/UWP/WinUI, most ClearType/DirectWrite consumers, GTK, and most browsers also do incorrect gamma blending as well.
Qt is the exception. It enables stem darkening by default, but then uses correct gamma blending. Unfortunately, this is the objectively correct way of rendering, everyone else is doing it wrong.
The only thing you can't do is OSX gamma blends incorrectly for 1.8 on a 2.2-2.4 screen. Everyone else blends incorrectly for sRGB/2.2 on a 2.2-2.4 screen. Light on dark's obscene behavior on OSX shouldn't be replicated.
If you want the opposite, and make it look like Windows, force stem darkening off (use the above env, but set both to 1), and set hinting to Full to make it look like pre-Cleartype, or Medium to make it look like DirectWrite.
Going through this, I was introduced to <= being converted to a ligature which immediately ruled it as a nope for me. No monkey business with the characters of my code thank you very much.
I tend to bounce around between Ubuntu Mono, Fira Code and Comic Mono. Comic Mono is not amongst the participants in this game, and my finalists were Ubuntu Mono and Fira Code, so I guess I'm pretty pleased that I've stayed consistent as well!
I am like a fan of these ligature, and have been using fira code for a long time now. When i am writing equations on my own, this is how i would write, so it helps a lot. Without ligature these days i find it bit difficult to read these, <=, ==, => .
I write a lot of R and I love fonts that convert <- and |> into a single character. It's definitely a preference, but it matches how my brain thinks about the code.
I love ligatures but I wish there was tooling for context sensitive ones. This is a really good example. When developing, I love <= turning into ≤. When running a cli that happens to use <= for the start of its progress bar… not so much
Knowing that everything in here is people asking why their font is missing:
I highly recommend having a look at
[ MAPLE MONO ]
(on Github https://github.com/subframe7536/Maple-font).
It has amazing readability, looks nice, is compatible with NF if you use that.
I received compliments from people looking over my shoulder for my f'ing font?!
Huge shoutout to subframe7536 ^^
Berkeley Mono, Iosevka, and Cascadia Code are missing which are my favorite fonts. The game handed me Roboto Mono instead.
What I noticed while playing was that when fonts are similar, I really pay attention to the rendering of "m" and "r". When they look off, the whole font looks off to me.
I love this, but I really wish it were structured as a "Hot or Not" type of round robin system rather than a bracket.
Some fonts are close enough that I don't know if I'd choose one over the other consistently, and I'd be curious to see a percentage score of how much I like a particular font.
Nowadays I use a lot of Iosevka. Previously I was on Ubuntu and JetBrains Mono, both are great fonts. A bit of PT Mono as well, even Terminus for a bit. One of my favorites has got to be Liberation Mono though - the most readable font I’ve ever found, even if Iosevka lets me put more stuff on screen horizontally. Oh also I’ve started enjoying Cascadia Code recently, surprisingly pleasant.
I clicked this link with the thought "I'm curious, but I don't think I really have strong opinions about fonts", and was almost immediately proven wrong with the revulsion I felt at Xanh Mono.
Though it turns out that VS Code default (Droid Sans Mono) is (to my eye) basically identical to my winner (Roboto Mono), so the exercise was mostly academic.
For me it's Berkeley Mono...I was unable to find anything that comes close to it. But this games is fun and the result is a font that is similar to my favourite
As I get older I prefer the text on my screen to be bigger than usual. Most websites tend to have super small fonts for some reason.
For coding I much prefer fonts that are bold and easier to read. Who actually likes these whimsical cursive looking comments or super thin looking fonts?
Cool, obviously a lot of people are going to quibble about the default lineup (wheres Iosevka?) but for anyone who hasn't nailed down a preference it seems great!
Ended up with Victor Mono and indeed, I used that font for years before switching to Iosevka.
The game certainly needs a progress bar (I tried on iPhone) and option “there’s no chance in world that I will ever use any of proposed options”.
Funny enough I realized that every several years I oscillate between trying to get readable narrow fonts (that brought me to Iosevka) and wide ones (Azeret Mono, anyone?)
I stopped looking for fonts after I got comfortable tweaking the metric settings of Iosevka. My current setup exports a set of really compressed cuts (more compressed than Pragmata Pro) which I've always found hard to come by.
Surprised that I picked Oxygen Mono over Noto, but probably because I wasn't aware of Oxygen.
Would be nice to be able to play it with my own fonts because some got eliminated purely because 0 (zero) looked like O (letter). Fira Code was a winner only because there weren't paid fonts that I use.
Nice work! I wish rankings were done with an Elo score. I was worried of regretting my choices sometimes (single elimination?). Would require a lot more comparisons to arrive at stable scores, but the interface is nice I wouldn't mind.
Been running Berkeley Mono for years. Before that i flipped fonts and theme like every week. I sometimes wish you could not change font or color theme at all.
One nit about the site: the screen elements forced me to make my browser window more than half the size of my screen, and I use a 3840×2160 monitor. My windows are normally about ⅕ the size of the screen and roughly 4:3 ratio shaped. It was nearly unusable like that (I don't suffer issues from almost any other site.)
On the game/bracket: it narrowed me down to Noto Sans Mono and I'm honestly not surprised, it's one of the few fonts that comes with my operating system that I find acceptable.
That being said, what I actually have my terminal and Emacs set to is “AcPlus IBM VGA 8x16” from https://int10h.org/oldschool-pc-fonts/. I've always been fond of the VGA font and it tickles all the right usability marks for me.
My favourite* bit about this thread is the number of times I've gone "ooh, that looks like a nice font", downloaded it, unzipped it, and loaded into Fontbook which has promptly gone "you already have this one DUMBASS".
Well, I appear to be the only person that likes Nanum Gothic Coding. (Though I typically use Input Mono - not present in this site's set of fonts.)
The semifinals for me with ligatures enabled were Inconsolata vs Cousine, and Nanum Gothic Coding vs Xanh Mono. With ligatures disabled: Xanh Mono vs Nanum Gothic Coding, and Share Tech Mono vs Roboto Mono.
It'd be nice if you could click the various fonts in play at the end, to see them again and compare them against one another. (Regarding comparing images against one another: https://news.ycombinator.com/item?id=46954055) I had specific metrics that I was going for, but sometimes it was marginal.
I got PT Mono in the game, but this gave me the kick I needed to remember about ProggyClean[1] and track it down. Used to love it many years ago, time to give it another spin and see if it holds its own.
Terminus TTF[1] is my favorite monospace font. The key thing for me is that it is actually a bitmap font, which means it is sharp and crisp. I get headaches from most types of anti-aliasing on traditional low DPI monitors. The colour bleed from subpixel AA is awful, but even most grey scale AA (except when using full hinting as well) is just so blurry.
Unfortunately they seem to have missed it on this page.
A few years ago I found comic mono and monofur for Powerline. I switch between the 2 when I get bored of one or the other. I decided I won't try any new fonts, it's a waste of time for me and I hate having too many options to choose from, not only fonts but basically everything else too, it's distracting. Same for my editor's theme, I switch between Braver's Solarized Light and Radical.
This way I can focus on coding and less on tweaking my environment.
Lately I've taken to Iosevka, the 'curly' variant to be precise. Even though I hated it when I first tried it, I revisited it because I was noticing that, with coding agents running in the same window, I wanted to be able to see more at a glance. With Iosevka's semi-width glyphs you can just fit a lot more in the same space. Took a day or two to get used to its slender appearance. Now every other font feels unnecessarily w i d e
The font I use, IBM Plex Mono, I chose not because I love the font, but because it's the one I love most of the fonts with CJK variants (which basically means IBM Plex, Google Noto, or Adobe Source). It's unfortunate because I really like Libertinus (a rare serif monospace font), but trying to match different non-CJK and CJK fonts that work well together is annoying.
That's very nice and I ended up with the same font I tend to use (Source Code Pro) vs the font I used before (Noto Sans Mono). Some features I'd love to see:
- An ELO-based version with many more variables, so that I can open the site from time to time and find more nice fonts
Dunno how long this is normally supposed to go but it took me 10+ min of actually seriously considering the fonts at each choice and the final suggestion is a font that I actively dislike. I’m curious how it’s narrowing things down because I noticed that it started to give me only serif fonts which I don’t like. But the sans serif ones that it was using to try and narrow things down had distinct characteristics that I didn’t like like very narrow stems or very narrow or wide characters. But it wasn’t doing that with serif fonts. I’m guessing it began to think I preferred serifs because of that but in reality, I wasn’t picking the lesser of two evils most of the time.
Ended up with Hack, but it is missing the font I use[1]. I think I could live with hack.
It's amazing to me how many of the fonts in this bracket have lower-case ell and one as nearly identical (both with a line at the base and some protrusion to the left at the top).
On improvement would be to allow scalling different fonts to different sizes. With them all at (e.g.) 16pt, there is a wildly different amount of text on the screen.
I wish the sample text included _underscores_, since I have occasionally found that they disappear with certain combinations of font + size + renderer.
And a run of all the numeric digits 0123456789, to show how their heights align.
And [square brackets], to show how easily they are distinguished from certain other glyphs.
And the vertical | bar, for the same reason.
...
Adobe Source Code Pro and Ubuntu Mono were my finalists. I think my preference would come down to window and font size, since Ubuntu Mono seemed to be narrower and leave more space between lines.
(Also, I kind of rushed the first few comparisons, so it's possible that I prematurely eliminated a typeface that I would have liked more.)
239 comments
Chrome (assuming you're using Chrome) draws it a specific way. This does not match how Freetype (using typical tuning) or DirectWrite draws it. Chrome's choices in font renderer tuning and blending makes it kind of split the difference between Windows-style and OSX-style, and isn't native to either.
What it should be doing is showing you lossless screenshots of actual in-app renders at different sizes. Some in Chrome (to represent the Electron apps), some in DirectWrite, some in OSX post-Retina, etc.
Some fonts look amazing at larger sizes, but are unreadable at smaller ones. Some perform exceptionally well at smaller sizes. Some look great on every font renderer but OSX's, but some only look right on OSX and look bad everywhere else.
I've sorta played this game with myself, in a semi-objective way: take a bunch of fonts, ignore the subjective art nature of them, and throw them at a bunch of common renderers and see what the optimal size is, and then sort by smallest legible size.
If we define Fira Code, the most popular code font out there, as the bare minimum, 8 of the ones I tested beat it, while 17 were worse.
https://github.com/Diablo-D3/dotfiles/blob/master/fontsizes....
Set
FREETYPE_PROPERTIES="cff:no-stem-darkening=0 autofitter:no-stem-darkening=0", and then also enable (S)light hinting on LoDPI, or None on HiDPI. Also, disable subpixel and use greyscale only.OSX looks the way it does because they use excessive stem darkening combined with incorrect gamma blending. GDI, WPF/UWP/WinUI, most ClearType/DirectWrite consumers, GTK, and most browsers also do incorrect gamma blending as well.
Qt is the exception. It enables stem darkening by default, but then uses correct gamma blending. Unfortunately, this is the objectively correct way of rendering, everyone else is doing it wrong.
The only thing you can't do is OSX gamma blends incorrectly for 1.8 on a 2.2-2.4 screen. Everyone else blends incorrectly for sRGB/2.2 on a 2.2-2.4 screen. Light on dark's obscene behavior on OSX shouldn't be replicated.
If you want the opposite, and make it look like Windows, force stem darkening off (use the above env, but set both to 1), and set hinting to Full to make it look like pre-Cleartype, or Medium to make it look like DirectWrite.
Interestingly, Ubuntu Mono was the font I landed on - which is already the font that I use. At least I'm consistent.
[ MAPLE MONO ]
(on Github https://github.com/subframe7536/Maple-font). It has amazing readability, looks nice, is compatible with NF if you use that. I received compliments from people looking over my shoulder for my f'ing font?! Huge shoutout to subframe7536 ^^
What I noticed while playing was that when fonts are similar, I really pay attention to the rendering of "m" and "r". When they look off, the whole font looks off to me.
Some fonts are close enough that I don't know if I'd choose one over the other consistently, and I'd be curious to see a percentage score of how much I like a particular font.
It would be nice if it showed you 1st, 2nd, semi-finalist, quarter-finalist...
It would also be nice to see progress of some kind, a few minutes in I was wondering if I was near completion or just getting started.
Though it turns out that VS Code default (Droid Sans Mono) is (to my eye) basically identical to my winner (Roboto Mono), so the exercise was mostly academic.
For coding I much prefer fonts that are bold and easier to read. Who actually likes these whimsical cursive looking comments or super thin looking fonts?
I ended up with "Roboto Mono" btw.
Playing the game gave me Jetbrains Mono though.
The game certainly needs a progress bar (I tried on iPhone) and option “there’s no chance in world that I will ever use any of proposed options”.
Funny enough I realized that every several years I oscillate between trying to get readable narrow fonts (that brought me to Iosevka) and wide ones (Azeret Mono, anyone?)
Would be nice to be able to play it with my own fonts because some got eliminated purely because 0 (zero) looked like O (letter). Fira Code was a winner only because there weren't paid fonts that I use.
* no <= or === ligatures (i still like to see the separate characters)
* 'i' vs 'l' vs '1' (I now mostly prefer fonts where the lowercase 'l' has the righthand bend on the bottom)
* dotted zero vs slashed zero (i prefer the slashed zero, but dotted is fine as well)
On the game/bracket: it narrowed me down to Noto Sans Mono and I'm honestly not surprised, it's one of the few fonts that comes with my operating system that I find acceptable.
That being said, what I actually have my terminal and Emacs set to is “AcPlus IBM VGA 8x16” from https://int10h.org/oldschool-pc-fonts/. I've always been fond of the VGA font and it tickles all the right usability marks for me.
Don't get old, kids, it sucks.
The semifinals for me with ligatures enabled were Inconsolata vs Cousine, and Nanum Gothic Coding vs Xanh Mono. With ligatures disabled: Xanh Mono vs Nanum Gothic Coding, and Share Tech Mono vs Roboto Mono.
It'd be nice if you could click the various fonts in play at the end, to see them again and compare them against one another. (Regarding comparing images against one another: https://news.ycombinator.com/item?id=46954055) I had specific metrics that I was going for, but sometimes it was marginal.
There's a vector version[2] now too!
[1]: http://proggyfonts.net/
[2]: https://github.com/bluescan/proggyfonts/tree/master/ProggyVe...
Unfortunately they seem to have missed it on this page.
[1]: https://files.ax86.net/terminus-ttf/
This way I can focus on coding and less on tweaking my environment.
Fira Code came in second, and that's fair, I've used it on occasion, I like it.
I feel like Chivo Mono[1] would make a decent programming font — if a programming version of it were to exist, anyway.
I also like Go Mono[2], and although they're rather different to what I usually go for, I can see the appeal of the M+ mono[3] fonts.
For those of a more whimsical inclination, Fantasque Sans Mono[4] seems like it might be cool for you.
[1]: https://fonts.google.com/specimen/Chivo+Mono
[2]: https://go.dev/blog/go-fonts
[3]: https://mplusfonts.github.io/
[4]: https://belluzj.github.io/projects/design/fantasquesansmono-...
2024 https://news.ycombinator.com/item?id=41604781
2021 https://news.ycombinator.com/item?id=29010443
- An ELO-based version with many more variables, so that I can open the site from time to time and find more nice fonts
- Some global stats
- Not losing the leaderboard after reloading
- Spline Sans Mono
https://github.com/ericfortis/verdanacamel
It's amazing to me how many of the fonts in this bracket have lower-case ell and one as nearly identical (both with a line at the base and some protrusion to the left at the top).
On improvement would be to allow scalling different fonts to different sizes. With them all at (e.g.) 16pt, there is a wildly different amount of text on the screen.
1: https://github.com/belluzj/fantasque-sans
I wish the sample text included _underscores_, since I have occasionally found that they disappear with certain combinations of font + size + renderer.
And a run of all the numeric digits 0123456789, to show how their heights align.
And [square brackets], to show how easily they are distinguished from certain other glyphs.
And the vertical | bar, for the same reason.
...
Adobe Source Code Pro and Ubuntu Mono were my finalists. I think my preference would come down to window and font size, since Ubuntu Mono seemed to be narrower and leave more space between lines.
(Also, I kind of rushed the first few comparisons, so it's possible that I prematurely eliminated a typeface that I would have liked more.)