Typography

Typography (tool ID typography) is the Glyphfield Studio tool that edits the active brand identity's four type roles (Display, Body, Accent and Code) and its modular type scale. Changes write to the identity as pending changes. Select Save changes in the save notice to keep them, or switch to Brand identity and call identity.save.

Layout

Roles

Add font file to identity stores an OTF, TTF, WOFF or WOFF2 file with the identity. The family name comes from the file name. "Bold" in the name sets weight 700, and "italic" sets the italic style. No license is recorded, so add one in Brand identity.

The inspector edits the selected role:

The axes are read in the browser. A WOFF2 file needs a browser that can decode Brotli, and a WOFF file needs DecompressionStream with deflate. Otherwise the axes show as not readable.

Modular scale

Each size is basePx × ratio^step across nine steps. The default is a 16 px base and a 1.25 ratio. The steps are caption (−2), small (−1), body (0), lead (1), h4 (2), h3 (3), h2 (4), h1 (5) and display (6). The named ratios run from the minor second (1.067) to the golden ratio (1.618). By default Display is set at display, Body at body, Accent at lead and Code at small. Any role can move to another step, which is stored in typeScale.roleSteps. The Scale view shows every step at its size with the roles set on it. Select a step to set the selected role there, or pick a ratio from the chips.

Guidance

Typography checks every role at its scale size. Display sizes are 28 px and larger, and the Code role always counts as text.

Apply recommended tracking sets −0.02 em on display-size roles and 0 on text roles whose tracking breaks the rule.

Views

Browser API

The Browser API (window.glyphfield.studio) exposes these actions while Typography is the active tool:

Source

File → Edit source code shows version 2:

{
  "version": 2,
  "typography": [{ "role": "Display", "family": "Rasmus Inter", "fontId": "inter-variable", "weight": 500, "lineHeight": 0.98, "letterSpacing": -1.2, "opticalSize": 32 }],
  "typeScale": { "basePx": 16, "ratio": 1.333, "roleSteps": { "Display": "h1" } },
  "specimen": { "sampleText": "Every language. One source.", "align": "left", "measure": 64, "previewSizes": { "Display": 40, "Body": 24, "Accent": 32, "Code": 18 } }
}

Roles merge by role. The source can set family, fontId, weight, lineHeight, letterSpacing, usage, opticalSize and slant. Fields the source omits keep their current values. Other fields of the identity's role are kept, and roles the identity does not have are ignored. opticalSize is 6–144 and slant is −20 to 20. opticalSize: null and slant: null remove a fixed axis. typeScale.basePx must be 10–24 and typeScale.ratio 1.067–1.8. A version 1 source ({ typography: [...] }) still applies and leaves the scale and specimen unchanged.

Kerning and type tokens

Specimens render with font-kerning: normal and the kern feature. Optical sizing follows the size unless a role fixes opsz. The type tokens carry the same settings:

• --brand-font-kerning, --brand-font-feature-settings and --brand-font-optical-sizing.
• Each role's --brand-font-<role>-size and its tracking in em relative to that size, for example --brand-font-display-tracking: -0.02em. A role keeps its tracking at any size.
• In Tailwind, each step's --text-<step>--letter-spacing uses the same em values.
• --brand-font-<role>-variation and --brand-font-<role>-style appear when a role fixes an axis.

Keyboard shortcuts

Typing in a specimen line edits the shared sample. Clear specimen and restart typing meter clears the sample and resets the typing meter.

HTTP

Typography has no HTTP route of its own. POST /api/brand/kit renders the type tokens with the rest of the kit, and POST /api/generate embeds the identity's font files in template SVGs.

Limits

• Weights display up to 550.
• Font files are limited to 2.5 MB when they are added through Brand identity or identity.font.add.
• Axes are read from TTF, OTF, WOFF and WOFF2 files in browsers that can decompress them.