Typography

Creating Text

Press T to select the Text tool. Click anywhere on the canvas to create a text node at that position. Start typing immediately — the text appears on canvas as you type. Press Escape or click elsewhere to finish editing.

Varve automatically sizes the text box based on your content using measureText() from the canvas API. The box expands as you type, or you can create a fixed-width text area by clicking and dragging to define a bounding box.

Editing Text

There are two ways to edit existing text:

• Double-click the text node with the Select tool to enter inline editing. A positioned <textarea> overlay appears at the text's location on canvas, with composition-aware input and grapheme-safe selection mapping. Mixed-direction caret behavior remains under active integration.
• Edit in Inspector — Select a text node and find the text content field in the Typography section of the Inspector. This is useful for longer text passages.

Press Escape or click away to exit edit mode.

Unicode and text direction

Varve keeps document text in logical Unicode order. The engine distinguishes UTF-16 offsets used by browser editing from code-point, grapheme, shaping-cluster, glyph, and visual-caret positions. Rich-text ranges snap to extended grapheme boundaries so combining sequences and joined emoji are not split accidentally.

The engine resolves paragraph direction and mixed LTR/RTL runs through a UAX #9 adapter, including embedding levels, visual mappings, and mirrored punctuation. A paragraph layout pipeline now derives per-line visual run order, word-level line breaks that never split a grapheme, cluster-safe caret stops, and selection geometry from one canonical snapshot. The inline editor, pointer tools, and export consumers are still being migrated to that snapshot, so complex mixed-direction text should be validated in the final export.

Text Properties

The Typography section in the Inspector provides controls for every text property:

Font Selection

Varve's Font Registry manages font loading and fallback chains. You can use:

• System fonts — Fonts installed on your operating system
• Bundled fonts — Open-source fonts included with Varve via @fontsource packages
• Google Fonts — Load any Google Font by URL via FontFace API

The font family selector shows available fonts with their CSS fallback chain. Missing fonts trigger a visible warning in the Typography section.

Missing-font replacement after import

When an imported design references a family that is not available locally, Varve opens a reviewable replacement workflow instead of silently changing the design. It checks ordinary text, mixed rich-text runs, and reusable text styles, then ranks local candidates by identity, compatibility, and script/category fallback.

1. Review the source: See the original family, affected text count, and candidate match quality.
2. Choose a local candidate: Select an installed or bundled font that fits the design and script.
3. Apply once: Replace All updates matching nodes, rich-text runs, and shared styles in one undoable transaction.
4. Keep provenance: The original family and substitute remain recorded in the document font manifest for save/reopen diagnostics.

Replacement preserves editable text rather than outlining or rasterizing it. Because font metrics can change wrapping and bounds, Varve reports the substitution and asks you to review layout before delivery. See Figma acquisition and import support for source-format boundaries.

Size and Weight

• Font Size — Numeric input with drag-to-scrub
• Font Weight — Numeric value (100-900) or named weight selector (Thin through Black)
• Font Style — Normal, Italic, or Oblique

Alignment and Spacing

• Text Align — Left, Center, Right, Justify
• Text Align Vertical — Top, Middle, Bottom
• Line Height — Multiplier (e.g., 1.5) or absolute value
• Letter Spacing — Per-glyph spacing in pixels
• Paragraph Spacing — Additional space between paragraphs

Case and Decoration

• Text Case — Uppercase, Lowercase, Capitalize (Title Case), or Normal
• Text Decoration — Underline, Line-through, or None
• Text Overflow — Clip (hide overflow) or Ellipsis (show "...")

Lists

Text nodes can render as lists with List Style options: Disc, Decimal, Circle, or Square. Varve handles list item numbering and bullet rendering automatically.

OpenType Features

For fonts that support them, Varve exposes OpenType feature toggles in a collapsible section:

• liga — Standard ligatures
• kern — Kerning
• salt — Stylistic alternates
• ss01 through ss20 — Stylistic sets
• And other common features (calt, dlig, frac, sups, subs, onum, lnum, pnum, tnum, zero)

Variable Fonts

Varve supports variable fonts with full axis control. When a variable font is selected, the Typography section shows a Variable Axes panel with range sliders for each registered axis (e.g., weight, width, optical size, slant). The available axes are determined by the font's fvar table.

Figma acquisition note

Varve's semantic Figma import path accepts native .fig archives, official REST file JSON, and compatible plugin-export JSON. Native archives are decoded locally before the same semantic conversion builds editable pages, frames, text runs, components, styles, variables, and layout semantics where Varve has an equivalent model. The local-first result does not require Figma to remain open after import.

Native .fig support is schema-version dependent. If a source resource or semantic feature is unavailable, Varve keeps the supported artwork editable and surfaces the limitation in the Import Report. Use an authorized JSON/plugin export when the file's REST resource maps are needed, or use SVG/PDF when visual fallback is the priority; neither fallback preserves Figma's higher-level semantics.

Text on Path

Text can be placed along any vector path. This feature uses adaptive Simpson integration to compute accurate arc-length parameters for cubic bezier curves. To use text on path:

1. Create a path using the Pen or Pencil tool
2. Create a text node
3. In the Typography section, select the path node as the Path Shape reference
4. The text renders along the path with per-glyph positioning and rotation

Text Measurement

Varve uses canvas measureText() as the current browser fallback for text metrics, falling back to content-length estimation only in non-DOM environments. A canonical paragraph layout pipeline (itemization, line breaking, per-line visual ordering, caret stops, hit testing, selection geometry) and a HarfBuzz-compatible shaping backend contract are in place so glyph clusters, caret geometry, bounds, and exports can share one authority; the live canvas consumes a derived snapshot for plain text, with measured fallbacks for rich text. The current fallback powers:

• Auto-sizing text boxes
• Multi-line text wrapping with line height and paragraph spacing
• Ellipsis overflow detection
• Vertical alignment calculations
• CJK line breaking via Intl.Segmenter for word-boundary-aware wrapping