Hacker News Reader

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.

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

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.

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.

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.

Include proportional fonts.

I know I'm not the only one that uses one. Specially I use Input which has both mono and proportional versions and designed for programming.

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.

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.

Do you have the font or your modification scripts up on github?

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.

Also consider hiding the font names. Too much bias from certain familiar keywords (JetBrains, IBM, courier, etc.).

Please do this.

There is a "blind mode" that hides the font names.

Yes, try the blind mode button, I just added it!

The name isn't intuitive. A description of the function would be better. "Hide font names".

A couple more suggestions:

- Option to lock scrolling so they both scroll at the same time.

- Button to flip them in place to help see the differences.

Also samples with:

- ligatures

- italics

I came here to say exactly this. Ligatures make a -huge- difference to me, please offer some example text that makes use of them.

Also, please make it an option to hide the font names so that it is a true blind comparison.

Awesome idea, though!

Great idea! I took it and implemented it, now there is a toggle button to turn on “Blind Mode”

Try it out!

Another idea is to synchronise scrolling within the code samples, so if I scroll in one, the other automatically scrolls to the same line.

- Add uppercase characters (lowerCamelCase, UpperCamelCase, ALL_CAPS). The sample code contains uppercase characters only in the font names.

- Allow line-height adjustment.

- Add Lucida Console (still my favorite coding font at 8 px cap height). :)

> - 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 am going through the suggestion list and implementing them. The blind mode is just added!

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.

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.

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.

Yeah the comparison is kinda incomplete without showing the ligature support of both fonts.

Any font can have ligatures now

https://github.com/ToxicFrog/Ligaturizer

Yeah that'd be super cool, I also ended picking the one I already use.

Concur! It would be nice to hide the font name.

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.

> I ended up with my current IDE font

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.

I currently use Fira Code, and I tried to focus on the text comparisons without consideration of the font names.

I ended up picking Noto Sans Mono by a very slim margin over Fira Code. Interesting...

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?!

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?

same for me

Same here. Might be a rate limit thing, lots of stuff not loading.

Same here. I loved the idea.

This is the ultimate troll - your winning coding font is times new roman!

I had a student who used Apple Chancery in her IDE, no joke.

Nothing like some good ol' Comic Sans in the world's best IDE: Microsoft Word. Also all spaces are now Unicode spaces.

Did you heard about the 'Comic Mono' font?

https://github.com/dtinth/comic-mono-font

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

https://tosche.net/fonts/comic-code

Another font with dyslexia in mind: OpenDyslexic https://opendyslexic.org/

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.

[0]: https://www.tes.com/news/does-comic-sans-really-help-dyslexi...

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=AIzaSyA0...", "method":"GET", "body":null, "headers":{ "User-Agent":"Retool/2.0 (+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" } }

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.

Yes, I hit the limit for Google Fonts API. It is fixed now. I moved off the API service. :)

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?

Still not working for me

It works if I click Reset Tournament, but when I first loaded the page it didn't work and just showed the "You have chosen the winner" message.

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.

For the blind tournament, I just implemented it! Give it a try :)

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.

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:

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.

The CSS example has barely any capital letters.

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

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'm using a bitmapped font called Terminus these days. Do you know of any other good ones for coding?

Take a look at the selection here: https://github.com/Tecate/bitmap-fonts

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/

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/

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.

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

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

To me it looks like the designers achieved their goals. Best to play this game after eight or ten hours' coding.

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.

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.

Was just about to say that.

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

Similar issue on Chrome 95 / Linux Mint Cinnamon. For me this was a test of which fonts remain somewhat readable when blurred.

Opening the link the iframe is pointing to helped for me: https://typogram.retool.com/embedded/public/1eb9acb6-fc70-44...

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!

- Themes, pretty self explanatory.

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.

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.

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?

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

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.

SF Mono should also be on that list.

Yep. I've tried other fonts, and always end up back to 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!

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.

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

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.

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

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.

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.

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.

+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

Andale Mono is bundled with MacOS, and for Windows is here:

https://sourceforge.net/projects/mscorefonts/files/MS%20Core...

And for Linux, here:

http://mscorefonts2.sourceforge.net

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

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.

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

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.

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

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.

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

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 see using this UI for business decision-making for 5-10 options

I made a tool like this for our team a while back, and made it available for free: 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 )

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

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.

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.

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.

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

Not free on Google Fonts probably.

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.

[1] https://djr.com/input

I like Input for exactly that reason, it's great

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

Notably missing the best monospaced font.

http://terminus-font.sourceforge.net/

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

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)

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.

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

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!

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.

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

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.

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.

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

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

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

Oh wow, thanks, that's amazing! Totally trying that tomorrow!

Thanks again, kind stranger!

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

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.

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

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

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/

very cool shameless plug, I like playing around with new fonts every once in a while even if it's just for fun

Suggestion to include Go Mono: 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!

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.

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?

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

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.

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

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

My shameless plug: https://alexey-milovidov.github.io/font-selector/

I've created this small comparison web page for myself and my team.

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)

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

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.

I think it is so you can compare the same characters in each font

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.

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

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.

I'm missing Iosevka.

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.

Yes

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.

I wonder why?

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

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.

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

Hack?

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

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

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

Inconsolata (a favourite of mine) suffers from this greatly.

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.

I remember that there is something like https://seek-oss.github.io/capsize/ , not sure if it could work here.

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

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

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

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

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)

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

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

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

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

Completely breaks with uBlock Origin.

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

As everyone else said: please hide the font names.

As is, I ended up with my current reference font. No surprise.

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

Ubuntu Mono ... I guess I'm basic.

Even though I haven't used linux for coding for roughly a decade

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.

Fun but missing some great fonts!

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

Major Mono Display for the WIN!

That was actually nicely done. I'll play it more seriously later.

Please add ligatures! => ==!

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

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

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

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

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

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

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

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

It doesn't have Fantasque Sans Mono, unfortunately.

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

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

This appears broken on Firefox 93b7 on Ubuntu.

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

No Iosevka?

Hit by the HN hug of death?

Quite a fun idea. Kudos!

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=AIzaSyA0...", "method":"GET", "body":null, "headers":{ "User-Agent":"Retool/2.0 (+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" } }

noto sans mono

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