- Center the code samples on the page. So that your not unintentionally one over the other due to differences in viewing angle and vision ability.
- Make all the fonts equal in height regardless of font point. Knee jerk reaction will be to go with the font that is closest to a persons normal preference.
- Hide Font names and size/points.
- Light theme and other color options.
- Other programming language options.
- jiI1l0O test. I like to see those characters that can often be too similar in shape shown together.
- Controversial, throw in some non mono-spaced fonts.
When I developed my own coding font (Luculent), the compact sample that I ultimately came up with was:
// The five boxing wizards jump
#include <stdio.h> // <= quickly.
int main(int argc, char **argv) {
float il1[]={1-2/3.4,5+6==7/8};
int OxFaced=0xBAD||"[{(CQUINE";
unsigned O0,l1,Z2,S5,G6,B8__XY;
printf("@$Hamburgefo%c`",'\n');
return ~7&8^9?0:l1|!"j->k+=*w";
}
It has a pangram, lots of confusable pairs of characters adjacent to each other, opening brackets next to each other and near a pipe character, quotes and commas next to each other, lining operators (i.e., ->, += and <=), and every normal punctuation character on a US keyboard. It also happens to be a valid, though useless, C or C++ program.
> - Make all the fonts equal in height regardless of font point.
I like the current scheme which keeps the line height or px equal I'm guessing. So this should be a toggle-able option.
Another feature request: It'd be nice to compare the overall width of each font in terms of having 80 or 100 or 120 character limits on width. I'm always wondering what font is the best for viewing two files side-by-side on a 1280x800 display.
i was pretty impressed that my final pair ended up being fira code and fira mono, so i tried switching my terminal font from bitstream vera sans mono. it looked markedly worse - i switched back within a couple of minutes. i think your point about the displayed text size affecting my judgement is spot on.
You are not the only one. I've used proportional fonts exclusively for 10-15 years and will never go back to monospaced.
In the past I used Verdana, Georgia, and Trebuchet MS. That last one may seem like an odd choice, but I really like the way it renders on a high-DPI display, with thick readable strokes and easily distinguished "confusable" characters.
Trebuchet MS does have some flaws, so I started customizing it into what I call Trebuchet++. What got me started on this was the poor tilde in TMS. I swapped in a better one with FontForge, and then started experimenting with a few other things.
One thing that bothered me in particular about proportional fonts is that the underscore character is so much wider than a period. This creates the wrong visual grouping in something like this:
name_with_underscores.method_with_underscores()
The default spacing causes "underscores.method" to be bound tighter visually than the individual names on each side.
So I edited the underscore to add negative spacing while keeping the underscore itself fairly wide. And I added positive spacing around the period. This makes it more clear visually that "name_with_underscores" and "method_with_underscores" are individual names separated by the dot.
The next tweak I plan on is adding some positive spacing after a "(" and before a ")" and similarly with [] and {}. It makes me sad that modern coding standards prohibit spaces inside (), [], and {}, even though it makes so much sense logically to have spaces inside them.
If I can't fix my company's mandatory code formatter, at least with a proportional font I can adjust it to put just a bit of whitespace there.
There are dozens of us I tell you, dozens! In my case I saw the light after two years of programming in SmallTalk, where our dev images shipped with Cambria by default.
Would be cool if it was possible to run it as a blind tournament to avoid subconsciously choosing my current font (although it's still possible to just recognize it).
I ended up with my current IDE font (Fira Code) winning. Could be that I just prefer this font or I'd accidentally gone with a familiar option.
Blind mode is a very good and popular suggestion! I also get the same idea from Twitter! I implemented it, now there is a toggle button to turn on blind mode. Try it out, maybe you will end up with something else this time, who knows?!
It would also be neat if it identified any properties that were shared in many of your top picks. A higher than average x-height would probably be on my list.
One property that might make that list is whitespace between lines. This one is misleading though since it can be adjusted when rendering (in some IDEs) with leading.
Same for me, even the same font as for you, Fira. I just find it very clear and simple and it supports a great set of ligatures. A lot of other fonts I didn't like at all. So maybe I subconciously chose this, but I feel it's also just a reflection of my demands for a coding font.
Interesting; I discarded the one I currently use in a matchup in the middle and ended up discovering a new one to try.
But I agree that it might be good to try it anonymized -- I was very impressed by the eventual winner when I saw it early on, and I remembered its name. I could feel myself slightly favoring it in later matches. Then again, maybe that's a reasonable part of the process -- this isn't really an objective judgement to be making in the first place.
Single elimination also isn't likely to produce the "one true" result, unless the initial pairings were very carefully chosen to partition the design space. (I think they were random, so the result is somewhat arbitrary.) Still a fun little exercise, though.
Also ended up with Fira Code, which I already use. Would feel a little more satisfying if the whole thing was blinded A/B testing, but I'm fairly confident I do just prefer Fira Code over the others.
Is it just me, or does it not appear to be working for anyone else? It just shows "You have chosen the winner" and none of the buttons seem to have an effect.
Edit: Clicking 'Restart Tournament' seems to spawn a worker that pushes my CPU over 100%. Open source your code, perhaps?
Sorry I went to sleep and woke to the app not working. Stupidly used Google Fonts API when I really don't have to, was being lazy. It is fixed now! Please try again?
I have offsite fonts blocked, so I wonder if I would have seen these anyways. From that response, it looks like it would just include a webfont directly from Google.
Nicely done, it's great to have a side by side comparison. It's made me realize I don't actually like the fonts I was using and I ended up on Roboto Mono, Ubuntu and Fira Mono.
I'll echo what the other comments are saying - it'll be good to make it a blind tournament with some representative code samples from languages like C#, Python, TypeScript etc. At the end you could present the 'top 5' fonts that were chosen by the user (or all of them, ranked)
I'm not a fan of ligatures so I'd want to eliminate them entirely or see such things in the code sample shown so that I can choose/disallow it.
Because it's for IDEs, make good use of the screen real estate, maybe that 'about' section on the left could go on the bottom, giving the side-by-side comparison more space to view all the code.
The 'Visit Site' link could be a normal hyperlink, my browser is blocking the popup that it creates currently. All that needs to be is an <a> with a target="_blank".
Finally for mobiles I think hide that 'product hunt' badge, it's getting in the way of the buttons.
Gotta say I love this, I came in just as you had blind tournament mode implemented and it worked great.
But I'd also like to skip certain battles and save them for later. Like right now I'm down to 10 fonts and I just can't decide. I'd like to skip to the next battle.
A feedback: The use case is less than ideal. Its CSS. That shouldn't be a problem but its (i) its not the kind of syntax I'm used to reading, and (ii) its not a ligature heavy use case.
As an instance, I'm given a choice between Fira Code and Fira Mono. First off, er... maybe don't put them together. Second, the only difference between the two, as far as I can remember is that one has ligatures enabled, one doesn't. And the CSS codebase I'm reading doesn't seem to have any ligatures, so :shrug:
I like the idea, but fonts are hard to choose from, especially with a specimen as regular as a CSS file. If I had to pick a file type with variety, I might go for PHP, with inline HTML, CSS, and Javascript, and attempt to show all the symbols on the keyboard, as well as common ligatures.
That said, there's so much variety in fonts that someone's favorite is likely missing regardless of the selection. Perhaps an initial culling based on features would help, eg. ligatures/no ligatures, serif/sans-serif, etc.
I'm also not really able to firmly decide, so I tend to switch fonts every so often.
Fun game, my compliments to the creators.. there is one variable for me that makes it more difficult. Anti-aliasing. I turn it off on my display because I like sharp crisp fonts without blurred edges--and in fact, the higher resolution your display is, the less you need AA.
Many "good" fonts are no longer hinted to fit to the raster grid, it is just assumed that you are using AA, period. What happens in that circumstance, is that the unhinted font looks really misshapen. Because of this in Firefox I de-select "Allow pages to choose their own fonts, instead of your selections above" and use instead a font that was designed to work well without AA (for the web, I like using Verdana).
So, for an editor's font, the best ones are bitmapped raster fonts for that pixel-perfect sharpness.
You can also use a TTF/OTF font with embedded bitmaps at specific sizes.
Regular TTF will work well also, if it is old enough that it contains hinting instructions. E.g. Bitstream Vera Sans is a monospaced font that is properly hinted for a pixel grid.
I was crazy enough to handwrite all of the TTF hinting instructions for it (albeit with a macro assembler-like tool). Every glyph in the regular and bold variants is superhinted to look pixel perfect without AA when viewed in the 9px to 19px range, and decent beyond that. With AA on, all four variants are hinted for the pixel grid at 9px and up. I also came up with some magic to try to force Cleartype to still grid-fit it horizontally.
Readit News
- 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.
Deleted Comment
This is a big one for me. None of the sample text had a capital O to compare to 0.
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.
- Option to lock scrolling so they both scroll at the same time.
- Button to flip them in place to help see the differences.
- Allow line-height adjustment.
- Add Lucida Console (still my favorite coding font at 8 px cap height). :)
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.
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.
- ligatures
- italics
Also, please make it an option to hide the font names so that it is a true blind comparison.
Awesome idea, though!
I ended up with my current IDE font (Fira Code) winning. Could be that I just prefer this font or I'd accidentally gone with a familiar option.
My main reason for liking both is ligatures support, which the website failed to show off.
https://github.com/ToxicFrog/Ligaturizer
One property that might make that list is whitespace between lines. This one is misleading though since it can be adjusted when rendering (in some IDEs) with leading.
Same for me, even the same font as for you, Fira. I just find it very clear and simple and it supports a great set of ligatures. A lot of other fonts I didn't like at all. So maybe I subconciously chose this, but I feel it's also just a reflection of my demands for a coding font.
But I agree that it might be good to try it anonymized -- I was very impressed by the eventual winner when I saw it early on, and I remembered its name. I could feel myself slightly favoring it in later matches. Then again, maybe that's a reasonable part of the process -- this isn't really an objective judgement to be making in the first place.
Single elimination also isn't likely to produce the "one true" result, unless the initial pairings were very carefully chosen to partition the design space. (I think they were random, so the result is somewhat arbitrary.) Still a fun little exercise, though.
I ended up picking Noto Sans Mono by a very slim margin over Fira Code. Interesting...
Edit: Clicking 'Restart Tournament' seems to spawn a worker that pushes my CPU over 100%. Open source your code, perhaps?
{ "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'll echo what the other comments are saying - it'll be good to make it a blind tournament with some representative code samples from languages like C#, Python, TypeScript etc. At the end you could present the 'top 5' fonts that were chosen by the user (or all of them, ranked)
I'm not a fan of ligatures so I'd want to eliminate them entirely or see such things in the code sample shown so that I can choose/disallow it.
Because it's for IDEs, make good use of the screen real estate, maybe that 'about' section on the left could go on the bottom, giving the side-by-side comparison more space to view all the code.
The 'Visit Site' link could be a normal hyperlink, my browser is blocking the popup that it creates currently. All that needs to be is an <a> with a target="_blank".
Finally for mobiles I think hide that 'product hunt' badge, it's getting in the way of the buttons.
But I'd also like to skip certain battles and save them for later. Like right now I'm down to 10 fonts and I just can't decide. I'd like to skip to the next battle.
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:
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.
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.
[0] http://eastfarthing.com/luculent/