9 ms·

I Created 175 Fonts Using Rust

487 points by azhenley 2y ago

nitinreddy88 2y ago
I actually liked some of the fonts and simple styling used in the site. Luckily it's available as another post: https://chevyray.dev/blog/how-this-site-is-made/#catppuccin-color-theme https://chevyray.dev/blog/how-this-site-is-made/#catppuccin-...
Vecr 2y ago
Interesting how easy it is to make an operation like this run on multiple cores in Rust. Inserting a single call into a chain of functions can be enough.
- MontagFTB 2y ago
  Rust is built to be memory- and thread-safe by default. Assuming you follow the prescribed rules of the language, multithreading is “free”. Amdahl’s Law still gets a vote, but at least your app won’t blow up in your face.
  - jjtheblunt 2y ago
    > Assuming you follow the prescribed rules of the language, multithreading is “free”. I'm wondering if you're referring to the async await addition from a few years back, to use of Tokio's crate(s), or something else.
    - kevincox 2y ago
      I think they are referring to this section: https://chevyray.dev/blog/creating-175-fonts/#automatic-kerning https://chevyray.dev/blog/creating-175-fonts/#automatic-kern... In this case they are not using async but Rayon which provides some easy primitives for splitting tasks into smaller parts that can run in parallel. In this case the par_iter and par_extend calls.
    - hypeatei 2y ago
      IIRC, async/await in most languages doesn't imply multi threading, it just allows other work to be done on the same thread simultaneously.
