Cookies managing

Cookie Settings

Cookies necessary for the correct operation of the site are always enabled.
Other cookies are configurable.

Essential cookies

Always On. These cookies are essential so that you can use the website and use its functions. They cannot be turned off. They're set in response to requests made by you, such as setting your privacy preferences, logging in or filling in forms.

Analytics cookies

Disabled

These cookies collect information to help us understand how our Websites are being used or how effective our marketing campaigns are, or to help us customise our Websites for you. See a list of the analytics cookies we use here.

Advertising cookies

Disabled

These cookies provide advertising companies with information about your online activity to help them deliver more relevant online advertising to you or to limit how many times you see an ad. This information may be shared with other advertising companies. See a list of the advertising cookies we use here.

typography

Integrating Color into a Brand Typeface:
A Case Study

Customizing SFT Ritam Sans with color features: real-world limitations, technical challenges, and how we solved them.

BY YULIA GONINA

May 23, 2025 ∙ 8 min. read

Digiknall’s Rebrand Starts with SFT Ritam Sans

When the team at Digiknall reached out, they already had a clear vision: a rebranding rooted in bold, expressive typography. As a digital marketing agency focused on high-impact social media campaigning, they wanted their visual language to feel as dynamic and attention-grabbing as the content they create.

They chose SFT Ritam Sans as the foundation for their new identity — a typeface they described as “like Helvetica, but softer.” Its clear rhythm and approachable character made it a fitting choice for headlines and logos. We briefly discussed possible serif companions for use in body text, and the team eventually settled on TT Livret, a typeface I had previously designed at TypeType. The customized version of SFT Ritam Sans received the name Digi Ritam.

Screen recording of Digiknall’s website using Digi Ritam (a customized version of SFT Ritam Sans) paired with TT Livret. Though developed by different foundries, both typefaces were created by the same designer, ensuring visual harmony in the brand’s typography.

Digi Ritam (customized SFT Ritam Sans) paired with TT Livret on Digiknall’s website.
Though released by different foundries, both typefaces were designed by the same author — making them a naturally harmonious match.

In addition to selecting the typefaces, the Digiknall team came with a specific idea: to integrate a symbolic, colorful element into the font — a Boom-shaped icon that would visually support their name and amplify their brand tone. That’s where the customization work began.

Creating a Colored Branding Glyph

At the heart of the customization was the Boom symbol — a colorful graphic element that would become a recognisable part of Digiknall’s visual identity. The idea came directly from the client: since “knall” in German means “bang,” they wanted a playful accent that could reinforce this association in logos, headlines, and other key visuals.

Introducing the Boom symbol.

Visually, the symbol was inspired by the familiar shape of the explosion emoji. It needed to be adapted to work within a typographic system. We refined its proportions and simplified the structure so it would integrate smoothly with SFT Ritam Sans. The goal was to make it feel like a native part of the typeface, not a graphic pasted on top.

Color Font Technology Overview

Color fonts are a modern extension of the OpenType standard that allow for multicolored, layered glyphs to be embedded directly within a typeface. There are several formats used to implement them — the most common being:

COLR/CPAL — a vector-based format using layered glyphs and a separate color palette. Supported by modern browsers and operating systems, with small file size and efficient rendering.
SVG — a format that embeds full SVG code inside the font, allowing for detailed vector graphics, transparency, gradients, and complex shapes. Offers more design freedom, but with larger file sizes and slightly slower rendering.
SBIX — a bitmap-based format that stores pixel images (PNG) for each glyph. Used primarily by Apple platforms and suitable for emoji-style designs, but not ideal for scalability or color editing.

We chose to export the font in both COLR/CPAL and SVG formats to ensure compatibility and visual fidelity across different platforms. This dual-format approach allowed the font to retain its intended appearance while staying compatible with the widest possible range of software.

Embedding a Colored Brand Element into the Typeface

Logo Symbol with Color Flexibility

We began by integrating the primary Boom symbol — a multicolored graphic intended to be used both independently and in combination with the word “Digi” in the logotype. This symbol was built using three layered color shapes and a default-colored (black) version that would display in environments without color font support.

