Typography Styles

Define reusable typography styles for use across your site

Typography design tokens are reusable type styles that you define once and apply across your entire site. They ensure consistency, enforce brand guidelines, and enable users to build on brand sections and templates. 

• Typography tokens are referenced everywhere text appears (e.g., headings, text blocks, CTAs, forms).
• Changing a token updates the styles for all text that references it.
• Once updated, you need to save, queue and publish design tokens for them to appear on your site. 
• You can add as many type styles as you want, but we recommend to keep the list as small as possible to help maintain design consistency.

Global vs Custom Tokens

Nyla includes Global Typography Tokens by default. You can add Custom Tokens for unique cases. 

• Global Tokens
  • Pre-loaded with all Nyla sites (H1-H6, Body Large-Extra Small, etc)
  • These should always be defined, even if not used directly, so previews/imports from the Nyla library stay consistent.

• Custom Tokens
  • Created manually to add more variation (e.g., bold/italic variants, specific custom type styles).
  • Appear in the same dropdowns as global tokens.
  • Tip: keep the list of tokens as short as possible for clarity and consistency.
  • Best practice: name clearly and add usage notes in the description.

How Typography Tokens Apply

Typography design tokens are used everywhere that text appears on your site. They are the base styles that other componentry pulls from.

For example, if you add a Heading or Text to a section you can then choose the Typography style that you want to apply from a dropdown:  

Call to Action design tokens also reference typography styles for the text styling. Similarly, Forms reference typography tokens for labels, inputs and so on.

Settings

Typography design tokens have the following 

Preview

The Preview field shows the style as you change settings.

Settings

• Description (optional): Add a description so users know the purpose of the typography style
• Font: Choose the font your typography style will use from your Fonts design tokens
• Font size: 
  • Units: px, rem, vw, vh, % and custom units 
  • Responsive
• Letter spacing: 
  • Units: px, rem, vw, vh
  • Responsive
• Line height: 
  • Units: px, rem, vw, vh, %
  • Responsive
• Paragraph spacing: 
  • Units: px, rem, vw, vh, % and custom units 
  • Responsive
• Text transform:
  • Choose the text case
  • None
  • Uppercase
  • Lowercase
  • Capitalize

Strikethrough style

You can set a custom strikethrough style that will show whenever you use the Strikethrough feature in Rich Text. All fields are responsive. 

• Position (in front or behind text)
• Color
• Offset (top, left)
• Thickness (px, rem, vw, vh, % and custom units)

Stroke

Add a custom stroke style. All fields are responsive. 

• Color
• Width

Shadow

Add a custom shadow. All fields are responsive. 

• Shadow
• Color

Adding or Editing a Typography Token

To add or Edit a Typography token: 

1. Go to Design → Typography.
   • Or use Quick Edit via the “Edit” / “Add new” option under Heading or Text blocks.
   • Tokens created in Quick Edit also appear in the full Typography list.
2. Select an existing token to edit, or click + Add Token for a new one.
3. Configure your style using the design token fields
4. Use the live preview panel to see changes.
5. Save → Changes are in Draft.
6. Queue → Adds the draft to your publish queue.
7. Publish → Pushes all queued design token changes live.

Publishing Design Tokens

In order for your changes to your type styles to appear, you need to save and publish your changes. 

See more about Publishing in Nyla. 

Concurrency Notes

Nyla does not support concurrent editing on the same entity, so when editing type styles, it's important to avoid concurrency issues, especially if you're working with multiple users or tabs. 

Read more about Concurrency. 

Using Fonts with Typography

• Typography design tokens reference your Font design tokens. You add one font per typography design token. Bold and italic versions of that font + weight are automatically applied (if uploaded) when users apply bold or italic in rich text.  
• To add more fonts, you should to to Design > Fonts

Read more about fonts

Best Practices

• Always create global tokens first for consistency and template previews.
• Keep token lists manageable; avoid unnecessary custom tokens.
• Use clear naming (Body Regular, Body Bold, Accordion Title) and describe usage in the description field.
• Be mindful of concurrency best practices when editing.

Common Pitfalls

• Live site doesn’t match preview? It's likely you haven’t published your tokens.
• Changes overwritten? Another user (or tab) may have saved concurrently. Refresh before editing and check concurrency best practices to avoid issues.
• Font not showing correctly? Check that the correct weights/styles were uploaded and licensed.