You Say Cute, I Say Code

The Making of LiebeLotte, A Connected Script Font


Yes, my fonts do look cute and crafty.
But make no mistake:
Getting from the first drawings to a working font is a pretty geeky endeavor.

My latest typeface, LiebeLotte, took almost a year to complete.
I had designed quite a few popular typefaces over the past couple of years, but this new one was going to be different — it was going to be connected. I wanted my letters to have natural-looking interconnections so that words would look as if they had been written in a single stroke.

The inspiration for LiebeLotte was the hand-lettered logo of my foundry LiebeFonts.


1. Connections

Drawing smooth curves is hard enough. But building a connected font that is strongly influenced by handwriting is closer to engineering than it is to playing around with letterforms.

Before I started, I did some research and looked at all the monoline script fonts on the market. The easiest way to make letters connect is to finish each letter with a very long stroke that just meets the next letter’s stem or bowl anywhere. That technique works well for certain designs, but not for the fully connected, loopy appearance I had in mind. I wanted my e’s and l’s to curl in one continuous movement from the previous letter through to the next letter.

The most common problem I found with existing fully connected script fonts was that the points where the connections from two letters met were not smooth.
The upstroke angles must match very precisely, otherwise it will show.
In quite a few fonts, I have seen small dents and bumps halfway up the upstroke, and I definitely didn’t want these in my new typeface.

One method to reduce the number of tricky connections is to add as many ligatures as possible — but that only solves the connection issues for specific pairs or triplets, not for longer words.

My solution was to connect the letters at the baseline, right at the extreme point (that is, where the vertical direction of a curve changes). This approach makes the connections more predictable; the angle at the baseline will always be 0°. Of course, there were some exceptions and edge cases where I still had to deal with by adding workarounds, like ligatures and contextual alternates. But in most cases, my baseline method worked great.

I drew all letters as monoline strokes first. When the design was almost done and I was happy with the proportions, the rhythm, and the connections, I expanded the single line to outlines in the six different weights. A lot of manual tweaking was required, especially for the bolder weights, where simply outlining the stroke would produce weird bumps and ugly stroke caps.

Nevertheless, the expand feature in Glyphs* creates precise results and sports some powerful settings. You can even choose different values for horizontal and vertical strokes, which inspired me to make a high-contrast version of LiebeLotte called “LiebeLotte Swell” — a classic cut, reminiscent of calligraphy with a pointed nib pen.

*) Glyphs is awesome. I don’t know if I would have wanted to become a professional type designer without Glyphs.

2. Code

It is no coincidence that “Font Engineer” is an actual job title: Making a font that works visually and technologically involves understanding rasterizers, platforms, and all kinds of parameters in the font file itself.

I do all the production work myself, so I guess I’m a part-time font engineer, too. Having full control over every aspect of a font is important to me. I had never thought about this before, but a friend recently pointed out to me that I’m actually a “woman in tech”. Anyway, I believe that being able to design pretty things doesn’t cut it if you want to make digital products. I don’t consider myself a coder, but I do know my way around tweaking font parameters and scripting OpenType features.

For LiebeLotte, I put all of the interconnection functionality into the ligature (“liga”) OpenType feature. It is rather uncommon to implement contextual letter replacements there, but because ligatures are usually enabled by default, it works great in all the tools that I’ve tested: MS Word, OS X, all major browsers. And if ligatures are not enabled (as in Microsoft Word), it usually just takes clicking one checkbox to turn them on.

Unfortunately, the only place where the connections don’t show is the preview renderer on the MyFonts website. So check out the previews at FontShop to see the rendering properly and believe me: The font probably works perfectly on your computer, too.

LiebeLotte contains 1,500+ glyphs, mostly because there are up to 10 variations for every single letter to ensure perfect connections. There are a quite a few ligatures and a range of alternate forms to choose from.

All of my recent typefaces come with plenty of bonus features: Alternative characters, ligatures, ornaments, and some fun catchwords. These can be enabled in layout apps and word processors through secret, hidden, impossible-to-find options … I’m exaggerating, but it’s not really obvious how to unlock the goodies that exist in most contemporary quality fonts.**

**) There’s hope that the UI to get to these precious OpenType settings is going to be better in the future (http://ilovetypography.com/2014/10/22/better-ui-for-better-typography-adobe-petition/).

I hope you’ll have as much fun designing beautiful things with LiebeLotte as I have had designing it.
You can purchase LiebeLotte from MyFonts, FontShop, and FontSpring. If you’d like to try it out online: FontShop has the most accurate preview.


Show your support

Clapping shows how much you appreciated LiebeFonts’s story.