DEV Community

Cover image for Creating a modular typography scale with CSS

Creating a modular typography scale with CSS

Carmen Ansio on January 06, 2024

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...
Collapse
 
txamota profile image
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.

Collapse
 
carmenansio profile image
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!

Collapse
 
txamota profile image
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);
}
Enter fullscreen mode Exit fullscreen mode