Font Visualizer

Font Visualizer Skill

🎯 Activation Triggers

This skill automatically activates when:

• User mentions font files (.ttf, .otf, .woff, .woff2)
• User requests font analysis, visualization, or inspection
• User asks about glyph structure, character coverage, or font metadata
• User wants to compare fonts or analyze typography

🔧 Core Capabilities

1. Font Metadata Extraction

Extract comprehensive font information including:

• Font family, style, weight
• Units per EM (UPM)
• Character set coverage (with Unicode ranges)
• OpenType features
• Design parameters (ascender, descender, x-height, etc.)

2. SVG Glyph Export

Convert font glyphs to SVG format for visual analysis:

• Individual character SVG files
• Batch export with progress tracking
• CJK optimization (range filtering, memory management)
• Direct access to SVG path data for Claude analysis

3. UFO Format Conversion

Convert fonts to UFO (Unified Font Object) format:

• Standard UFO directory structure
• Editable .glif files for each glyph
• Preserves font metadata and features
• Enables font modification workflows

🚀 Dual-Language Architecture

This plugin provides two implementation paths for maximum flexibility and performance:

Python Path (Flexibility)

• Best for: Fonts < 5,000 characters, UFO editing workflows
• Strengths: Maximum compatibility, complete UFO support
• Performance: Good for small-medium fonts

Rust Path (Performance)

• Best for: Fonts > 10,000 characters, CJK fonts, batch processing
• Strengths: 10x faster, 95% less memory, parallel processing
• Performance: Blazing fast for large fonts

Automatic Path Selection

Claude automatically chooses the optimal path based on:

Decision Tree:
├─ Font has > 10,000 glyphs? → Rust (speed critical)
├─ User needs UFO editing? → Python (better UFO support)
├─ File size > 10MB? → Rust (memory efficient)
├─ Batch processing? → Rust (parallel processing)
└─ Default → Rust (faster, same output format)

Both paths produce identical JSON output - Claude receives the same data structure regardless of implementation.

📋 Workflow

Step 1: Extract Font Information

Python:

python $CLAUDE_PLUGIN_ROOT/scripts/font_info.py <font_path>

Rust (faster):

$CLAUDE_PLUGIN_ROOT/scripts/rust/target/release/font-inspector info --font <font_path>

Output: JSON with font metadata, character coverage, and design parameters

Example:

{
  "family": "Noto Sans CJK SC",
  "style": "Regular",
  "upem": 1000,
  "char_count": 65535,
  "unicode_ranges": {
    "Basic Latin": [32, 126],
    "CJK Unified Ideographs": [19968, 40959]
  }
}

Step 2: Generate SVG Glyphs

Python Path (flexible):

# Full export (use with caution for CJK fonts)
python $CLAUDE_PLUGIN_ROOT/scripts/font_to_svg.py <font_path> --output ./svg_glyphs/

# CJK optimized: Export specific characters
python $CLAUDE_PLUGIN_ROOT/scripts/font_to_svg.py <font_path> --chars "你好世界ABC" --output ./svg_glyphs/

# CJK optimized: Export by Unicode range
python $CLAUDE_PLUGIN_ROOT/scripts/font_to_svg.py <font_path> --range 0x4E00-0x9FFF --limit 1000 --output ./svg_glyphs/

# Export common CJK characters only
python $CLAUDE_PLUGIN_ROOT/scripts/font_to_svg.py <font_path> --preset cjk-common --output ./svg_glyphs/

Rust Path (10x faster, recommended for CJK):

# Export specific characters (blazing fast)
$CLAUDE_PLUGIN_ROOT/scripts/rust/target/release/font-inspector extract \
  --font <font_path> --chars "你好世界ABC" --output ./svg_glyphs/ --progress

# CJK common characters (parallel processing)
$CLAUDE_PLUGIN_ROOT/scripts/rust/target/release/font-inspector extract \
  --font <font_path> --preset cjk-common --output ./svg_glyphs/ --progress --parallel

# Unicode range with limit
$CLAUDE_PLUGIN_ROOT/scripts/rust/target/release/font-inspector extract \
  --font <font_path> --range 0x4E00-0x9FFF --limit 1000 --output ./svg_glyphs/

# JSON only (no files, for Claude analysis)
$CLAUDE_PLUGIN_ROOT/scripts/rust/target/release/font-inspector extract \
  --font <font_path> --preset cjk-common --json-only

Output:

• Individual SVG files per character
• JSON manifest with SVG path data
• Progress tracking for large character sets

CJK Optimization Features:

• --range: Specify Unicode range (e.g., 0x4E00-0x9FFF for CJK Unified Ideographs)
• --limit: Maximum number of characters to export
• --preset: Use predefined character sets (cjk-common, cjk-basic, latin-extended)
• --batch-size: Process in batches to manage memory (default: 500)
• Progress bar for large exports

Step 3: Convert to UFO (Optional)

Python Path (recommended for UFO):

python $CLAUDE_PLUGIN_ROOT/scripts/font_to_ufo.py <font_path> --output ./output.ufo

Rust Path (basic UFO support):

