Hack an Editor: Fonts for Programming

We’ve recently noticed two different fonts aimed at programmers, each with a different approach to editor customization. The first, Fira Code, transparently converts common programming digraphs into single characters. For example, <- becomes an arrow and != (or <>) becomes a proper not equal sign. The other font, Hack (can’t argue with the name), aims to make commonly confused characters distinct. For example, the zero glyph has a very distinct appearance from the letter O.

It is pretty easy to understand how Hack works, but Fira seems a mystery at first. Your C++ compiler expects <- not an arrow, right? Fonts support ligatures–sequences of two symbols that run together (like æ). Clever use of these ligatures means that the compiler still sees -> but the screen displays an arrow.

Continue reading “Hack an Editor: Fonts for Programming”

Finding the average of every font

An old book – the smell, the texture of the slowly rotting paper, and the smudges and margin notes accrued over decades – is one of the finer points in life taken for granted much too often. We’re bombarded with high precision vector typefaces all day, but [Dan]’s Avería font is beautiful in its irregularity. [Dan] made a font that is the average of all the fonts installed on his computer, and the result looks surprisingly great.

[Dan] started his journey down the generative font path by making images of every letter of all his fonts and mashing them together with a PHP script. The result was a terribly blurry font, and unfortunately this had been done before. [Dan] wanted a font with clearly defined edges, though, so the obvious solution would be to take the grayscale result of his first experiment, set a threshold, and make a monochromatic image. This plan didn’t pan out, and [Dan] needed a cleverer way to go about things.

The solution to the problem is astonishingly simple; [Dan] took the perimeter of each font glyph and divided it into hundreds of points. These points could then be averaged in 2D space making a real ‘average’ font.

Even though this project isn’t the usual ‘Arduino doing something’ fare, [Dan] came up with a really clever way of doing something that produced something really cool. It’s enough of a hack in our books. Tip ‘o the hat to [Aleks Clark] for sending this one in.

Inkscape plugin for engraving fonts

[Windell] developed an Inkscape extension called Hershey Text that helps you process fonts into vector representations. If you’ve tried to 3D print, plot, or mill text in the past you may have run across the problem of generating vector paths that deal with the outline and fill of the text appropriately. The problem stems from how fonts are defined; either by the area that they enclose, or by the path that is used to draw the outline. Check out [Windell’s] tutorial for this extension where he explains each of these issues and shows how to overcome them.

The image above illustrates the stroke options, which allow you to vector multiple paths to best fill in the correct parts of each character using path-based hardware. The package includes a wide variety of interesting font sets that are in the public domain, and includes tools such as a glyph map generator that make it very user friendly.

How to create TrueType from an image


[Viacheslav] wanted his virtual terminal to have the look of a DEC VT220. He was unable to find a font set that looked just right so he set out to make his own TrueType font. He managed to find a sample image of the glyphs that the VT220 used as fonts. Using a collection of free software he sliced the image into 256 different parts, resized and converted to one-bit index images, and converted these to vector graphics. This was accomplished with a bit of python, an image tracing program, and font editor called FontForge.

Take some time to dabble with these font tools. With an adequate sample you should be able to reproduce any font set. We won’t achieve anything as sophisticated as the font printed with bacteria, but this will be a start in the right direction.

How to generate font and picture header files


Displaying custom fonts or images on an LCD screen using a microcontroller usually requires quite a bit of work. We’ve used some readily available tools to make this a bit easier for your next project. Our python script will convert BMP files into a header file ready for use with AVR microcontrollers. We’ll walk you through it after the break. Continue reading “How to generate font and picture header files”