Show HN: I made a grid based font editor and font

Hello HN! I wanted to make a font that I can "snap" to vertices on a grid for an upcoming project, and after starting making it I decided that it was going to be easier to iterate if I made an editor too. It uses opentype.js to generate the font and some invisible textarea tricks combined with svg for the text editor.

I have a fascination with segmented LED and LCD fonts. This, I expect, will be a major distraction for me today.<p>Before everything standardized on 7-, 14-, and 16-segment displays, there were a lot of creative alternatives. A bunch of different 7, 8, 9, and 22-segs, including my favorite one: <a href="https:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;adam_sporka&#x2F;1843883266" rel="nofollow">https:&#x2F;&#x2F;www.flickr.com&#x2F;photos&#x2F;adam_sporka&#x2F;1843883266</a><p>I once owned a Fossil watch that had an ~18-segment display that displayed the time in Chinese, and drew the characters slowly. It was endlessly fascinating.<p>For a Christmas bonus this year, my company sent everyone indoor&#x2F;outdoor weather gadgets. Enormous beautiful screen, but I keep staring at it thinking about how it could be more efficient with better fonts and fewer segments.

This is so cool.<p>Some suggestions:<p><pre><code> - I have no idea what the four buttons at the top mean - The edit sidebar could be a little bigger. I&#x27;d even onsider making it horizontal? (Edit: just noticed it becomes horizontal when zooming in. Nice!) - Undo&#x2F;Redo would be nice - Add a little message people can use to give credit to you</code></pre>

Really cool stuff... I&#x27;m already halfway through my very own font<p>Would be nice to be able to edit a glyph while comparing to the current version so you can tweak it without destroying it... and then ultimately click to replace the existing glyph with the new one<p>Highlighting the x-height and other helper lines on the editor would also help avoiding a ton of iteration

This is extremely cool! Being able to tweak glyphs on the right and use them on the left is pretty amazing feeling.

That&#x27;s some damn fine yak shaving.<p>Feature suggestion: Could there be a visual clue which node will be linked to if I click?

This is great. The ability to delete a cell without deleting the whole layer would be really helpful.

Really fun idea, very well executed, and the font (to me) looks way better than I’d have guessed.

Doesn&#x27;t seem to produce a valid font file for Windows, for what it&#x27;s worth.

This is a very nice tool for experiments with con-scripts (like Tengwar or Zbalermorna).<p>That said, I&#x27;m not sure I understand how the grid editor works. Is there any way to edit the existing node, instead of adding more strokes?

Nice! I have been looking for something like this for awhile. Thanks for making it.

Also worth exploring: <a href="https:&#x2F;&#x2F;fontstruct.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;fontstruct.com&#x2F;</a>

I really like the font. Reminds me of the vector fonts used in computers like the Tektronix storage tube-based ones.

It&#x27;d be interesting to know why highlighting the font makes it highlight as a different typeface.

This would be nice for creating vector fonts (.lff) for Librecad and&#x2F;or solvespace.

Awesome! I am going to make a direct JSON renderer for the PixelBlaze!

It&#x27;s cool how I can add non-ascii characters and they just work.

This is such a cool project! The font looks really nice as well :)

This reminds me of Hershey plotter fonts.

This is awesome!

nice! the fonts knowledge is useful for you <a href="https:&#x2F;&#x2F;www.alovez.com&#x2F;share&#x2F;page&#x2F;?id=31" rel="nofollow">https:&#x2F;&#x2F;www.alovez.com&#x2F;share&#x2F;page&#x2F;?id=31</a>