Creating a modular typography scale with CSS

Typography is a crucial aspect of web design that greatly impacts the readability and aesthetics of a website. In this article, we will explore how to create a modular typography scale using CSS. We will cover the use of custom properties, responsive fonts, and delve into the theory of vertical rhythm.

---

Custom Properties for Typography

CSS custom properties, also known as CSS variables, allow us to define reusable values that can be used throughout our stylesheets. They provide a convenient way to create a modular typography scale.

To start, let's define our base font size using a custom property:

:root {
  --base-font-size: 16px;
}

We can then use this custom property to calculate the font sizes for different elements in our typography scale. For example, if we want to create a heading style, we can define the font size relative to the base font size:

h1 {
  font-size: clamp(
    calc(var(--base-font-size) * 1.5),
    2rem,
    3rem
  );
}

h2 {
  font-size: clamp(
    calc(var(--base-font-size) * 1.2),
    1.5rem,
    2.5rem
  );
}

h3 {
  font-size: clamp(
    var(--base-font-size),
    1rem,
    2rem
  );
}

By using the clamp function, we can set a range of acceptable font sizes for each heading element. The clamp function takes three arguments: the minimum font size, the preferred font size, and the maximum font size. This ensures that the font sizes scale responsively while staying within the specified range.

 

Responsive Fonts

With the increasing variety of devices and screen sizes, it is essential to ensure that our typography is responsive. Responsive fonts adapt to different screen sizes, providing optimal readability and user experience.

One approach to achieving responsive fonts is by using the vw unit, which represents a percentage of the viewport width. We can combine this unit with media queries to define different font sizes for different screen sizes.

h1 {
  font-size: clamp(
    calc(var(--base-font-size) * 1.5),
    2rem,
    3rem
  );
}

@media (max-width: 768px) {
  h1 {
    font-size: clamp(
      calc(var(--base-font-size) * 1.2),
      1.5rem,
      2.5rem
    );
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: clamp(
      var(--base-font-size),
      1rem,
      2rem
    );
  }
}

In the example above, the font size for h1 will be reduced as the viewport width decreases, ensuring that the text remains readable on smaller screens.

 

Vertical Rhythm

Vertical rhythm is a design principle that focuses on maintaining consistent spacing between elements vertically. It helps create a harmonious and visually pleasing layout.

To achieve vertical rhythm, we can use the line-height property to set the height of each line of text. The ideal line height is typically around 1.5 times the font size.

body {
  font-size: var(--base-font-size);
  line-height: clamp(
    calc(var(--base-font-size) * 1.5),
    2rem,
    3rem
  );
}

By setting the line height relative to the base font size using the clamp function, we ensure that the spacing between lines remains consistent throughout the typography scale.

 

Custom Properties for a Modular Typography Scale with Clamp
Incorporating the clamp function into our modular typography scale enhances responsiveness and scalability. The clamp function allows us to define a minimum, preferred, and maximum font size, ensuring that our typography adapts gracefully across different devices.

 

Defining the Scale with Clamp

We'll redefine our custom properties using clamp to provide more flexibility and responsiveness:

:root {
  --scale-ratio: 1.333; /* Example: Major Third (1.333) */
  --font-size-1: clamp(14px, 1rem, 16px); /* Adjust min, preferred, and max values as needed */
  --font-size-2: clamp(18px, calc(var(--font-size-1) * var(--scale-ratio)), 20px);
  --font-size-3: clamp(24px, calc(var(--font-size-2) * var(--scale-ratio)), 28px);
  --font-size-4: clamp(32px, calc(var(--font-size-3) * var(--scale-ratio)), 36px);
  --font-size-5: clamp(42px, calc(var(--font-size-4) * var(--scale-ratio)), 48px);
  /* Continue adding levels as needed */
}

Applying the Scale with Clamp
Now, let's apply these clamped font sizes to our elements:

h1 {
  font-size: var(--font-size-5);
}

h2 {
  font-size: var(--font-size-4);
}

h3 {
  font-size: var(--font-size-3);
}

p, li, a {
  font-size: var(--font-size-1); /* Base font size for regular text */
}

 

Responsive Adjustments with Clamp

The beauty of using clamp is that it reduces the need for extensive media queries. However, you can still make adjustments for specific cases if needed:

@media (max-width: 768px) {
  :root {
    --font-size-5: clamp(38px, calc(var(--font-size-4) * 0.8), 44px);
    --font-size-4: clamp(30px, calc(var(--font-size-3) * 0.8), 34px);
    /* Adjust other sizes as needed */
  }
}

 

Conclusion

Creating a modular typography scale with CSS allows us to maintain consistency and flexibility in our web designs. By using custom properties, responsive fonts, and considering vertical rhythm, we can achieve a visually appealing and readable typographic system.

 

By integrating the clamp function into our modular typography scale, we achieve a more responsive and adaptable typographic system. This approach ensures that our text sizes are flexible and appropriate for various screen sizes, enhancing the overall user experience.

Experiment with different minimum, preferred, and maximum values in the clamp function to tailor the typography to your specific design needs. Happy coding!

Comments

[Raúl]

As the measure unit of the preferred font-size isn't relative to the screen size, won't be the font-size always the preferred size? In fact, I think the way you define the font-size is not coherent with your previous post Responsive fonts in CSS.

[Carmen Ansio]

Hey there! Thanks for your comment. I'm really glad you picked up on the details in my articles, and I'd love to shed some light on the approach of each one.

In my first article about responsive fonts with clamp() and custom properties, I used vw units for the preferred font size. This technique is awesome for achieving typography that adjusts beautifully to screen size, keeping readability across different devices.

In the second article, where I talk about creating a modular typography scale, I went for a fixed base font size. Here, the idea was more about maintaining a typographic hierarchy and consistency, which is super important for a well-balanced design look.

I get that they might seem like different approaches, but actually, they complement each other depending on what you need in your design. Sometimes, I mix both methods: using relative units for parts of the design that need more flexibility, and fixed sizes to keep consistency in other areas. It's all about finding that perfect balance for your project.

Hope this clears things up a bit. Typography in web design is a fascinating world, and there's always new ways to explore it!

[Raúl]

Thanks for your answer. Just to understand how the clamp() function works, if we remove it from your example, would we get the same result? I mean, would we get the same result with the following CSS:

:root {
  --scale-ratio: 1.333; /* Example: Major Third (1.333) */
  --font-size-1: 1rem;
  --font-size-2: calc(var(--font-size-1) * var(--scale-ratio);
  --font-size-3: calc(var(--font-size-2) * var(--scale-ratio);
  --font-size-4: calc(var(--font-size-3) * var(--scale-ratio);
  --font-size-5: calc(var(--font-size-4) * var(--scale-ratio);
}