Instructions

In this template, the font and space size is controlled by the clamp() CSS function:
clamp(min, val, max)

min – the smallest font size allowed
‍val – the preferred value, which adjusts dynamically as long as it stays within the min and max range
‍max – the largest font size allowed

This function allows the sizes to scale fluidly while staying within defined limits.

In our template, val is calculating with the use of vw (viewport width) unit . Since 100vw equals 100% of the viewport width, using vw for size calculating means that the size will resize dynamically as the window size changes.

The basis for calculating sizes is the minimum and maximum page width. These are set via variables in the Base collection. You probably won’t need to change these values.

Each size category has its own variable collection — Spacing, Heading, and Typography.
‍
Within each of these categories, you’ll find four core numerical variables:
- desktop ratio
- mobile ratio
- desktop size
- mobile size
‍
Mobile size is the smallest base size in the given category (e.g. for spacing, it’s the smallest space-size-1; for heading, it’s the smallest size of h6, etc.). The size is expressed in rem units.

Desktop size is the largest base size in the given category (e.g. for spacing, it’s the largest space-size-1; for heading, it’s the largest size of h6, etc.). The size is expressed in rem units.

Mobile ratio is a coefficient used to multiply the previous (smaller) size in the category. For example, if h6 is 1rem and the mobile ratio is set to 1.17, then h5 will be 1rem * 1.17 (1.17rem), h4 will be 1rem * 1.17 * 1.17 (1.3689rem), and so on.

Desktop ratio is a coefficient used to multiply the previous (larger) size in the category. For example, if h6 is 1rem and the desktop ratio is set to 1.29, then h5 will be 1rem * 1.29 (1.29rem), h4 will be 1rem * 1.29 * 1.29 (1.6641rem), etc.

By adjusting the values of desktop/mobile size and desktop/mobile ratio, you can easily define the base parameters for the category. All sizes will automatically recalculate accordingly, maintaining consistent steps between them while ensuring fluid behavior based on the viewport width.