18 ms·

Show HN: Coding Font – A game to find your favorite coding font

443 points by wentin 5y ago

winrid 5y ago
I spent a few minutes on it, but Is there any kind of end?
ChrisArchitect 5y ago
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)
lucasverra 5y ago
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 ^^
- lucasverra 5y ago
  I see using this UI for business decision-making for 5-10 options
  - rafd 5y ago
    I made a tool like this for our team a while back, and made it available for free: https://decidedly.so https://decidedly.so 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 https://github.com/decidedlyso/merge-insertion-sort )
doodpants 5y ago
Some missing fonts that I would like to see added: - Liberation Mono - DejaVu Sans Mono - SF Mono That said, I ended up picking Cousine, which is a font I had never heard of before. (Edit: Cousine seems to be identical to Liberation Mono.)
- westwardly 5y ago
  Only difference I can see is the lowercase "l", which in Cousine looks closer to "1" than in Liberation Mono. I picked Cousine as well.
StevePerkins 5y ago
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.
jcelerier 5y ago
well, the font I've been using for close to a decade, Anonymous Pro, is still my favourite
rm8x 5y ago
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.
DavideNL 5y ago
I seem to be stuck in some endless loop, I never saw the end... Perhaps consider showing some kind of progress or something...? (Safari, iPhone)
chowyuncat 5y ago
This worked well on iOS Safari. Nice job! At the end I wanted to know the distribution of other users’ preferences.
dejawu 5y ago
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.
srcreigh 5y ago
Missing the best fonts. Tamsyn7x14 on 1080p screens, and Iosevka Light on Retina/5k screens.
WillKirkby 5y ago
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.
- yfkar 5y ago
  Similar issue on Chrome 95 / Linux Mint Cinnamon. For me this was a test of which fonts remain somewhat readable when blurred.
- baxuz 5y ago
  Was just about to say that.
- nisegami 5y ago
  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).
- jy14898 5y ago
  Opening the link the iframe is pointing to helped for me: https://typogram.retool.com/embedded/public/1eb9acb6-fc70-447b-ae86-aa7e9aedb207 https://typogram.retool.com/embedded/public/1eb9acb6-fc70-44...
k4rli 5y ago
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.
- wentin 5y ago
  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?!
- WithinReason 5y ago
  That's my favorite font as well, next to Iosevka which was missing from the fonts listed. My main reason for liking both is ligatures support, which the website failed to show off.
  - akuji1993 5y ago
    Yeah the comparison is kinda incomplete without showing the ligature support of both fonts.
  - antihero 5y ago
    Any font can have ligatures now https://github.com/ToxicFrog/Ligaturizer https://github.com/ToxicFrog/Ligaturizer
- simse 5y ago
  Yeah that'd be super cool, I also ended picking the one I already use.
- iampivot 5y ago
  Concur! It would be nice to hide the font name.
- karmakaze 5y ago
  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.
oefrha 5y ago
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.
- maratc 5y ago
  SF Mono should also be on that list.
- jaywalk 5y ago
  Yep. I've tried other fonts, and always end up back to Consolas.
yakkomajuri 5y ago
Quite a fun idea. Kudos!
_hao 5y ago
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 :)
- giomasce 5y ago
  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.
- revolvingocelot 5y ago
  >paste my own code This. The 'lorem ipsum' CSS provided wasn't too bad, but that's not my brace style and I found it jarring, waah D:
lampe3 5y ago
I really like the idea. 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.
Aachen 5y ago
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?
- lucideer 5y ago
  Looks like it broke from a hug. Tried in a few different browsers: checking console shows a tonne of 404s for assets.
jokoon 5y ago
It's hard to beat Consolas, although the rendering system seems to really matter a lot. I've made my own pixel font, inspired from ProFont, but it's not usable because it's a pixel font, and it's too big when I zoom it 2x.
- xbar 5y ago
  I think you are right. I'm giving IBM Plex Mono a go as a result of the coding game. We'll see if it has staying power in comparison to Consolas.
chrisbuc 5y ago
Fun to play. Any reason consolas isn't there? (My winner was Anonymous Pro)
- luke2m 5y ago
  Not free on Google Fonts probably.
5350-uiop-1130 5y ago
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.
- Terretta 5y ago
  +1 Andale Mono, which isn't here. 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 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%20Fonts/win/ https://sourceforge.net/projects/mscorefonts/files/MS%20Core... And for Linux, here: http://mscorefonts2.sourceforge.net http://mscorefonts2.sourceforge.net
js4ever 5y ago
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?
- arp242 5y ago
  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.
- djxfade 5y ago
  Yes
- xvedejas 5y ago
  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.
- sodality2 5y ago
  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.
abestic9 5y ago
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! - Themes, pretty self explanatory.
- vehemenz 5y ago
  I second Cascadia Code. 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.
harshitaneja 5y ago
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.
Razengan 5y ago
Can I get that annoying Product Hunt floater out of the way
- giomasce 5y ago
  Ctrl+Shift+C, click it and Del. (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)
