Explore

Design system - STEM

Typesystem

When interacting with a digital interface, you will notice a diverse mix of images, visualizations, and graphical elements. However, the majority of the interface is composed of text. As we build user-friendly, cohesive, and visually appealing interfaces through design systems, it is essential to recognize that the effectiveness of text relies on a strong typographic foundation.

Typography is more than just selecting a font—it begins with:

Establishing a base set of font families and weights, along with fallback options.

Defining hierarchy through size, color, line spacing, and responsiveness.

Applying these principles across system components, such as headers, articles, and other UI elements.

Ensuring scalability so custom components built by other teams maintain visual consistency.

By creating a well-structured type system, we enable teams to design clear, readable, and scalable interfaces, ensuring consistency across all digital

Font, font family and weights

In design systems, font choices may vary based on the theme, but most systems begin by selecting a primary serif and/or sans-serif font family. Each font is supported by a sequence of fallback options (e.g., Arial, Times) to ensure compatibility across different platforms and devices. Additionally, many systems include a monospace font specifically for displaying code, even if used internally.

Some design systems function effectively with just two or three font weights, maintaining simplicity and consistency.

At Attentive, we use Euclid Square as our base/primary font, ensuring a modern, clean, and highly readable typographic foundation across our products.

⁠

Type specimens across 3 weights for the font "Euclid square"

Type specimens across 3 weights for the font "Euclid square"

⁠

When downloading a font, it typically comes with predefined usage instructions, including details on line-height, letter-spacing, and size variations for each font weight. While these default values provide a solid starting point, we wanted to tailor them to better fit our design language and system requirements.

Instead of relying solely on the default font metrics, we decided to customize these values, creating new typographic guidelines that aligned with our brand, UI components, and readability needs. This approach allowed us to fine-tune spacing, improve visual hierarchy, and enhance overall user experience within the design system.

How was Type-system at Attentive defined

During the transition from v2 → v3 of our design system (Refer

here⁠

to know about version history), we identified several typographic inconsistencies that needed to be addressed:

Lack of font size consistency – No structured approach for defining font sizes across different components.

Missing line-height calculations – Line-height values were not systematically defined, leading to spacing inconsistencies.

Inadequate responsiveness – To support a responsive design system, the type system needed to be adaptable across three different screen sizes.

Most design systems showcase typography scales as a vertical stack in their documentation. While this is useful, it is not sufficient on its own. A comprehensive typographic system should define:

Body text and heading structures

Consistent color application for text

Scalability across different screen sizes

Detailed spacing rules to maintain readability and clarity

By addressing these gaps, we aimed to build a structured and scalable typography system that ensures visual harmony, adaptability, and consistency across all platforms.

We started solving the issues by following steps :

Step 1 : Defining base font-size

The base font size is the default size used for body text in a document or on a webpage. It serves as the foundation upon which all other font sizes are built, ensuring readability, hierarchy, and a cohesive typographic structure.

For a B2B product, where data-heavy screens are common, the base font size must be carefully chosen to:

Improve readability for large datasets and dense interfaces.

Establish a clear visual hierarchy between different text elements.

Maintain an aesthetic balance across the UI.

To determine the optimal base font size, we:

Created multiple dummy screens representing different screen sizes.

Tested various font sizes across different layouts and data densities.

Analyzed readability and scalability on each screen size.

Finalized a base font size that provides clarity and consistency across all viewports.

This methodical approach ensured that the typography system was both adaptable and user-friendly, catering to the unique demands of enterprise applications.

Font size for diff screen size

Font size for diff screen size

Screen size

Screen name convention

Base font size

1920px * 1080px

16pt

1536px * 864px

14pt

1280px * 720px

12pt

There are no rows in this table

⁠

Step 2 : Defining other font size

Once the base font size was established, the next step was to define other font sizes that would be used across different screen sizes. To achieve this, we explored multiple approaches:

Using a multiplier or ratio

This method involves defining font sizes relative to the base size using a mathematical ratio (e.g., 1.25x, 1.5x).

It ensures scalability and maintains a consistent typographic rhythm across the design system.

Setting custom sizes based on readability

