[HN Gopher] Show HN: Coding Font - A game to find your favorite ...
___________________________________________________________________
Show HN: Coding Font - A game to find your favorite coding font
Author : wentin
Score : 349 points
Date : 2021-10-27 07:21 UTC (15 hours ago)
(HTM) web link (www.codingfont.com)
(TXT) w3m dump (www.codingfont.com)
| rozab wrote:
| 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.
| ftkftk wrote:
| 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.
| capableweb wrote:
| 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.
| nXqd wrote:
| I keep clicking and realize Consolas is not on the list. For some
| reason, I keep sticking with consolas.
| chowyuncat wrote:
| This worked well on iOS Safari. Nice job! At the end I wanted to
| know the distribution of other users' preferences.
| dham wrote:
| 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.
| js4ever wrote:
| 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?
| sodality2 wrote:
| 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.
| arp242 wrote:
| 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 wrote:
| Yes
| xvedejas wrote:
| 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.
| mftb wrote:
| 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.
| timbit42 wrote:
| 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.
| pca006132 wrote:
| 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 wrote:
| Inconsolata (a favourite of mine) suffers from this greatly.
| bovermyer wrote:
| 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 wrote:
| I remember that there is something like https://seek-
| oss.github.io/capsize/ , not sure if it could work here.
| uuddlrlr wrote:
| It doesn't have Fantasque Sans Mono, unfortunately.
| nicholasjarr wrote:
| Good job! I think you should add Iosevka, and I think the editors
| should scroll at the same time so comparing would be easier
| rewgs wrote:
| 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 wrote:
| I think it is so you can compare the same characters in each
| font
| abestic9 wrote:
| 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 wrote:
| 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.
| xcambar wrote:
| As everyone else said: please hide the font names.
|
| As is, I ended up with my current reference font. No surprise.
| sodality2 wrote:
| 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.
| henning wrote:
| Completely breaks with uBlock Origin.
| comeonseriously wrote:
| Major Mono Display for the WIN!
|
| That was actually nicely done. I'll play it more seriously later.
| CodeIsTheEnd wrote:
| 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.
| bovermyer wrote:
| Nice idea. Ditch the font names until the end. Add Fantasque Sans
| Mono and Iosevka.
| politelemon wrote:
| 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 wrote:
| For the blind tournament, I just implemented it! Give it a try
| :)
| INTPenis wrote:
| 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.
| [deleted]
| itsbits wrote:
| 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.
| mcc1ane wrote:
| Hack?
| joshka wrote:
| +1 the tool gave me Oxygen Mono and Fira Mono. I prefer the
| kerning of Hack Mono much better.
| Arkanosis wrote:
| 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 wrote:
| 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.
| chrisbuc wrote:
| Fun to play. Any reason consolas isn't there? (My winner was
| Anonymous Pro)
| luke2m wrote:
| Not free on Google Fonts probably.
| josephcsible wrote:
| 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.
| fictorial wrote:
| 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.
| Thespian2 wrote:
| 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.
| _hao wrote:
| 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 :)
| revolvingocelot wrote:
| >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:
| giomasce wrote:
| 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.
| jokoon wrote:
| 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.
| rcarmo wrote:
| 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...
| dom111 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| agent327 wrote:
| 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 wrote:
| 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
| agent327 wrote:
| Oh wow, thanks, that's amazing! Totally trying that tomorrow!
|
| Thanks again, kind stranger!
| kazinator wrote:
| > _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.
| zzzeek wrote:
| noto sans mono
| timw4mail wrote:
| 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 wrote:
| The CSS example has barely any capital letters.
| peakaboo wrote:
| 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 :)
| prirai wrote:
| The list could have been a bit bigger as I see that three of my
| favorites aren't even there.
| zachaden wrote:
| Wait what happened? I don't get what's the purpose of the site. I
| didn't play any game, can anyone explain?
| mparnisari wrote:
| Great idea! But some of the fonts presented looked absolutely
| identical to me and I picked a winner at random :/
| harshitaneja wrote:
| 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 wrote:
| Can I get that annoying Product Hunt floater out of the way
| giomasce wrote:
| 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)
| Aachen wrote:
| 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 wrote:
| Looks like it broke from a hug. Tried in a few different
| browsers: checking console shows a tonne of 404s for assets.
| doodpants wrote:
| 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.)
| WillKirkby wrote:
| 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.
| nisegami wrote:
| 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).
| yfkar wrote:
| Similar issue on Chrome 95 / Linux Mint Cinnamon. For me this
| was a test of which fonts remain somewhat readable when
| blurred.
| baxuz wrote:
| Was just about to say that.
| jy14898 wrote:
| Opening the link the iframe is pointing to helped for me:
| https://typogram.retool.com/embedded/public/1eb9acb6-fc70-44...
| buster wrote:
| Awesome. It would be nice to have more fonts (DejaVuSansMono
| please). And to not show the name until the end :)
| corsibu wrote:
| 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\":\"rateLimitExc
| eeded\"}],\"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/web
| fonts/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" }
| }
| mbar84 wrote:
| No Iosevka?
| k4rli wrote:
| 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.
| akuji1993 wrote:
| > 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.
| karmakaze wrote:
| 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.
| iampivot wrote:
| Concur! It would be nice to hide the font name.
| simse wrote:
| Yeah that'd be super cool, I also ended picking the one I
| already use.
| wentin wrote:
| 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?!
| b3morales wrote:
| 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.
| mattmoss wrote:
| 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...
| meowface wrote:
| 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.
| WithinReason wrote:
| 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 wrote:
| Yeah the comparison is kinda incomplete without showing the
| ligature support of both fonts.
| antihero wrote:
| Any font can have ligatures now
|
| https://github.com/ToxicFrog/Ligaturizer
| truculent wrote:
| 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!
| azinman2 wrote:
| 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 wrote:
| Great site! Just ended up discovering a new font that I like :)
| oefrha wrote:
| 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 wrote:
| SF Mono should also be on that list.
| jaywalk wrote:
| Yep. I've tried other fonts, and always end up back to
| Consolas.
| jonesnc wrote:
| My favorite coding font is Consolas. Any chance of that one?
| yakkomajuri wrote:
| Quite a fun idea. Kudos!
| Naac wrote:
| This appears broken on Firefox 93b7 on Ubuntu.
| stackbutterflow wrote:
| Netflix should make that into a movie selector. Could be used for
| food too.
| zX41ZdbW wrote:
| My shameless plug: https://alexey-milovidov.github.io/font-
| selector/
|
| I've created this small comparison web page for myself and my
| team.
| artemonster wrote:
| Example code should be changed to easily include lots of
| problematic cases: 1Iil, O0, etc.
| mannykannot wrote:
| 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.
| lillesvin wrote:
| 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!
| grahamlee wrote:
| 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.
| mouzogu wrote:
| 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.
| henry_bone wrote:
| I ended up with Oxygen Mono after going through the tournament in
| blind mode. I'd love to know my top, say, 5.
| DiabloD3 wrote:
| 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.
| gennarro wrote:
| Fun but missing some great fonts!
| frereubu wrote:
| 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.
| robertakarobin wrote:
| 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?
| whalesalad wrote:
| This is the ultimate troll - your winning coding font is times
| new roman!
| robertakarobin wrote:
| I had a student who used Apple Chancery in her IDE, no joke.
| throwaway889900 wrote:
| Nothing like some good ol' Comic Sans in the world's best
| IDE: Microsoft Word. Also all spaces are now Unicode spaces.
| seanw444 wrote:
| 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.
| InitialLastName wrote:
| 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.
| lillesvin wrote:
| 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...
| jmrm wrote:
| Did you heard about the 'Comic Mono' font?
|
| https://github.com/dtinth/comic-mono-font
| thrownblown wrote:
| 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
| rgoulter wrote:
| Another font with dyslexia in mind: OpenDyslexic
| https://opendyslexic.org/
| jonesnc wrote:
| 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.
| corsibu wrote:
| 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_numb
| er: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\":\"rateLimitEx
| ceeded\"}],\"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" } }
| wentin wrote:
| Yes, I hit the limit for Google Fonts API. It is fixed now. I
| moved off the API service. :)
| Minor49er wrote:
| 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.
| seagoj wrote:
| same for me
| spyke112 wrote:
| Same here. Might be a rate limit thing, lots of stuff not
| loading.
| neves wrote:
| Same here. I loved the idea.
| wentin wrote:
| 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?
| farnsworth wrote:
| Still not working for me
| StevePerkins wrote:
| 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.
| OliverJones wrote:
| Excellent. This light-mode holdout wishes for a white-background
| tournament.
| lampe3 wrote:
| 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.
| ab_testing wrote:
| 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
| geraltofrivia wrote:
| 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:
| dejawu wrote:
| 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.
| winrid wrote:
| I spent a few minutes on it, but Is there any kind of end?
| armagon wrote:
| 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.]
| rubyist5eva wrote:
| 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 wrote:
| 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/
| rubyist5eva wrote:
| very cool shameless plug, I like playing around with new
| fonts every once in a while even if it's just for fun
| seagoj wrote:
| is this broken for anyone else? it acts like I've already done
| the tournament and won't restart
| sosuke wrote:
| Please add ligatures! => ==!
| afandian wrote:
| 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.
| pipnonsense wrote:
| 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
| lucasverra wrote:
| 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 wrote:
| I see using this UI for business decision-making for 5-10
| options
| bulletsvshumans wrote:
| Nice work! Would be cool to see stats on which fonts were winning
| in general.
| intrepidhero wrote:
| Only one serif font? That made it a pretty easy tournament for
| me. ;-)
| captn3m0 wrote:
| My current font (https://input.djr.com/preview/) isn't on the
| list, sadly.
| larsrc wrote:
| 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.
| kuratkull wrote:
| 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.
| LeonidasXIV wrote:
| 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".
| penjelly wrote:
| 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.
| lucideer wrote:
| Hit by the HN hug of death?
| asciimov wrote:
| 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.
| jcuenod wrote:
| Also samples with:
|
| - ligatures
|
| - italics
| elfchief wrote:
| 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!
| wentin wrote:
| Great idea! I took it and implemented it, now there is a
| toggle button to turn on "Blind Mode"
|
| Try it out!
| GordonS wrote:
| Another idea is to synchronise scrolling within the code
| samples, so if I scroll in one, the other automatically scrolls
| to the same line.
| hawkesnest wrote:
| > 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.
| a_e_k wrote:
| 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 wrote:
| 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.
| wentin wrote:
| I am going through the suggestion list and implementing them.
| The blind mode is just added!
| rbates wrote:
| 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.
| layer8 wrote:
| - 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). :)
| jordanpg wrote:
| Also consider hiding the font names. Too much bias from certain
| familiar keywords (JetBrains, IBM, courier, etc.).
| quaintdev wrote:
| Please do this.
| skneko wrote:
| There is a "blind mode" that hides the font names.
| wentin wrote:
| Yes, try the blind mode button, I just added it!
| zapzupnz wrote:
| The name isn't intuitive. A description of the function
| would be better. "Hide font names".
| Osiris wrote:
| 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.
| arnsholt wrote:
| 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.
| Stratoscope wrote:
| 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.
| fouc wrote:
| > - 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.
| pantulis wrote:
| This is very fun. Would love to see Iosevka there.
| robbles wrote:
| What are you using to run the tournament logic? Custom code, or
| some kind of library?
| karmakaze wrote:
| 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/
| neonihil wrote:
| This is awesome! I found a new favourite font - Azeret Mono.
| Thank you! Much appreciated!
| srcreigh wrote:
| Missing the best fonts. Tamsyn7x14 on 1080p screens, and Iosevka
| Light on Retina/5k screens.
| paufernandez wrote:
| I'm missing Iosevka.
| warpech wrote:
| 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
| polytely wrote:
| I like Input for exactly that reason, it's great
| aldanor wrote:
| 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).
| TheRealDunkirk wrote:
| Fails without Monaco as an option. ;-) I wound up with
| Inconsolata, which I see now looks a lot like it.
| __del__ wrote:
| Monaco 9 takes me back to coding for Macintosh System 6.
| Inconsolata is my daily driver.
| darkstar999 wrote:
| I find myself comparing lower case L. I prefer the L's that don't
| look like the number 1. l1l1l1
| Sunspark wrote:
| 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 wrote:
| I'm using a bitmapped font called Terminus these days. Do you
| know of any other good ones for coding?
| Sunspark wrote:
| Take a look at the selection here:
| https://github.com/Tecate/bitmap-fonts
| rm8x wrote:
| 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.
| chameco wrote:
| Notably missing the best monospaced font.
|
| http://terminus-font.sourceforge.net/
| porker wrote:
| 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...
___________________________________________________________________
(page generated 2021-10-27 23:02 UTC)