- vips7L 2y ago
  It's not really unique to Rust. Scala and Java both support this out of the box.
  - Filligree 2y ago
    Yeah, but in Rust it’s far less likely to explode in your face.
    - johnisgood 2y ago
      Or in Ada. Ada 202x[1] brings enhancements like the parallel block, making parallelism easier to express, somewhat similar to Rust's approach but still with Ada's emphasis on clarity and safety. [1] https://blog.adacore.com/ada-202x-support-in-gnat https://blog.adacore.com/ada-202x-support-in-gnat (2020) There may be more enhancements that I may not know about or remember, although I did mention Ada's constructs for safe concurrent code before.
  - dwattttt 2y ago
    The stronger guarantees/performance fall out of the stronger lifetime/ownership model, combined with errors around ambiguous/invalid lifetimes being a compiler error. In other languages those violations are things you have to run a race detector and actually evoke the condition to find, or you abandon fine grained/tracked ownership and use garbage collection.
    - vips7L 2y ago
      None of that matters with this code. There are no lifetimes here and in fact there is no ownership either. Everything is a primitive char. They’re always copied and no mutation occurs. It’s pure computation. You could write this code exactly the same way in those languages.
      - dwattttt 2y ago
        True. You could write it in C or asm too, and it would be about as simple. But there's still a difference that if they weren't all primitive (and you can't always rely that they will be), you'll know it won't work straight away in Rust, whereas in the others you need to walk every data type involved to make sure ownership is clear (or rely on a garbage collector to save you).
Uptrenda 2y ago
[flagged]
waldothedog 2y ago
This is neat! And cool to hear this made a financial difference for them. Gah, I remember the name Chevy Ray from indie games, but I cannot put my finger on what this person made… would have been like 2010 to 2012? In the same vein as VVVVVV or nidhogg or canabalt as I recall
- bitvoid 2y ago
  Ikenfell
- TeaDude 2y ago
  Flashpunk?
- chevyray 2y ago
  The game you are probably talking about is Beacon.
- deleted 2y ago
  [deleted]
- waldothedog 2y ago
  It was flashpunk! Beacon was rad too — blast from the past, I miss indie games
- wrsh07 2y ago
  I also found Ikenfell to be really delightful!
bentinata 2y ago
Even though the methods is simple, the way the author visualizing it is really neat.
Daub 2y ago
Impressive indeed. Making a complete font set can easily take as long as a year. The tasks include to go from 'A' to 'Z', upper and lower case, plus all the glyphs (brackets, ampersand, exclamation marks etc). Optionally the variations (bold, italic etc) without which a font is of limited use. The thing that separates the men from the boys is the kerning (spacing between the characters) which can absorb as much obsessive compulsion as you can throw at it. From TFA: > My new fonts were going to support 176 characters, meaning I might have to enter as many as 176² = 37,976 kerning pairs... yeah not going to happen. So this time, since I was (spoiler alert) writing my own tool to generate the fonts, I decided to semi-automate this process to take care of a huge majority of the kerning, and do manual entry when algorithm didn't suffice.
- inferiorhuman 2y ago
  Making a complete font set can easily take as long as a year. Making a font family can easily be a lifelong project.
  - chevyray 2y ago
    It makes me very happy to see people talking about how much work can go into a typeface. Like, these pixel fonts are very quick to make, but fully contoured vector fonts can be tweaked to perfection infinitely, there's always more languages and more diacritics and more weights and styles you could do. Truly a rabbit hole, but when it's done well it's very worthwhile. I have a lot of respect for font makers.
    - galangalalgol 2y ago
      Has anyone tried training a DL model to handwrite things? That seems like a fascinating rabbit hole as well. In addition to all the context sensitive letter differences, you could even label training pieces with the mood of the writer and the flexiness of the nib/quill. If I type an angry emoji after a sentence it gets scribbled harder when drawn.
  - amelius 2y ago
worik 2y ago
Nice work I would like microns on the vowles, as we type a lot of Māori words....
- Daub 2y ago
  Same here for diacritics in Vietnamese. There are very few font sets which natively support our vast range of diacritics.
  - chevyray 2y ago
    Out of curiosity, what would you say is the most accurate/comprehensive resource for learning about these?
    - Daub 2y ago
      This one is the go-to site for VN designers: https://vietnamesetypography.com/ https://vietnamesetypography.com/
- chevyray 2y ago
  Is a micron the name of the straight line over the 'a' in Māori? A single pixel line over a bunch of a's is tremendously simple to do in pixel fonts, I could probably add that to all the fonts in a day... hmmmm
  - travisjungroth 2y ago
    The straight bars over vowels are called “macrons” in English. https://en.m.wikipedia.org/wiki/Macron_(diacritic) https://en.m.wikipedia.org/wiki/Macron_(diacritic) In Māori, there are ā, ē, ī, ō and ū.
    - chevyray 2y ago
      Ahh yes there it is, thanks for clarifying. These are quite simple and would be easy to support.
zeta0134 2y ago
These look absolutely delightful! A quick question: I'm working on retro consoles, and so I need fonts where each glyph is a multiple of 8px wide for easy display on tile-based backgrounds. Are the sizes (in pixels) of your font packs listed anywhere?
- Vecr 2y ago
  16. Or an integer multiple of that like 32 or 64. It's in the Step 5: Exporting section Edit: that's the height, the width is not fixed/I think it varies with the exact font and the kerning. It's probably too big for you anyways.
- bryanlarsen 2y ago
  The example tile sheet in the article appears to be 8 pixels wide by my count. Count the width in pixels on the "m" and if it's 7 the font will likely work for you.
  - Vecr 2y ago
    The main issue is you can't have them literally touching or it'll be really hard to read. Maybe it would work, but most of these "pixel art" fonts really benefit from some faking enabled by running on what's actually a high resolution display.
    - bryanlarsen 2y ago
      That's why I said the "m" should only be 7 bits wide for an 8 bit wide font.
      - damieng 2y ago
        It's a trade-off. Have every single instance of m look squished vs it might touch another m or w somewhere else and look odd. I've done fonts in both categories.
- kelnos 2y ago
  > each glyph is a multiple of 8px wide These look to be variable-width fonts. I believe the heights are multiples of 16, but the width will vary by character.
claytonwramsey 2y ago
This is really excellent work, and a great write-up. I think it would definitely be possible to speed up a lot of the algorithms with some tricks. Replacing hashmaps with bitmaps and byte-index arrays for character painting and ascii-to-variants seems like a lead, based on what I've read. Of course, that doesn't really matter for this code since it's already fast enough.
- chevyray 2y ago
  Glad you brought this up, because it's absolutely true! All the code is not on the site, but I actually allocate and clone a lot of strings and data structures as well. I did optimal code where it was obvious (bitmap copying, easily parallelizable things), and it was SO instant that I didn't even bother trying to optimize the other things. But it could be done! It's easy to forget how fast on-the-ground languages like Rust and C++ and Go are, not to mention when you use their multi-threading primitives and worker queues/etc.
peteforde 2y ago
What an amazing accomplishment! Bravo. I find typography resists my attempts to wrap my head around it, because even though I can do basic analysis like serif vs sans serif, I get a sort of brain fog when it comes to telling fonts apart or intuiting which fonts to use in different situations. It's really hard to wrap my head around the idea that one person could make 175 fonts and that they would each be meaningfully different from each other. Like, how does one not accidentally recreate the same font?
- chevyray 2y ago
  Sometimes I would get pretty far into a new font only to realize it was almost a total copy of another. It happened, I just managed to notice before releasing them lol
- omnimus 2y ago
  Actually it is impossible to recreate the same font from memory. Even if you tried the font would be in some ways different. With pixel fonts where the grid is very coarse its much easier to do but normal fonts with curves you wont make it. Even if you are using same image of a font as a reference.
theahura 2y ago
Btw anyone who's into fonts should check out https://tomorrow.type.today/ https://tomorrow.type.today/ they're a typography studio that does fantastic original and experimental fonts. One of our team is super into typography and has been building a collection of their work at https://play.soot.com/tomorrowtypetoday https://play.soot.com/tomorrowtypetoday
- vindex10 2y ago
  just as a note: the company is registered in Russia
  - Tohhou 2y ago
    This is an inflammatory comment. Shame on you.
    - vindex10 2y ago
      I respect people who fled, but the company still pays tax in Russia. It is not inflammatory, it is pragmatic - to remember the supply chain.
      - Tohhou 2y ago
        Do you don't hold people in the US to the same standard? No? Then you're just evil.
        vindex10 2y ago
        I hold every company that pays tax in Russia to the same standard.
  - MissTake 2y ago
    Also in Georgia.
  - theahura 2y ago
    Iirc they're originally Russian, but have fled the country out of strong disagreement of the war
dognaptr 2y ago
[flagged]
musha68k 2y ago
Fantastic! Da Vinci types like the author here always remind me that there was a time when being an artist and an engineer were one and the same, with no clear distinction between the two.
- bergheim 2y ago
  In that case I encourage you to read up on da Vinci (and not some top 10 dV creations post). It is clear that there was quite a big distinction. I can model a spacecraft that will take me to Alpha Centauri with "questionable" untested dynamics in Maya. But I am pretty far off from building it and sending it into interstellar space. Pretty (and imaginitive) drawings though.
jcynix 2y ago
Impressive and a nice site. Regarding font generation, let's not forget Donald Knuth and his https://en.wikipedia.org/wiki/Metafont https://en.wikipedia.org/wiki/Metafont software which generates raster fonts.
patal 2y ago
Impressive work! In the "mixed-case kerning pairs" quality testing image, I notice that the letter "j" sometimes reaches under the previous letter, like in "Fdj". Sometimes it creates a lot of space, like in "Fjo". Is there a stylistic reason for this? The Fjo spacing is the only thing that stood out to me. Kudos
- chevyray 2y ago
  Nice catch. That's a culprit of the `auto_kerning_min` property that you'll see on a lot of the fonts. this tells the auto kerner not to exceed that. I added this parameter because I fouund that for a lot of fonts, squeezing letters together over a certain distance would just look bad, so I would set -1 or -2 as a cap. It looks like that's just one that snuck past my notice. The word "Fjord" would look strange because of this. This is a good example of how even with the quality testing, things can get through, because I still have to visually glance over hundreds of kerning tests. One thing that might be a nice adjustment is to have an algorithm that detects the "area" between two letters, so basically how many pixels can volumetrically fit between them, and flag ones that go over a certain threshold. I could then color those tuples as red in the sample text, basically the system marking them as "potential problems" that required an author's look.
  - dotinvoke 2y ago
    Why not just feed that information back into the algorithm itself?
    - chevyray 2y ago
      I definitely could, I would have to do a bit of tests to see what kinds of volumes deserved special treatment. Usually the way I do things is I start by doing work manually. If I find that there's a common pattern in something I'm doing that could be automated, then I am able to transcribe it into the algorithm because I just follow the same steps I've been using in my head. This wasn't a thing that actually came up a huge amount, as these glaring pairs aren't tremendously common. But they're just common enough that if I sat down and examined them, I could probably say something like "hey if 1.5 vertical lines worth of pixels are between two letters, kern this extra" or something like that.
swiftcoder 2y ago
Fascinating, I didn't previously realise you were converting pixel fonts to vectors when encoding them to TTF. I guess that gives some ability to seamlessly scale them for folks who load them into a competent text renderer as well (i.e. not a game engine that mostly just uses pixel fonts 1:1)
- chevyray 2y ago
  It also just makes them usable in traditional graphics editors like photoshop, indesign, affinity, aseprite, etc. Those tools do not have the concept of a pixel font, so using a TTF with hinting/antialiasing turned off allows you to use them in those apps.
bravura 2y ago
Curious: Once the fonts are made, how are they marketed and sold? Where do the people who use them become of aware of them and how?
- chevyray 2y ago
  A combination of word of mouth and itch.io's search system. I have a decent amount of social media followers, many who have used my fonts in the past, so the initial flood of wishlisters put it on the front page for a bit. After that wave, they get used in various projects here and there, and those projects eventually release or post screenshots. Because it's indie, lots of people also attribute the fonts directly when they post screenshots of their games, posters, videos, and stream overlays where they use them. I am very supportive of people using them, and repost their work, and so it's very casually symbiotic. They're not lucrative on the scale that you might expect from a company or a popular vector font, but as supplementary income for a solo developer what they bring in helps put food on my table and also helps indie games get made which I think is great.
networked 2y ago
Cool fonts, and an interesting post. I kind of want the top-right fake game in https://chevyray.dev/blog/creating-175-fonts/old_previews.png https://chevyray.dev/blog/creating-175-fonts/old_previews.pn... to be real. It has a "Wonder Boy in Monster World on the GBA" vibe I think is nice. I have noticed that the license doesn't allow you to use the TTFs in open-source software, which is something to keep in mind. > Licensed Content may not be distributed to third parties as standalone files or in a way that unreasonably permits the recipient to extract the Licensed Content for use separately and apart from the Work for Distribution. > Licensee may not distribute the Licensed Content in any library or reusable template, including but not limited to game templates, website templates intended to allow reproduction by third parties on electronic or printed products. > Licensee may not distribute Licensed Content in a manner meant to enable third parties to create derivative works incorporating Licensed Content. To me, a non-lawyer, the last clause reads like it unambiguously forbids it. https://github.com/ChevyRay/pixel_font_megapack_license/blob/cb99b037f60c5885158d68046bd61a1bc22fdc52/LICENSE.txt https://github.com/ChevyRay/pixel_font_megapack_license/blob...
- BHSPitMonkey 2y ago
  If you like platformers, give Celeste a try. The scene in that mockup is a reference to an opening scene from that game.
  - networked 2y ago
    Oh, I didn't realize. Thanks for telling me. I have played the original Celeste for PICO-8 (now called Celeste Classic). I plan on playing the full release eventually. The screenshot actually reminded me a little of an earlier game by Maddy Thorson, An Untitled Story. I think it is the way the mountains are drawn in the background and the thick outlines. A link to play Celeste Classic: https://www.lexaloffle.com/bbs/?tid=2145 https://www.lexaloffle.com/bbs/?tid=2145. TIG Wiki page for An Untitled Story: https://tig.fandom.com/wiki/An_Untitled_Story https://tig.fandom.com/wiki/An_Untitled_Story.
  - Liquix 2y ago
    If you like Celeste, check out Studio Pixel [0]. His most recent game Kero Blaster (mobile) is excellent but Cave Story is the classic. Tight controls, retro aesthetic, imaginative levels, very well executed. [0] https://studiopixel.jp https://studiopixel.jp
czarit 2y ago
Very nice! One question: I was curious why you chose this subset of Scandinavian special characters. There are three extended chars in Swedish (äöå) and Norwegian/Danish (æøå), but your fonts have æ, but not ø, which means you could drop the æ and still support Swedish, or add an ø to also support Norwegian and Danish. Was this an oversight or is there some locale that has just æ and not ø? (and before anyone asks I did not confuse æ with the oe-ligature œ, which is a different glyph used in French, and which the fonts also do support)
- kd5bjo 2y ago
  > Was this an oversight or is there some locale that has just æ and not ø? Well, Icelandic uses ö in place of ø, but also requires ð and ý which are not included. Æ is sometimes used in older English texts, though, in words like “encyclopædia” or in plurals of latin-derived words: https://en.wiktionary.org/wiki/Category:English_plurals_in_-ae_with_singular_in_-a https://en.wiktionary.org/wiki/Category:English_plurals_in_-...
  - kd5bjo 2y ago
    For completeness, Icelandic also requires Þ which I somehow forgot when writing the above comment.
- chevyray 2y ago
  This was just an oversight. I actually got very far into the project before I realized that ø was missing from my set. It’s something that I could definitely go through and patch into all the fonts, but I was waiting to see if there was enough demand for the effort. I think supporting two more languages would be very cool though.
  - kipari 2y ago
    From a Dane that finds multiple of these fonts gorgeous and highly appreciate the elaborate kern pairs: please consider patching the fonts with an ø. ;-)
