In UI development, creating font sizes that are adaptable to different devices and screen sizes is essential. The CSS clamp() function provides a great solution for this. In this post, we'll explain how to create dynamic font sizes using the clamp() function with atomic classes and how to reduce code repetition within a design system, ensuring that the font sizes are responsive and flexible.

What is clamp()?

The clamp() function accepts three parameters:

font-size: clamp(minimum, preferred, maximum);

• Minimum Value: The smallest font size.
• Preferred Value: A dynamic font size based on the viewport width (typically expressed in vw).
• Minimum Value: The largest font size.

Example usage:

font-size: clamp(16px, 2.5vw, 24px);

In this example:

• Minimum Value: The font size cannot go below 16px.
• Preferred Value: The font size will adjust dynamically based on the viewport width, being 2.5% of the viewport width 2.5vw).
• Minimum Value: The font size cannot exceed 24px.

This makes the font size flexible and responsive to the screen size.

Let’s explore how to use the clamp() function more effectively in SASS.

Step 1: Default Preferred Value

In this step, we define a default preferred value. If no preferred value is provided for a specific font size, the default value will be used.

$default-preferred-value: "10vw";

The preferred value affects the font size dynamically based on the viewport width. For instance, 10vw means the font size will be 10% of the viewport width.

If a specific font size does not include a preferred value, the default value will be used, ensuring that the font size is dynamically adjusted based on the screen size.

Step 2: Font Sizes Array

We define font sizes with their minimum, maximum, and optionally a preferred value. If no preferred value is provided, the default value will be used.

$required-sizes: (
  (12, 24, "8vw"),  // Minimum, Maximum, Preferred
  (16, 32),         // Preferred Value Not Provided, Default Will Be Used
  (8, 48, "7vw"),   // Custom Preferred Value
  (1, 32),          // Preferred Value Not Provided, Default Will Be Used
);

Each item in the array consists of:

• Minimum Value: The smallest font size.
• Maximum Value: The largest font size.
• Preferred Value: A dynamic value based on the screen width. If not provided, the default value $default-preferred-value will be used.

Step 3: Generating Dynamic Classes

Next, we generate dynamic classes for each font size using SASS. These classes will use the clamp() function to set the font sizes based on the defined minimum, maximum, and preferred values.

@each $size in $required-sizes {
  $min: nth($size, 1); // Get the minimum font size
  $max: nth($size, 2); // Get the maximum font size
  $preferred: if(length($size) > 2, nth($size, 3), $default-preferred-value); // Use default if no preferred value

  // Create dynamic class name
  .fs-#{nth($size, 1)}-#{nth($size, 2)} {
    font-size: clamp(#{$min}px, #{$preferred}, #{$max}px);
  }
}

Output When the SASS code is compiled, it generates the following CSS classes:

.fs-12-24 {
  font-size: clamp(12px, 8vw, 24px);
}

.fs-16-32 {
  font-size: clamp(16px, 10vw, 32px);
}

.fs-8-48 {
  font-size: clamp(8px, 7vw, 48px);
}

.fs-1-32 {
  font-size: clamp(1px, 10vw, 32px);
}

These classes ensure that the font sizes are dynamically adjusted based on the screen width using the clamp() function. Each class corresponds to a specific font size range, making your design more flexible and responsive across different screen sizes.

Full example

Reducing Code Repetition and Sustainability

This approach reduces code repetition and provides a more sustainable solution. By defining a single array of font sizes, you can dynamically process and generate the appropriate classes. This avoids the need to manually write out each font size and its associated properties, making it much faster to implement new font sizes.

• Dynamic Solution: The font size is automatically adjusted based on the screen size, ensuring a flexible and responsive design.
• Reducing Code Repetition: With SASS loops, font sizes are defined once and dynamic classes are generated automatically, resulting in cleaner, more maintainable code.

Conclusion

The CSS clamp() function is a powerful tool for creating dynamic and responsive font sizes. By using SASS to generate dynamic classes, we can reduce code repetition and create a more sustainable solution. This method ensures that font sizes are adaptable to different screen sizes and devices, making the design consistent and readable on all platforms.