Typography
Professional text tools with a dependable answer to a common import problem: when a design uses a font you do not have, Varve helps you replace it without turning the design into a screenshot.
What It Is
Varve's typography system provides multi-line layout, text decoration, overflow handling, list styles, letter spacing, vertical alignment, and text case transforms. It supports OpenType feature toggles, variable font axis control, text placed along arbitrary paths, and a logical Unicode source model designed to keep shaping, editing, and export aligned.
For native Figma .fig, REST, or plugin-export JSON imports, Varve also treats fonts as document dependencies. It detects missing families in ordinary text, rich-text runs, and reusable text styles; ranks local candidates; and keeps the original family reference in the saved document manifest. You can continue editing locally without keeping Figma open.
Import with confidence
Missing fonts are a reviewable decision, not silent damage
Choose a substitute once and apply it across the document in one undoable action. Varve labels exact, compatible, and fallback matches, updates rich text without flattening it, and warns when new font metrics may reflow the design.
Key Capabilities
- Text rendering: Multi-line with line height, paragraph spacing, text decoration (underline, strikethrough), text overflow (clip, ellipsis)
- Inline editing: Positioned textarea overlay with IME and RTL support
- OpenType features: 14 common feature toggles (liga, kern, salt, ss01-ss20) with per-font support detection
- Variable fonts: Per-axis slider control with min/max/default from font metadata
- Text on path: Place text along any shape path — circle, bezier, rectangle, polygon, star
- CJK support: Line breaking via Intl.Segmenter for Chinese, Japanese, and Korean text
- Unicode foundations: Explicit UTF-16, code-point, grapheme, shaping-cluster, and visual-caret mappings
- BiDi foundations: UAX #9 embedding levels, per-line visual run ordering, mirrored punctuation, and cluster-safe caret geometry in the engine
- Paragraph layout: Script/language itemization, word-level line breaking that never splits a grapheme, and RTL-safe wrapping
- Font system: Google Fonts loading, @fontsource bundled fonts, CSS fallback chains
- Missing-font replacement: Ranked local candidates, rich-text-aware Replace All, and manifest provenance across save/reopen
- Typography inspector: Font family, weight, style, size, line height, letter spacing, alignment, OpenType features
Technical Depth
The FontRegistry manages font loading, CSS fallback chains, font revisions, and variable font axis discovery. The engine has a typed HarfBuzz-compatible shaping seam, a canonical derived layout snapshot, bounded cache identity, and explicit Unicode source maps. A paragraph-aware layout pipeline resolves UAX #9 base direction and embedding levels per paragraph, itemizes script and language runs, breaks lines at word boundaries without ever splitting an extended grapheme cluster, and derives line-level visual run order after wrapping — so wrapped RTL paragraphs reorder correctly. Cluster-safe caret stops, hit testing, and selection geometry come from the same snapshot. The browser renderer still uses Canvas2D measurement as a clearly-labeled fallback while font-byte shaping is integrated.
SVG export includes multi-line and rich text support. Typography preflight checks font availability and CSS generation.
Limitations
Current limitations:
- Complex-script shaping (Arabic, Devanagari, Thai, and similar scripts) is not yet guaranteed in the live Canvas2D and export paths — the engine shapes contextually only when font bytes are available
- The canonical paragraph layout pipeline (BiDi, line breaking, caret/selection geometry) is engine-complete, but the inline editor and pointer tools still use the legacy textarea/canvas path
- Text-to-outlines produces placeholder bounding boxes (real glyph path extraction deferred)
- Rich-text transactions and mixed inspector state exist, but insertion-style state, composition transactions, and complete shaped per-span rendering remain in development
- Font substitution preserves editability and provenance, but a compatible or category fallback can change text metrics; explicit restore-to-original-font actions are planned
Status
Core text controls, OpenType settings, variable fonts, text-on-path, inline editing, Unicode indexing, UAX #9 BiDi, canonical paragraph layout with cluster-safe caret geometry, rich-text transactions, and local-first missing-font replacement are functional in the beta. Font-byte shaping in the live canvas and full complex-script editing remain in development.
Common questions
What happens when an imported design uses a missing font?
Varve identifies the family, suggests local candidates, and asks for a replacement only when necessary. The source family remains available as provenance in the document manifest.
Can I replace a font everywhere?
Yes. Replace All covers node-level text, mixed rich-text runs, and shared text styles as one undoable operation.
Does replacement upload my document or fonts?
No. Core replacement uses Varve's local font catalog and is local-first; it does not require Figma credentials or uploading the document. Optional font providers remain separate and user-controlled.
Will replacement alter layout?
It can. Font metrics affect wrapping and bounds, so Varve shows the match quality and asks you to review reflow before delivery.