kmacdough 2y ago
Awesome work! It's a wonder how much hasn't been done in a world of 8 billion people. A single skilled individual with some free time filling in a gap can be HUGE. Gets me looking for gaps. 8 Billion people seems like a lot, but it cuts down fast. When 1/10 people have the freedom and, 1/100 the resources and time, 1/100 the training and experience, and 1/100 have the drive, and with hundreds of domains each with hubdreds of major unfilled niches... That's 800 people split among tens of thousands of gaps. It pretty quickly gets down to you, the reader, to pick up that keyboard and start tapping away! These are obviously wild-a* numbers. Constraints may be overstated or understated & they're not fully independent. I'm missing others. The point stands: you need only to cut 8 billion by 100 a few times to get <1.
euroderf 2y ago
About kerning. Uppercase Finnish is a nightmare. Odd pairs like LJ and KY and TY . How about an option to let some letter pairs touch ? It also creates a tendency to use quite light font weights for all-uppercase text, so that whitespace is not so prominent.
- chevyray 2y ago
  Not a bad suggestion at all. Lots of fonts even provide ligatures for certain letter pairs so they can touch, but tweak them so they look a bit better. That kind of thing is another level of polish that I could definitely do, or even just providing more spaced variations.
jezzamon 2y ago
Nice! I'm a user of your last batch of fonts, I'll have to check these new ones out :)
Tohhou 2y ago
What's the point in this article if pifo isn't open source? Here's a tutorial on my software... you can't use it!!!
- chevyray 2y ago
  I wanted to describe how the algorithm works, and show what it looks like to ship a project of that magnitude, and share some of the fun problems complexities that come up. I'd like to see more creatives using code as a way to bolster their projects and reducing tedious work for themselves with automation or deployment scripts, and I think Rust is a really great language for doing this, so I thought it would be inspiring to share how and why I'm doing it. I agree that it would be overall more valuable to have the whole thing open source online, but sometimes I want to share how I solved problems without open sourcing all my code directly, for various personal reasons. But from the many comments I'm getting across the internet on the article it seems like people are getting a lot of value and motivation out of it, which was the intent, so that makes me happy.