While a ratio-based approach provides structure, some font sizes required manual adjustments based on readability and UI composition.

We tested different sizes directly on-screen, ensuring they worked well in real-world scenarios.

Final Approach

We primarily followed the multiplier method, ensuring a systematic scaling of font sizes.

However, for specific cases, we manually tweaked sizes based on readability needs.

To maintain visual harmony and ease of scaling, all font sizes were set as multiples of 2 (e.g., 12px, 14px, 16px, 18px, etc.).

This structured yet flexible approach allowed us to create a typography system that is scalable, adaptable, and optimized for usability.

Font size for XL

Font size for XL

Font size

Multiplier

Derived size

Final size

Reason

1.13

20.25

1.13

22.5

22.5 was very slightly change and hence we tested out for 24.

1.13

31.5

rounded off

1.13

omitted this becuase this shall never be used. Now we shall go up exponentially

1.13

40.5

1.13

omitted this becuase this shall never be used. Now we shall go up exponentially

1.13

50.63

There are no rows in this table

⁠

Similarly font sizes for other screen size can be defined.

Step 3 : Defining tags

Once the font sizes were finalized, the next step was to define typographic tags such as body, headings, and subheadings. These tags establish a structured text hierarchy across the design system.

To assign the appropriate tags, we followed a dual approach:

Testing for readability

Applied different font sizes to body text and headings on actual UI screens.

Ensured text remains legible across various screen sizes and content densities.

Visual assessment

Evaluated how different font sizes interacted with other UI elements.

Adjusted based on visual balance, spacing, and emphasis required for each tag.

Step 4 : Defining line height

Line height plays a crucial role in readability and visual balance within a typographic system. It determines the vertical spacing between lines of text, ensuring clarity and a comfortable reading experience.

To define the ideal line height, we followed a scalable approach:

Selecting a multiplier

The line height was determined by applying a multiplier to the font size.

Standard multipliers range from 1.2 to 1.5, depending on text density and UI requirements.

Applying the formula

Line Height = Font Size × Multiplier

For example, if the font size is 16px, using a 1.4 multiplier results in a line height of 22.4px (rounded to 22px or 24px for consistency).

This method ensured that text remains readable, well-spaced, and visually structured across different sections of the interface.

Line height for XL

Line height for XL

Font size

Multiplier

Line height (in px)

1.5

There are no rows in this table

⁠

Similarly define it for other screen size as well.

Step 5 : Defining REM

What is REM?

REM (Root EM) is a unit of measurement used in web design and typography that allows for a scalable and flexible typographic system. Instead of defining font sizes in pixels (px), REM units are relative to the root element's font size.

Why use REM?

Ensures scalability - if the root font size changes, all elements using REM units will adjust proportionally.

Provides better accessibility, allowing users to resize text through browser settings.

Creates a more consistent design system across different screen sizes.

Applying REM to our system Taking an example from our XL screen size, where the base font size is 16px:

1 REM = 16px (since the root font size is set to 16px)

If a heading needs a font size of 24px, it would be set as:

24px ÷ 16px = 1.5rem

By defining font sizes in REM, we ensured that the typographic system remains flexible, responsive, and scalable, adapting seamlessly across different screen resolutions.

REM for XL screen

REM for XL screen

Font size

Base font size

REM

1.13

1.25

1.5

1.75

2.5

There are no rows in this table

⁠

Step 6 : Defining letter spacing

Letter spacing, or tracking, influences the readability and visual balance of text by adjusting the spacing between characters.

To define letter spacing systematically, we followed a multiplier-based approach, where the multiplier typically ranges from 5% to 12% of the font size.

Final Approach

We selected 5% as our multiplier for a balanced and readable text layout.

Since our font size is defined in pixels (px), letter spacing is also defined in pixels (px).

Formula: Letter Spacing = Font Size × 0.05

Example: If font size = 16px, then letter spacing = 16 × 0.05 = 0.8px

By keeping letter spacing proportional to font size, we ensured text remains clear, readable, and visually structured across different screen sizes.

Letter spacing for XL

Letter spacing for XL

Font size

Multiplier

Letter spacing (px)