geraltofrivia 5y ago
I love it! 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:
captn3m0 5y ago
My current font (https://input.djr.com/preview/ https://input.djr.com/preview/) isn't on the list, sadly.
capableweb 5y ago
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.
warpech 5y ago
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. [1] https://djr.com/input https://djr.com/input
- polytely 5y ago
  I like Input for exactly that reason, it's great
LeonidasXIV 5y ago
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".
pantulis 5y ago
This is very fun. Would love to see Iosevka there.
porker 5y ago
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...
pca006132 5y ago
Why not make the font size and color the same between the two panels? Hard to compare as they are different for some fonts...
- anotherhue 5y ago
  Inconsolata (a favourite of mine) suffers from this greatly.
- bovermyer 5y ago
  This is much harder than it sounds, since font-size: 16px for one font is not going to be the same, visually, as font-size: 16px for another font. Inconsolata, for example, is much smaller than DM Mono, but they're both displayed at 16px.
  - pca006132 5y ago
    I remember that there is something like https://seek-oss.github.io/capsize/ https://seek-oss.github.io/capsize/ , not sure if it could work here.
sodality2 5y ago
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.
politelemon 5y ago
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.
- wentin 5y ago
  For the blind tournament, I just implemented it! Give it a try :)
  - INTPenis 5y ago
    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.
itsbits 5y ago
Wow...I got Fira Mono which I am using BTW...Also I have done without reading names on top... There should an option to hide names of what font it is.
dom111 5y ago
Also like this and second the other comments about different source code options. I would also like to suggest that the side-by-side panes scroll together too, so that the comparison is easier to track.
mdp2021 5y ago
Nice! Suggestions: -- make the individual fonts compete more times in randomized comparisons (one font should not win over a single other) -- option to overlap the renderings in a canvas with bitmap difference (to highlight the differences in glyphs) -- option to choose the text to be rendered, with syntax highlighting -- upload fonts for further comparison (maybe through @font-face src URLs); edit the list of comparisons
- jaywalk 5y ago
  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.
  - mdp2021 5y ago
    If you are interest in obtaining a set of the best, single "competition matches" per candidate filter out good candidates earlier. '(67 vs 89) vs (12 vs 45)' will filter out early good option '67'. Irrelevant if you goal is '89'; relevant if your goal is '(89, 67)'.
frereubu 5y ago
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.
pipnonsense 5y ago
Fun experiment. My suggestion is to add "Iosevka" as a contester. It is my font of choice and I am curious if it would win for me (while trying not to look in the names). It had some popularity with HN in the past: https://news.ycombinator.com/item?id=14009963 https://news.ycombinator.com/item?id=14009963
larsrc 5y ago
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.
TheRealDunkirk 5y ago
Fails without Monaco as an option. ;-) I wound up with Inconsolata, which I see now looks a lot like it.
- __del__ 5y ago
  Monaco 9 takes me back to coding for Macintosh System 6. Inconsolata is my daily driver.
bovermyer 5y ago
Nice idea. Ditch the font names until the end. Add Fantasque Sans Mono and Iosevka.
comeonseriously 5y ago
Major Mono Display for the WIN! That was actually nicely done. I'll play it more seriously later.
penjelly 5y ago
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.
rcarmo 5y ago
This is pretty fun, although I knew going in that I would most likely end up choosing Fira Code as I tried many over the years...
prirai 5y ago
The list could have been a bit bigger as I see that three of my favorites aren't even there.
OliverJones 5y ago
Excellent. This light-mode holdout wishes for a white-background tournament.
karmakaze 5y ago
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. [0] https://input.djr.com/download/ https://input.djr.com/download/
paufernandez 5y ago
I'm missing Iosevka.
timbit42 5y ago
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. More fonts besides Google Fonts would be nice.
timw4mail 5y ago
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.
- praash 5y ago
  The CSS example has barely any capital letters.
buster 5y ago
Awesome. It would be nice to have more fonts (DejaVuSansMono please). And to not show the name until the end :)
artemonster 5y ago
Example code should be changed to easily include lots of problematic cases: 1Iil, O0, etc.
- mannykannot 5y ago
  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.
rubyist5eva 5y ago
I spent months trying to find the specific font that: 1. I enjoyed looking at 2. Made discerning ambiguous characters when reading code easy. For example: l, 1, 0, O, Z, 2 I ended up creating my own custom build of Iosevka, now I can humble brag and have hipster cred that I have a font that is unique in the world (lol).
- wentin 5y ago
  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/ https://css-mono.wentin.net/
  - rubyist5eva 5y ago
    very cool shameless plug, I like playing around with new fonts every once in a while even if it's just for fun
nicholasjarr 5y ago
Good job! I think you should add Iosevka, and I think the editors should scroll at the same time so comparing would be easier
robertakarobin 5y ago
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?
- spyke112 5y ago
  Same here. Might be a rate limit thing, lots of stuff not loading.
- seagoj 5y ago
  same for me
- neves 5y ago
  Same here. I loved the idea.