laserDinosaur 2y ago
somepx on itch.io also makes some really nice fonts: https://somepx.itch.io/ https://somepx.itch.io/
- chevyray 2y ago
  some is a homie and does excellent work! They also have a Patreon where you can support/guide them in the creation of new pixel art assets and fonts and stuff like that, if you're into that sort of thing. It's a cool approach, different than mine, and I'm rooting for them.
meindnoch 2y ago
>The final character set I settled on. Sigh. No ő and ű.
- chevyray 2y ago
  I did a quick search, this for Hungarian support, yes? If those are the only two characters I would have to do to support the language, I'm collecting suggestions from other comments in this post as well and might do a 1-year anniversary update to add support for more languages, and I can add this.
  - meindnoch 2y ago
    Yes, these are the only Hungarian-only accents.
RatParadise 2y ago
Awesome read! I've never designed a font but often daydreamed about it, and this was a great primer to the process. Question: Did you find that your automated kerning generator was always satisfactory? Or did you ever catch letter pairings that technically satisfied the criteria but that tripped your subjective kerning radar? I'm wondering if you had to hard-code kerning exceptions, or if your system even allowed for that.
- chevyray 2y ago
  I absolutely did find examples where I needed to specify. I kind of allude to that in the post, but yeah whenever I add the ability to automate something like this, I almost always make sure to include the ability for me to manually override them. Experience has taught me that no matter how fancy or super special your algorithm is, there's always situations where the naked eye just sees what the robot can't.