0.05

0.8

0.05

0.9

0.05

1.2

0.05

1.4

0.05

1.6

0.05

2.4

There are no rows in this table

⁠

Letter spacing in figma :

In Figma, letter spacing can be set using two different units:

Pixels (px) – Defines a fixed amount of space between characters, regardless of font size.

Percentage (%) – Defines spacing as a proportion of the font size, making it dynamic and scalable.

Key issue: Inconsistent spacing across units While both units can be used to adjust letter spacing, using the same numerical value but with different unit types (px vs. %) results in noticeable variations in actual spacing. This inconsistency can lead to misalignment and readability issues when applied across different font sizes.

To maintain consistency and scalability, we standardized letter spacing in pixels (px) across our design system, ensuring predictable results across different screen sizes and UI elements.

Mistake

While defining letter spacing, we initially set the values in percentage (%) instead of pixels (px) by mistake. However, after testing, we found that the percentage-based spacing looked better and created a more natural text flow.

Step 7 : Defining letter spacing in pixel

After discovering that percentage-based letter spacing provided a more visually balanced result in Figma, we needed to find a way to translate these values (derived in

table⁠

above) into precise pixel (px) units for development.

Challenge The letter spacing in percentage (%) visually differed from its equivalent pixel (px) value. Simply converting the previously derived pixel values into percentages did not produce the exact same spacing.

Solution: Deriving a formula Through extensive testing and iteration, we developed a formula that accurately converts percentage-based letter spacing into pixel values while maintaining the same visual appearance.

The final formula allowed us to match the exact spacing achieved in Figma’s percentage-based setting with its equivalent pixel value. This ensured that designers and developers saw identical spacing across tools, eliminating inconsistencies.

By documenting and implementing this formula, we established a standardized approach for letter spacing, ensuring pixel-perfect typography across design and code.

Formula achieved was = (fontsize*(letterspacing(as percentage)))

Ex :

Font size : 48px

Line height : 72px

Letter spacing : 2.4px ~2.4% (as percentage was entered instead of pixel)

New letter spacing : (48*(2.4%)) == (48*(2.4/100)) == 1.152px

Letter spacing for XL in pixel

Letter spacing for XL in pixel

Font size

Letter spacing (in pixel but perceived as percentage now)

Final letter spacing (px)

0.8

0.13

0.9

0.16

0.2

1.2

0.29

1.4

0.39

1.6

0.51

0.8

2.4

1.15

There are no rows in this table

⁠

Final type system for XL

XL typesystem

XL typesystem

Font size

Tag

Line height

REM

Letter spacing (px)

Body 1

0.13

Subtitle 1

1.13

0.16

1.25

0.2

1.5

0.29

1.75

0.39

0.51

2.5

0.8

1.15

There are no rows in this table

⁠

Similarly for all other screen size you can define the type-system.

Key learnings

Building a scalable and structured typography system for STEM provided several important insights into typography, responsiveness, and implementation challenges. Here are the key takeaways:

A systematic approach ensures consistency

Defining font sizes, line heights, and letter spacing systematically helped create a cohesive typographic hierarchy.

By using multipliers and ratios, we maintained consistency across different screen sizes without manually adjusting every text element.

Readability and aesthetics must be balanced

While predefined font metrics are useful, customizing line heights and spacing based on real-world UI testing significantly improved readability.

Testing on actual product screens helped us fine-tune spacing and avoid overly compressed or widely spaced text.

Responsiveness requires a scalable type system

A single typography system does not fit all screens—defining adaptive rules for different device sizes was essential.

The base font size, heading scales, and spacing ratios were adjusted for small, medium, and large screens to maintain visual clarity.

Design and development alignment is critical

The accidental use of percentage-based letter spacing in Figma led to a visually better result, but it required conversion into pixel values for CSS.

Establishing a clear mapping of design values to development-friendly units (REM, px, %) ensured a seamless handoff between designers and developers.

By following a structured, iterative approach, we created a scalable, adaptable, and visually optimized typography system for STEM. The process reinforced that typography is not just about selecting fonts—it is about designing for readability, accessibility, and long-term usability across different platforms.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.