Signals by Significa, a variable icon font.

How it all started.

On the date of this writing, variable fonts are still a relatively new technology, but they're growing on us with fewer font files, improved accessibility, support for CSS transitions and animations, and enhanced responsiveness, to name a few. This has lit a fire on us to design a font, but truth be told, that's one for the experts, a lot of work, and thus, not for us (yet).

However, a variable icon font is a great way to start with the variable font technology and the font design itself. Two birds, one stone. On we go.

The foundation.

First, we had to learn how variable fonts work, how they are built, how they are used, how they are exported, and which software would fit its design effort better, among other things that we'll save you from the trouble of reading. The bottom line is we chose Glyphs.

Since we wanted to make this still-nameless font open-source, we based it upon the metrics of one of the best open-source fonts available: Inter, by Rasmus Anderson. This means that both fonts would pair up perfectly.

We started by inferring Inter's metrics and observing the visual and mathematical relations between the ascender, cap height, x-height, and the descender. This foundational work became the basis of the icons’ design.

With this in mind, we set up a grid (to avoid the total anarchy of the SF Symbols) loosely based on the layout of the icon design principles of Material Design. In hindsight, this saved us a lot of trouble in the later design stages. Thumbs up to “past me” for making a good decision!

Also, in hindsight, we were a bit conservative with the icon family size as it currently sits at a modest 62-icon count. Glad we did so because little did we know how time-consuming variable font design is. “Past me” was in great shape!

We started by designing all the icons in Figma, probably because we are really comfortable with it, at their Regular weight. From there, we created the two extreme versions: the thinner weight and the thickest one. We'll get back to this later.

Figma is great, and all that jazz, but unfortunately, vectors can't be pasted into Glyphs. We went to the old, reliable Illustrator. We exported all icons as SVG from Figma, imported them to Illustrator, converted all the lines into shapes, merged them into a singular object, and copied them into Glyphs.

Glyphs interpolates the desired weights based on a system of Masters, where we define the thinnest, medium, and thicken weights so the program can do its magical math to define the intermediate instances.

Now, things get complicated, time-consuming and even more boring to read about. Again, we'll save you from that. In a nutshell, we had to ensure all masters were compatible with each other, with the same anchor points, handles, and paths tidied and following the same direction.

How to use the font.

Spoiler alert: font designers will hate us for eternity. We mapped the icons to the keyboard keys. Shame on us.

If you want to use the font, download it and install it on your computer. It will be ready to use as any other font with any software you may use.

And here's the font map if you wish to use the keys on your keyboard.

What's next.

• Create a community where everyone can suggest more icons.

• Continue designing more icons, including those suggested by the community.

• Continue to improve the existing icons, enhancing and polishing them further.

• Create a website to host this still-homeless family.

• Make Signals fully open-source and available on Github, allowing others to contribute at their own will.