Dynamic text sizes and why we moved away from it

With "Fluid typography," we can scale the text size gradually between a minimum and maximum width, instead of having an abrupt scaling at a specific breakpoint. The linear function approaches the desired size evenly across the screen width.

The text sizes increase gradually from a viewport width of 320px until it reaches the maximum width of the viewport, which is set to 1360px. A text of 16px will, for example, increase to 18px on the largest viewport.

Advantages

• You don't have to think about breakpoints; the size of the font is automatically adjusted to the screen.
• When sizes aren't adjusted at specific breakpoints, we avoid piecemeal and sudden upscaling.

Disadvantages

• Half pixels. Figma rounds down. Some browsers round up, others down. This means things don't look the same in Figma and in the browser.
• You may feel you have less control.
• In Figma, this size change can only happen using the "Token Studio" plugin when you have activated the desired viewport for your frame.
• It's not a given that a product will build its product using dynamic typography. If someone adds modules from Designsystemet to their own interface, it won't match their scaling.

Based on the disadvantages this caused, we chose to go with a static typography scale as the standard for Designsystemet.

Do you need dynamic typography?

If you need to use dynamic typography, please create a feature request, and we can consider the possibility of activating "Fluid" as a separate set.

The sizes used in the dynamic scale were generated using the Fluid Typescale Generator

To see the correct text sizes in Figma, we were dependent on having the Tokens Studio for Figma plugin installed and using it to activate the correct viewport. The video below shows how the plugin was used to get the correct text sizes for different viewports.