$CLAUDE_PLUGIN_ROOT/scripts/rust/target/release/font-inspector extract \
  --font <font_path> --preset cjk-common --output ./svg_glyphs/ --ufo

Output: Standard UFO directory with editable .glif files

Note: Python path provides more complete UFO conversion. Rust path creates valid UFO structure but with simplified outline data.

⚡ Performance Comparison

Font Type	Characters	Python	Rust (single)	Rust (parallel)
Latin Small	256	0.5s	0.05s	0.03s
Latin Extended	1,000	3s	0.2s	0.1s
CJK Medium	5,000	15s	1.2s	0.4s
CJK Large	20,000	60s	5s	1.5s
CJK Full	65,000	180s	12s	3s

Memory Usage:

• Python: ~800MB (full CJK font)
• Rust: ~45MB (full CJK font)

Recommendation: Use Rust path for fonts > 10,000 characters or when processing multiple fonts.

🧠 Claude's Analysis Capabilities

Once SVG data is extracted, Claude can:

Visual Analysis

• ✅ Read and understand SVG path coordinates (d attribute)
• ✅ Analyze stroke structure (curves, lines, control points)
• ✅ Identify design patterns (serif, sans-serif, monospace)
• ✅ Measure glyph metrics (width, height, bounding box)

Comparative Analysis

• ✅ Compare glyph shapes across different fonts
• ✅ Detect style consistency within a font family
• ✅ Identify outliers or design inconsistencies

Structural Insights

• ✅ Analyze character symmetry and balance
• ✅ Identify common stroke patterns
• ✅ Detect potential rendering issues

CJK-Specific Analysis

• ✅ Analyze stroke order and structure
• ✅ Compare simplified vs traditional character forms
• ✅ Identify radical components
• ✅ Analyze character complexity (stroke count)

📊 Example Usage Scenarios

Scenario 1: Quick Font Inspection

User: "Analyze this font file: NotoSansCJK-Regular.otf"

Violet:
1. Extracts metadata → "Noto Sans CJK SC, 65535 characters"
2. Exports sample characters → "你好世界ABC"
3. Analyzes SVG paths → "Sans-serif design, uniform stroke width"
4. Reports coverage → "Full CJK Unified Ideographs support"

Scenario 2: Character Comparison

User: "Compare the character '永' in these two fonts"

Violet:
1. Exports '永' from both fonts as SVG
2. Analyzes path data for both
3. Compares stroke structure, proportions, style
4. Highlights differences visually

Scenario 3: CJK Font Analysis

User: "Analyze the most common 1000 CJK characters in this font"

Violet:
1. Uses --preset cjk-common to export 1000 characters
2. Analyzes stroke consistency across characters
3. Identifies design patterns and variations
4. Reports on character coverage and quality

🔍 SVG Path Data Format

Claude receives direct access to SVG path data:

{
  "A": {
    "glyph_name": "A",
    "unicode": "0x41",
    "svg_path": "M 250 0 L 0 700 L 100 700 L 250 280 L 400 700 L 500 700 Z",
    "bbox": {"xMin": 0, "yMin": 0, "xMax": 500, "yMax": 700},
    "advance_width": 600
  }
}

Path Commands:

• M x y: Move to
• L x y: Line to
• C x1 y1 x2 y2 x y: Cubic Bézier curve
• Q x1 y1 x y: Quadratic Bézier curve
• Z: Close path

⚠️ CJK Font Considerations

Memory Management

• CJK fonts can have 20,000+ characters
• Full export may require 500MB+ memory
• Use --range or --limit for large fonts

Processing Time

• Full CJK font export: 5-15 minutes
• 1000 characters: ~30 seconds
• Use --batch-size to balance speed vs memory

Recommended Workflows

For exploration:

# Export a small sample first
python $CLAUDE_PLUGIN_ROOT/scripts/font_to_svg.py font.otf --chars "你好世界" --output ./test/

For analysis:

# Use common character preset
python $CLAUDE_PLUGIN_ROOT/scripts/font_to_svg.py font.otf --preset cjk-common --output ./analysis/

For specific ranges:

# CJK Unified Ideographs Extension A
python $CLAUDE_PLUGIN_ROOT/scripts/font_to_svg.py font.otf --range 0x3400-0x4DBF --output ./ext_a/

🛡️ Safety & Sandboxing

• All scripts run in isolated environment
• Output limited to specified directories
• File size limits enforced (max 50MB per font)
• Timeout protection for large exports (max 30 minutes)

🔄 Integration with Other Tools

With UFO Editors

• Export to UFO → Edit in Glyphs/RoboFont → Rebuild font

With Design Tools

• SVG export → Import to Illustrator/Figma → Visual analysis

With Testing Tools

• Extract glyphs → Render tests → Quality assurance

📚 Technical References

• fontTools: Industry-standard Python library for font manipulation
• UFO Spec: http://unifiedfontobject.org/
• OpenType Spec: https://docs.microsoft.com/en-us/typography/opentype/spec/
• Unicode CJK Ranges: https://www.unicode.org/charts/PDF/U4E00.pdf

---

Skill created by Violet 💜 | Optimized for CJK fonts 🀄