- Center the code samples on the page. So that your not unintentionally one over the other due to differences in viewing angle and vision ability.
- Make all the fonts equal in height regardless of font point. Knee jerk reaction will be to go with the font that is closest to a persons normal preference.
- Hide Font names and size/points.
- Light theme and other color options.
- Other programming language options.
- jiI1l0O test. I like to see those characters that can often be too similar in shape shown together.
- Controversial, throw in some non mono-spaced fonts.
When I developed my own coding font (Luculent), the compact sample that I ultimately came up with was:
// The five boxing wizards jump
#include <stdio.h> // <= quickly.
int main(int argc, char **argv) {
float il1[]={1-2/3.4,5+6==7/8};
int OxFaced=0xBAD||"[{(CQUINE";
unsigned O0,l1,Z2,S5,G6,B8__XY;
printf("@$Hamburgefo%c`",'\n');
return ~7&8^9?0:l1|!"j->k+=*w";
}
It has a pangram, lots of confusable pairs of characters adjacent to each other, opening brackets next to each other and near a pipe character, quotes and commas next to each other, lining operators (i.e., ->, += and <=), and every normal punctuation character on a US keyboard. It also happens to be a valid, though useless, C or C++ program.
> - Make all the fonts equal in height regardless of font point.
I like the current scheme which keeps the line height or px equal I'm guessing. So this should be a toggle-able option.
Another feature request: It'd be nice to compare the overall width of each font in terms of having 80 or 100 or 120 character limits on width. I'm always wondering what font is the best for viewing two files side-by-side on a 1280x800 display.
i was pretty impressed that my final pair ended up being fira code and fira mono, so i tried switching my terminal font from bitstream vera sans mono. it looked markedly worse - i switched back within a couple of minutes. i think your point about the displayed text size affecting my judgement is spot on.
You are not the only one. I've used proportional fonts exclusively for 10-15 years and will never go back to monospaced.
In the past I used Verdana, Georgia, and Trebuchet MS. That last one may seem like an odd choice, but I really like the way it renders on a high-DPI display, with thick readable strokes and easily distinguished "confusable" characters.
Trebuchet MS does have some flaws, so I started customizing it into what I call Trebuchet++. What got me started on this was the poor tilde in TMS. I swapped in a better one with FontForge, and then started experimenting with a few other things.
One thing that bothered me in particular about proportional fonts is that the underscore character is so much wider than a period. This creates the wrong visual grouping in something like this:
name_with_underscores.method_with_underscores()
The default spacing causes "underscores.method" to be bound tighter visually than the individual names on each side.
So I edited the underscore to add negative spacing while keeping the underscore itself fairly wide. And I added positive spacing around the period. This makes it more clear visually that "name_with_underscores" and "method_with_underscores" are individual names separated by the dot.
The next tweak I plan on is adding some positive spacing after a "(" and before a ")" and similarly with [] and {}. It makes me sad that modern coding standards prohibit spaces inside (), [], and {}, even though it makes so much sense logically to have spaces inside them.
If I can't fix my company's mandatory code formatter, at least with a proportional font I can adjust it to put just a bit of whitespace there.
I don't have it on GitHub, mostly for worry over Microsoft's copyright on Trebuchet MS. I may get brave and post it anyway!
In the meantime, if you drop me an email (address is in my profile) I will be happy to send you a copy of the FontForge project and the compiled .ttf font.
There are dozens of us I tell you, dozens! In my case I saw the light after two years of programming in SmallTalk, where our dev images shipped with Cambria by default.
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.
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?!
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.
Is it just me, or does it not appear to be working for anyone else? It just shows "You have chosen the winner" and none of the buttons seem to have an effect.
Edit: Clicking 'Restart Tournament' seems to spawn a worker that pushes my CPU over 100%. Open source your code, perhaps?
Sorry I went to sleep and woke to the app not working. Stupidly used Google Fonts API when I really don't have to, was being lazy. It is fixed now! Please try again?
No joke: my 70-something IBM veteran C++ class teacher in high school used Comic Sans in Visual Studio. Every time he shared his screen on the projector me and my buddy chuckled. He was so literal that it was either really good dry humor, or the dude genuinely liked coding in Comic Sans.
Maybe he had dyslexia and had worked out what is now relatively better-known, that Comic Sans is actually really readable for people with dyslexia-spectrum issues.
That's not necessarily true[0]. It's a widely repeated claim but there doesn't seem to be much actual evidence supporting it. Rather it seems that letter size and spacing are the main factor when trying to make text more readable to dyslectics.
I use "comic code" as my daily driver monospace font as it's good for dyslexia having unique characters for like "d" and "b" that aren't mirrored reflections.
I always get a comment on the font when I screenshare...
I have offsite fonts blocked, so I wonder if I would have seen these anyways. From that response, it looks like it would just include a webfont directly from Google.
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.
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 like the idea, but fonts are hard to choose from, especially with a specimen as regular as a CSS file. If I had to pick a file type with variety, I might go for PHP, with inline HTML, CSS, and Javascript, and attempt to show all the symbols on the keyboard, as well as common ligatures.
That said, there's so much variety in fonts that someone's favorite is likely missing regardless of the selection. Perhaps an initial culling based on features would help, eg. ligatures/no ligatures, serif/sans-serif, etc.
I'm also not really able to firmly decide, so I tend to switch fonts every so often.
Fun game, my compliments to the creators.. there is one variable for me that makes it more difficult. Anti-aliasing. I turn it off on my display because I like sharp crisp fonts without blurred edges--and in fact, the higher resolution your display is, the less you need AA.
Many "good" fonts are no longer hinted to fit to the raster grid, it is just assumed that you are using AA, period. What happens in that circumstance, is that the unhinted font looks really misshapen. Because of this in Firefox I de-select "Allow pages to choose their own fonts, instead of your selections above" and use instead a font that was designed to work well without AA (for the web, I like using Verdana).
So, for an editor's font, the best ones are bitmapped raster fonts for that pixel-perfect sharpness.
You can also use a TTF/OTF font with embedded bitmaps at specific sizes.
Regular TTF will work well also, if it is old enough that it contains hinting instructions. E.g. Bitstream Vera Sans is a monospaced font that is properly hinted for a pixel grid.
I was crazy enough to handwrite all of the TTF hinting instructions for it (albeit with a macro assembler-like tool). Every glyph in the regular and bold variants is superhinted to look pixel perfect without AA when viewed in the 9px to 19px range, and decent beyond that. With AA on, all four variants are hinted for the pixel grid at 9px and up. I also came up with some magic to try to force Cleartype to still grid-fit it horizontally.
One of my main selection criteria for a coding/terminal font is subjective quality of rendering and legibility at small sizes. The preview has an adjustable point size option but that isn't the whole story. The space taken up when rendered is what's important (i.e. pixel height of Em/line and/or the width of 80 monospaced characters.) Edit: A simple solution is to allow independent setting of Point size for the left and right previews so they can be visually the same size, rather than the same stated Pt.no.
Also missing one of my go-tos "Input Mono"[0]. What's great about it is that it comes with so many custom choices that you can configure specific character shapes and choose a width/weight that renders well for your particular use case.
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.
Thanks for this! I was unaware of B612. It looks like I have a new coding font.
> About B612 Mono
B612 is an highly legible open source font family, designed and tested to be used on aircraft cockpit screens. Its design makes it particularly suitable for degraded contexts (ensuring legibility and readability of data), with a positive effect on reducing visual fatigue and cognitive load. Particular attention was given to the uniformity of the typeface, whether being used for isolated terms, reading information on a map, mixing capital letters and numbers, waypoint lists, long or abbreviated texts...
> In 2010, Airbus initiated a research collaboration with ENAC and Université de Toulouse III on a prospective study to define and validate an “Aeronautical Font”: the challenge was to improve the display of textual data information on all cockpit screens, concerning more specifically legibility, readability and reading comfort...
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).
A fun page! I agree that blind-testing would be important, especially having the name shown in red draws a lot of attention.
A possibly better method (but harder to implement) would be to show code snippets briefly, then ask a related question. This would test how well you can actually read the various fonts - as long as the samples and questions control for other things.
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 think I'm missing something. When I click the link, the site loads for a bit and then presents a drum roll and a message that I've chosen a winning font? Both in a browser with tracking blocking and a clean Firefox mobile. @wentin did the site break from a hug or any idea what's going wrong here?
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.
Ok, so Fira Code won hands down for me and I decided to compare it to the font I'm using today (DejaVu Sans Mono) before switching… And I actually like DejaVu Sans Mono better (among other things because it doesn't do ligatures that make => indistinguishable from ⇒). Too bad it's missing from the game because otherwise it really got it right! I love both the concept and the execution!
I'm curious as to how you think more and randomized competitions would change the outcome. If you like a font better than another font, it doesn't matter which two fonts are being compared. You like the winner more than you like the loser.
I ran through this contest, picked a winner, downloaded that font and installed it in VSCodium…and very quickly switched back to the font I was previously using, which was also a contestant here! I guess I like different things when I'm reading syntax than when I'm comparing glyphs.
It would be nice to see the full bracket tree when you're done, rather than just the overall winner. There were other nice fonts that made it close to the end, that I would have liked to see identified, but I don't think this is possible in blind mode.
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.
I am certain I have tried every fixed-width font in existence. It's this constant unsettled feeling to find the "right" one.
The font that seems to not make me want to try others is Recursive Mono (medium, casual). https://www.recursive.design/ Even I admit it looks a bit off at larger sizes but at say 15pt it's fantastic.
One thing I would add is a "reseed" button, that would reshuffle the current pairing and all remaining pairings in the current round, so that if two choices were quite similar, you could put off deciding between them unless/until both of them end up in the final round.
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 agree - I rejected quite a few fonts on account of insufficient distinction between 1 and lowercase L.
For me, it is not sufficient that I can distinguish between the members of problematic sets side-by-side: whenever you see one on its own, there should be no doubt which one it is.
I have tried at least half of the fonts there and many of them are decent, but none of them beat Iosevka (though the game concluded with Ubuntu). But I am pretty sure seeing the names affected the outcome a lot.
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.
Blind mode is great! It'd be cool to be able to see the entire tournament bracket at the end -- I can only see the font that won, but the others were pretty close. I want to see when the font I normally use got knocked out.
Also, for really maximizing utility, it'd be cool to add variations of the same font but with different line-heights. I definitely voted against some fonts because they appeared "squished", but maybe a bit bigger line-height would make me prefer it.
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...
(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)
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.
Successfully converged to my favourites, JetBrain Mono and Fira Code. As others have said though, would be nice to be able to hide font names (by default).
I turned on Blind Mode, and went through it, and ended up choosing Source Code Pro... a font I used for years because of how readable it is. I've since switched to Iosevka, which can both mimic almost every popular glyph shape (including being a synthetic Source Code Pro), but also is less wide and is on its way to conquering Unicode.
I suggest everyone just switch to Iosevka, you can thank me later.
From the 'About' page: B612 is an highly legible open source font family, designed and tested to be used on aircraft cockpit screens. ... In 2010, Airbus initiated a research ...
Really cool project. Love it. Would like to be able to also test against system fonts, like the SF Mono, Monaco, etc. As an Apple user, those are not only on my system, but are very well professionally designed (and no need for a web font!). So it would be great to throw them into the mix. I imagine Windows users would want similar with the Microsoft fonts.
I had fun with this. If I may offer a critique: the 'Visit Site' button just hijacks mouseclick instead of actually being a link, meaning I couldn't see where it was taking me by hovering. And when I actually clicked it, it brought me to the Google Fonts page instead of the actual website for the font. It was the same for every font I tried.
I really like this! And as someone who never cared a whole lot about what font I use while coding, I was genuinely going to use it to choose myself a font. I do, however, agree with a lot of the issues/feature requests in this thread - would you be willing to open-source it? I wouldn't mind helping to fix/implement those requests myself.
I wonder what capital letters looks like, and all the symbols. Should have at least the upper/lower characters, numbers and symbols listed at the top. Then some CSS code is OK but there should be perhaps some small samples of HTML, JavaScript, Python, Java/C#, and/or C/C++ in there.
Because of the bar and container there's 140 pixels wasted at the top that means I have to scroll to play the actual game. Plus the 'Product Hunt' thing overlaps the content and then the button I need to click on, so I have to scroll up and down.
If I bust the embedded content out of the iframe it works a little better though.
This has a different colour theme than I normally use (I work in a bright space, so use a light theme), and when I tried the font suggested at the end I found it horrible. Ideally you'd be able to choose the colour scheme to match your current one because it's a large part of what makes a font work for coding.
This is also valuable for other things than fonts designed for programmers.
It would be nice if there were different set of fonts so that writers could also use it.
Also this concept of tournament can not only be generalised to other types of fonts, it can be generalised to different things entirely as well. Really like the idea!
My favorite coding font is liberation mono, but I wish I understand truetype well enough that I could make it substitute -> with a proper right-pointing arrow, and !=, >=, <= etc. by their proper mathematical equivalents.
I've tried editing the font myself using fontforge, but without any luck...
I also like coding with proportional fonts. I wish I could find some with coding ligatures.
[I've wondered if VSCode theming would allow for using a regular font for alphanumeric characters, and a special font (like Fira Code) for punctuation characters, so they can be displayed with all their ligatury glory.]
This actually was helpful. Some constructive feedback, the code sample only had mixed-case/capital letters in the "font-family" value. It would be better to use a code sample that had more mixed-case. I also like the idea others have suggested of hiding the real font names.
haha, I went even further. I designed a font called CSS Mono, and someone says it is like comic sans of coding fonts in Youtube comments, like in a bad way obviously. lol, check it out https://css-mono.wentin.net/
Site has issue, I was to choose PT Mono or cousine while Cousine was in fact PT Mono as well (said so in the code, only the header and buttons to choose said Cousine). Same for Fira Mono against Source Code Pro. That's 2 times in 15 tries, on safari mobile.
Would be nice to allow user to paste in arbitrary code text, to reflect more typical code they're used to seeing (and get it to display ligatures, if applicable). Or possibly allow user to specify a source file from GitHub/GitLab to display.
Love this. Would be cool if there was an option to somewhat normalize the sizes. I find myself more often choosing the one I can see more clearly since it is larger, but not sure I'd make the same choice is the smaller font was bumped up to 17 or somesuch.
I was pretty surprised that Iosevka wasn't in the running, I was under the impression it was pretty popular, but maybe not. I also recognize the fact that there's about a billion fonts out there, so obviously you can't include them all.
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".
Competition lost credibility when the default font on the biggest IDE for coding, VS Code, wasn't in there: Cascadia Code. Understand for availability reasons etc, but for coding fonts, pretty big deal. (Even the old one, Consolas)
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.
That was fun, even just to make myself examine my current preference for Fira. I ended up finding overpass which I'm going to try for a while. Also made me appreciate how good Ubuntu Mono and Roboto fonts are.
Very good idea!
Let me paste in a text block of Java, so that it resembles my actual environment. Then I could also test ligatures and 1lI problems - although a pre-made test block of those would also be great
This is great! Love all the design suggestions here.
Caught a bug, FYI: The font-family line always says the name of the font on the right in both columns. I.e. the left column says the name of the right column.
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.
Converged on IBM Plex Mono which I've used since it came out and Overpass Mono. After installing Overpass Mono in my editor it looked like crap haha. Not sure what happened.
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.
Great job implementing the Blind Match feedback. One issue with it - when Blind Match is enabled the choice buttons still show the font name - all other labels are anonymized.
Huh. In over 95% of the cases, I always chose the font on the right hand side, the one that was named in the text of the demo. It almost always seemed crisper and cleaner to me.
love this and the input tool others are mentioning. i never knew how to best select a font for my terminals because looking at 20 fonts in font book side by side makes it hard for me to even tell WHAT i like. im excited to try this and input.
- Center the code samples on the page. So that your not unintentionally one over the other due to differences in viewing angle and vision ability.
- Make all the fonts equal in height regardless of font point. Knee jerk reaction will be to go with the font that is closest to a persons normal preference.
- Hide Font names and size/points.
- Light theme and other color options.
- Other programming language options.
- jiI1l0O test. I like to see those characters that can often be too similar in shape shown together.
- Controversial, throw in some non mono-spaced fonts.