Typography

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 font-defined OpenType features, variable font axes, point and area text, text placed along arbitrary paths, bounded non-destructive deformation, and a logical Unicode source model designed to keep shaping, editing, and export aligned.

Vertical writing is a real text-flow setting, not a rotated layer. Choose vertical-rl or vertical-lr for column progression, then choose Mixed, Upright, or Sideways character orientation. The logical text, rich runs, transform, and text-frame geometry stay intact while the content reflows on the vertical inline axis.

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; checks the shipped Fontsource catalog for the requested face; ranks installed candidates; and keeps the original family reference in the saved document manifest. You can continue editing locally without keeping Figma open.

The catalog ships with Varve, so font discovery works offline and does not require a Google Fonts key or runtime metadata request. The full browser offers an explicit local-font permission or refresh action and reports when it falls back to the compatibility list. On desktop, installing a result is an explicit action that retrieves one exact, version-pinned Fontsource artifact, stores it locally under its artifact and face identity, and only then makes it available to the document. If a font is still unavailable after reopening, the missing-font workflow helps you review a replacement. Same-name files and collection members remain distinct in storage; native GUI restart evidence is still being collected. The browser demo can browse the catalog but does not download additional font files.

Key Capabilities

• Text rendering: Multi-line with line height, paragraph spacing, text decoration (underline, strikethrough), text overflow (clip, ellipsis)
• Vertical writing: Editable vertical-rl and vertical-lr flows with Mixed, Upright, and Sideways orientation policies; vertical columns remain distinct from object rotation and vertical alignment
• Inline editing: Native caret, IME, clipboard, and grapheme-safe selection input while the canvas preserves the text's authored appearance
• Rich text: Paragraph-aware replacement and range formatting that preserves unaffected runs instead of flattening them
• Editable appearance: Gradients, strokes, shadows, glows, and supported layer effects remain visible while text is being edited; alpha-aware effects follow glyph counters and transparent backgrounds
• Glyph-aware strokes: Text outlines follow the rendered glyphs, counters, and antialiased edges instead of tracing the text layer's rectangular bounds
• Predictable layer names: Content-derived labels follow automatic text layers; manual names persist until you explicitly restore automatic naming
• OpenType features: Face-aware controls for Boolean, indexed, and (where byte-backed shaping is available) ranged values, including ligatures, alternates, swashes, stylistic sets, small caps, numerals, and fractions; required script-shaping features are protected
• Variable fonts: Per-axis slider control with min/max/default from font metadata
• Alternate feature browser: Search and preview the selected face's available feature choices with keyboard navigation, cancellable hover previews, and one undoable apply action; feature choices are not presented as universal Unicode glyphs
• Artistic text: Point/area text, cluster-safe offset/rotation/scale/baseline controls, and bounded arc/bend/wave deformation remain editable until you explicitly outline
• Text on path: Place shaped source clusters along circle, bezier, rectangle, polygon, or star paths with offset, side, flip, reversal, and detach controls; this positions text on a baseline rather than bending glyph outlines
• Text to outlines: Convert supported monochrome text using the actual shaped glyph IDs, counters, feature values, axes, and source-range provenance; invalid or unavailable font data leaves the editable source intact
• 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: Offline semantic catalog, local-first search, @fontsource runtime loading, CSS fallback chains, and explicit version-pinned desktop installs
• Font discovery: Natural-language intent, coverage and feature constraints, personal tags, similarity, alternatives, pairings, and explainable result reasons
• Missing-font replacement: Ranked local candidates, rich-text-aware Replace All, and manifest provenance across save/reopen
• Quick text toolbar: Compact 32px controls share the editor palette's spacing and surface tokens; expand a family to choose a registered face or named variable instance without losing its exact identity; family and face hover previews stay outside history until chosen; alignment and lists live in More text formatting, with keyboard dismissal for the font picker
• Typography inspector: A seven-row everyday spine (content, family, weight, style, size, line height, letter spacing, alignment) with named icon controls, a collapsed Advanced typography subsection for tracking, paragraph spacing, vertical alignment, direction, writing mode, case, decoration, list style, overflow, and text sizing, a badge reporting how many advanced properties the layer already uses, contextual vertical alignment and orientation rows, and face-aware OpenType features
• Image font identification: Bounded local image analysis, optional local OCR text capture with editable review, installed-font comparison, and explicit Use for new text or Apply to target actions

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. Vertical writing uses the same snapshot with a physical-height inline constraint, right-to-left or left-to-right column progression, and grapheme-cluster orientation policy. Cluster-safe caret stops, hit testing, and selection geometry come from the same snapshot. Live browser paint uses Canvas2D source-run shaping; when a local CSS face source is inspectable, whole-run feature values and custom axes are attached through a process-local FontFace descriptor alias. Exact glyph IDs are supplied by the byte-backed HarfBuzz path for outlining, and the desktop outline path prefers the native rustybuzz adapter when Tauri is available.

SVG export includes multi-line and rich text support. Typography preflight checks font availability and CSS generation.

Limitations

Status

Current font workflow limits

The compact toolbar, contextual bar, and Inspector use the active text range or caret when one exists, and otherwise format selected text objects. Family and exact-face hover previews are presentation only; choosing a result commits one undoable change, while Escape restores the previous formatting. Registered exact-face selection is available from the expanded browser rows; the Logo wordmark panel shares that browser and exposes weight and style controls. Recovery of an imported collection face, scoped Select by Font replacement with layout preview, arbitrary image-region crop/overlay selection, and applying an identified face to an existing text target are still being integrated. Text-to-outlines is available from the Typography inspector for supported monochrome, byte-backed faces; it creates an explicit destructive conversion with source-range/font provenance and undo recovery. Browser local-font enumeration is available only through the explicit action in the full browser and remains subject to the browser's permission policy.

Document Fonts indexes the effective text on the current canvas, including component instances and inherited rich runs, while hiding locked or invisible content. Review the source license before distributing a font file. Technical embedding flags do not describe every license term, and absent metadata remains unknown. See the typography guide for the available controls and current limitations.