文
ع
字
あ
한
Ñ
Ö
Desktop Application — Case Study

GlyphixUnicode Fusion

A cross-platform desktop application for combining Unicode ranges from multiple font sources into unified typefaces—with visual glyph management, conflict resolution, and variable font export.

PlatformElectron + React
RoleCreator & Engineer
Scripts25+ Writing Systems
ImpactGlobal Fleet
Scroll
The Problem

When Brand Fonts Meet Global Content

Automotive brands invest heavily in bespoke typography—typefaces that embody their identity and distinguish their interiors. But brand fonts are typically designed for marketing, not software. They support Latin characters beautifully, but lack the comprehensive Unicode coverage required for global infotainment.

Modern IVI systems don't exist in isolation. They receive metadata from streaming services, contact names synced from phones, POI data from mapping providers, and voice assistant responses. When this external content contains characters outside the brand font's limited range, the system fails visibly—tofu boxes, missing glyphs, or jarring fallback fonts that shatter the carefully crafted interior experience.

Before Glyphix
Now Playing:
□□□ - 周杰倫
مرحبا World
Contact: 田中太郎
After Glyphix
Now Playing:
七里香 - 周杰倫
مرحبا World
Contact: 田中太郎
01

Brand Font Limitations

Custom automotive typefaces are designed for marketing materials—Latin characters only. No Arabic, Chinese, Japanese, Korean, or extended European support.

02

External Content Sources

Music metadata, phone contacts, and POI names arrive in any language. A customer in Dubai might have Arabic contacts while playing Japanese music.

03

Visual Consistency

Falling back to system fonts created jarring visual inconsistency—different weights, x-heights, and character widths disrupted the interface aesthetic.

04

RTL Market Requirements

The Middle Eastern market was essential. Arabic script support wasn't optional—it was a certification requirement for regional deployment.

65K+
Glyphs Combined
25+
Writing Systems
6
Export Formats
VF
Variable Font Support
Cost Impact

The Economics of Typography

Extending a brand typeface for global Unicode coverage through traditional channels is extraordinarily expensive. Font foundries charge premium rates for multilingual expansion—and automotive embedded licensing adds per-unit royalties on top.

Traditional ApproachExternal Vendor
Custom Unicode Extension
Arabic, CJK, Cyrillic, Thai scripts$80,000–$150,000
Font Engine License
Monotype iType / WorldType$15,000–$50,000/yr
Per-Vehicle Royalty
Embedded font licensing$0.50–$2.00/unit
Timeline6–12 months
Estimated 5-Year Cost$200,000+
vs
Glyphix ApproachIn-House Desktop App
App Development
Electron + React + Python (FontTools)~160 hours
Source Fonts
Noto Sans (OFL licensed)$0
Per-Vehicle Royalty
No third-party licensing$0
Reusable by Team
GUI enables non-developer use∞ ROI
Estimated 5-Year Cost~$12,000
95%

Cost Reduction

By building an internal tool using open-source font libraries, we eliminated six-figure vendor fees and recurring per-unit royalties—while maintaining full control over the output.

Note: Traditional costs based on industry research from Monotype embedded solutions, TypeType, and foundry pricing surveys. Actual costs vary by scope and vendor.

The Solution

A Visual Desktop Application

Rather than building a command-line script, I created Glyphix—a full cross-platform desktop application built with Electron and React. It provides a visual, intuitive interface that empowers designers and engineers alike to manage Unicode merging without touching code.

The key insight: we don't need to replace the entire font. We only need to fill the gaps with carefully selected glyphs from fonts with matching visual characteristics—and a visual tool makes this process precise and repeatable.

STEP 01

Import & Organize Fonts

Drag-and-drop multiple font files (TTF, OTF, WOFF, WOFF2) into the application. Organize them into weight groups—Light, Regular, Medium, Bold—with drag-and-drop reordering and visual weight indicators.

STEP 02

Select Language Coverage

For each font, choose which writing systems to include using a hierarchical language selector with 25+ scripts and subgroups. Auto-detection scans each font and highlights which scripts are available, with glyph counts per language.

STEP 03

Preview & Resolve Conflicts

An Adobe Illustrator-style glyph grid displays every character from all fonts. Unicode conflicts between fonts are automatically detected and highlighted in red, with a visual resolution dialog to choose the preferred source for each conflicting glyph.

STEP 04

Configure Metadata & Weights

Edit font metadata—family name, subfamily, version—inline. For variable font exports, define weight axes and assign master fonts to specific weight values, with automatic metadata generation.

STEP 05

Export or Install

