&crispyfont I went a bit farther down the path of generating sizes from a single glyph definition, but the code is kind of a mess. I may work on this idea more, but I enjoy drawing the atlases more, so I went back to that and drew a 12px size to finish out the jam. Not sure I made anything useful, but I had fun 😁

&crispyfont Starting to auto-generate sizes from code now - I'd like to create a visual editor eventually, but for now I'm typing in values manually to test the rasterization code

&crispyfont I spent too long figuring this out, but I finally got resizing and zoom working the way I want. By default zooming in the browser just scales everything up uniformly and gets blurry, but I wanted some elements to stay the same while some other text changes size. I only have 3 sizes of font currently, but it picks the one that's closest to the target size for the selected zoom (or a multiple of one of the sizes). That way it should stay aligned to the device pixels and look sharp. It's mostly working, so next step is to create some more font sizes

&crispyfont Day 3 - I got a pipeline setup where I draw the font in Aseprite aligned to a grid, export a png, and then generate the packed atlas + font metrics with a script. I've chosen to only use fully transparent or fully opaque pixels for maximum crispness... the upside is a bit-depth of 1, but the downside is that curves look real bad, so I'm going with a more angular design. 3 sizes so far:

&crispyfont Hey all, I got a late start but my project is trying to create a font that looks crisp even on low pixel density displays. I've been working on learning wasm and webgl to make games, and haven't been happy with how blurry the truetype fonts have been looking. Today I created my first hand-drawn atlas and I think it's looking pretty good - here's truetype Terminal.tff on top, and the hand-drawn font on the bottom: