Bug report: on Chrome 95 / Windows, fullscreened on a 1080p display, the data-testid="RetoolGrid:container_question" element gets a dynamically-calculated translate3d transform that's not pixel-aligned, making all the text in the code regions extremely blurry.
Thanks, wasn't sure if it was just me. Trying it again on Firefox.
Edit: Win 10, Chrome 95 maximized on 1600x900
Edit 2: Surprisingly, the font that won when I ran it on Chrome was #2 when I tried it again on Firefox (I tried not to look at the names as much as possible to avoid this).
Would be cool if it was possible to run it as a blind tournament to avoid subconsciously choosing my current font (although it's still possible to just recognize it).
I ended up with my current IDE font (Fira Code) winning. Could be that I just prefer this font or I'd accidentally gone with a familiar option.
It would also be neat if it identified any properties that were shared in many of your top picks. A higher than average x-height would probably be on my list.
One property that might make that list is whitespace between lines. This one is misleading though since it can be adjusted when rendering (in some IDEs) with leading.
Same for me, even the same font as for you, Fira. I just find it very clear and simple and it supports a great set of ligatures. A lot of other fonts I didn't like at all. So maybe I subconciously chose this, but I feel it's also just a reflection of my demands for a coding font.
Interesting; I discarded the one I currently use in a matchup in the middle and ended up discovering a new one to try.
But I agree that it might be good to try it anonymized -- I was very impressed by the eventual winner when I saw it early on, and I remembered its name. I could feel myself slightly favoring it in later matches. Then again, maybe that's a reasonable part of the process -- this isn't really an objective judgement to be making in the first place.
Single elimination also isn't likely to produce the "one true" result, unless the initial pairings were very carefully chosen to partition the design space. (I think they were random, so the result is somewhat arbitrary.) Still a fun little exercise, though.
Also ended up with Fira Code, which I already use. Would feel a little more satisfying if the whole thing was blinded A/B testing, but I'm fairly confident I do just prefer Fira Code over the others.
Blind mode is a very good and popular suggestion! I also get the same idea from Twitter! I implemented it, now there is a toggle button to turn on blind mode. Try it out, maybe you will end up with something else this time, who knows?!
Seems to only feature free fonts available from Google Fonts (understandable). My personal favorites are the non-free ones: Apple's Monaco and Microsoft's Consolas.
would be good to add a light theme. i can't use dark themes because of astigmatism, so it's good for accessibility. nice idea so far.
fwiw i've tried so many fonts and nothing beats andale mono for me on macos. i always come back to it. fantasque sans mono on windows is nice too, i think its on google fonts.
This is the best UI for decision-making I've seen lately. Font choosing is a pain and this works. I ended choosing the font i know (roboto mono) but wau, before this it was because always like that. Now i know that's the one i like ^^
I'm nearly blind when it's about fonts, I nearly don't notice any difference between all of them and mostly I don't care. Am I the only one in that situation?
I've been using Deja-Vu (and Bitstream fonts before that) for as long as I can remember, as it's more or less the default, and it seems just as good of a font as any.
I also just use the default Vim colourscheme, which also seems a rarity.
You have to really nit-pick to tell some of them apart, for sure. I had to go by things like "these proportions look maybe 4% closer to what I think is reasonable" to end up with Noto Sans Mono over Cousine.
Are you using the LocalCDN or Decentraleyes plugin (without filter html setting enabled)? This broke it and every font was the same, I was very confused when I couldn't see the difference between any of them.
Awesome concept, I heavily factored in the different widths and glyph variations (like O, 0). I was surprised to get Overpass Mono, I would've never considered it otherwise. A couple of suggestions:
- Allow editing and preserve the user's content or at least the ability to select a language. CSS doesn't display a lot of the nuances present in other languages, and some people simply use monospaced for other kinds of writing. Though I appreciate this may add a requirement for a syntax formatting library.
- Add Iosevka and Cascadia Code fonts, among probably many others that will be suggested here. Better yet, add the ability for a user to set a custom font source URL and change it to a blind test!
And, maybe I missed it, but there's no light mode or ability to change weights. Some weights are highly legible in light mode, but then illegible in dark mode—and vice versa.
I like the idea, but CSS is not indicative of my main language use (C++/C#), so it's a bit hard to decide a winner in some cases. I'd like the option to either choose a language and/or the ability to paste my own code.
EDIT: I've been with Inconsolata for a few years, but maybe a new contender can appear :)
Agree. One of the features of my current choice (Fira Code, but I've been with Inconsolata for a lot of time) is that it has ligatures for common groups like "!=" or "<<=", and CSS doesn't have them.
Love the app. I wish it had a blind tournament feature and option to change font size separately. I noticed I preferred familiar font names and more compact fonts and I don't know how much of the end result was impacted by these.
(my wife was very happy when I taught her this trick, though at first she was scared she might permanently damage the website; I mean, that it would remove the block also for the other visitors)
A feedback: The use case is less than ideal. Its CSS. That shouldn't be a problem but its (i) its not the kind of syntax I'm used to reading, and (ii) its not a ligature heavy use case.
As an instance, I'm given a choice between Fira Code and Fira Mono. First off, er... maybe don't put them together. Second, the only difference between the two, as far as I can remember is that one has ligatures enabled, one doesn't. And the CSS codebase I'm reading doesn't seem to have any ligatures, so :shrug:
I would wish it would support a few more fonts, like Iosevka, Hasklig and Fira Code. Like others I'd prefer if it didn't display the names of the fonts and an option to say "I don't have a preference between these two".
Great idea. However, I think that it misses the educational part. Choosing a font should be preceded by learning certain characteristics of fonts that help to read code.
For example, the font Input[1] might not be the most aesthetically pleasing, but it is one of the very few non-monospace developer fonts. The website of this font explains the idea behind it in a way that convinced me.
Maybe it could be done by using a wizard/tutorial to narrow down the fonts list.
Hoping this leads me to a (paid-for I think) coding font with lovely italics/ligatures I saw in online code examples, didn't bookmark and have never found again...
Great idea! Love it. Like others, I'd wish I could change the language to something closer to what I normally use.
Besides that, it would be great if you could hide the names as well, or set some placeholder name. I feel like I might be biased towards my existing font, because after the tournament I ended up with what I use as a daily driver, but maybe there is some unconscious bias that I don't realize, that's why it won.
Might want to disable Decentraleyes/LocalCDN FF extension if you want to use this (or enable filter HTML setting), otherwise the Google fonts are not loaded and they are all the same font.
Nicely done, it's great to have a side by side comparison. It's made me realize I don't actually like the fonts I was using and I ended up on Roboto Mono, Ubuntu and Fira Mono.
I'll echo what the other comments are saying - it'll be good to make it a blind tournament with some representative code samples from languages like C#, Python, TypeScript etc. At the end you could present the 'top 5' fonts that were chosen by the user (or all of them, ranked)
I'm not a fan of ligatures so I'd want to eliminate them entirely or see such things in the code sample shown so that I can choose/disallow it.
Because it's for IDEs, make good use of the screen real estate, maybe that 'about' section on the left could go on the bottom, giving the side-by-side comparison more space to view all the code.
The 'Visit Site' link could be a normal hyperlink, my browser is blocking the popup that it creates currently. All that needs to be is an <a> with a target="_blank".
Finally for mobiles I think hide that 'product hunt' badge, it's getting in the way of the buttons.
Gotta say I love this, I came in just as you had blind tournament mode implemented and it worked great.
But I'd also like to skip certain battles and save them for later. Like right now I'm down to 10 fonts and I just can't decide. I'd like to skip to the next battle.
221 comments
[ 3.0 ms ] story [ 244 ms ] threadEdit: Win 10, Chrome 95 maximized on 1600x900
Edit 2: Surprisingly, the font that won when I ran it on Chrome was #2 when I tried it again on Firefox (I tried not to look at the names as much as possible to avoid this).
I ended up with my current IDE font (Fira Code) winning. Could be that I just prefer this font or I'd accidentally gone with a familiar option.
My main reason for liking both is ligatures support, which the website failed to show off.
https://github.com/ToxicFrog/Ligaturizer
One property that might make that list is whitespace between lines. This one is misleading though since it can be adjusted when rendering (in some IDEs) with leading.
Same for me, even the same font as for you, Fira. I just find it very clear and simple and it supports a great set of ligatures. A lot of other fonts I didn't like at all. So maybe I subconciously chose this, but I feel it's also just a reflection of my demands for a coding font.
But I agree that it might be good to try it anonymized -- I was very impressed by the eventual winner when I saw it early on, and I remembered its name. I could feel myself slightly favoring it in later matches. Then again, maybe that's a reasonable part of the process -- this isn't really an objective judgement to be making in the first place.
Single elimination also isn't likely to produce the "one true" result, unless the initial pairings were very carefully chosen to partition the design space. (I think they were random, so the result is somewhat arbitrary.) Still a fun little exercise, though.
I ended up picking Noto Sans Mono by a very slim margin over Fira Code. Interesting...
fwiw i've tried so many fonts and nothing beats andale mono for me on macos. i always come back to it. fantasque sans mono on windows is nice too, i think its on google fonts.
Played through the game (on MacOS), came here to ask if we could add a custom font into the game so I could put Andale Mono there.
Fantasque Sans Mono on Github sends to:
https://fontlibrary.org/en/font/fantasque-sans-mono
Andale Mono is bundled with MacOS, and for Windows is here:
https://sourceforge.net/projects/mscorefonts/files/MS%20Core...
And for Linux, here:
http://mscorefonts2.sourceforge.net
Would love to hear your thoughts or anyone else's.
(Fun aside: I ended up implementing the Ford Johnson algorithm to minimize the number of comparisons, explanation here: https://github.com/decidedlyso/merge-insertion-sort )
I also just use the default Vim colourscheme, which also seems a rarity.
- Allow editing and preserve the user's content or at least the ability to select a language. CSS doesn't display a lot of the nuances present in other languages, and some people simply use monospaced for other kinds of writing. Though I appreciate this may add a requirement for a syntax formatting library.
- Add Iosevka and Cascadia Code fonts, among probably many others that will be suggested here. Better yet, add the ability for a user to set a custom font source URL and change it to a blind test!
- Themes, pretty self explanatory.
And, maybe I missed it, but there's no light mode or ability to change weights. Some weights are highly legible in light mode, but then illegible in dark mode—and vice versa.
EDIT: I've been with Inconsolata for a few years, but maybe a new contender can appear :)
This. The 'lorem ipsum' CSS provided wasn't too bad, but that's not my brace style and I found it jarring, waah D:
(my wife was very happy when I taught her this trick, though at first she was scared she might permanently damage the website; I mean, that it would remove the block also for the other visitors)
Somethings I would like to have:
- The "editor" windows should be bigger
- Remove the left side
- Let me choose the language
- Give an option for a blind test. Basically don't let me see the font name.
- Option to give me only fonts with Ligatures.
A feedback: The use case is less than ideal. Its CSS. That shouldn't be a problem but its (i) its not the kind of syntax I'm used to reading, and (ii) its not a ligature heavy use case.
As an instance, I'm given a choice between Fira Code and Fira Mono. First off, er... maybe don't put them together. Second, the only difference between the two, as far as I can remember is that one has ligatures enabled, one doesn't. And the CSS codebase I'm reading doesn't seem to have any ligatures, so :shrug:
For example, the font Input[1] might not be the most aesthetically pleasing, but it is one of the very few non-monospace developer fonts. The website of this font explains the idea behind it in a way that convinced me.
Maybe it could be done by using a wizard/tutorial to narrow down the fonts list.
[1] https://djr.com/input
Besides that, it would be great if you could hide the names as well, or set some placeholder name. I feel like I might be biased towards my existing font, because after the tournament I ended up with what I use as a daily driver, but maybe there is some unconscious bias that I don't realize, that's why it won.
Inconsolata, for example, is much smaller than DM Mono, but they're both displayed at 16px.
I'll echo what the other comments are saying - it'll be good to make it a blind tournament with some representative code samples from languages like C#, Python, TypeScript etc. At the end you could present the 'top 5' fonts that were chosen by the user (or all of them, ranked)
I'm not a fan of ligatures so I'd want to eliminate them entirely or see such things in the code sample shown so that I can choose/disallow it.
Because it's for IDEs, make good use of the screen real estate, maybe that 'about' section on the left could go on the bottom, giving the side-by-side comparison more space to view all the code.
The 'Visit Site' link could be a normal hyperlink, my browser is blocking the popup that it creates currently. All that needs to be is an <a> with a target="_blank".
Finally for mobiles I think hide that 'product hunt' badge, it's getting in the way of the buttons.
But I'd also like to skip certain battles and save them for later. Like right now I'm down to 10 fonts and I just can't decide. I'd like to skip to the next battle.
There should an option to hide names of what font it is.
I would also like to suggest that the side-by-side panes scroll together too, so that the comparison is easier to track.