TWRoad Font: A Color Font Inspired by Taiwan Road Symbols with Clever Icons Input Method

• justfont & TomLiou Design Studio
• Role: Typeface Engineer
• Co-work with: Typeface Designer, Project Manager
• Tools: Glyphs, Python, Git
• Crowdfunding Project: https://wabay.tw/projects/twroadfont
• Official Website: https://justfont.com/twroadfont/

TWRoad Font (臺灣道路體), designed by Tom Liou (湯六), draws inspiration from Taiwanese traffic signs and road markings. The font features a condensed sans-serif modern style for Traditional Chinese, allowing more information to be displayed in the same space compared to other typefaces. It is especially suited for content related to transportation, energy, e-commerce, and more.

An interesting feature of TWRoad Font is its inclusion of colorful traffic signs and road markings. These icons can be accessed through hidden passphrases by enabling OpenType feature, which automatically substitutes characters, adding a unique and functional element to its design.

This innovative approach makes TWRoad Font the first color font from justfont. As the engineer responsible for this project, I focused on integrating color font technology. Although the color font specification has been part of OpenType standard for several years, there are various specifications within this standard. My role was to ensure that the typeface achieved maximum compatibility across a wide range of commonly used apps and software.

From Monochrome to Colorful

Back in 2010, Emoji was officially encoded in Unicode 6.0 standard. Tech companies quickly recognized the potential of colorful glyphs, as a colorful emoji—like a smiling face or a playful cat—is much more expressive and engaging than its monochrome counterpart.

This shift sparked a revolution in font specifications, where the challenge became not just encoding characters but displaying them in color. Four major players emerged: COLR/CPAL from Microsoft (used in Windows & Office), SBIX from Apple (used in iOS, macOS, and Safari), CBDT/CBLC from Google (used in Android & Chrome), and OpenType-SVG from Adobe-Mozilla alliance (used in Firefox & Adobe apps). Each aimed to define their own color font standards, leading to competition over which could best represent colorful glyphs.

Browsers & Apps Support

After years of development and competition, it is evident that mainstream browsers offer varied support for these color font formats. For instance, COLR/CPAL v0 specification is widely supported across major browsers, including those based on Chromium and WebKit engines (e.g., all third-party browsers on iPhone and iPad).

To check if your browser supports a specific color font format, tools like ChromaCheck or the Can I Use... website can provide more detailed information.

However, in mainstream desktop apps, Microsoft Office offers poor support for color fonts on both Windows and macOS platforms. Adobe apps, on the other hand, began supporting OpenType-SVG color fonts with CC 2017 release, including Photoshop CC 2017+, Illustrator CC 2018+, and InDesign CC 2019+. It’s important to note that older versions of Adobe apps may display color fonts but often lack the ability to save or export them properly.

Given the widespread support for color font formats, a typeface that combines OpenType-SVG and COLR seems to be the best option across apps and websites. By using both specifications, we can ensure that the colorful icons in TWRoad Font will display correctly and ideally across different platforms.

Unicode Private Use Areas

Having decided to use OpenType-SVG and COLR as the OpenType formats for TWRoad Font, the next question was: where should the colorful icons be encoded?

As we know, Unicode is the standard encoding system for computers and the internet today. Any character not encoded in Unicode faces challenges for data preservation and transmission. This is a concern for glyphs like the traffic signs we designed, which are not encoded within Unicode.

In theory, we could assign these non-encoded glyphs to unused code points, such as Cyrillic characters we do not use. For example, we might use a Cyrillic character slot to represent a No Parking sign. However, doing so would violate encoding principles. Additionally, if a code point reserved for a Cyrillic character is occupied, some software might mistakenly assume that the font supports Cyrillic script, potentially causing confusion.

Fortunately, Unicode includes Private Use Areas (PUAs) where developers and designers can place custom characters and symbols without interfering with standard code points. This makes PUAs the ideal place to encode our colorful traffic icons and road markings.

Some online icon services, like Font Awesome, use PUA to store and display icons. When a user adds a specific class in the element tag, the corresponding CSS inserts a :before pseudo-element in front of the element, displaying the icon stored in the PUA.

For instance, the f015 code point corresponds to a house icon stored within PUA:

.fa-house:before {
  content: "\f015";
}

Input Hidden Passphrases

After determining the color font specifications and code points, TWRoad Font became a relatively mature product. However, the challenge of how users would input these colorful icons remained.

Currently, most IMEs do not support manual input of characters from Private Use Areas (PUA). To insert these characters, users typically need to use tools or visit websites like Compart or Codepoints to find the specific code point for the glyph, then copy and paste it into their documents. However, users generally do not know the code point of a glyph, like a No Parking icon, making this copy-and-paste approach quite inefficient.

To address this, we applied OpenType ligature feature. For example, just as fi is often replaced with a ligature of f_i in serif typefaces, we can use the ligature feature to display the No Parking symbol when the sequence of characters 禁止停車 (No Parking in Chinese) appears together. This approach makes it feasible to display icons based on specific text strings, which we refer to as Hidden Passphrases in our product.

In fact, we implemented the ligature mechanism so that the icon only appears if the hidden passphrase is followed by a slash /. For example, typing 禁止停車 will display the Chinese characters as normal, but typing /禁止停車 will show the traffic icon. This precaution prevents unintended icon displays and ensures user control.

Conclusion

In TWRoad Font, we designed over 285 traffic signs and road markings as set by the Taiwanese government. These symbols are accessible via both their common names (e.g., /禁止停車) and their legal codes (e.g., /禁25, meaning Prohibition Sign No. 25), offering users flexibility in how they choose to input these icons.