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.

The text box expands as you type. To create a fixed-width text area, click and drag to define its bounds.

Editing Text

There are two ways to edit existing text:

• Double-click the text with the Select tool to edit it directly on the canvas. 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. If the compact font picker is open, the first Escape closes the picker; press it again to leave text editing.

The floating text toolbar provides font family, weight, bold, italic, size, and color controls. While a text edit session is active this bar is the single formatting surface — the contextual bar beside the menubar points to it instead of showing a second copy of the same controls. OpenMore text formatting for alignment and lists. Font size changes apply when you press Enter or leave the size field, and pressing Enter keeps the editing session alive so you can continue typing; Escape discards an unfinished size edit. Hovering or arrowing through a family or face is a temporary preview in the floating toolbar, contextual bar, and Inspector; it creates no undo entry. Choose a result to commit one formatting change, or press Escape to restore the prior formatting. Undo reverses that committed change separately from the typing that preceded it.

Rich text, selection, and appearance

The native editing surface owns typing, caret movement, IME composition, selection, and clipboard input. Varve's canvas remains the appearance authority while you edit, so gradients, strokes, shadows, glows, and other supported text effects do not disappear or get painted twice. Their alpha sources are rebuilt from the current glyphs, including counters and transparent backgrounds.

When a text node has rich content, its paragraphs and styled runs are canonical; the plain text value is kept as a synchronized projection. Native UTF-16 offsets are mapped to paragraph-local ranges and snapped to grapheme boundaries, so editing across paragraphs preserves unaffected formatting. Use the Rich Text switch in Typography to apply character formatting to the current range. The Inspector, contextual bar, and floating toolbar all use that active range or caret when one exists; with no text range they apply to the selected text objects.

Layer effects are whole-object appearance. Selecting a word does not make a shadow or glow range-local; use rich-text formatting for range-level styling and the Layer Effects section for the complete text layer.

Text layer names

New text layers receive a content-derived label such as Text: Summer sale. While that label is automatic, accepted content edits keep it in sync with the canonical text, including rich-text paragraphs and Unicode content. Renaming a layer in Layers makes the name custom, so later text, style, and effect changes leave it alone. Choose Use text as name in Typography to restore automatic naming explicitly.

Older documents without naming metadata are left unchanged until you opt into automatic naming. Labels are display names: line breaks and whitespace are normalized and long names are shortened at safe grapheme boundaries without changing the artwork.

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.

Vertical writing

Vertical text is a logical writing mode, not a rotated text layer. Select the Text tool, open Tool options, and choose Vertical — right to left or Vertical — left to right before creating the next text layer. To convert existing text, select it and use Writing mode in Typography. The operation keeps the logical string, rich-text runs, object transform, and fixed frame geometry intact.

Mixed follows Unicode vertical orientation conventions at grapheme boundaries: CJK and pictographic clusters stay upright while Latin-like clusters are sideways. Upright and Sideways are explicit presentation choices. These controls are separate from Text direction, Vertical alignment, and object rotation.

In a fixed area, wrapping consumes the physical height of the frame as the vertical inline extent. New columns progress leftward for vertical-rl and rightward for vertical-lr; authored line breaks remain authored breaks. The browser renderer uses a stable measured fallback when font bytes are unavailable, and native ttb shaping remains a separate runtime capability. HTML/CSS and SVG exports preserve writing-mode semantics; native PDF vertical text is currently reported as a target limitation rather than silently rotated. PDF import reads a vertical font CMap (/Identity-V or /WMode 1) as vertical text: each column opens as an editable layer with Writing mode set to Vertical, right to left and the default Mixed character orientation, which you can change independently. Consecutive upright glyphs that a producer placed one at a time are merged into that column, while neighbouring columns stay separate layers.

Text Properties

