Text styles

The Typography section of the Design System panel manages three things: the fonts available to your project, a type scale of reusable sizes, and named text styles that you can apply to any text element in one click.

For the per-element typographic controls—size, weight, and color on a single text element—see Typography.

Fonts

At the top of the Typography section is the font manager. Paste a Google Fonts or Adobe Fonts embed link and click Add. Scamp adds the corresponding @import to your theme.css, and the font becomes available everywhere: the font pickers, the canvas, and your generated code.

You can manage fonts from two places: the top of the Typography section, and the Settings page. Both write to the same project, so use whichever is closer.

Font families

Below the font manager, Font families lists your --font-* tokens, such as --font-sans and --font-mono. These are the named families that you reference from text styles and from the per-element font picker.

Type scale

Type scale lists your --text-* size tokens as editable rows. These are plain size values, such as --text-lg: 1.25rem, that appear in the font-size picker across the panel.

A text style bundles a full set of typographic properties—font family, size, weight, line height, and letter spacing—under one name, such as H1 or Body Large. Applying a style sets all of them at once, so your headings and body copy stay consistent across the whole project.

Each style is stored as a group of tokens named --text-<style>-<property>—for example, --text-h1-size, --text-h1-weight, and --text-h1-leading.

Add text styles

New projects start without text styles, to keep the pickers clean. When the section is empty, you see two buttons:

+ Add default text styles: Adds the full recommended set: Display, H1, H2, H3, H4, Body Large, Body, Body Small, Label, and Code.
+ Add text style: Adds a single blank style for you to define.

The live preview

Each text style appears as a preview row. The row shows the style's name followed by a sample sentence—"H1 — The quick brown fox jumps over the lazy dog"—drawn in that style's own font, size, weight, line height, and letter spacing, so you see exactly what the style looks like right in the list. Long previews truncate to a single line.

Edit a style

Click a preview row to open the style editor in a popover. It has the same typography controls as the properties panel, but for the whole style at once:

Font: A searchable font picker with Google, Adobe, and system fonts, plus your --font-* tokens.
Size and Weight, side by side.
Line height and Letter spacing, side by side.
A name field at the top, for renaming the style. Renaming rewrites the underlying token group.

Each field also accepts a token reference, so you can build a text style from your type scale and font tokens rather than hardcoded values.

To close the popover, click its × button or press Escape. A delete control on the row removes the style; if any elements use the style, Scamp warns you with a usage count first.

Choose a font weight

The weight control is an editable list. Open it to select any of the nine named weights:

Value	Name	Value	Name
100	Thin	500	Medium
200	Extra Light	600	Semibold
300	Light	700	Bold
400	Regular	800	Extra Bold
		900	Black

Each option appears in its own weight as a live sample. You can also type any value from 1 to 1000 directly, which is useful for variable fonts that support in-between weights like 350. The matched name, such as "Regular", appears next to the number, and is blank for custom values. Press the up and down arrow keys to step the weight.

Apply a text style to an element

Select a text element.
In the properties panel, open the Typography section.
In the Text style list, select a style.

Scamp sets the element's family, size, line height, and letter spacing to the style's token references, and its weight to the concrete value. The list reflects the currently applied style, and the individual size, weight, and family pickers hide the internal text-style tokens, so they stay focused on plain values.