Design with Nyla: Typography

Best practices for designing type styles in Nyla

Typography design tokens are referenced in all usage of typography on Nyla sites, enabling you to create a consistent design system for each site that you design. 

Designing and setting up typography with the end user in mind can help to make it faster to build Nyla sites, as well as ensuring that brand style guidelines are maintained as sections are built and adapted over time. 

This article walks you through best practices for designing and creating typography in Nyla so that you can make the most of the platform functionality. 

User experience

When designing typography for Nyla, understanding how the platform works can help to deliver a better result for the eventual users of your design. This enables you to design freely and take advantage of the flexibility of the platform, whilst also making the editing experience great for the brand managing the site and future users building additions to it.

This article includes information on: 

• Design best practices
• The user experience when selecting type styles and editing text
• What settings are responsive on type styles and which aren't
• The difference between global and custom design tokens

As a general rule, when designing for Nyla for the first time, we suggest to try creating some design tokens first and using them on a few sections in order to understand how the process will work for users. 

Design best practices: 

• Create your global typography design tokens first and use those throughout the designs to the greatest extent possible. Make sure to create one type style for each of the global design tokens so the Nyla templates preview works as expected. 
• For custom type styles, we suggest to name those in such a way that would make sense for the user to be able to select them in accordance with the design system you are creating, e.g: 
  • If they are variations on global typography (e.g different font weights, italics etc), it’s helpful to name them as such (Body Regular - Bold, Body Regular - Italics)
  • If they are new type styles, it’s helpful to name them according to their intended usage, or how they relate to the global design tokens you already created (e.g Body Extra Small, Accordion Title, Menu Items)

• If designing in Figma, it is optimal to set one Text Style for every typography design token you include in the design and then reference these as you go designing the site. 
• Reference the same type style on mobile and desktop for the cases where usage is the same
  • It is possible to use different type styles if you want an entirely different look on mobile/desktop, but note that when building, these would be two separate texts that would need to be managed separately by the user. See this video for more information. 
• Ensure you don’t reference desktop styles on mobile and vice versa. Each individual type style should have the appropriate settings for usage on both breakpoints. For example: 
  • If you reference H2 - you should use the mobile setting on mobile and the desktop setting on desktop. You should not use H2 - Desktop on your mobile designs (this would require a new type style with the desktop settings applied to mobile). 

User experience when choosing type styles 

When users use typography design tokens in Nyla, they reference one design token for each usage of typography. The design token applies on both desktop and mobile unless hidden on either breakpoint. 

See this video for an example of how design tokens are applied across breakpoints: 

 

Global vs Custom design tokens: 

When choosing type styles, users choose from a dropdown of options. 

They can choose between Global or custom design tokens: 

Or custom design tokens. These are named manually in the tool: 

When customers preview the Nyla template library, they will see their own global typography design tokens on the preview in order to see the templates on brand for them: 

Global Design Tokens

Global design tokens are the list of design tokens that come loaded in by default with all Nyla sites. They appear in the Global tab under typography design tokens: 

We suggest:

• Designing your global typography design tokens first. 
• Use global type styles throughout your designs to the greatest extent possible.
• We suggest to design type styles for each of the global typography design tokens as a minimum*. 

* This is important because customers see their global typography styles when previewing Nyla templates. Therefore, having global type styles for all typography (even if not used on the site) will mean that templates will appear/be imported on brand when adding from the Nyla library. 

Creating and Naming Custom Design Tokens

You can augment your global design tokens with custom typography when you need to add more variation to your type styles. 

You need to create a custom type style whenever: 

1. You use different styles on one or more breakpoints to those that you already have in your global design tokens
2. You want to use different font settings to those that exist on your Global design tokens

For example: 

• If you want to use your H4 setting on Desktop, but your H4 version on mobile is too big for your use case, this would require a variation.
• You want a bold version of your Body regular
• You want an italic version of your H5

Naming custom design tokens

We suggest to have clear naming for the different variations/additions to your global type styles so that it is clear to people building with the site afterwards how each type style should be used. 

 

Responsive fields on typography: 

Some fields on the typography design token don't allow for different values in mobile and desktop in order to help consistency. Here are some things to consider when designing typography styles: 

• Font: 
  • Each type style references one Font design token on all breakpoints. 
  • This means that the font and font settings you use for one type style should be the same on both mobile and desktop. 
    • For example if your H2 uses Baskerville with weight 400 and style normal, it will use this on both mobile and desktop. 
  • You can use multiple fonts across different type styles, so you can ultimately achieve whatever effects you want. 

• Typography settings:
  • Most settings in typography are responsive, so you can set different values for mobile and desktop for Font Size, Line Height, Letter Spacing, Paragraph Spacing and so on.

• • Text transform is not responsive within each type style
  • Typography has responsive sizes, etc, however if you have two different typography styles for the same text on different breakpoints, this would mean that users need to enter that text twice. See this video for more information.