The Typography section in the Inspector provides controls for every text property. The common spine — content, family, weight, style, size, line height, letter spacing, and alignment — stays visible, while tracking, paragraph spacing, vertical alignment, direction, writing mode, case, decoration, list style, overflow, and text sizing live in a collapsed Advanced typography subsection. Its header badge reports how many of those properties the current layer already uses, so nothing is silently hidden. Controls are named in plain language, and options that only apply to some text (vertical alignment for area text, vertical orientation for vertical writing) appear only when they can act.

Font Selection

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

• System fonts — Availability depends on the operating system and browser; a family name alone does not confirm that its file is accessible
• Bundled fonts — Open-source fonts included with Varve via @fontsource packages
• Shipped semantic catalog — Search family names, design language, coverage, features, availability, and personal tags offline
• Explicit desktop installs — When enabled, retrieve one exact, version-pinned Fontsource artifact after reviewing the result and its license metadata

The compact font family selector shows installed fonts only and never starts a download. Open Browse fonts for semantic discovery, coverage and license inspection. In the full browser, use Allow local fonts (or Refresh local fonts on desktop) to deliberately enumerate local faces; the status explains whether permission, native enumeration, or the compatibility list supplied the result. The public browser demo keeps search local-first and does not make remote provider requests; desktop installation is a separate explicit action. Missing fonts open a recovery dialog that uses the same shipped catalog and install boundary.

Downloads are stored locally under an artifact hash and collection-member face key. If a font is still reported missing after reopening, review the requested family and exact face before choosing a replacement. Collection members and different files with the same family name remain distinct; a family match does not prove that the original file was restored.

Browse fonts

Browse fonts keeps the results and inspection panes visible together. Search by family, foundry, style, or design language; use the source tabs for System, Bundled, Project, Recent, or Favorites; and use the semantic filter for categories such as Sans serif, Serif, Variable, or script coverage.

1. Search: A plain term such as gothic returns only matching catalog families. Natural-language queries remain ranked and show the interpreted terms.
2. Inspect: Select a family to keep the list in place while reviewing a custom specimen rendered with the available family, source, license, styles, weights, script coverage, tags, and related families.
3. Expand exact faces: Open a family row in Browse fonts or the compact text toolbar to see only registered faces. Known PostScript names and portable collection-member identities are shown; unavailable weight/style combinations are not invented. Choose Use face to apply the registered weight, style, and exact font reference together.
4. Decide: Use an installed family explicitly, or install a catalog-only family after reviewing its metadata. Selecting a result alone never changes the document.

Search and inspection are local-first and work with the shipped catalog without provider metadata requests. Specimens render for installed or bundled families; catalog-only families show metadata until an explicit desktop install. The browser adapts to compact widths and follows Varve's light, dark, and high-contrast theme tokens. Installed file details are available for local faces when the registry exposes them.

Font details distinguish the OS/2 base embedding permission from the separate no-subsetting and bitmap-only declarations. These technical flags do not prove a license grant. If license provenance is unknown, Varve keeps the state visible and does not offer redistribution or live font embedding until you verify the source terms.

Document Fonts

Open the Fonts panel to review the faces the document actually uses. The panel starts on the active page and lets you switch to Entire document. Exact artifact and collection-member faces stay separate from family-only requests; each row shows the face label, character count, and page locations. Linked story frames are kept together, while hidden and locked content is excluded from the working list.

Select a row to select every matching text layer in one action. Unused text styles appear separately so cleanup does not look like missing artwork. Use Browse all fonts to return to discovery; browsing a catalog family does not change the document or start a provider request.

Semantic discovery

Queries such as friendly rounded sans for UI, editorial serif with Vietnamese, and similar to Inter are parsed into explainable constraints and preferences. “With” coverage and feature requirements are hard; words such as “friendly” and “editorial” are ranking preferences unless the query is clarified. Results distinguish verified facts, measured metrics, curated observations, and unknown metadata. Similarity, alternatives, and pairings are separate recommendation lanes.

