Repository files navigation

Handjet is an element-based variable font (aka pixel font, modular font, …) where every glyph is composed using multiple copies of the same element. Each element can take 1 of 23 shapes and transition smoothly between them while creating various effects. The font currently supports these scripts: Arabic, Armenian, Cyrillic, Greek, Hebrew, Latin, and Korean.

In autumn 2018, I had the opportunity to teach type design to a group of talented graphic design students at theFaculty of Fine Arts in Brno. Their first exercise was to build a simple element-based font that would be tailored to work well withhandjet printers. The handjet’s 32-pixel vertical matrix defined the constraints, the only contour to draw was the shape of the element, and the rest of the design job was “only” a matter of placing the elements on the grid to form letters. The clocks were ticking and the students were fierce. Most of them had their font with basic English and Czech alphabets done by the end of the day!

Upon realizing the task could be taken even further, I set out to design my own font. I did not leave the house that weekend and ended up with a complete pan-European Latin. A couple of days later I had Greek and Cyrillic too. It was hard to stop. And once I started interpolating the element shapes, it got out of control completely.

In its current version, the Handjet type system contains 23 elemental shapes. Smooth transitions between them create various effects: a triangle appears out of thin air and expands into a square, the square rotates to create a lozenge and then scales into a thin rectangle, a rounded square smoothly turns into a circle and the circle into an oval, a clover becomes a rotating star, and a spindle, and a heart. The size of elements can be changed as well, producing different font weights. Plus, one can choose to use groups of 2x2 smaller elements instead of a single element. All of these components work together within a single variable font, allowing users to produce their custom variations and animations easily.

In 2019, Google sponsored the extension and open-sourcing of Handjet. All variations and element shapes have been thoroughly revisited and extended. Working with consultants Borna Izadpanah, Khajag Apelian, and Meir Sadan, I have also added support for Arabic, Armenian, and Hebrew (respectively). Selected symbols representing wild and domestic animals were included together with various seasonal symbols and patterns. I hope you will have as much fun using them as I had designing them.

In 2023, Park Ha-neul (박하늘) and Lee-su Yoo (유이수) have included support for the Korean script.

— David Březina, November 2023

P.S. If you want to do this exercise with your students, have a look at thisGlyphs tutorial.

P.P.S. To be perfectly clear, I went way beyond what a handjet's grids permit, so only some of the fonts are suited to use with these printers.

WARNING: We have found that InDesign 2023 (18+) and Illustrator 2023 (27+) have issues displaying Handjet. You can solve this issue by either upgrading to the latest 2024 versions (19.2 and 28.3 respectively) or by downgrading to older versions. The font may show unwanted visual artifacts in small sizes in Safari/Webkit due to the specifics of the default rendering setup. Change the default anti-aliasing setting in your CSS to eliminate them:-webkit-font-smoothing: antialiased (for example).

Handjet is a variable font with the following axes:

• Weight (wght) (100-900) controls the size of the element,
• Element Shape (ELSH) (0.0-16.0) controls the shape of the element,
• Element Grid (ELGR) (1.0-2.0) controls how many elements are used per one grid unit.

The weight is represented by the size of the element used.

The interpolation between different element shapes along this axis creates a rotation or disappearing effect for some of them. This was done (instead of having independent rotation and scale axes for example) to simplify the design space, and to keep things manageable for users as well as computers. For a preview of the available element shapes and their transitions, see the animations above.

Rows marked with* are available as instances in the STAT table.
Rows marked withx are repeated shapes that allow for a better transition.
Rows marked with- are for example only.

This axis controls how many elements are used per one grid unit.

In principle, all glyphs remain structurally the same across all masters except for one special glyph,pixel, which represents the element shape and is different for each master.

Thepixel glyph is compiled from all non-exportingpixel.xxx glyphs and is the only component that changes between the masters of this variable font. You can recompile thepixel glyph by using theproduction/glyphs-scripts/compile pixel glyph.py macro in the Glyphs app.

• In your Python 3 environment, make sure to install the required pip packages:$ pip install -r requirements.txt
• Make sure you make theproduction/build.sh file executable:$ chmod +x production/build.sh
• To recompile, run$ ./production/build.sh and new fonts will be generated in thefonts/ directory (it's a complex file and takes a while to recompile)

If you would like to animate Handjet using Python andDrawBot, you can check out thesource code for the animations.