Show HN: Miracode, a Minecraft programming font that is readable(github.com)
github.com
Show HN: Miracode, a Minecraft programming font that is readable
https://github.com/IdreesInc/Miracode
I always believe in using what one makes, which is unfortunate because I made Monocraft. For the past year I've been stuck looking at those pixels while I code, so over the weekend I tried my hand at making a version of Monocraft that was more legible. Introducing Miracode, a Minecraft programming font that is actually usable!
Using a custom algorithm, I've converted adjacent pixels from the original font into strokes, which allow for a more smooth look while maintaining that Minecraft-y look. Give it a try and let me know what you think!
19 comments
This is the first time I've seen TODO as a ligature, and I am really into the idea. Is this something you can add to existing fonts? Does anyone have any recommendation for a good programming font that does this?
Huh. You know what, I kinda dig it.
I could do without operators being condensed into ligatures, but that's just me. The gigantic triple equals strikes fear into my C programmer heart
I could do without operators being condensed into ligatures, but that's just me. The gigantic triple equals strikes fear into my C programmer heart
Yeah, I generally do _not_ like programming-oriented ligatures, but the one for todo is sort of interesting.
However, many editors can accomplish the same goal by highlighting or changing the text colour of todos.
However, many editors can accomplish the same goal by highlighting or changing the text colour of todos.
Emacs package for that (highlights others like FIXME etc): https://github.com/tarsius/hl-todo
You could make it have the outline thing if you tweak your theme. I wouldn't start installing or hacking your fonts to get this kind of stuff.
You could make it have the outline thing if you tweak your theme. I wouldn't start installing or hacking your fonts to get this kind of stuff.
Fira Code supports stylistic sets, so you can actually configure whether == and === (and != and !==) do that, and leave weirder ligatures out of the defaults. In VS Code, for example, you would change editor.fontLigatures from true to "'ss08'" to make them still ligate together, but with breaks between the = signs. I use ss06 to make backslashes faded when they're used to escape other characters.
Glad you like it, I've never seen it in a font before so I am unsure if there are any others that add it in. I've definitely appreciated the ligature as I use the font, but I did wonder if others would find it annoying
I do think it's a better use of ligatures, and I generally dislike most ligatures in coding fonts [1].
[1] https://news.ycombinator.com/item?id=32746064 (and I only realized that I made this comment on the thread about your older font, oh...)
[1] https://news.ycombinator.com/item?id=32746064 (and I only realized that I made this comment on the thread about your older font, oh...)
Haha
must be blind but I don't see it in the image of all characters
The ligatures appear to be excluded from the image of all glyphs. But below it is an image of all ligatures. ;)
I’ll have to send this to my nephew. He is obsessed with Minecraft and is starting to get into coding. I think he’d really like this. Thanks for sharing it.
I really like the TODO and NOTE ligatures. I have been using Comic Code for a couple years now and kind of wish it had those.
I really like the TODO and NOTE ligatures. I have been using Comic Code for a couple years now and kind of wish it had those.
Judging from the one screenshot example, I actually like Monocraft better. It really has that nice Minecraft/retro look, and I think this could actually help get kids who are into Minecraft into coding. That being said, I actually still like Miracode better than most typical IDE monospace fonts (at least as a novelty). That's really cool, where did you learn to make such designs?
Yes, this font reminds me of the "Faithful" texture packs (which makes sense, it's basically the same principle: still pixelated, but "zoomed out", more dense) and I don't like those. It's as if the 16x look has something magical, while everything above it looks "low res".
Same for me, but I grew up and mostly learned my earliest programming on 8-bit machines so the monocraft style is way more in my burned synapses.
It does have "hq4x" feel.
Looks way better than I expected from the title. The vectorization did wonders. I think I saw a similar font in a HD Minecraft texture pack.
I wanted to suggest a RuneScape font, but it would probably be too skinny.
I wanted to suggest a RuneScape font, but it would probably be too skinny.
I applaud the attempt!
That being said, I sadly do not find this to be particularly "readable". The choice to introduce octagonal-style 45° segments rather than normal rounding makes it quite difficult for me to read. The worst glyphs for legibility for me are "r" and "p" -- you've actually increased the size of the diagonal segment that connects to the stem, compared to diagonals on letters like "o", which really throws off the forms for me, and doesn't seem to be inspired by anything in the original font. If anything, rounded connections to stems in fonts tend to be reduced rather than exaggerated. (As in the font used by HN, Verdana.)
I wonder what this would look like if you used curves rather than introducing octagonal corners, and didn't exaggerate the connections to stems? Keeping in mind that curves usually do things like extending slightly beyond the baseline or at the top.
That being said, I sadly do not find this to be particularly "readable". The choice to introduce octagonal-style 45° segments rather than normal rounding makes it quite difficult for me to read. The worst glyphs for legibility for me are "r" and "p" -- you've actually increased the size of the diagonal segment that connects to the stem, compared to diagonals on letters like "o", which really throws off the forms for me, and doesn't seem to be inspired by anything in the original font. If anything, rounded connections to stems in fonts tend to be reduced rather than exaggerated. (As in the font used by HN, Verdana.)
I wonder what this would look like if you used curves rather than introducing octagonal corners, and didn't exaggerate the connections to stems? Keeping in mind that curves usually do things like extending slightly beyond the baseline or at the top.
Thanks for the in-depth comment, it's definitely been a balancing act trying to determine how to handle things like the diagonals/curves. I originally made things more "curvy", but it made the font look similar to comic sans or other handwriting fonts for some reason. Perhaps a sharper curve algorithm would avoid this, though the "angular" look does make this font into something a bit more unique than the other programming fonts available.
Happy to help! Font design isn't easy, but it's very rewarding. You might look at the famous Eurostile font which does a kind of "rounded rectangle" style of curves which might work well here.
One more note -- I think this font actually works great as a display typeface. The octagonal angles and exaggerated stem connection give it a ton of personality, and display typefaces used for headings, titles, packaging, etc. are where personality is more important than readability.
So I think you've produced something really cool -- just not necessarily as a coding font!
One more note -- I think this font actually works great as a display typeface. The octagonal angles and exaggerated stem connection give it a ton of personality, and display typefaces used for headings, titles, packaging, etc. are where personality is more important than readability.
So I think you've produced something really cool -- just not necessarily as a coding font!
Love the font but wish you'd share your custom algorithm. I've designed a number of pixel fonts in the past I'd love to convert to strokes in this way. Any chance you'd release a little conversion kit?
Don't worry, it's completely open source! Miracode is a fork of my other font "Monocraft" which is under the GPL. As such, Miracode is also GPL, and the font files themselves are under the OFL.
Since it's a fork, there are a few extra files that are not actually executed which may be why you aren't seeing the algorithm. Check miracode.py for the script that generates the font! No promises that it'd work on other fonts though, the "algorithm" was made over a weekend and as such could definitely use some optimization. On the bright side, I did include a unit testing system which might help others convert fonts in the future.
Awesome, thanks. I'm only versed in JS and Lua and all of my pixel fonts are basically glyphs on a big sprite sheet of 32x32 pixel grid cells. How difficult would it be for me to simply patch what you've started to work off something simple like bitmap data to export a TTF of converted vector data?
Is it not what's in miracoda.py? https://github.com/IdreesInc/Miracode/blob/main/src/miracode...
Would be strange to make the project FOSS but not share all the parts that went into it.
Would be strange to make the project FOSS but not share all the parts that went into it.
I've done so in the past and I believe it's not much different from usual pixel-art scaling algorithms. At some point though you would want more control over which corner should be sharp or not, and that resulted in my own semi-bitmap font with a subpixel handling [1].
[1] https://github.com/lifthrasiir/unison
[1] https://github.com/lifthrasiir/unison
I dunno if you're going to get away with calling it a "Minecraft font".
How is that "TODO" done in the joined up way?
It’s a ligature defined in https://github.com/IdreesInc/Miracode/blob/main/src/ligature...
Oh neat, makes sense now that you've shown. The ligatures could encompass entire words doesn't have to be a few joined up characters.
Oh, i was clicking thinking "meh, how could I code with the Minecraft font" but I’m actually positively impressed by your font. I will try it :)
ooh, cute. excited to try the vectorizer on some old favorite BDFs from my eeepc days
No promises that it is actually a good algorithm, I definitely had to handle a lot of edge cases and I am sure there are more out there! The best decision I made was to make a unit testing system for the font, so hopefully that'll make things easier for people in the future.
I've installed it and am enjoying using it so far, nice work!
I need Japanese characters so I can listen to city pop and pretend that it's still Shōwa.
Is there anyway to disable the ligatures? I’d like to use it if not for those.
Sure, next release I'll add a version that removes the operator ligatures
cool!
vdaea(1)