2022-08-28

For years Iโ€™ve been curious about type design but lacked sufficient reason to pursue it; creating a typeface is an ambitious and highly time-consuming project. It recently occurred to me, though, that just as I regularly modify open source software to suit my needs, I could progressively customize an existing open source typeface.

Separately, websites are typically expected to provide an icon, but Iโ€™ve never been sure what to use for a simple personal site. Looking to other media, the traditional answer to this is the individual monogram. Luck has it my initials lend to a straightforward combination, so in the spirit of why not?, Iโ€™ve decided to address both of these areas by designing a ligature for use as an icon and OpenType substitution.

The font on this website is a variable-weight fork of EB Garamond, a digitization of a Garamond type specimen that was printed in ink in 1592. Close inspection reveals coarseness inherent to the original medium, but it reads well at typical paragraph text sizes.

I opened the font in FontForge and followed the instructions to compose a and k into a new unencoded glyph a_k:

โ€œakโ€ ligature in FontForge

Then I added a dlig lookup so that the text โ€œaโ€Œkโ€ is automatically replaced with the ligature:

โ€œakโ€ ligature for EB Garamond

The result is both marvelous and undeniably silly. Hereโ€™s a sample of some words that contain the substitution:

(Youโ€™ll need to allow web fonts to see it.)

I find the effect just unobtrusive enough that Iโ€™ve decided to try using it on the website to impart some character.

Next, for the icon, which is sometimes displayed in greater detail, I wanted a more refined version of the ligature. My personal favorite typeface, Cormorant, provides for precisely that:

Cormorant is a display typeface inspired by Garamond. While Garamond makes for exquisite reading at book sizes, it appears clumpy and inelegant at larger sizes. The goal of Cormorant is to free Garamond from the physical limitations of metal printing and allow it to take its natural form at high definition.

I recomposed the glyph in Cormorant, raised the x-height to better fit a circular crop, and thickened the finest elements to still accommodate small display sizes:

โ€œakโ€ ligature for Cormorant

Silliness notwithstanding, Iโ€™m pleased with the aesthetics. For the bitmap favicon and BIMI image Iโ€™ve borrowed from Wikipediaโ€™s presentation of a single-glyph text-centric icon, and for the vector favicon Iโ€™ve used just the glyph with prefers-color-scheme to adapt to varying background color.