RachelM71948937 2y ago
[dead]

487 points by azhenley 2y ago

I actually liked some of the fonts and simple styling used in the site. Luckily it's available as another post: https://chevyray.dev/blog/how-this-site-is-made/#catppuccin-color-theme https://chevyray.dev/blog/how-this-site-is-made/#catppuccin-...

Vecr 2y ago

Interesting how easy it is to make an operation like this run on multiple cores in Rust. Inserting a single call into a chain of functions can be enough.

MontagFTB 2y ago
Rust is built to be memory- and thread-safe by default. Assuming you follow the prescribed rules of the language, multithreading is “free”. Amdahl’s Law still gets a vote, but at least your app won’t blow up in your face.
- jjtheblunt 2y ago
  > Assuming you follow the prescribed rules of the language, multithreading is “free”. I'm wondering if you're referring to the async await addition from a few years back, to use of Tokio's crate(s), or something else.
  - kevincox 2y ago
    I think they are referring to this section: https://chevyray.dev/blog/creating-175-fonts/#automatic-kerning https://chevyray.dev/blog/creating-175-fonts/#automatic-kern... In this case they are not using async but Rayon which provides some easy primitives for splitting tasks into smaller parts that can run in parallel. In this case the par_iter and par_extend calls.
  - hypeatei 2y ago
    IIRC, async/await in most languages doesn't imply multi threading, it just allows other work to be done on the same thread simultaneously.
vips7L 2y ago
It's not really unique to Rust. Scala and Java both support this out of the box.
- Filligree 2y ago
  Yeah, but in Rust it’s far less likely to explode in your face.
  - johnisgood 2y ago
    Or in Ada. Ada 202x[1] brings enhancements like the parallel block, making parallelism easier to express, somewhat similar to Rust's approach but still with Ada's emphasis on clarity and safety. [1] https://blog.adacore.com/ada-202x-support-in-gnat https://blog.adacore.com/ada-202x-support-in-gnat (2020) There may be more enhancements that I may not know about or remember, although I did mention Ada's constructs for safe concurrent code before.
