Typography Variables for Commerce Websites in NetSuite

TL;DR Opening

Commerce websites in NetSuite leverage intuitive typography variables for effective font management. These variables allow developers to maintain a consistent font sizing approach, enhancing both readability and design flexibility.

What Are Sass Typography Variables?

Sass typography variables in Commerce websites are defined using a straightforward, human-readable format that ranges from extra small (xs) to triple extra large (xxxl). This method allows developers to easily reference different font sizes relative to a predetermined base font size, denoted as $sc-font-size-base.

How Are Typography Variables Structured?

Typography variables encompass sizes defined in rem units, which correspond to the base font size expressed in pixels. This indirect approach allows for scalable designs that adjust based on the end user's browser settings.

For instance, in the Sass file BaseSassStyles/Sass/variables/_typography.scss, the variable for medium font size ($sc-font-size-m) is set as follows:

1//...
2$sc-font-size-base: 15px;
3$sc-font-size-xxs: 0.75rem;
4$sc-font-size-xs: 0.87rem;
5$sc-font-size-s: 0.93rem;
6$sc-font-size-m: 1rem;
7$sc-font-size-l: 1.067rem;
8$sc-font-size-xl: 1.2rem;
9$sc-font-size-xxl: 1.47rem;
10$sc-font-size-xxxl: 1.73rem;
11//...

In this example:

• $sc-font-size-m corresponds to a 1rem size (equal to 15 pixels), while $sc-font-size-l is approximately 16 pixels, calculated as 1.067 x 15 pixels.
• Larger sizes, such as $sc-font-size-xxxl, can reach about 26 pixels, ensuring ample choice for varied design needs without compromising flexibility and maintainability.

Why It Matters for Developers

Utilizing these defined typography variables enhances the workflow for developers when creating and maintaining Commerce websites. It enables them to implement consistent typography styles efficiently, ensuring that content is not only visually appealing but also adaptable to a wide range of devices and user preferences.

Best Practices for Using Typography Variables

• Consistency: Leverage typography variables across your designs for uniformity.
• Scalability: Use rem units to allow for scalable font size adjustments based on user preferences.
• Readability: Ensure that all font sizes maintain a balance between aesthetics and legibility, especially on mobile devices.

Summary

Incorporating typography variables into your design system not only offers clarity in size definitions but also aligns with best practices in web development by promoting scalability and readability. By adhering to a base font size system, developers can create a cohesive user experience across different Commerce platforms.

Key Takeaways

• Commerce websites use user-friendly typography variables to streamline font management.
• Font sizes are defined in rem units, allowing for scalable design.
• Consistent application of these variables enhances readability and uniformity.

Source: This article is based on Oracle's official NetSuite documentation.