- whalesalad 5y ago
  This is the ultimate troll - your winning coding font is times new roman!
  - robertakarobin 5y ago
    I had a student who used Apple Chancery in her IDE, no joke.
  - throwaway889900 5y ago
    Nothing like some good ol' Comic Sans in the world's best IDE: Microsoft Word. Also all spaces are now Unicode spaces.
    - seanw444 5y ago
      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.
armagon 5y ago
Very cool. 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.]
seagoj 5y ago
is this broken for anyone else? it acts like I've already done the tournament and won't restart
lucideer 5y ago
Hit by the HN hug of death?
asciimov 5y ago
I like the idea. Some thoughts: - 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.
- hawkesnest 5y ago
  > jiI1l0O test. I like to see those characters that can often be too similar in shape shown together. This is a big one for me. None of the sample text had a capital O to compare to 0.
  - captaincrisp 5y ago
    Recently I've noticed I have an issue distinguishing 8 from 0 with some dotted zero fonts. That'd be a nice one to see also.
  - a_e_k 5y ago
    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.
    - Fwirt 5y ago
      Thanks for the name drop! Luculent looks like a nice font that checks all the boxes. I'd like to see it added to this project as well.
agent327 5y ago
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...
- kitsunesoba 5y ago
  Those are known as ligatures. Ligaturizer[0], which copies Fira Code’s ligatures into any font, may be of interest. [0]: https://github.com/ToxicFrog/Ligaturizer https://github.com/ToxicFrog/Ligaturizer
  - agent327 5y ago
    Oh wow, thanks, that's amazing! Totally trying that tomorrow! Thanks again, kind stranger!
zachaden 5y ago
Wait what happened? I don't get what's the purpose of the site. I didn't play any game, can anyone explain?
corsibu 5y ago
Ouch: { "statusCode":400, "error":"Bad Request", "message":"{\"error\":{\"code\":429,\"message\":\"Quota exceeded for quota metric 'Queries' and limit 'Queries per day' of service 'webfonts.googleapis.com' for consumer 'project_number:524817652413'.\",\"errors\":[{\"message\":\"Quota exceeded for quota metric 'Queries' and limit 'Queries per day' of service 'webfonts.googleapis.com' for consumer 'project_number:524817652413'.\",\"domain\":\"global\",\"reason\":\"rateLimitExceeded\"}],\"status\":\"RESOURCE_EXHAUSTED\"}}", "data":{ "error":{ "code":429, "message":"Quota exceeded for quota metric 'Queries' and limit 'Queries per day' of service 'webfonts.googleapis.com' for consumer 'project_number:524817652413'.", "errors":[ { "message":"Quota exceeded for quota metric 'Queries' and limit 'Queries per day' of service 'webfonts.googleapis.com' for consumer 'project_number:524817652413'.", "domain":"global", "reason":"rateLimitExceeded" } ], "status":"RESOURCE_EXHAUSTED" } }, "metadata":{ "request":{ "url":"https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyA0PpdPSK7dMRJ8vEME3zR1bFtryq0E1zI https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyA0...", "method":"GET", "body":null, "headers":{ "User-Agent":"Retool/2.0 (+https://docs.tryretool.com/docs/apis https://docs.tryretool.com/docs/apis)", "X-Retool-Forwarded-For":"194.209.182.135" } }, "headers":{ "vary":[ "Origin, X-Origin, Referer" ], "content-type":[ "application/json; charset=UTF-8" ], "date":[ "Wed, 27 Oct 2021 14:22:25 GMT" ], "server":[ "ESF" ], "content-length":[ "520" ], "x-xss-protection":[ "0" ], "x-frame-options":[ "SAMEORIGIN" ], "x-content-type-options":[ "nosniff" ], "alt-svc":[ "h3=\":443\"; ma=2592000,h3-29=\":443\"; ma=2592000,h3-Q050=\":443\"; ma=2592000,h3-Q046=\":443\"; ma=2592000,h3-Q043=\":443\"; ma=2592000" ] }, "status":429, "statusText":"Too Many Requests" } }
fictorial 5y ago
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/ https://www.recursive.design/ Even I admit it looks a bit off at larger sizes but at say 15pt it's fantastic.
neonihil 5y ago
This is awesome! I found a new favourite font - Azeret Mono. Thank you! Much appreciated!
stackbutterflow 5y ago
Netflix should make that into a movie selector. Could be used for food too.
sosuke 5y ago
Please add ligatures! => ==!
afandian 5y ago
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.
aldanor 5y ago
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).
intrepidhero 5y ago
Only one serif font? That made it a pretty easy tournament for me. ;-)
mftb 5y ago
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.
Arkanosis 5y ago
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!
- rbates 5y ago
  Interesting, I ended up with Fira Mono and my current font is also DejaVu Sans Mono which I also like better. The @ sign does it for me.
peakaboo 5y ago
Really nice work! My girlfriend said she would like to change colors as well, so adding a few themes could be a feature request. But really cool idea :)
mparnisari 5y ago
Great idea! But some of the fonts presented looked absolutely identical to me and I picked a winner at random :/
grahamlee 5y ago
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.
mcc1ane 5y ago
Hack?
- joshka 5y ago
  +1 the tool gave me Oxygen Mono and Fira Mono. I prefer the kerning of Hack Mono much better.
