Typori Font Testing Tool

Open index.html (the landing page) and drag your font file onto the drop zone, or click Load Font. Typori stores font data in the browser's IndexedDB so it persists across page reloads and across all tabs in the same origin.

You can also load Google Fonts by name from any page's toolbar — type the family name and click Load. Previously loaded Google Fonts are remembered in localStorage.

The font selector in every page's toolbar switches between Loaded (your custom fonts), System (OS fonts), and Google fonts.

• Waterfall — one text string shown at all active sizes (use Min/Max sliders to filter the range). Click any line to edit the text.
• Lettering — large alphabet display: uppercase, lowercase, numerals, punctuation at a single size. Use the slider to scale. Adapted from Pablo Impallari's Font Testing Page lettering sheet.
• Words — a set of capitalised test words shown at sizes from 96px down to 12px, overflowing on one line so you can judge colour and spacing at a glance.
• Text — paragraph text in a two-column layout at sizes 20px → 11px. Checks texture and readability at reading sizes.
• Hinting — text at fine pixel increments (48px, 28px, then 24 → 9px). Also shows the browser User-Agent string for reference when testing hinting behaviour across rendering engines.
• Characters — Unicode codepoint grid for Basic Latin, Latin Ext, Numerals, Punctuation, and all major Indic scripts. Click any cell to copy the character.
• Strings — editable test strings grouped by script and function: pangrams, kerning pairs, spacing, Odia, Devanagari (including Marathi pangram and character groups from Bhagwat and Girish Dalvi), and other South Asian scripts.
• OpenType — side-by-side on/off comparison for each OpenType feature. Toggle features from here or from the toolbar panel.

The Feedback panel (▸ button, top-right on any page except the landing page) supports a two-persona workflow. State is shared across all Typori pages via the browser's localStorage, so you can move between Web Display, Print, and Syllabic Grid without losing your work.

Annotations are available in Tester mode only on the Web Display and Print pages. When Tester mode is active, an SVG canvas is placed over each layout card. Use the Pen tool for freehand strokes or the Box tool to draw rectangles around problem areas. Three colours are available: orange, black, and blue.

Annotation strokes are stored as normalised coordinates (relative 0–1 values), so they scale correctly if the card is resized.

When you export a PDF, annotations appear on the layout page they belong to as well as in the Q&A appendix. The appendix renders each annotated card's strokes as an inline SVG image so the marks survive printing.

Use Clear all in the Annotations section of the panel to erase all annotations.

• Export PDF ▾ → Layout only — prints just the layout cards (with any annotations embedded). No feedback appendix.
• Export PDF ▾ → Q&A only — prints the feedback report page. In Designer mode this shows a questions preview; in Tester mode it shows all responses and annotations.
• Export PDF ▾ → Both — layout cards followed by the feedback report, all in one print job.
• Export PNG — renders each card individually to PNG at 2× resolution using html2canvas. Works for sharing individual layouts without opening a print dialog.
• Specimen → Print / Export ▾ — opens the browser's print dialog for the current specimen view. Use your browser's "Save as PDF" option to export a PDF specimen sheet.

PDF export uses window.print() (the browser's native print engine), not a PDF library. Custom fonts loaded via IndexedDB are embedded as base64 data-URIs so they travel with the print window.

• Static site — no server, no build step. Runs on GitHub Pages or from a local file:// URL.
• Font storage — custom fonts are stored in IndexedDB (typori-fonts) as ArrayBuffers. They are injected as base64 @font-face rules in the print window so PDFs include the font without needing network access.
• Feedback state — stored in localStorage under the key typori-fb-v2. Shared across all pages in the same origin. Includes question definitions, responses, annotation stroke data, and designer/tester info.
• Annotations — SVG strokes are stored as normalised point arrays (values 0–1 relative to card dimensions). They are re-rendered at display time and serialised to base64 SVG images in the PDF appendix.
• PNG export — uses html2canvas at 2× scale. A letterSpacing: '0.01px' normalisation is applied on clone to prevent spacing artifacts with Indic fonts.
• Indic shaping — Typori relies on the browser's built-in OpenType shaping engine (HarfBuzz in Chrome/Firefox). Shaping features (akhn, blwf, half, pstf, etc.) are always active and are not exposed as toggles.