Personal tags are stored in a versioned local user layer and never overwrite provider facts. Legacy face-level FontCatalogEntry.tags are grouped by family during migration. Search remains available if local storage is unavailable or incomplete.

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. Recover the requested face: When the shipped catalog has a matching family and style, review the offered weight, style, and license, then explicitly install the version-pinned artifact. An imported family name cannot identify the original font file or revision.
3. Browse alternatives: Open the full semantic font browser when there is no exact catalog match or the design calls for a different direction.
4. Choose a local candidate: Select an installed or bundled font that fits the design and script.
5. Apply once: Replace All updates matching nodes, rich-text runs, and shared styles in one undoable transaction.
6. 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 request from 100 to 900; availability depends on the selected font
• Font Style — Normal or Italic

Alignment and Spacing

• Alignment — Left, Center, Right, and Justify, shown as the standard alignment icons with named labels and tooltips
• Vertical align — Top, Middle, Bottom; appears for area text (a fixed or auto-height box) where the alignment can act
• Line Height — Percentage of the font size (for example, 150%)
• Letter spacing — Per-glyph spacing in pixels, a fixed offset that does not scale with the font size
• Tracking — Per-mille of the em (‰); scales with the font size. Lives in Advanced typography, with the field hint explaining the difference from letter spacing
• Paragraph spacing — Additional space between paragraphs, in Advanced typography

Case and Decoration

• Text Case — Uppercase (ABC), Lowercase (abc), Capitalize (Abc), or None; each option states what it produces
• Text Decoration — Underline, Strikethrough, or None, shown as labelled underline/strikethrough icons
• Text Overflow — Visible, Clip, or Ellipsis (…), each with a one-line explanation in the dropdown
• Text sizing — Auto width, Auto height, or Fixed size, with the wrapping behavior described per option

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

Open the OpenType features disclosure in the Typography inspector. Varve reads the selected face's feature metadata; it does not fabricate a feature that the font does not declare, and required script-shaping features (rlig,ccmp, locl, mark, and friends) are not offered as disabled rows because they are not user decisions. The disclosure header shows how many features the layer currently changes away from the font default. Whole-run values can be Boolean or numeric/indexed, while byte-backed shaping also accepts UTF-16 source ranges. Unset/inherit, explicit off, and a selected numeric value remain distinct in the document; each dropdown option explains what Inherit, Off, On, and Indexed do.

• liga — Standard ligatures
• dlig, hlig — Discretionary and historical ligatures
• calt, swsh, cswh, titl, salt — Contextual alternates, swashes, and titling forms
• kern — Kerning
• ss01 through ss20 and cv01 through cv99 — Font-defined stylistic sets and character variants
• smcp, c2sc, frac, afrc, numr, dnom, onum, lnum, pnum, tnum, zero — Small caps, fractions, numeral styles, and slashed zero where declared by the face

Required script-shaping features are protected from a generic “turn ligatures off” action. The alternate browser previews available feature choices for the current face; it is a feature browser, not a universal glyph-insertion palette. Applying a choice changes the real canvas artwork and creates one history entry. Hover previews are cancellable and do not create history entries; Escape or selection changes restore the previous value.

Variable Fonts

Varve exposes registered variable-font axes. When a variable font is selected, the Typography section and the full Browse fonts inspector show a Variable Axes panel with range sliders for each registered axis (e.g., weight, width, optical size, slant). The available axes, bounds, and defaults are determined by the selected face's fvar table. Adjustments preview live and stay a draft until you choose Use face; Reset returns to the font's defaults without changing the document.

Axis values are applied once to the resolved face and are included in layout, outline, and export identity. Browser whole-run axes use the Canvas2D/FontFace route when the selected face has an inspectable local source; custom-axis support remains browser- and font-dependent, while exact outlines use the font-byte/native path. A zoom change never changes optical sizing. If a face or runtime cannot honor an axis, the control reports that state instead of pretending the preview is authoritative.

Artistic text and custom lettering

Point text grows with its content; area text wraps inside its frame. Changing a frame changes wrapping, changing font size changes type metrics, and an object transform changes placement. These are separate operations and remain undoable.

