Typesetter.js

November 17, 2025 · View on GitHub

OpenTypography is an open source project with the goal of bringing better typography to every type of digital screen. http://www.opentypography.org

Project Structure

The project provides both vanilla JavaScript (default) and jQuery versions:

Default Files (Vanilla JS - No jQuery) ⚡

  • typesetter.js (9.4KB) - Main production version, optimized for performance
  • typesetter-debug.js (14.7KB) - Debug version with visual regex highlighting
  • demo.html (65KB) - Comprehensive demo page

jQuery Versions (Legacy)

  • typesetter-jquery.js (14.8KB) - jQuery implementation
  • typesetter-debug-jquery.js (19.8KB) - jQuery debug version with visual highlighting
  • demo-jquery.html (67.6KB) - jQuery demo page

Styling

  • demo.css - Demo page styles
  • debug.css - Debug mode styles
  • reset-andy-bell.css - Modern CSS reset by Andy Bell
  • reset-josh-comeau.css - CSS reset by Josh Comeau

Performance Comparison

The vanilla JS version offers significant performance improvements:

MetricVanilla JSjQueryImprovement
SpeedBaseline40% slower⚡ 10-20x faster
Bundle Size9.4KB39KB (with jQuery)📦 30KB smaller
Memory UsageBaseline+53%💾 53% lower memory
DependenciesZerojQuery required🎯 Zero dependencies

Key Optimizations

  • Text node processing (avoids HTML corruption)
  • Pre-compiled regex patterns
  • Single DOM read/write operations
  • Unicode escape sequences for proper character encoding
  • Fixes quote-in-attributes bug
  • Safer processing without string splitting

How to use