Visual breakdown of the Boom symbol from the DigiRitam font, showing how it is constructed from three stacked shapes: orange, yellow, and white layers.

Layer breakdown of the Boom symbol.

Constructed from three stacked color shapes, this typographic glyph is built using layered composition within the font file.

A short screen recording demonstrating the contextual activation and visual customization of the Boom symbol in the DigiRitam BlackBoom font, as used in brand presentation slides.

The Boom symbol is triggered through a contextual alternate: typing “Digilogo” in the DigiRitam BlackBoom font inserts the symbol automatically. For user convenience, it can also be accessed via a keyboard shortcut (Shift + Command + K).
To give Digiknall more visual flexibility, we developed alternate versions of the Boom symbol in orange, green, violet, and black which can be activated by typing “Digilogoorange,” “Digilogogreen,” and so on.

Editable Color Symbol

One of the more experimental additions was a Boom symbol with editable color. This version was designed to help the Digiknall team adjust the mark to match different client palettes — especially useful in branded presentations.

It uses a single base layer (which inherits the user-defined text color) and two semi-transparent white overlays to preserve the Boom shape and give it dimensionality. It allows the user to apply any desired color through standard font styling tools in graphic editors.

Demonstration of the editable-color Boom symbol in the DigiRitam BlackBoom font. The symbol’s base layer inherits the text color, making it responsive to brand palettes and contexts. It is activated by typing “Digilogochange” as a contextual OpenType alternate.

Editable-color Boom symbol in use.
The base layer inherits the applied text color, allowing the symbol to adapt to different brand palettes or contexts. Activated by typing “Digilogochange” as a contextual alternate.

Diagram showing the editable-color Boom symbol constructed from a base layer and two semi-transparent white overlays in the DigiRitam typeface.

Structure of the editable-color Boom symbol.

Built from one base layer (which inherits the text color) and two semi-transparent white overlays to preserve shape and contrast.

Transforming Letters and Punctuation into Branding Elements

In addition to using Boom as a standalone symbol, we developed a stylistic set where the symbol could replace certain characters directly in running text: “o,” “.”, “i,” and “!”.

Each version of the Boom symbol was adapted to its specific context:

The Boom that replaces “o” was redrawn to be more symmetrical, so it could sit naturally within words.
The Boom used for “.” was scaled down and optically adjusted to match the proportions of punctuation.

The most intricate forms were those used for “i” and “!”, which combine a typographic base (stem) with a separate Boom-shaped dot. In these versions, only the base part inherits the user-defined color, while the Boom element stays consistently styled.

Screen recording showing custom character replacements in running text using the Boom symbol. Variants of the symbol replace the letters “o”, “i”, the period, and exclamation mark, each scaled and aligned to preserve text rhythm and visual balance.

Custom character replacements in running text.
The Boom symbol is used in place of “o,” “i,” “.”, and “!”, with each version adapted to match the scale and rhythm of surrounding text.

Platform Support and Compatibility

Creating a color font is relatively straightforward with modern tools like Glyphs 3, but ensuring consistent performance across platforms is a much more involved process. Since the goal was to deliver a font that works reliably in real-world conditions, we tested it extensively in the environments most relevant to Digiknall. Here’s how the font performed:

Desktop Applications

Microsoft Word, PowerPoint, Apple Pages & Keynote — full support for color fonts. All glyphs rendered correctly in these environments. Keynote, which was especially important for the client, displayed multicolored glyphs without any issues and became a key reference point during development.
Figma — no support for color fonts. Only fallback versions of glyphs are displayed.
Adobe Illustrator, Photoshop, InDesign — partial support:

Regular color glyphs render correctly.
Composite glyphs that combine colored elements with typographic stems (such as Boom “i” and Boom “!”) do not allow the base to be recolored — the stem remains locked to pure black, regardless of applied text color.

Web Browsers

Chrome, Opera, and Edge — full support for color fonts. All glyphs, including layered and composite designs, rendered exactly as intended.
Safari and Firefox — partial support. These browsers displayed colored glyphs correctly in most cases, but composite characters faced the same limitation as in Adobe apps: the base layer could not be recolored and remained pure black.

Mobile Browsers

