- 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.
> - Make all the fonts equal in height regardless of font point.
I like the current scheme which keeps the line height or px equal I'm guessing. So this should be a toggle-able option.
Another feature request: It'd be nice to compare the overall width of each font in terms of having 80 or 100 or 120 character limits on width. I'm always wondering what font is the best for viewing two files side-by-side on a 1280x800 display.
i was pretty impressed that my final pair ended up being fira code and fira mono, so i tried switching my terminal font from bitstream vera sans mono. it looked markedly worse - i switched back within a couple of minutes. i think your point about the displayed text size affecting my judgement is spot on.
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.
Is it just me, or does it not appear to be working for anyone else? It just shows "You have chosen the winner" and none of the buttons seem to have an effect.
Edit: Clicking 'Restart Tournament' seems to spawn a worker that pushes my CPU over 100%. Open source your code, perhaps?
Sorry I went to sleep and woke to the app not working. Stupidly used Google Fonts API when I really don't have to, was being lazy. It is fixed now! Please try again?
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.
A feedback: The use case is less than ideal. Its CSS. That shouldn't be a problem but its (i) its not the kind of syntax I'm used to reading, and (ii) its not a ligature heavy use case.
As an instance, I'm given a choice between Fira Code and Fira Mono. First off, er... maybe don't put them together. Second, the only difference between the two, as far as I can remember is that one has ligatures enabled, one doesn't. And the CSS codebase I'm reading doesn't seem to have any ligatures, so :shrug:
I like the idea, but fonts are hard to choose from, especially with a specimen as regular as a CSS file. If I had to pick a file type with variety, I might go for PHP, with inline HTML, CSS, and Javascript, and attempt to show all the symbols on the keyboard, as well as common ligatures.
That said, there's so much variety in fonts that someone's favorite is likely missing regardless of the selection. Perhaps an initial culling based on features would help, eg. ligatures/no ligatures, serif/sans-serif, etc.
I'm also not really able to firmly decide, so I tend to switch fonts every so often.
Fun game, my compliments to the creators.. there is one variable for me that makes it more difficult. Anti-aliasing. I turn it off on my display because I like sharp crisp fonts without blurred edges--and in fact, the higher resolution your display is, the less you need AA.
Many "good" fonts are no longer hinted to fit to the raster grid, it is just assumed that you are using AA, period. What happens in that circumstance, is that the unhinted font looks really misshapen. Because of this in Firefox I de-select "Allow pages to choose their own fonts, instead of your selections above" and use instead a font that was designed to work well without AA (for the web, I like using Verdana).
So, for an editor's font, the best ones are bitmapped raster fonts for that pixel-perfect sharpness.
You can also use a TTF/OTF font with embedded bitmaps at specific sizes.
Regular TTF will work well also, if it is old enough that it contains hinting instructions. E.g. Bitstream Vera Sans is a monospaced font that is properly hinted for a pixel grid.
I was crazy enough to handwrite all of the TTF hinting instructions for it (albeit with a macro assembler-like tool). Every glyph in the regular and bold variants is superhinted to look pixel perfect without AA when viewed in the 9px to 19px range, and decent beyond that. With AA on, all four variants are hinted for the pixel grid at 9px and up. I also came up with some magic to try to force Cleartype to still grid-fit it horizontally.
One of my main selection criteria for a coding/terminal font is subjective quality of rendering and legibility at small sizes. The preview has an adjustable point size option but that isn't the whole story. The space taken up when rendered is what's important (i.e. pixel height of Em/line and/or the width of 80 monospaced characters.) Edit: A simple solution is to allow independent setting of Point size for the left and right previews so they can be visually the same size, rather than the same stated Pt.no.
Also missing one of my go-tos "Input Mono"[0]. What's great about it is that it comes with so many custom choices that you can configure specific character shapes and choose a width/weight that renders well for your particular use case.
I like the idea, but CSS is not indicative of my main language use (C++/C#), so it's a bit hard to decide a winner in some cases. I'd like the option to either choose a language and/or the ability to paste my own code.
EDIT: I've been with Inconsolata for a few years, but maybe a new contender can appear :)
Agree. One of the features of my current choice (Fira Code, but I've been with Inconsolata for a lot of time) is that it has ligatures for common groups like "!=" or "<<=", and CSS doesn't have them.
Thanks for this! I was unaware of B612. It looks like I have a new coding font.
> About B612 Mono
B612 is an highly legible open source font family, designed and tested to be used on aircraft cockpit screens. Its design makes it particularly suitable for degraded contexts (ensuring legibility and readability of data), with a positive effect on reducing visual fatigue and cognitive load. Particular attention was given to the uniformity of the typeface, whether being used for isolated terms, reading information on a map, mixing capital letters and numbers, waypoint lists, long or abbreviated texts...
> In 2010, Airbus initiated a research collaboration with ENAC and Université de Toulouse III on a prospective study to define and validate an “Aeronautical Font”: the challenge was to improve the display of textual data information on all cockpit screens, concerning more specifically legibility, readability and reading comfort...
Bug report: on Chrome 95 / Windows, fullscreened on a 1080p display, the data-testid="RetoolGrid:container_question" element gets a dynamically-calculated translate3d transform that's not pixel-aligned, making all the text in the code regions extremely blurry.
Thanks, wasn't sure if it was just me. Trying it again on Firefox.
Edit: Win 10, Chrome 95 maximized on 1600x900
Edit 2: Surprisingly, the font that won when I ran it on Chrome was #2 when I tried it again on Firefox (I tried not to look at the names as much as possible to avoid this).
A fun page! I agree that blind-testing would be important, especially having the name shown in red draws a lot of attention.
A possibly better method (but harder to implement) would be to show code snippets briefly, then ask a related question. This would test how well you can actually read the various fonts - as long as the samples and questions control for other things.
Awesome concept, I heavily factored in the different widths and glyph variations (like O, 0). I was surprised to get Overpass Mono, I would've never considered it otherwise. A couple of suggestions:
- Allow editing and preserve the user's content or at least the ability to select a language. CSS doesn't display a lot of the nuances present in other languages, and some people simply use monospaced for other kinds of writing. Though I appreciate this may add a requirement for a syntax formatting library.
- Add Iosevka and Cascadia Code fonts, among probably many others that will be suggested here. Better yet, add the ability for a user to set a custom font source URL and change it to a blind test!
I think I'm missing something. When I click the link, the site loads for a bit and then presents a drum roll and a message that I've chosen a winning font? Both in a browser with tracking blocking and a clean Firefox mobile. @wentin did the site break from a hug or any idea what's going wrong here?
Seems to only feature free fonts available from Google Fonts (understandable). My personal favorites are the non-free ones: Apple's Monaco and Microsoft's Consolas.
Ok, so Fira Code won hands down for me and I decided to compare it to the font I'm using today (DejaVu Sans Mono) before switching… And I actually like DejaVu Sans Mono better (among other things because it doesn't do ligatures that make => indistinguishable from ⇒). Too bad it's missing from the game because otherwise it really got it right! I love both the concept and the execution!
I 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.
[+] [-] asciimov|4 years ago|reply
- 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.
[+] [-] jordanpg|4 years ago|reply
[+] [-] hawkesnest|4 years ago|reply
This is a big one for me. None of the sample text had a capital O to compare to 0.
[+] [-] GordonS|4 years ago|reply
[+] [-] fouc|4 years ago|reply
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.
[+] [-] rbates|4 years ago|reply
- Option to lock scrolling so they both scroll at the same time.
- Button to flip them in place to help see the differences.
[+] [-] layer8|4 years ago|reply
- Allow line-height adjustment.
- Add Lucida Console (still my favorite coding font at 8 px cap height). :)
[+] [-] zem|4 years ago|reply
[+] [-] Osiris|4 years ago|reply
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.
[+] [-] jcuenod|4 years ago|reply
- ligatures
- italics
[+] [-] k4rli|4 years ago|reply
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.
[+] [-] robertakarobin|4 years ago|reply
Edit: Clicking 'Restart Tournament' seems to spawn a worker that pushes my CPU over 100%. Open source your code, perhaps?
[+] [-] wentin|4 years ago|reply
[+] [-] whalesalad|4 years ago|reply
[+] [-] jonesnc|4 years ago|reply
[+] [-] corsibu|4 years ago|reply
{ "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" } }
[+] [-] spyke112|4 years ago|reply
[+] [-] neves|4 years ago|reply
[+] [-] seagoj|4 years ago|reply
[+] [-] politelemon|4 years ago|reply
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|4 years ago|reply
[+] [-] geraltofrivia|4 years ago|reply
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:
[+] [-] timw4mail|4 years ago|reply
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.
[+] [-] bovermyer|4 years ago|reply
[+] [-] Sunspark|4 years ago|reply
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.
[+] [-] a_e_k|4 years ago|reply
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/
[+] [-] kazinator|4 years ago|reply
[+] [-] karmakaze|4 years ago|reply
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/
[+] [-] _hao|4 years ago|reply
EDIT: I've been with Inconsolata for a few years, but maybe a new contender can appear :)
[+] [-] revolvingocelot|4 years ago|reply
This. The 'lorem ipsum' CSS provided wasn't too bad, but that's not my brace style and I found it jarring, waah D:
[+] [-] giomasce|4 years ago|reply
[+] [-] tuatoru|4 years ago|reply
> 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.
[+] [-] Althuns|4 years ago|reply
[+] [-] WillKirkby|4 years ago|reply
[+] [-] yfkar|4 years ago|reply
[+] [-] jy14898|4 years ago|reply
[+] [-] nisegami|4 years ago|reply
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).
[+] [-] baxuz|4 years ago|reply
[+] [-] larsrc|4 years ago|reply
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.
[+] [-] abestic9|4 years ago|reply
- 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.
[+] [-] lampe3|4 years ago|reply
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|4 years ago|reply
[+] [-] oefrha|4 years ago|reply
[+] [-] jaywalk|4 years ago|reply
[+] [-] maratc|4 years ago|reply
[+] [-] Arkanosis|4 years ago|reply
[+] [-] rbates|4 years ago|reply
[+] [-] mdp2021|4 years ago|reply
-- 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
[+] [-] grahamlee|4 years ago|reply