- dwattttt 2y ago
  The stronger guarantees/performance fall out of the stronger lifetime/ownership model, combined with errors around ambiguous/invalid lifetimes being a compiler error. In other languages those violations are things you have to run a race detector and actually evoke the condition to find, or you abandon fine grained/tracked ownership and use garbage collection.
  - vips7L 2y ago
    None of that matters with this code. There are no lifetimes here and in fact there is no ownership either. Everything is a primitive char. They’re always copied and no mutation occurs. It’s pure computation. You could write this code exactly the same way in those languages.
    - dwattttt 2y ago
      True. You could write it in C or asm too, and it would be about as simple. But there's still a difference that if they weren't all primitive (and you can't always rely that they will be), you'll know it won't work straight away in Rust, whereas in the others you need to walk every data type involved to make sure ownership is clear (or rely on a garbage collector to save you).

Uptrenda 2y ago

[flagged]

waldothedog 2y ago

This is neat! And cool to hear this made a financial difference for them. Gah, I remember the name Chevy Ray from indie games, but I cannot put my finger on what this person made… would have been like 2010 to 2012? In the same vein as VVVVVV or nidhogg or canabalt as I recall

bitvoid 2y ago
Ikenfell
TeaDude 2y ago
Flashpunk?
chevyray 2y ago
The game you are probably talking about is Beacon.
deleted 2y ago
[deleted]
waldothedog 2y ago
It was flashpunk! Beacon was rad too — blast from the past, I miss indie games
wrsh07 2y ago
I also found Ikenfell to be really delightful!

bentinata 2y ago

Even though the methods is simple, the way the author visualizing it is really neat.

Daub 2y ago

Impressive indeed. Making a complete font set can easily take as long as a year. The tasks include to go from 'A' to 'Z', upper and lower case, plus all the glyphs (brackets, ampersand, exclamation marks etc). Optionally the variations (bold, italic etc) without which a font is of limited use. The thing that separates the men from the boys is the kerning (spacing between the characters) which can absorb as much obsessive compulsion as you can throw at it. From TFA: > My new fonts were going to support 176 characters, meaning I might have to enter as many as 176² = 37,976 kerning pairs... yeah not going to happen. So this time, since I was (spoiler alert) writing my own tool to generate the fonts, I decided to semi-automate this process to take care of a huge majority of the kerning, and do manual entry when algorithm didn't suffice.

inferiorhuman 2y ago
Making a complete font set can easily take as long as a year. Making a font family can easily be a lifelong project.
- chevyray 2y ago
  It makes me very happy to see people talking about how much work can go into a typeface. Like, these pixel fonts are very quick to make, but fully contoured vector fonts can be tweaked to perfection infinitely, there's always more languages and more diacritics and more weights and styles you could do. Truly a rabbit hole, but when it's done well it's very worthwhile. I have a lot of respect for font makers.
  - galangalalgol 2y ago
    Has anyone tried training a DL model to handwrite things? That seems like a fascinating rabbit hole as well. In addition to all the context sensitive letter differences, you could even label training pieces with the mood of the writer and the flexiness of the nib/quill. If I type an angry emoji after a sentence it gets scribbled harder when drawn.
- amelius 2y ago

worik 2y ago

Nice work I would like microns on the vowles, as we type a lot of Māori words....

Daub 2y ago
Same here for diacritics in Vietnamese. There are very few font sets which natively support our vast range of diacritics.
- chevyray 2y ago
  Out of curiosity, what would you say is the most accurate/comprehensive resource for learning about these?
  - Daub 2y ago
    This one is the go-to site for VN designers: https://vietnamesetypography.com/ https://vietnamesetypography.com/
chevyray 2y ago
Is a micron the name of the straight line over the 'a' in Māori? A single pixel line over a bunch of a's is tremendously simple to do in pixel fonts, I could probably add that to all the fonts in a day... hmmmm
- travisjungroth 2y ago
  The straight bars over vowels are called “macrons” in English. https://en.m.wikipedia.org/wiki/Macron_(diacritic) https://en.m.wikipedia.org/wiki/Macron_(diacritic) In Māori, there are ā, ē, ī, ō and ū.
  - chevyray 2y ago
    Ahh yes there it is, thanks for clarifying. These are quite simple and would be easy to support.

zeta0134 2y ago

These look absolutely delightful! A quick question: I'm working on retro consoles, and so I need fonts where each glyph is a multiple of 8px wide for easy display on tile-based backgrounds. Are the sizes (in pixels) of your font packs listed anywhere?

Vecr 2y ago
16. Or an integer multiple of that like 32 or 64. It's in the Step 5: Exporting section Edit: that's the height, the width is not fixed/I think it varies with the exact font and the kerning. It's probably too big for you anyways.
bryanlarsen 2y ago
The example tile sheet in the article appears to be 8 pixels wide by my count. Count the width in pixels on the "m" and if it's 7 the font will likely work for you.
- Vecr 2y ago
  The main issue is you can't have them literally touching or it'll be really hard to read. Maybe it would work, but most of these "pixel art" fonts really benefit from some faking enabled by running on what's actually a high resolution display.
  - bryanlarsen 2y ago
    That's why I said the "m" should only be 7 bits wide for an 8 bit wide font.
    - damieng 2y ago
      It's a trade-off. Have every single instance of m look squished vs it might touch another m or w somewhere else and look odd. I've done fonts in both categories.
kelnos 2y ago
> each glyph is a multiple of 8px wide These look to be variable-width fonts. I believe the heights are multiples of 16, but the width will vary by character.

claytonwramsey 2y ago

This is really excellent work, and a great write-up. I think it would definitely be possible to speed up a lot of the algorithms with some tricks. Replacing hashmaps with bitmaps and byte-index arrays for character painting and ascii-to-variants seems like a lead, based on what I've read. Of course, that doesn't really matter for this code since it's already fast enough.

chevyray 2y ago
Glad you brought this up, because it's absolutely true! All the code is not on the site, but I actually allocate and clone a lot of strings and data structures as well. I did optimal code where it was obvious (bitmap copying, easily parallelizable things), and it was SO instant that I didn't even bother trying to optimize the other things. But it could be done! It's easy to forget how fast on-the-ground languages like Rust and C++ and Go are, not to mention when you use their multi-threading primitives and worker queues/etc.

peteforde 2y ago

What an amazing accomplishment! Bravo. I find typography resists my attempts to wrap my head around it, because even though I can do basic analysis like serif vs sans serif, I get a sort of brain fog when it comes to telling fonts apart or intuiting which fonts to use in different situations. It's really hard to wrap my head around the idea that one person could make 175 fonts and that they would each be meaningfully different from each other. Like, how does one not accidentally recreate the same font?

chevyray 2y ago
Sometimes I would get pretty far into a new font only to realize it was almost a total copy of another. It happened, I just managed to notice before releasing them lol
omnimus 2y ago
Actually it is impossible to recreate the same font from memory. Even if you tried the font would be in some ways different. With pixel fonts where the grid is very coarse its much easier to do but normal fonts with curves you wont make it. Even if you are using same image of a font as a reference.

theahura 2y ago

Btw anyone who's into fonts should check out https://tomorrow.type.today/ https://tomorrow.type.today/ they're a typography studio that does fantastic original and experimental fonts. One of our team is super into typography and has been building a collection of their work at https://play.soot.com/tomorrowtypetoday https://play.soot.com/tomorrowtypetoday

vindex10 2y ago
just as a note: the company is registered in Russia
- Tohhou 2y ago
  This is an inflammatory comment. Shame on you.
  - vindex10 2y ago
    I respect people who fled, but the company still pays tax in Russia. It is not inflammatory, it is pragmatic - to remember the supply chain.
    - Tohhou 2y ago
      Do you don't hold people in the US to the same standard? No? Then you're just evil.
      - vindex10 2y ago
        I hold every company that pays tax in Russia to the same standard.
- MissTake 2y ago
  Also in Georgia.
- theahura 2y ago
  Iirc they're originally Russian, but have fled the country out of strong disagreement of the war

dognaptr 2y ago

[flagged]

musha68k 2y ago

Fantastic! Da Vinci types like the author here always remind me that there was a time when being an artist and an engineer were one and the same, with no clear distinction between the two.

bergheim 2y ago
In that case I encourage you to read up on da Vinci (and not some top 10 dV creations post). It is clear that there was quite a big distinction. I can model a spacecraft that will take me to Alpha Centauri with "questionable" untested dynamics in Maya. But I am pretty far off from building it and sending it into interstellar space. Pretty (and imaginitive) drawings though.

jcynix 2y ago

Impressive and a nice site. Regarding font generation, let's not forget Donald Knuth and his https://en.wikipedia.org/wiki/Metafont https://en.wikipedia.org/wiki/Metafont software which generates raster fonts.

patal 2y ago

Impressive work! In the "mixed-case kerning pairs" quality testing image, I notice that the letter "j" sometimes reaches under the previous letter, like in "Fdj". Sometimes it creates a lot of space, like in "Fjo". Is there a stylistic reason for this? The Fjo spacing is the only thing that stood out to me. Kudos

chevyray 2y ago
Nice catch. That's a culprit of the `auto_kerning_min` property that you'll see on a lot of the fonts. this tells the auto kerner not to exceed that. I added this parameter because I fouund that for a lot of fonts, squeezing letters together over a certain distance would just look bad, so I would set -1 or -2 as a cap. It looks like that's just one that snuck past my notice. The word "Fjord" would look strange because of this. This is a good example of how even with the quality testing, things can get through, because I still have to visually glance over hundreds of kerning tests. One thing that might be a nice adjustment is to have an algorithm that detects the "area" between two letters, so basically how many pixels can volumetrically fit between them, and flag ones that go over a certain threshold. I could then color those tuples as red in the sample text, basically the system marking them as "potential problems" that required an author's look.
- dotinvoke 2y ago
  Why not just feed that information back into the algorithm itself?
  - chevyray 2y ago
    I definitely could, I would have to do a bit of tests to see what kinds of volumes deserved special treatment. Usually the way I do things is I start by doing work manually. If I find that there's a common pattern in something I'm doing that could be automated, then I am able to transcribe it into the algorithm because I just follow the same steps I've been using in my head. This wasn't a thing that actually came up a huge amount, as these glaring pairs aren't tremendously common. But they're just common enough that if I sat down and examined them, I could probably say something like "hey if 1.5 vertical lines worth of pixels are between two letters, kern this extra" or something like that.

swiftcoder 2y ago

Fascinating, I didn't previously realise you were converting pixel fonts to vectors when encoding them to TTF. I guess that gives some ability to seamlessly scale them for folks who load them into a competent text renderer as well (i.e. not a game engine that mostly just uses pixel fonts 1:1)

chevyray 2y ago
It also just makes them usable in traditional graphics editors like photoshop, indesign, affinity, aseprite, etc. Those tools do not have the concept of a pixel font, so using a TTF with hinting/antialiasing turned off allows you to use them in those apps.

bravura 2y ago

Curious: Once the fonts are made, how are they marketed and sold? Where do the people who use them become of aware of them and how?

chevyray 2y ago
A combination of word of mouth and itch.io's search system. I have a decent amount of social media followers, many who have used my fonts in the past, so the initial flood of wishlisters put it on the front page for a bit. After that wave, they get used in various projects here and there, and those projects eventually release or post screenshots. Because it's indie, lots of people also attribute the fonts directly when they post screenshots of their games, posters, videos, and stream overlays where they use them. I am very supportive of people using them, and repost their work, and so it's very casually symbiotic. They're not lucrative on the scale that you might expect from a company or a popular vector font, but as supplementary income for a solo developer what they bring in helps put food on my table and also helps indie games get made which I think is great.

networked 2y ago

Cool fonts, and an interesting post. I kind of want the top-right fake game in https://chevyray.dev/blog/creating-175-fonts/old_previews.png https://chevyray.dev/blog/creating-175-fonts/old_previews.pn... to be real. It has a "Wonder Boy in Monster World on the GBA" vibe I think is nice. I have noticed that the license doesn't allow you to use the TTFs in open-source software, which is something to keep in mind. > Licensed Content may not be distributed to third parties as standalone files or in a way that unreasonably permits the recipient to extract the Licensed Content for use separately and apart from the Work for Distribution. > Licensee may not distribute the Licensed Content in any library or reusable template, including but not limited to game templates, website templates intended to allow reproduction by third parties on electronic or printed products. > Licensee may not distribute Licensed Content in a manner meant to enable third parties to create derivative works incorporating Licensed Content. To me, a non-lawyer, the last clause reads like it unambiguously forbids it. https://github.com/ChevyRay/pixel_font_megapack_license/blob/cb99b037f60c5885158d68046bd61a1bc22fdc52/LICENSE.txt https://github.com/ChevyRay/pixel_font_megapack_license/blob...

BHSPitMonkey 2y ago
If you like platformers, give Celeste a try. The scene in that mockup is a reference to an opening scene from that game.
- networked 2y ago
  Oh, I didn't realize. Thanks for telling me. I have played the original Celeste for PICO-8 (now called Celeste Classic). I plan on playing the full release eventually. The screenshot actually reminded me a little of an earlier game by Maddy Thorson, An Untitled Story. I think it is the way the mountains are drawn in the background and the thick outlines. A link to play Celeste Classic: https://www.lexaloffle.com/bbs/?tid=2145 https://www.lexaloffle.com/bbs/?tid=2145. TIG Wiki page for An Untitled Story: https://tig.fandom.com/wiki/An_Untitled_Story https://tig.fandom.com/wiki/An_Untitled_Story.
- Liquix 2y ago
  If you like Celeste, check out Studio Pixel [0]. His most recent game Kero Blaster (mobile) is excellent but Cave Story is the classic. Tight controls, retro aesthetic, imaginative levels, very well executed. [0] https://studiopixel.jp https://studiopixel.jp

czarit 2y ago

Very nice! One question: I was curious why you chose this subset of Scandinavian special characters. There are three extended chars in Swedish (äöå) and Norwegian/Danish (æøå), but your fonts have æ, but not ø, which means you could drop the æ and still support Swedish, or add an ø to also support Norwegian and Danish. Was this an oversight or is there some locale that has just æ and not ø? (and before anyone asks I did not confuse æ with the oe-ligature œ, which is a different glyph used in French, and which the fonts also do support)

kd5bjo 2y ago
> Was this an oversight or is there some locale that has just æ and not ø? Well, Icelandic uses ö in place of ø, but also requires ð and ý which are not included. Æ is sometimes used in older English texts, though, in words like “encyclopædia” or in plurals of latin-derived words: https://en.wiktionary.org/wiki/Category:English_plurals_in_-ae_with_singular_in_-a https://en.wiktionary.org/wiki/Category:English_plurals_in_-...
- kd5bjo 2y ago
  For completeness, Icelandic also requires Þ which I somehow forgot when writing the above comment.
chevyray 2y ago
This was just an oversight. I actually got very far into the project before I realized that ø was missing from my set. It’s something that I could definitely go through and patch into all the fonts, but I was waiting to see if there was enough demand for the effort. I think supporting two more languages would be very cool though.
- kipari 2y ago
  From a Dane that finds multiple of these fonts gorgeous and highly appreciate the elaborate kern pairs: please consider patching the fonts with an ø. ;-)