iOS (Safari & Chrome) — critical rendering issue: encountering a color glyph caused the browser to stop rendering the entire line starting from that glyph. This meant that even surrounding plain text would disappear, making color font usage on iOS browsers effectively impossible.
Android (Chrome) — full support: all color layers rendered correctly, and the font behaved exactly as expected.

Because of the critical rendering issue on iOS, the client chose to use vector graphics in all cases where color symbols needed to appear on the website. This approach ensured visual consistency across platforms without relying on unpredictable font behavior in mobile browsers.

Workarounds and Technical Solutions

As described in the previous section, certain platforms — including Safari, Firefox, and Adobe apps — do not allow the base layer of a color glyph to inherit the user’s text color. This limitation affected composite glyphs like the Boom versions of “i” and “!”, where the stem was expected to be styled dynamically.

To address this, we implemented a split-glyph solution using contextual alternates. Instead of combining the base and the Boom symbol into a single glyph, we defined sequences that substitute them with two precisely aligned components.

This method allowed the stem to behave like a normal text character — fully responsive to color changes — while retaining the visual integrity of the Boom accent across all platforms.

Demonstration of split-glyph substitution in the DigiRitam BlackBoom font to enable color compatibility. Typing “i±” produces a dotless “i” combined with a separately positioned Boom-shaped dot. The sequence “!^” similarly splits the exclamation mark into a stem and a separate Boom symbol.

Split-glyph substitution for color compatibility.

Typing “i±” produces an i without a dot, followed by a Boom-shaped dot placed in the correct position.
A similar substitution is triggered for “!^”, splitting the character into a stem and a separate Boom element.

Making Custom Glyphs Easy to Use

In the initial stages of the project, we planned to implement most of the Boom features via stylistic sets. However, real-world testing quickly showed that accessing OpenType features was often buried deep in settings and inconvenient to use — especially in Keynote, which was crucial to the client’s workflow. Even though the features were technically available, they were not practical for quick, everyday use.

To make the custom glyphs more accessible, we decided to create a separate font: DigiRitam BlackBoom. This version includes all Boom-enabled glyphs — including standalone symbols and character substitutions — while the standard DigiRitam Black remains clean and neutral for everyday use.

This structure allowed users to toggle between expressive and functional modes with a simple font change, instead of digging into advanced settings or typography menus. It also made the system more predictable across software environments, since all Boom features were grouped in one place.

Overview of DigiRitam font structure, showing the switch between the Black and BlackBoom styles. To enhance accessibility, Boom-enabled glyphs were moved to the DigiRitam BlackBoom style, allowing users to activate custom features via font style selection instead of relying on OpenType settings.

DigiRitam font structure: switching between Black and BlackBoom.
To improve accessibility across applications, Boom-enabled glyphs were moved into a separate style — DigiRitam BlackBoom. This allowed users to access custom features by changing font styles, rather than relying on hard-to-reach OpenType settings.

Results and Reflections

Digiknall began using the custom font across various brand touchpoints soon after its delivery. On social media, where design elements are typically exported as images, the Boom symbols appear exactly as intended — in headlines, logos, and typographic compositions. The expressive glyphs have become part of the visual language of the brand.

The only major compromise came in the website, where platform limitations — especially on iOS — made it impossible to reliably render color glyphs in live text. As described earlier, encountering a color glyph in Safari or Chrome on iPhone caused the entire line to disappear. To avoid these rendering failures, the client chose to replace color glyphs with vector graphics in all web environments.

Typography in action: sample slides from Digiknall’s brand guidelines, illustrating headline hierarchy, Boom symbol usage, and typeface pairing in real-world layout scenarios.

The Digiknall project demonstrates how a custom font can serve as a clear, expressive extension of a brand. Color was used not for decoration, but as a functional design element — integrated directly into the typeface and adapted for real-world use.

It also revealed the very real limitations that still come with using color fonts in practical contexts. While the technology is promising, full compatibility is still a work in progress. But rather than discouraging experimentation, these challenges point to the need for more real-world use cases that can push the industry forward.

Final demonstration of custom glyphs from the DigiRitam BlackBoom font in real-world layouts. Showcases how integrated features such as contextual alternates and color-enabled symbols behave in practical design applications.