dham 5y ago
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.
zzzeek 5y ago
noto sans mono
mbar84 5y ago
No Iosevka?
josephcsible 5y ago
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.
nXqd 5y ago
I keep clicking and realize Consolas is not on the list. For some reason, I keep sticking with consolas.
uuddlrlr 5y ago
It doesn't have Fantasque Sans Mono, unfortunately.
xcambar 5y ago
As everyone else said: please hide the font names. As is, I ended up with my current reference font. No surprise.
darkstar999 5y ago
I find myself comparing lower case L. I prefer the L's that don't look like the number 1. l1l1l1
henning 5y ago
Completely breaks with uBlock Origin.
Naac 5y ago
This appears broken on Firefox 93b7 on Ubuntu.
Sunspark 5y ago
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.
- kazinator 5y ago
  I'm using a bitmapped font called Terminus these days. Do you know of any other good ones for coding?
  - Sunspark 5y ago
    Take a look at the selection here: https://github.com/Tecate/bitmap-fonts https://github.com/Tecate/bitmap-fonts
- a_e_k 5y ago
  Shameless plug: Luculent [0] 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. [0] http://eastfarthing.com/luculent/ http://eastfarthing.com/luculent/
ftkftk 5y ago
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.
Thespian2 5y ago
As of mid-day wednesday Chrome blocking site as "unsafe" due to certificate error. Over-riding that and OpenDNS blocks it as malware. Creators may want to investigate.
DiabloD3 5y ago
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.
chameco 5y ago
Notably missing the best monospaced font. http://terminus-font.sourceforge.net/ http://terminus-font.sourceforge.net/
deleted 5y ago
[deleted]
ab_testing 5y ago
Very interesting and blind mode is even better . But can you play this game in light mode as I normally code in the light mode rather than dark mode
rozab 5y ago
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.
robbles 5y ago
What are you using to run the tournament logic? Custom code, or some kind of library?
azinman2 5y ago
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.
kevintb 5y ago
Great site! Just ended up discovering a new font that I like :)
rewgs 5y ago
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.
- colinpotter 5y ago
  I think it is so you can compare the same characters in each font
CodeIsTheEnd 5y ago
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.
lillesvin 5y ago
Suggestion to include Go Mono: https://go.dev/blog/go-fonts https://go.dev/blog/go-fonts By far my favorite coding font, even though Share Tech Mono is looking good too after trying your game/app. Nice work!
bulletsvshumans 5y ago
Nice work! Would be cool to see stats on which fonts were winning in general.
kazinator 5y ago
> You have chosen the winner: Inconsolata Unsurprising, given that as far as anti-aliased fonts go, I long settled on Microsoft's Consolas. But the game should include some bitmapped fonts like Terminus, which is what I'm using now. It's so sharp at 2K, and looks befitting of a computer.
jonesnc 5y ago
My favorite coding font is Consolas. Any chance of that one?
gennarro 5y ago
Fun but missing some great fonts!
kuratkull 5y ago
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.
truculent 5y ago
Fun project! I did this twice (once blind, once not) and ended up with Source Code Pro both times, which I hadn't heard of it before!
zX41ZdbW 5y ago
My shameless plug: https://alexey-milovidov.github.io/font-selector/ https://alexey-milovidov.github.io/font-selector/ I've created this small comparison web page for myself and my team.
henry_bone 5y ago
I ended up with Oxygen Mono after going through the tournament in blind mode. I'd love to know my top, say, 5.
astangl 5y ago
Nice idea, thanks wentin! 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. Is this open source?
tuatoru 5y ago
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... https://fonts.google.com/specimen/B612+Mono#about https://fonts.google.com/specimen/B612+Mono#about To me it looks like the designers achieved their goals. Best to play this game after eight or ten hours' coding.
- Althuns 5y ago
  I really liked B612, but I couldn't take the tiny colons and semicolons. If they were normally sized, this would be the perfect font.
illiac786 5y ago
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.
NilsIRL 5y ago
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!
afarviral 5y ago
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.
bradknowles 5y ago
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. I wonder why?
quickthrower2 5y ago
An all caps coding font? That’s some serious evil!
mslm 5y ago
Hah, I turned off font names and the result came out to be the font I already use! (Source Code Pro)
diego2115 5y ago
Very nice! Just picked a new font with this. Fira Code is no more! Roboto Mono is my new jam.
hnarn 5y ago
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.
gurjeet 5y ago
My results: B612 Mono [1]. 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 ... [1]: https://fonts.google.com/specimen/B612+Mono#standard-styles https://fonts.google.com/specimen/B612+Mono#standard-styles
stolsvik 5y ago
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
bravetraveler 5y ago
Hah, that was fun - 'blindly' picked my current font!
scotty79 5y ago
Ubuntu Mono ... I guess I'm basic. Even though I haven't used linux for coding for roughly a decade
scotty79 5y ago
Do you know any monospace font that has slightly narrower capital letter glyphs and moved to the right in the space they occupy? I'd like to have easier time with parsing snakeCaseFunctionNames()
deleted 5y ago
[deleted]