Select a plain, single-line LTR wordmark and use Glyph adjustments for cluster offset, rotation, scale, baseline movement, or pair spacing. Adjustments stay attached to logical grapheme/source indices and are cleared when the source text, font, features, or shaping context changes. Combining marks and required script clusters are kept together. For an ordinary Latin ligature, turn Standard ligatures off before moving inside fi, ff, ffi, ffl, or fl; use Reset to remove the adjustments.

Use Text on path for baseline placement. The renderer positions shaped source clusters along the curve and supports start/end offset, baseline offset, side, flip, reversal, fit, detach, and live path edits. It does not bend the actual glyph outlines. If the path is deleted or unavailable, reset the path settings to return to ordinary editable text.

The existing deformation controls provide bounded arc/bend/wave-style effects while preserving source text and parameters. Edit the source text through the normal text editor; expand a live deformation before outlining so the final geometry is intentional and recoverable.

Choose Convert to outlines only when you accept destructive text conversion. Varve uses the actual shaped glyph IDs, contours, counters, feature values, axes, and source ranges for supported monochrome faces, stores provenance on the resulting group, and keeps the original available through undo. Missing/corrupt fonts, collection faces, color glyphs, path text, case transforms, and live warps are refused or require the documented detach/expand step; no placeholder rectangles are presented as success.

Export behavior

SVG keeps editable text, feature settings, variable-axis settings, and native textPath semantics where the SVG viewer supports them. Browser PDF is a local raster PDF. Desktop PDF preserves simple eligible text through the native print path, but shaping-sensitive text—ligatures, non-Latin/script text, rich runs, feature values/ranges, axes, tracking, manual cluster edits, and path text—is rasterized from the live renderer so it cannot silently change shape. This preserves appearance but means that node is not searchable/editable text in the PDF. Convert to outlines when vector geometry is more important than PDF text semantics, and inspect the exported artifact before delivery.

A character the chosen font cannot draw is a separate case. The canvas draws it with a fallback face, while the PDF writer outlines the authored face, where the same character becomes a blank or a box. Desktop PDF export reads the coverage of the font binaries it embeds and names the affected characters, the font and the number of text objects in Export Results, so the difference is visible before the file is sent rather than after. It reports rather than substitutes: changing the face silently would change the document's appearance.

A native package export includes an editable font file only after the requested artifact and collection member are verified by SHA-256 and the technical embedding policy permits it. Legacy text that stores a family name without an exact face remains listed in the manifest but does not cause the first same-family file to be embedded; choose the exact face in the font browser before sharing the package.

Font access and licensing

The browser demo does not download catalog fonts. Browsers may also limit access to fonts installed on your computer. In the full browser, choose Allow local fonts before enumerating installed faces; on desktop, Refresh local fonts uses the native discovery path. Collection members can be imported explicitly, and a denied or unsupported permission leaves the bundled catalog available without silently downloading a replacement.

Font names and technical embedding flags do not establish the full license terms. Review the source license before sharing font files. Missing license metadata means the terms are unknown. Keep the original font source so recipients can obtain the appropriate file.

The Identify Font panel accepts a selected image, bounds decoded data to a 2048px edge, and can use optional recognized text for local render comparison against the installed catalog. When the detector and TrOCR assets are already installed, Read text with local OCR fills an editable field and reports the model and average confidence; opening the panel never downloads OCR assets, and manual entry remains available when they are missing. A candidate's Use for new text action queues its family (and known exact reference) for the next text layer and activates the Text tool, while Apply to target updates only an explicitly chosen existing text layer in one undo step. Arbitrary transformed crop selection, OCR-assisted region overlays, and richer candidate target previews remain under integration. Document Fonts is available from the Fonts panel; its current-page view includes effective rich runs, linked stories, inherited styles, and component-instance text while excluding hidden or locked content. Scoped Select by Font replacement with layout preview remains under integration.

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 arc-length parameters for cubic bezier curves and consumes shaped source clusters rather than measuring isolated characters. 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 baseline with cluster-aware positioning and rotation; bending the outlines is a separate deformation operation

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