From c3083e245d4c13df870a9955099194e7c860ce06 Mon Sep 17 00:00:00 2001 From: Zaxaerith Date: Mon, 19 Oct 2026 17:16:25 +0800 Subject: [PATCH] docs: add typography and custom lettering guide (#2980) --- README.md | 2 + docs/typography-lettering.md | 114 +++++++++++++++++++++++++++++++++++ 2 files changed, 116 insertions(+) create mode 100644 docs/typography-lettering.md diff --git a/README.md b/README.md index cff9d3b95..7208c950f 100644 --- a/README.md +++ b/README.md @@ -180,6 +180,8 @@ cd apps/vectorcraft-web && trunk build --release # web build → dist cargo xtask ci # fmt, clippy, tests, layering, wasm, vendor names ``` +For text and custom letter shapes, see [Typography and Custom Lettering](docs/typography-lettering.md). + Japanese fonts come from [storytold/craft-fonts](https://github.com/storytold/craft-fonts), an optional build input (releases always use it): `CRAFT_FONTS_DIR="$PWD/../craft-fonts" cargo run --release -p vectorcraft` (an absolute path). Without it, Japanese text uses the installed system fonts. See [`docs/development.md`](docs/development.md#fonts-craft-fonts-optional-build-input). diff --git a/docs/typography-lettering.md b/docs/typography-lettering.md new file mode 100644 index 000000000..373f92b96 --- /dev/null +++ b/docs/typography-lettering.md @@ -0,0 +1,114 @@ +# Typography and Custom Lettering in VectorCraft + +## What you can do + +- **Typesetting:** use an available font to create editable text, then adjust its size, style and spacing. +- **Custom lettering:** convert text to vector outlines and reshape the letters for a title or logo. +- **Reusable font files:** VectorCraft does not currently create or export installable TTF or OTF fonts. + +This guide covers the first two workflows. The steps apply to the v0.13.1 release; the desktop app +can use installed system fonts, while the web app uses the fonts supplied by its deployment. + +## Getting started with the Type Tool + +1. Create a document with **File → New…**, or open an existing one. +2. Select **Type Tool** in the toolbar, or press **T** when you are not typing in a text field. +3. Click an empty part of the artboard and type a short heading, such as `MOON`. A click creates + point text, which grows as you type. To create text that wraps inside a frame, drag a rectangle + instead. If placeholder text appears selected, typing replaces it. +4. Press **Escape** to finish typing. Select **Selection Tool** (**V**) and click the text object. + This lets you format the whole heading rather than just characters selected while typing. +5. Open **Window → Type → Character**. Use the font family menu at the top of the panel to search + for a font and click its name to apply it. The menu below it chooses an available style, such as + Regular, Bold or Italic; the choices depend on the font. **Type → Font** also lists available fonts. +6. Adjust **Font Size** (the field beside **T**) and **Tracking** (beside **VA↔**) in the Character + panel. Hover a field's label to see its name. For example, enter `72 pt` for a large heading and + try tracking `50` to spread its letters slightly. Positive tracking adds space; negative tracking + tightens it. **Leading** controls the spacing between lines; **Kerning (0 = Auto)** adjusts pairs. +7. To change only part of the text, select **Type Tool**, click into the text and drag across the + characters before using the Character panel. Press **Escape** when finished. Keep the text + editable until its wording, font and spacing are settled. +8. Choose **File → Save As…**, select the **VectorCraft** format, and save the document as + `lettering-editable.vectorcraft`. + +The desktop app scans system fonts and loads faces as needed. If you install a font while it is +open, use **Refresh Font List** in the Character panel's menu. On the web, installing a font on your +computer does not add it to VectorCraft's font menu; the available fonts depend on the hosted build. + +## Turning text into editable outlines + +Create Outlines replaces text with vector paths. You can reshape those paths, but you can no longer +edit the words or choose a different font for them with the Type Tool. + +1. Keep the editable file saved above. Choose **File → Save As…** again, select **VectorCraft**, + and save as `lettering-outlines.vectorcraft`. Continue in this second file so later saves do not + overwrite your editable original. +2. With **Selection Tool** (**V**), select the text object you want to convert. +3. Choose **Type → Create Outlines**. The default shortcut is **Ctrl+Shift+O** on Windows and Linux, + or **Cmd+Shift+O** on macOS. +4. Select **Direct Selection Tool** (**A**) and click a letter's edge to inspect its paths and anchors. + The text has become a group of paths, one compound path per glyph. A compound path can include + both a letter's outer edge and its inner holes, such as the middle of an `O`. + +Conversion uses the font currently drawn. Resolve missing or substituted fonts before outlining, +or the paths will capture the substitute's shapes. + +## Customizing individual letters + +Try making the final `N` in `MOON` taller to give the heading a distinctive ending. + +1. Select **Direct Selection Tool** (**A**). Click empty canvas to clear the current selection, + then click an anchor on the outlined `N`. Anchors are the points that define a path's shape; + Direct Selection can reach paths inside the group without ungrouping the letters. +2. Drag the anchor a short distance to change that part of the letter. To move several anchors + together, Shift-click them before dragging, or drag a selection rectangle around them from + empty canvas. For the taller `N`, select its top anchors and move them up slightly. +3. On a curved letter such as `O`, select an anchor on a curve. Drag the end of a visible direction + handle to change the curve's bend. These Bézier handles control how the curve leaves or enters + the anchor. Straight corners may have no handles to drag. +4. Switch to **Selection Tool** (**V**) to inspect the whole heading. Use **Edit → Undo** if a change + distorts the letter or closes an inner hole, then try a smaller adjustment. + +These changes affect the artwork in this document. They do not change the installed font or other +text using it. A glyph is not always one typed character: for example, a font may join letters into +a ligature, which becomes a single glyph outline. + +## Saving and exporting your artwork + +- **Keep the project:** use **File → Save** to save `lettering-outlines.vectorcraft`. Retain + `lettering-editable.vectorcraft` separately for future wording or font changes. A native file keeps + editable text only where you have left text objects unconverted. +- **Export vector artwork:** choose **File → Export → Export As…**, select **SVG** or **PDF**, and + continue through the export options. The outlined letters are vector shapes in the output, not + keyboard-editable text. Check **Use Artboards** if you want the artboard bounds rather than the + bounds of the visible artwork. +- **Create an installable font:** SVG and PDF exports are artwork, not TTF/OTF files. Renaming their + extension does not turn them into fonts. + +## Can VectorCraft create a font file? + +No. VectorCraft does not currently provide a complete font-authoring workflow or TTF/OTF export. +It does not turn your letter paths into a reusable font with character encoding, glyph metrics and +font-wide kerning definitions. Character panel spacing changes format the text in your drawing; +they do not edit a font's kerning tables. + +To make an installable typeface, use a dedicated font editor to assign glyphs to characters, set +metrics and spacing, and generate the font file. VectorCraft's outline tools are useful for custom +lettering artwork, but exporting that artwork is only one part of making a font. + +## Troubleshooting + +- **I cannot find my font.** On desktop, check that it is installed, clear the font menu's search + and filters, then choose **Refresh Font List** from the Character panel menu. **Type → Find Font…** + lists fonts used by the document and marks missing ones; it can replace them with available fonts. + A missing family, style or character may use a fallback, so check the result before outlining. + On the web, the site must supply the font; system-font scanning and the desktop refresh option + are unavailable there. +- **I cannot change the words after Create Outlines.** The result is paths, not text. Use + **Edit → Undo** if the conversion is still in the undo history, or reopen your editable original. +- **I cannot install my modified letters as a font.** They are drawing objects. SVG/PDF export + does not add the structure required by an installable font; see [Can VectorCraft create a font + file?](#can-vectorcraft-create-a-font-file). +- **How do I keep text editable?** Save the text in a native `.vectorcraft` file before outlining, + then use a different file name for the outlined version. Saving paths in the native format does + not turn them back into text.