443 points by wentin 5y ago

I spent a few minutes on it, but Is there any kind of end?

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)

lucasverra 5y ago

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

lucasverra 5y ago
I see using this UI for business decision-making for 5-10 options
- rafd 5y ago
  I made a tool like this for our team a while back, and made it available for free: https://decidedly.so https://decidedly.so 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 https://github.com/decidedlyso/merge-insertion-sort )

doodpants 5y ago

Some missing fonts that I would like to see added: - Liberation Mono - DejaVu Sans Mono - SF Mono That said, I ended up picking Cousine, which is a font I had never heard of before. (Edit: Cousine seems to be identical to Liberation Mono.)

westwardly 5y ago
Only difference I can see is the lowercase "l", which in Cousine looks closer to "1" than in Liberation Mono. I picked Cousine as well.

StevePerkins 5y ago

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.

jcelerier 5y ago

well, the font I've been using for close to a decade, Anonymous Pro, is still my favourite

rm8x 5y ago

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.

DavideNL 5y ago

I seem to be stuck in some endless loop, I never saw the end... Perhaps consider showing some kind of progress or something...? (Safari, iPhone)

chowyuncat 5y ago

This worked well on iOS Safari. Nice job! At the end I wanted to know the distribution of other users’ preferences.

dejawu 5y ago

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.

srcreigh 5y ago

Missing the best fonts. Tamsyn7x14 on 1080p screens, and Iosevka Light on Retina/5k screens.

WillKirkby 5y ago

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.

yfkar 5y ago
Similar issue on Chrome 95 / Linux Mint Cinnamon. For me this was a test of which fonts remain somewhat readable when blurred.
baxuz 5y ago
Was just about to say that.
nisegami 5y ago
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).
jy14898 5y ago
Opening the link the iframe is pointing to helped for me: https://typogram.retool.com/embedded/public/1eb9acb6-fc70-447b-ae86-aa7e9aedb207 https://typogram.retool.com/embedded/public/1eb9acb6-fc70-44...

k4rli 5y ago

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.

wentin 5y ago
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?!
WithinReason 5y ago
That's my favorite font as well, next to Iosevka which was missing from the fonts listed. My main reason for liking both is ligatures support, which the website failed to show off.
- akuji1993 5y ago
  Yeah the comparison is kinda incomplete without showing the ligature support of both fonts.
- antihero 5y ago
  Any font can have ligatures now https://github.com/ToxicFrog/Ligaturizer https://github.com/ToxicFrog/Ligaturizer
simse 5y ago
Yeah that'd be super cool, I also ended picking the one I already use.
iampivot 5y ago
Concur! It would be nice to hide the font name.
karmakaze 5y ago
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.

oefrha 5y ago

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.

maratc 5y ago
SF Mono should also be on that list.
jaywalk 5y ago
Yep. I've tried other fonts, and always end up back to Consolas.

yakkomajuri 5y ago

Quite a fun idea. Kudos!

_hao 5y ago

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

giomasce 5y ago
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.
revolvingocelot 5y ago
>paste my own code This. The 'lorem ipsum' CSS provided wasn't too bad, but that's not my brace style and I found it jarring, waah D:

lampe3 5y ago

I really like the idea. 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.

Aachen 5y ago

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?

lucideer 5y ago
Looks like it broke from a hug. Tried in a few different browsers: checking console shows a tonne of 404s for assets.

jokoon 5y ago

It's hard to beat Consolas, although the rendering system seems to really matter a lot. I've made my own pixel font, inspired from ProFont, but it's not usable because it's a pixel font, and it's too big when I zoom it 2x.

xbar 5y ago
I think you are right. I'm giving IBM Plex Mono a go as a result of the coding game. We'll see if it has staying power in comparison to Consolas.

chrisbuc 5y ago

Fun to play. Any reason consolas isn't there? (My winner was Anonymous Pro)

luke2m 5y ago
Not free on Google Fonts probably.

5350-uiop-1130 5y ago

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.

Terretta 5y ago
+1 Andale Mono, which isn't here. 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 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%20Fonts/win/ https://sourceforge.net/projects/mscorefonts/files/MS%20Core... And for Linux, here: http://mscorefonts2.sourceforge.net http://mscorefonts2.sourceforge.net

js4ever 5y ago

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?

arp242 5y ago
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.
djxfade 5y ago
Yes
xvedejas 5y ago
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.
sodality2 5y ago
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.

abestic9 5y ago

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! - Themes, pretty self explanatory.

vehemenz 5y ago
I second Cascadia Code. 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.

harshitaneja 5y ago

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.

Razengan 5y ago

Can I get that annoying Product Hunt floater out of the way

giomasce 5y ago
Ctrl+Shift+C, click it and Del. (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)

geraltofrivia 5y ago

I love it! 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:

captn3m0 5y ago