Export merged fonts as TTF, OTF, WOFF, or WOFF2—or generate a variable font with interpolated weight axes. One-click installation directly to the operating system, with real-time status logging in the built-in console.

fontUtils.js — Merge Engine
// Core merge orchestration — Electron IPC to Python backend
async function mergeFonts(fonts, metadata, format) {
  // Step 1: Filter glyphs by selected language ranges
  const filteredFonts = fonts.map(font => (
    buffer: font.buffer,
    languages: font.selectedLanguages,
    weight: font.weightGroup
  }});

  // Step 2: Detect and resolve Unicode conflicts
  const conflicts = detectUnicodeConflicts(fonts);
  
  // Step 3: Send to Python backend via IPC
  const result = await ipcRenderer.invoke(
    'font-processor-merge',
    { fonts: filteredFonts, metadata, format }
  );

  return result; // Production-ready font binary
}
Architecture

Three-Tier Desktop Architecture

Glyphix uses a layered architecture: a React frontend for visual interaction, an Electron main process for system-level operations, and a Python backend powered by FontTools for binary font manipulation via IPC.

🖥️
React Frontend
Component UI
opentype.js parsing
→
⚡
Electron IPC
Main Process
File System & OS
→
🔧
Python Backend
FontTools
Binary Merge
→
✓
Validator
Coverage &
Integrity Check
→
📦
Export
TTF / OTF / WOFF
Variable Font

Supported Unicode Blocks

Glyphix processes glyphs from 25+ writing systems and symbol categories:

ALatin
ÄExt-A
ŐExt-B
عArabic
שHebrew
ЖCyrillic
ΩGreek
字CJK
あHiragana
アKatakana
한Hangul
กThai
अDevanagari
஫Tamil
বBengali
აGeorgian
ԱArmenian
ກLao
កKhmer
😀Emoji
→Arrows
★Symbols
■Shapes
─Box Draw
Key Features

Beyond Simple Merging

Glyphix evolved from a simple merge script into a full-featured desktop application with capabilities that go far beyond basic font combination.

🌐 Variable Font Export

Define custom weight axes, assign master fonts to specific weight values (100–900), and export interpolated variable fonts with proper OpenType variation tables.

⚠️ Conflict Resolution

When multiple fonts contain the same Unicode codepoint, Glyphix detects the conflict and presents a visual dialog to choose which font's glyph should be used.

💾 Project Files

Save and reload entire merge configurations as .glyphix project files—preserving font selections, language filters, weight groups, and conflict resolutions.

💻 Direct OS Install

One-click font installation directly to Windows or macOS system font directories, with automatic font cache refresh and broadcast notifications.

🔍 Glyph Preview Grid

Adobe Illustrator-style glyph preview with virtualized rendering for 65K+ glyphs, color-coded font source indicators, and zoomable detail views.

📊 Real-time Console

Built-in status console with real-time logging of merge operations, conflict warnings, and export progress—providing full transparency into the pipeline.

Certification Unblocked

Regional market certification met without compromising the brand's design language or visual identity.

Visual Consistency

No more jarring font fallbacks. Every character renders with intentional, cohesive styling across all markets.

Adopted Across Teams

Non-developers now independently manage font merging through the GUI—the tool is part of the standard HMI pipeline.

Tech Stack

Built With

A modern full-stack desktop architecture combining web technologies with native system integration and specialized font processing backends.

Electron
Cross-Platform Desktop Shell
React
Component-Based UI
Python + FontTools
Font Processing Backend
opentype.js
Client-Side Font Parsing

Full-Stack Component Architecture

13 React components, 2 utility modules, IPC bridge to Python subprocess, embedded Python distribution for zero-config deployment.

FontUploaderGlyphPreviewLanguageSelectorWeightPanelFontMetadataEditorTextPreviewVarify (VF)StatusConsoleExportButtonTitleBar
Reflection

Engineering as Design

"The best tools are the ones that disappear. Glyphix succeeds when no one notices the typography—because every glyph just works."

Design Problems Need Design Solutions

This wasn't an engineering problem to be solved with fallback fonts. It was a design problem requiring a design-aware solution. Understanding typography as deeply as code was essential.

Internal Tools Deserve Product-Quality UX

Building Glyphix as a full desktop application—with drag-and-drop, visual previews, and project files—transformed it from a developer utility into a tool adopted by the entire team.

Constraints Reveal Opportunities

The limitation of our brand font became an opportunity to build tooling that solved a systemic problem. What seemed like a roadblock became a reusable solution.

Previous Project

Rimac Nevera

UX/UI design
Next Project

Rustle

Product design/ Development