Over ten years ago, in my bachelor’s thesis, I delved into font development using a then relatively new software called ›Glyphs‹. As I plan to engage more with typography again, I’ve decided to get reacquainted with Glyphs, now updated to version 3. Currently, I am designing a new typeface named ›Brokken‹. To force myself to master the workflows of Glyphs 3, I’ve opted to implement the font entirely within Glyphs without using any other production pipelines like drawing the vector shapes in Illustrator and use Glyphs to generate a font only.

Design and Aesthetics

Brokken leans towards brutalist-inspired broken scripts, with elements borrowed from Textura and Fraktur-Grotesque combinations (that got a real bad reputation in the 1930ies). It is also designed to emulate the quick scribbles made with a thick felt-tip marker. Interestingly, the resulting style resonates with the design language of fantasy novels and pen-and-paper role-playing games from the 1980s.

Although the initial inspiration in designing ›Brokken‹ was heavily influenced by Brutalistic typography, the overall impression of the font is almost playful and has a nice cheesy fantasy charm to it.

Development

In developing this typeface, I set specific parameters as creative constraints:

The font eschews Bézier curves, instead indicating curves through sharp, “broken” edges.

Example of some glyph shapes: All ›round‹ corners are created by broken lines.

Each glyph consists of individual components that appear as though chiseled from rough stone—hence the name ›Brokken‹ (»Brocken« = German for chunk, bolder).

Detail of the construction: Each glyph consists of overlapping, ›chunky‹ shapes.

The typeface includes a complete character set to accommodate all European writing systems that can be represented with Western Latin scripts, boasting over 350 different characters to support languages like Icelandic, Polish, Croatian, and Slovenian.

Snippet of the font’s glyph palette

I personally hate it when fonts don’t offer any arrows (which leads to abominations like this one: ->) , therefore I included a set of pointing arrows that fit the design language of ›Brokken‹.

Some arrows that are part of the font

These arrows are automatically inserted once one of the following conditions appear: [minus] OR [hyphen] OR [endash] + [greater] substitutes to →; [smaller] + [minus] OR [hyphen] OR [endash] substitutes to ←, etc. So each software that is able to use ligatures and contextual substitutions (i.e. basically everything other than Powerpoint on Windows) replaces this letter combination: -> to this: → without any configuration.

Example of the automatic substitutions that are embedded in the font binary.

At the moment the substitutions code is tiny, but I plan on extending the features:

sub [hyphen minus endash emdash] greater by rightArrow;
sub less [hyphen minus endash emdash] by leftArrow;
sub less [hyphen minus endash emdash] greater by leftRightArrow;

With these substitutions I also implemented some solutions for otherwise problematic situations when using capital letters. Have a look at this example:

Between the capital V and the capital A is a huge gap.

To address this problem, I drew an alternative and more traditional version of the capital A that is embedded as a stylistic alternate in the font.

Stylistic alternates in the font: Two different letterforms for the capital A in one word.

Via context-sensitive this alternate replaces the standard glyph once a capital V is detected in front OR after the A.

On-the-fly substitution of letters once specific cases appear.

This approach can become quite sophisticated: As of now, four different versions of the capital A are embedded in the font: One default version, a version witch respects left overhangs of the following capital letter, version that respects overhangs of the preceding capital letters (such as W, V, Y) and a version for words, where the capital A is in between two problematic letters (like: WAVE).

Example of the font with deactivated substitutions.

The example above demonstrates the problem: There are visible gaps in between the letters.

Example of the font with full substitutions activated: Four different versions of the capital A are used, depending on the context (i.e. the neighboring letters).

These substitutions happen automatically as open type feature while typing.

Automatic substitution of the letters depending on the context.

Since the capital A features 10 different combinations of diacritics (e.g. A, Ä, À, Á, Â, etc.) there needs to be glyphs/letterforms for these stylistic alternates as well. Also the substitution code needs to respect these variants.

Adaptive substitutions also work with diacritics.

Italics

Since Brokken has some playful charm to it, I decided that I wanted to develop a ›true‹ italic version of it instead of just an oblique. Therefore it is necessary that every single letter needs to be adjusted and tweaked. The significant advantage of this is that a true italic version of the font also presents an opportunity to add even more unique characteristics and playful elements to the letters. However, to avoid too much chaos, I straightened the serifs that were previously only slanted on the baseline, creating a clear finish at the line edge. I’m so pleased with the result that I’m considering using this design for the Bold and Regular versions of the font as well.

Italic prototype of ›Brokken‹: Custom designed letters for a, f, R, K, j, s and much more.
Comparison: Screenshot of ›Brokken Bold‹: This version looks almost too chaotic when compared to the italics: Maybe it could be necessary to align the letters more to the baseline.

Status Quo & Download

I am developing ›Brokken‹ as an open-source (and open-end) project. Both the source code and the finished font are freely available. All data can be accessed on GitHub. If you are interested in the usable binary font, have a look at the releases on the GitHub page here.