avatar image - a green paisley swirl bits all the way down
February 13, 2025
By: Nundrum

Fountainvoid

》Starting from Ogham

The idea started out with Ogham - animating Ogham as the symbols follow curves, and to use that for displaying informaiton on-screen.

In case you don’t know, Ogham is an alphabet that started out to write early Irish. Here is "nundrum" using the alphabet so you can see how it looks:

fountainvoid ogham nundrum

That is a striking look, but would be utterly indecepherable! I don’t want to refer to a code chart just to read the screen.

So I started playing around with writing the Latin alphabet connected by a baseline. That was also a great reason to break out the new fountian pen and bottle of ink. Yes, I have a glowing fountain pen and journal.

fountainvoid glow journal

》The Bones

First up was the baseline itself, and I liked the way Ogham lines begin and end with those angled >/< marks. But I also felt the font would have to be more "curvy" if it was to accomodate the usual letters. A little doodling also made me realize that fewer pen-lifts and backtracks would be better for the handwritten version.

Those doodles led me to use these two-ended stuctures as the base period, exclamation mark, and question mark. Letters would be drawn on the line in between:

fountainvoid punctuation

Here are some early versions of a through z made into SVG based on my doodles:

fountainvoid first letters

Not bad …​ but also not good. The written version is even worse. Letters like c and s are unbalanced in size. Many of the others are unreadable, like q. But o and m, n and uvw were good and fit the kind of style I was going for.

This first alphabet helped set the feel for the font: many similar curves, some extending the midline, some deviating from it, and many mirrored parts.

》The Problem Letters

Some letters were a much bigger problem than others.

》C

The most obvious problem was c. Writing it required covering both the ascending and descending parts twice. And overall it was just ugly. At some point I realized the c could be written as paritally as the a, which itself remains only as the cap. So mirroing the a around gave me this:

fountainvoid final c

Flipping the a upside-down also gave me a good j.

》BDPQ

These were the most obvious problem letters. If you really squint, they appear to be a stemless version of their normal counterparts. But they’re hard to read and even worse they’re unpleasant to write. Though q started out as a hook-shape, that didn’t work well and was very difficult to distinqush. So it got swapped into this.

fountainvoid problem bdpq

I tried opening the part of the letters that touched the baseline, which was a little better, but just didn’t look good. Adding the stems back made the letters more legible, but looked like normal letters in strikethrough. Finally I settled on this:

fountainvoid final bdpq

》FH

h

Imagine I wrote that with an icy hiss.

This was the most difficult letter to desgin. Just look a this. Ick. Is it a cardiogram readout? A really ugly m?

fountainvoid problem h

Other approaches were also a problem. Adding a stem made it hard to read and hard to write. Using a capital-H style pair of vertical lines looked like a double l.

It was in the design of the f that a solution was found. The original f looked too like an s. Writing it cursive-style looked very out of place. Then I thought: why not borrow from the floating-bar t that I had figured out earlier? Just make it a pair of floating bars and it is very suggestive of an f.

Letter h still took me some play to come up with. The result is by far the most abstract in the font. But it provided a nice counterpoint to t and f. Adding a tiny tick on the line allows for easier alignment of the bars when writing by hand.

Here is the final version of f and h:

fountainvoid final fh

》26 And Me

After spending an hour or two over a few evenings I had mostly settled on the final design. I don’t know where the name came from, but "fountainvoid" popped into my head and it seems to fit. That name also shows off the font nicely:

fountainvoid

》hamburgevons

Along the way I learned that the nonsense word "hamburgevons" is used for showing off fonts as it contains all the elements used to make up the Latin alphabet. And in this case it shows off the unusual h.

fountainvoid hamburgevons

》sphinx of quartz, judge my vow

And finally a pangram, to show off each letter along:

fountainvoid sphinx

》Font Design and Font Design Issues

I installed FontForge to make the font. There was quite a bit to learn, but the documentation for it covered everything fairly well. I wish there had been some better guides and perhaps videos on using the bezier tool. Though it looks a lot like Inkscape’s it does not behave the same way. I had to fumble into figuring out some things like shift-drag will constrain the movement of a node but only after the dragging has started.

The spiro tool is not one I used for this project. There were some videos that cover how it works, but this font just didn’t need it. The geometric feel of the letters worked fine with bezier curves.

》Kerning

Kerning is just tedious. In some cases what looked right in FontForge had tiny gaps when imported to KDE as an OpenType font. So that involved annoying iterations since there is no KDE mechanism to update a font in place (that I could find, anyway).

There is also a lot to learn about kerning pairs which the documentation covers just enough that I could make it work, but not enough to really understand what is happening.

》Questiondown, Exclamdown, but no Perioddown?

Remember this from above? Period, exclamation point, question mark.

fountainvoid punctuation

Having a leading and trailing curve is great for the look of the font, but does not map well to the characters we use every day on a computer. The end-curve of exclamation point line is the standard ! character. The end-curve of the question mark is of course just ?. Luckily other languages use ¡ and ¿ which I could encode the start-curves as. In FontForge these are called exclamdown and questiondown. It seems these are the names taken from PostScript.

But the period line? The end is . of course, but there’s not a perioddown to match it for the start. After digging through possibilites in Unicode I settled on DOT ABOVE or ˙ which can be encoded in HTML as ˙. And for Vim fans, it’s digraph '. which is handy.

》And Then There Were Ten

Getting all of the above done had taken me five days of off-and-on work, maybe less. In truth it wasn’t very hard at all. And with that thought I had jinxed myself.

Fountainvoid was lacking numbers. I realized that would be a big problem if I was to incorporate it into other projects. Designing ten numbers took double the time of desgining twenty-six letters! Our standard Arabic numerals simply did not lend themselves to the style of the font. I tried many of the same approaches used in the letters - only use half the stroke, or leave void areas, or use illusory contours - nothing worked! Most attempts also caused ambiguation problems with the existing letters.

Other ideas that didn’t work:

  • Regular or modified Cistercian numerals

  • Abstract lines, dots, triangles, circles

  • Roman numerals †

  • Taking numbers off the baseline entirely

So the numbers deviate much more from their everyday counterparts than the letters do.

Each number had to be evolved out on it’s own. One was simple. Three was a breakthrough - it was turned on an angle and slightly raised to create a crescent shaped void. Five was stolen from Roman † and seven inspired by that. Nine was hardest, but in the end looks like a normal 9 but with a sort of tail.

Here are the numbers, surrounded by parenthesis:

fountainvoid numbers

If you take a look below, you can see where the numbers are "hidden" in the line:

fountainvoid numbers revealed

》Fountainvoid

If you are interested in it, I will put the font files on Github at some point in the near future. There are a few characters to round out and some kerning errors to fix.

Tags: font
Introducing XScreenBane »

A blog by Nundrum

Links

  • @Nundrum on Mastodon
  • Archives
  • RSS
  • Clojurians Slack
  • Contacting Nundrum
  • P.E.P.R. Jacket Project

Recent Posts

  • Fountainvoid
  • Introducing XScreenBane
  • A Jacket, Microcontrollers, and Clojure

Tags

  • re-frame
  • clojure
  • svg
  • async
  • interop
  • jna
  • screensaver
  • platformio
  • font
  • pepr jacket project
  • cyberpunk
  • clojurescript

Copyright © 2025 Nundrum

Powered by Cryogen