My current font (https://input.djr.com/preview/ https://input.djr.com/preview/) isn't on the list, sadly.

capableweb 5y ago

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.

warpech 5y ago

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. [1] https://djr.com/input https://djr.com/input

polytely 5y ago
I like Input for exactly that reason, it's great

LeonidasXIV 5y ago

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

pantulis 5y ago

This is very fun. Would love to see Iosevka there.

porker 5y ago

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

pca006132 5y ago

Why not make the font size and color the same between the two panels? Hard to compare as they are different for some fonts...

anotherhue 5y ago
Inconsolata (a favourite of mine) suffers from this greatly.
bovermyer 5y ago
This is much harder than it sounds, since font-size: 16px for one font is not going to be the same, visually, as font-size: 16px for another font. Inconsolata, for example, is much smaller than DM Mono, but they're both displayed at 16px.
- pca006132 5y ago
  I remember that there is something like https://seek-oss.github.io/capsize/ https://seek-oss.github.io/capsize/ , not sure if it could work here.

sodality2 5y ago

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.

politelemon 5y ago

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.

wentin 5y ago
For the blind tournament, I just implemented it! Give it a try :)
- INTPenis 5y ago
  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.

itsbits 5y ago

Wow...I got Fira Mono which I am using BTW...Also I have done without reading names on top... There should an option to hide names of what font it is.

dom111 5y ago

Also like this and second the other comments about different source code options. I would also like to suggest that the side-by-side panes scroll together too, so that the comparison is easier to track.

mdp2021 5y ago

Nice! Suggestions: -- make the individual fonts compete more times in randomized comparisons (one font should not win over a single other) -- option to overlap the renderings in a canvas with bitmap difference (to highlight the differences in glyphs) -- option to choose the text to be rendered, with syntax highlighting -- upload fonts for further comparison (maybe through @font-face src URLs); edit the list of comparisons

jaywalk 5y ago
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.
- mdp2021 5y ago
  If you are interest in obtaining a set of the best, single "competition matches" per candidate filter out good candidates earlier. '(67 vs 89) vs (12 vs 45)' will filter out early good option '67'. Irrelevant if you goal is '89'; relevant if your goal is '(89, 67)'.

frereubu 5y ago

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.

pipnonsense 5y ago

Fun experiment. My suggestion is to add "Iosevka" as a contester. It is my font of choice and I am curious if it would win for me (while trying not to look in the names). It had some popularity with HN in the past: https://news.ycombinator.com/item?id=14009963 https://news.ycombinator.com/item?id=14009963

larsrc 5y ago

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.

TheRealDunkirk 5y ago

Fails without Monaco as an option. ;-) I wound up with Inconsolata, which I see now looks a lot like it.

__del__ 5y ago
Monaco 9 takes me back to coding for Macintosh System 6. Inconsolata is my daily driver.

bovermyer 5y ago

Nice idea. Ditch the font names until the end. Add Fantasque Sans Mono and Iosevka.

comeonseriously 5y ago

Major Mono Display for the WIN! That was actually nicely done. I'll play it more seriously later.

penjelly 5y ago

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.

rcarmo 5y ago

This is pretty fun, although I knew going in that I would most likely end up choosing Fira Code as I tried many over the years...

prirai 5y ago

The list could have been a bit bigger as I see that three of my favorites aren't even there.

OliverJones 5y ago

Excellent. This light-mode holdout wishes for a white-background tournament.

karmakaze 5y ago

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. [0] https://input.djr.com/download/ https://input.djr.com/download/

paufernandez 5y ago

I'm missing Iosevka.

timbit42 5y ago

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. More fonts besides Google Fonts would be nice.

timw4mail 5y ago

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.

praash 5y ago
The CSS example has barely any capital letters.

buster 5y ago

Awesome. It would be nice to have more fonts (DejaVuSansMono please). And to not show the name until the end :)

artemonster 5y ago

Example code should be changed to easily include lots of problematic cases: 1Iil, O0, etc.

mannykannot 5y ago
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.

rubyist5eva 5y ago

I spent months trying to find the specific font that: 1. I enjoyed looking at 2. Made discerning ambiguous characters when reading code easy. For example: l, 1, 0, O, Z, 2 I ended up creating my own custom build of Iosevka, now I can humble brag and have hipster cred that I have a font that is unique in the world (lol).

wentin 5y ago
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/ https://css-mono.wentin.net/
- rubyist5eva 5y ago
  very cool shameless plug, I like playing around with new fonts every once in a while even if it's just for fun

nicholasjarr 5y ago

Good job! I think you should add Iosevka, and I think the editors should scroll at the same time so comparing would be easier

robertakarobin 5y ago

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?

spyke112 5y ago
Same here. Might be a rate limit thing, lots of stuff not loading.
seagoj 5y ago
same for me
neves 5y ago
Same here. I loved the idea.
whalesalad 5y ago
This is the ultimate troll - your winning coding font is times new roman!
- robertakarobin 5y ago
  I had a student who used Apple Chancery in her IDE, no joke.
