Typography

Text rendering with OpenType.js — kerning, optical alignment, type scales, and text-to-path conversion.

Text rendering with OpenType.js integration. Features metrics-based and optical kerning, modular type scales, glyph classification, and SVG path conversion. 3 bundled variable fonts plus system fallbacks.

Installation

npm install @genart-dev/plugin-typography

Layer Types

Type ID	Display Name	Description
`typography:text`	Text	Styled text with font, kerning, optical alignment, and shadow controls

Properties

typography:text

Property	Type	Default	Description
`content`	`string`	`""`	Text content to render
`fontFamily`	`string`	`"Inter"`	Font family name
`fontSize`	`number`	`24`	Font size in pixels
`fontWeight`	`select`	`"normal"`	Weight: normal, bold, 100–900
`fontStyle`	`select`	`"normal"`	Style: normal, italic
`color`	`color`	`"#000000"`	Text fill color
`textAlign`	`select`	`"left"`	Alignment: left, center, right
`lineHeight`	`number`	`1.4`	Line height multiplier
`letterSpacing`	`number`	`0`	Letter spacing in pixels
`kerningMode`	`select`	`"metrics"`	Kerning: none, metrics, optical
`opticalAlignment`	`boolean`	`false`	Enable optical overshoot compensation
`maxWidth`	`number`	`0`	Max width for wrapping (0 = no wrap)
`strokeColor`	`color`	`""`	Text stroke color
`strokeWidth`	`number`	`0`	Text stroke width
`shadowEnabled`	`boolean`	`false`	Enable text shadow
`shadowColor`	`color`	`"#00000040"`	Shadow color with alpha
`shadowOffsetX`	`number`	`2`	Shadow horizontal offset
`shadowOffsetY`	`number`	`2`	Shadow vertical offset
`shadowBlur`	`number`	`4`	Shadow blur radius

Built-In Fonts

Font	Type	Weights	Notes
Inter	sans-serif	400, 700	Variable font bundled
JetBrains Mono	monospace	400	Variable font bundled
Source Serif 4	serif	400	Variable font bundled
Georgia, Arial, Helvetica, Times New Roman, Courier New	system	varies	System fallbacks

MCP Tools

Tool	Description
`set_text`	Set text content on a typography layer
`apply_text_style`	Apply font family, size, weight, color, and alignment
`list_fonts`	List available font families
`set_text_shadow`	Configure text shadow properties
`set_type_scale`	Generate modular type scale (8 named ratios: minor-second through golden)
`get_font_metrics`	Detailed metrics: ascender, descender, xHeight, capHeight, kern pairs
`analyze_text_spacing`	Analyze kerning quality with per-pair metrics and divergence warnings
`convert_text_to_paths`	Convert text layer to SVG path data
`load_custom_font`	Load OTF/TTF/WOFF2 from sketch asset

Example

{
  "tool": "design_add_layer",
  "arguments": {
    "type": "typography:text",
    "properties": {
      "content": "Hello World",
      "fontFamily": "Source Serif 4",
      "fontSize": 48,
      "fontWeight": "bold",
      "color": "#1a1a2e",
      "kerningMode": "optical",
      "opticalAlignment": true,
      "textAlign": "center"
    }
  }
}