kmacdough 2y ago

Awesome work! It's a wonder how much hasn't been done in a world of 8 billion people. A single skilled individual with some free time filling in a gap can be HUGE. Gets me looking for gaps. 8 Billion people seems like a lot, but it cuts down fast. When 1/10 people have the freedom and, 1/100 the resources and time, 1/100 the training and experience, and 1/100 have the drive, and with hundreds of domains each with hubdreds of major unfilled niches... That's 800 people split among tens of thousands of gaps. It pretty quickly gets down to you, the reader, to pick up that keyboard and start tapping away! These are obviously wild-a* numbers. Constraints may be overstated or understated & they're not fully independent. I'm missing others. The point stands: you need only to cut 8 billion by 100 a few times to get <1.

euroderf 2y ago

About kerning. Uppercase Finnish is a nightmare. Odd pairs like LJ and KY and TY . How about an option to let some letter pairs touch ? It also creates a tendency to use quite light font weights for all-uppercase text, so that whitespace is not so prominent.

chevyray 2y ago
Not a bad suggestion at all. Lots of fonts even provide ligatures for certain letter pairs so they can touch, but tweak them so they look a bit better. That kind of thing is another level of polish that I could definitely do, or even just providing more spaced variations.

jezzamon 2y ago

Nice! I'm a user of your last batch of fonts, I'll have to check these new ones out :)