- throwaway889900 5y ago
  Nothing like some good ol' Comic Sans in the world's best IDE: Microsoft Word. Also all spaces are now Unicode spaces.
  - seanw444 5y ago
    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.

armagon 5y ago

Very cool. 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.]

seagoj 5y ago

is this broken for anyone else? it acts like I've already done the tournament and won't restart

lucideer 5y ago

Hit by the HN hug of death?

asciimov 5y ago

I like the idea. Some thoughts: - 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.

hawkesnest 5y ago
> jiI1l0O test. I like to see those characters that can often be too similar in shape shown together. This is a big one for me. None of the sample text had a capital O to compare to 0.
- captaincrisp 5y ago
  Recently I've noticed I have an issue distinguishing 8 from 0 with some dotted zero fonts. That'd be a nice one to see also.
- a_e_k 5y ago
  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.
  - Fwirt 5y ago
    Thanks for the name drop! Luculent looks like a nice font that checks all the boxes. I'd like to see it added to this project as well.

agent327 5y ago

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

kitsunesoba 5y ago
Those are known as ligatures. Ligaturizer[0], which copies Fira Code’s ligatures into any font, may be of interest. [0]: https://github.com/ToxicFrog/Ligaturizer https://github.com/ToxicFrog/Ligaturizer
- agent327 5y ago
  Oh wow, thanks, that's amazing! Totally trying that tomorrow! Thanks again, kind stranger!

zachaden 5y ago

Wait what happened? I don't get what's the purpose of the site. I didn't play any game, can anyone explain?

corsibu 5y ago

Ouch: { "statusCode":400, "error":"Bad Request", "message":"{\"error\":{\"code\":429,\"message\":\"Quota exceeded for quota metric 'Queries' and limit 'Queries per day' of service 'webfonts.googleapis.com' for consumer 'project_number:524817652413'.\",\"errors\":[{\"message\":\"Quota exceeded for quota metric 'Queries' and limit 'Queries per day' of service 'webfonts.googleapis.com' for consumer 'project_number:524817652413'.\",\"domain\":\"global\",\"reason\":\"rateLimitExceeded\"}],\"status\":\"RESOURCE_EXHAUSTED\"}}", "data":{ "error":{ "code":429, "message":"Quota exceeded for quota metric 'Queries' and limit 'Queries per day' of service 'webfonts.googleapis.com' for consumer 'project_number:524817652413'.", "errors":[ { "message":"Quota exceeded for quota metric 'Queries' and limit 'Queries per day' of service 'webfonts.googleapis.com' for consumer 'project_number:524817652413'.", "domain":"global", "reason":"rateLimitExceeded" } ], "status":"RESOURCE_EXHAUSTED" } }, "metadata":{ "request":{ "url":"https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyA0PpdPSK7dMRJ8vEME3zR1bFtryq0E1zI https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyA0...", "method":"GET", "body":null, "headers":{ "User-Agent":"Retool/2.0 (+https://docs.tryretool.com/docs/apis https://docs.tryretool.com/docs/apis)", "X-Retool-Forwarded-For":"194.209.182.135" } }, "headers":{ "vary":[ "Origin, X-Origin, Referer" ], "content-type":[ "application/json; charset=UTF-8" ], "date":[ "Wed, 27 Oct 2021 14:22:25 GMT" ], "server":[ "ESF" ], "content-length":[ "520" ], "x-xss-protection":[ "0" ], "x-frame-options":[ "SAMEORIGIN" ], "x-content-type-options":[ "nosniff" ], "alt-svc":[ "h3=\":443\"; ma=2592000,h3-29=\":443\"; ma=2592000,h3-Q050=\":443\"; ma=2592000,h3-Q046=\":443\"; ma=2592000,h3-Q043=\":443\"; ma=2592000" ] }, "status":429, "statusText":"Too Many Requests" } }

fictorial 5y ago

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/ https://www.recursive.design/ Even I admit it looks a bit off at larger sizes but at say 15pt it's fantastic.

neonihil 5y ago

This is awesome! I found a new favourite font - Azeret Mono. Thank you! Much appreciated!

stackbutterflow 5y ago

Netflix should make that into a movie selector. Could be used for food too.

sosuke 5y ago

Please add ligatures! => ==!

afandian 5y ago

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.

aldanor 5y ago

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

intrepidhero 5y ago

Only one serif font? That made it a pretty easy tournament for me. ;-)

mftb 5y ago

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.

Arkanosis 5y ago

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!

rbates 5y ago
Interesting, I ended up with Fira Mono and my current font is also DejaVu Sans Mono which I also like better. The @ sign does it for me.

peakaboo 5y ago

Really nice work! My girlfriend said she would like to change colors as well, so adding a few themes could be a feature request. But really cool idea :)

mparnisari 5y ago

Great idea! But some of the fonts presented looked absolutely identical to me and I picked a winner at random :/

grahamlee 5y ago

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.

mcc1ane 5y ago

Hack?

joshka 5y ago
+1 the tool gave me Oxygen Mono and Fira Mono. I prefer the kerning of Hack Mono much better.

