Creating a Color Outline Font

01–19–2021
Darkroom Tutorial
by Robert Janes

A long-standing problem on the web is that there is no standardized way to outline text. And with some text, you really want it outlined!

The way we define how text looks on the web is via so called “CSS properties.” Because the World Wide Web Consortium (W3C) have never introduced a dedicated text-stroke CSS property, developers have been forced to find various dodgy work-arounds. There is the experimental -webkit-text-stroke CSS property, but this only works in WebKit browsers. Then there is the “text shadow hack,” which involves misusing the CSS text-shadow property to form a solid outline around text. But neither of these are perfect nor elegant solutions.

Outline Fonts of the Non-Digital Past

In the past, it was not uncommon for type foundries to produce outlined versions of their fonts for use in display settings. During the 70s especially, there were tonnes of outline fonts gracing the many phototypesetting catalogues being produced. The practice of developing outline fonts became far less common during the digital era as users could simply outline text in graphics software, making the requirement for a separate outline style redundant. That being said… it’s 2020 and we still can’t outline type on the web! What’s going on?!

J29 Dinamo Creating A Color Variable Font Granger

Headlines distributed an Outline version of their typeface Grange in the 70s.

Our Solution

We hadn’t worked on any color fonts until recently, when we were approached by Enno Pötschke of bus.group, who was working with our typeface ABC Diatype for the rebrand of Ernst, a fine-dining restaurant in Berlin. They were having trouble creating attractive outlined-text for the Ernst website, and were using the “text shadow hack” with little success. The text looked clunky and glitchy, hardly appropriate for a restaurant of Ernst’s calibre. Our solution was to create a custom outlined color version of ABC Diatype, which dramatically improved the aesthetic of the outlines.

In the following tutorial, we’ll demonstrate what we did, and how to create a simple color outline font from an existing typeface. We’ll use Glyphs and utilise the Microsoft COLR and W3C SVG color font formats.

J29 Dinamo Creating A Color Variable Font ABC Diatype Outline For Ernstberlin de
J29 Dinamo Creating A Color Variable Font Ernstberlin de

The custom fonts in use at ernstberline.de

Color Fonts and their Limitations?

At the time of writing this article, only COLR color fonts are supported by all the major browsers. On the software-end SVG color fonts are widely supported, so this means you should probably export your web fonts (WOFF) as COLR fonts and your desktop fonts (OTF, TTF) as SVG ones. Glyphs can handle this conversion for you, so it’s not too much of a hassle.

Another caveat is that color fonts look pixelated in Google Chrome at any font-size above 128px. There is no way around this, so it makes sense to consider this before using color fonts in a client project. Luckily for us, bus.group were using Diatype at around 26px only, so this was not a problem for us.

J29 Dinamo Creating A Color Variable Font Pixelated S

Pixelated type in Google Chrome

1. Define the Color Palette

Before we can begin outlining, we need to define the colors of our font. Glyphs calls these “Color Palettes” and you add them as a Custom Parameter to the masters in your file. Add two colors and take note of the number corresponding to each: In our case, yellow is color #0 and black is color #1 (programmers love to start counting from 0).

J29 Dinamo Creating A Color Variable Font Color Palettes

2. Create the Color Layers

To create the color layers of our outline font, you could manually produce each layer… or you could simply use a script and save hours of unnecessary labour. Below is the simple script we wrote to automate this process.

The script uses the same “Offset Curve” filter you can access in the Glyphs Filters menu, so you can first test your parameters manually with that before using the script.

To use the script: Copy and paste it into the Glyphs Macro Window, edit the variables, select the glyphs you’d like to outline, and hit “Run.”


# Edit these variables
outlineThickness = 45 # The thickness of the outline
baseColorIndex = 0 # The color index of the base layer
outlineColorIndex = 1 # The color index of the outline layer

# Below is where the magic happens...
GlyphsFilterOffsetCurve = NSClassFromString("GlyphsFilterOffsetCurve")

def copyLayer(layer, name):
        nLayer = layer.copy()
        nLayer.name = name
        layer.parent.layers.append(nLayer)
        return nLayer

for layer in Font.selectedLayers:
    # Create the color layers
    baseLayer = copyLayer(layer, "Color %s" % baseColorIndex)
    outlineLayer = copyLayer(layer, "Color %s" % outlineColorIndex)
    
    # Turn the layers into Color Palette layers
    baseLayer.setColorPaletteLayer_(True)
    outlineLayer.setColorPaletteLayer_(True)

    # Set the color of each layer
    baseLayer.attributes["colorPalette"] = baseColorIndex
    outlineLayer.attributes["colorPalette"] = outlineColorIndex

    # Offset the fallback layer the same amount of the outline layer
    # (WebKit clips color layers based on the width/height of the fallback layer)
    GlyphsFilterOffsetCurve.offsetLayer_offsetX_offsetY_makeStroke_autoStroke_position_metrics_error_shadow_capStyleStart_capStyleEnd_keepCompatibleOutlines_(layer, outlineThickness, outlineThickness, False, False, 0.5, None, None, None,  0, 0, False)
    
    # Offset the outline layer
    GlyphsFilterOffsetCurve.offsetLayer_offsetX_offsetY_makeStroke_autoStroke_position_metrics_error_shadow_capStyleStart_capStyleEnd_keepCompatibleOutlines_(outlineLayer, outlineThickness, outlineThickness, False, False, 0.5, None, None, None, 0, 0, False)

The script creates 2 color layers: A base layer and an outline layer. The outline layer’s path is offset outwards, so when the base layer is placed on-top it creates the desired result.

J29 Dinamo Creating A Color Variable Font Layers

If everything went to plan, the selected glyphs should have two new layers—one for each color.

J29 Dinamo Creating A Color Variable Font Color Layers

The default or “main” layer is used as the fallback layer for software that doesn’t yet support Color Fonts. However, WebKit based browsers (Google Chrome) currently clip color layers that exceed the width or height of the fallback layer. Unfortunately for now we have to offset the fallback layer the same amount as the outline layer. The script does this for you.

3. Cleanup outlines

Glyph’s offset curve filter doesn’t always produce perfect results, so you’ll have to check every glyph for undesirable issues, and correct them manually.

J29 Dinamo Creating A Color Variable Font Cleanup Outlines00
J29 Dinamo Creating A Color Variable Font Cleanup Outlines01

Before and after cleaning up our r

4. Export

To export the font, we need to create two separate instances for our webfont and desktop files: one for our SVG OTF font and another for the CLOR WOFF font. We need to add a few Custom Parameters to each instance to make this happen.

SVG OTF

Custom ParameterValue
Color Palette for SVG0
Export SVG Table✅
Export COLR Table❌
Color Layers to SVG✅

CLOR WOFF

Custom ParameterValue
Color Palette for CPAL0
Webfont FormatsWOFF, WOFF2
Save as TrueType✅




The final fonts can be installed and used like any regular fonts.

J29 Dinamo Creating A Color Variable Font Export

Further reading

For a more advanced overview on creating color fonts in Glyphs, take a look at the articles over on its official site. These cover many other color font topics and go into more detail about each format.

Additionally the website https://colorfonts.wtf provides lots of useful information about each color font technology and their support in various browsers and software.

Dinamo Take Notes 4 Hero Image WEB

Using Variable Fonts on the Web