How to ensure consistent font usage in OutSystems by defining typography tokens?

Ensuring Consistent Font Usage in OutSystems by Defining Typography Tokens

 

Ensuring consistent font usage across your OutSystems applications is crucial for maintaining a coherent user interface and user experience. By defining typography tokens, you can centralize your font settings, making it easier to apply and update font styles across different components. This guide provides a comprehensive step-by-step approach to defining typography tokens in OutSystems.

 

Prerequisites

 

• An OutSystems account with access to a project where you wish to implement typography tokens.
• Basic knowledge of CSS and frontend development concepts in OutSystems applications.
• Access to the OutSystems Service Studio for application development.
• An understanding of Style Guide and its purpose within OutSystems.

 

Understanding Typography Tokens

 

• Typography tokens are reusable design elements that store the values of font properties such as font-family, font-size, font-weight, etc.
• These tokens help maintain a consistent look and feel by centralizing font definitions that can be applied across various UI elements.

 

Defining Typography Tokens in Service Studio

 

• Open Service Studio and navigate to your application where you wish to define typography tokens.
• Go to the Data tab, and find the 'Static Entities' section.
• Create a new static entity named TypographyTokens to store your font definitions.
• Add attributes to the TypographyTokens entity for various typography characteristics, such as FontFamily, FontSize, FontWeight, etc.
• Populate the entity with initial values representing your styling requirements for headings, body text, etc.

 

Implementing Typography Styles in Your Application

 

• Navigate to the Interface tab in Service Studio and open the Style Guide.
• Identify the styles that need to reflect changes based on typography tokens. These will typically include general styles like headings, body text, etc.
• For each style, use expressions to dynamically apply values from your TypographyTokens entity to your CSS styles.
• For instance, define a CSS class for headings and link its properties to typography tokens using expressions such as `font-family: GetToken(HeadingFontFamily)`.
• To apply these styles, ensure that the corresponding containers, text widgets, and other elements use the defined classes.

 

Updating and Maintaining Typography Tokens

 

• To change the typography across the entire application, simply update the values within the TypographyTokens static entity.
• Re-publish the application to apply the new font settings globally.
• Always keep track of the tokens you have defined and ensure they are consistently used in queries and expressions across your application interface.

 

Testing Typography Token Implementation

 

• Use the Preview feature in Service Studio to test how typography styles are applied across your application.
• Ensure that all text elements match the defined typography styles and that style consistency is maintained throughout the application.
• Make adjustments as necessary, especially when introducing new typography tokens or modifying existing ones.

 

Deploying Your App with Consistent Typography

 

• Once you've verified the typography token implementation through testing, deploy your application.
• Monitor for any issues related to typography inconsistency and make necessary adjustments within the typography tokens.
• Periodically update typography tokens as part of design refresh efforts or when introducing new UI components.

 

By integrating typography tokens in your OutSystems applications, you effectively streamline the management of font styles, ensuring a uniform appearance across diverse components and screens. This practice not only simplifies UI maintenance but also enhances user experience by providing a cohesive visual identity.