dham 5y ago

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.

zzzeek 5y ago

noto sans mono

mbar84 5y ago

No Iosevka?

josephcsible 5y ago

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.

nXqd 5y ago

I keep clicking and realize Consolas is not on the list. For some reason, I keep sticking with consolas.

uuddlrlr 5y ago

It doesn't have Fantasque Sans Mono, unfortunately.

xcambar 5y ago

As everyone else said: please hide the font names. As is, I ended up with my current reference font. No surprise.

darkstar999 5y ago

I find myself comparing lower case L. I prefer the L's that don't look like the number 1. l1l1l1

henning 5y ago

Completely breaks with uBlock Origin.

Naac 5y ago

This appears broken on Firefox 93b7 on Ubuntu.

Sunspark 5y ago

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.

kazinator 5y ago
I'm using a bitmapped font called Terminus these days. Do you know of any other good ones for coding?
- Sunspark 5y ago
  Take a look at the selection here: https://github.com/Tecate/bitmap-fonts https://github.com/Tecate/bitmap-fonts
a_e_k 5y ago
Shameless plug: Luculent [0] 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. [0] http://eastfarthing.com/luculent/ http://eastfarthing.com/luculent/

ftkftk 5y ago

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.

Thespian2 5y ago

As of mid-day wednesday Chrome blocking site as "unsafe" due to certificate error. Over-riding that and OpenDNS blocks it as malware. Creators may want to investigate.

DiabloD3 5y ago

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.

chameco 5y ago

Notably missing the best monospaced font. http://terminus-font.sourceforge.net/ http://terminus-font.sourceforge.net/

deleted 5y ago

[deleted]

ab_testing 5y ago

Very interesting and blind mode is even better . But can you play this game in light mode as I normally code in the light mode rather than dark mode

rozab 5y ago

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.

robbles 5y ago

What are you using to run the tournament logic? Custom code, or some kind of library?

azinman2 5y ago

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.

kevintb 5y ago

Great site! Just ended up discovering a new font that I like :)

rewgs 5y ago

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.

colinpotter 5y ago
I think it is so you can compare the same characters in each font

CodeIsTheEnd 5y ago

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.

lillesvin 5y ago

Suggestion to include Go Mono: https://go.dev/blog/go-fonts https://go.dev/blog/go-fonts By far my favorite coding font, even though Share Tech Mono is looking good too after trying your game/app. Nice work!

bulletsvshumans 5y ago

Nice work! Would be cool to see stats on which fonts were winning in general.

kazinator 5y ago

> You have chosen the winner: Inconsolata Unsurprising, given that as far as anti-aliased fonts go, I long settled on Microsoft's Consolas. But the game should include some bitmapped fonts like Terminus, which is what I'm using now. It's so sharp at 2K, and looks befitting of a computer.

jonesnc 5y ago

My favorite coding font is Consolas. Any chance of that one?

gennarro 5y ago

Fun but missing some great fonts!

kuratkull 5y ago

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.

truculent 5y ago

Fun project! I did this twice (once blind, once not) and ended up with Source Code Pro both times, which I hadn't heard of it before!

zX41ZdbW 5y ago

My shameless plug: https://alexey-milovidov.github.io/font-selector/ https://alexey-milovidov.github.io/font-selector/ I've created this small comparison web page for myself and my team.

henry_bone 5y ago

I ended up with Oxygen Mono after going through the tournament in blind mode. I'd love to know my top, say, 5.

astangl 5y ago

Nice idea, thanks wentin! 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. Is this open source?

tuatoru 5y ago

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... https://fonts.google.com/specimen/B612+Mono#about https://fonts.google.com/specimen/B612+Mono#about To me it looks like the designers achieved their goals. Best to play this game after eight or ten hours' coding.

Althuns 5y ago
I really liked B612, but I couldn't take the tiny colons and semicolons. If they were normally sized, this would be the perfect font.

illiac786 5y ago

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.

NilsIRL 5y ago

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!

afarviral 5y ago

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.

bradknowles 5y ago

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. I wonder why?

quickthrower2 5y ago

An all caps coding font? That’s some serious evil!

mslm 5y ago

Hah, I turned off font names and the result came out to be the font I already use! (Source Code Pro)

diego2115 5y ago

Very nice! Just picked a new font with this. Fira Code is no more! Roboto Mono is my new jam.

hnarn 5y ago

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.

gurjeet 5y ago

My results: B612 Mono [1]. 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 ... [1]: https://fonts.google.com/specimen/B612+Mono#standard-styles https://fonts.google.com/specimen/B612+Mono#standard-styles

stolsvik 5y ago

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

bravetraveler 5y ago

Hah, that was fun - 'blindly' picked my current font!

scotty79 5y ago

Ubuntu Mono ... I guess I'm basic. Even though I haven't used linux for coding for roughly a decade

scotty79 5y ago

Do you know any monospace font that has slightly narrower capital letter glyphs and moved to the right in the space they occupy? I'd like to have easier time with parsing snakeCaseFunctionNames()

deleted 5y ago

[deleted]