Tohhou 2y ago

What's the point in this article if pifo isn't open source? Here's a tutorial on my software... you can't use it!!!

chevyray 2y ago
I wanted to describe how the algorithm works, and show what it looks like to ship a project of that magnitude, and share some of the fun problems complexities that come up. I'd like to see more creatives using code as a way to bolster their projects and reducing tedious work for themselves with automation or deployment scripts, and I think Rust is a really great language for doing this, so I thought it would be inspiring to share how and why I'm doing it. I agree that it would be overall more valuable to have the whole thing open source online, but sometimes I want to share how I solved problems without open sourcing all my code directly, for various personal reasons. But from the many comments I'm getting across the internet on the article it seems like people are getting a lot of value and motivation out of it, which was the intent, so that makes me happy.

laserDinosaur 2y ago

somepx on itch.io also makes some really nice fonts: https://somepx.itch.io/ https://somepx.itch.io/

chevyray 2y ago
some is a homie and does excellent work! They also have a Patreon where you can support/guide them in the creation of new pixel art assets and fonts and stuff like that, if you're into that sort of thing. It's a cool approach, different than mine, and I'm rooting for them.

meindnoch 2y ago

>The final character set I settled on. Sigh. No ő and ű.

chevyray 2y ago
I did a quick search, this for Hungarian support, yes? If those are the only two characters I would have to do to support the language, I'm collecting suggestions from other comments in this post as well and might do a 1-year anniversary update to add support for more languages, and I can add this.
- meindnoch 2y ago
  Yes, these are the only Hungarian-only accents.

RatParadise 2y ago

Awesome read! I've never designed a font but often daydreamed about it, and this was a great primer to the process. Question: Did you find that your automated kerning generator was always satisfactory? Or did you ever catch letter pairings that technically satisfied the criteria but that tripped your subjective kerning radar? I'm wondering if you had to hard-code kerning exceptions, or if your system even allowed for that.

chevyray 2y ago
I absolutely did find examples where I needed to specify. I kind of allude to that in the post, but yeah whenever I add the ability to automate something like this, I almost always make sure to include the ability for me to manually override them. Experience has taught me that no matter how fancy or super special your algorithm is, there's always situations where the naked eye just sees what the robot can't.

RachelM71948937 2y ago

[dead]