Designing Modular Typography

If you don’t work in the world of design, you might not know that typography is a vital aspect of any project. The way you use typography can make or break a design, and it can affect how your audience perceives your message. It is important to have a consistent typography design throughout a project to ensure that it is cohesive and visually appealing. One way to achieve this is by using modular type scales.

Modular type scales provide a structured way to determine font sizes while creating a website. By using a particular ratio, we can easily adjust and scale our type sizes to keep our design elements harmonious. Instead of randomly selecting font sizes, this technique provides a systematic approach to make sure everything looks consistent.

Setting Up

Creating a modular type scale with CSS variables is straightforward. First, we define the base font size. From there, we can use ratios to calculate the other font sizes in the modular scale. Finally, we define CSS variables for each of the font sizes, and these can be reused throughout our code.

.user-css {
   --base-size: 1em; / * Base font size * /
   --ratio: 1.333; / * Chosen ratio * /
 }

Here, --font-size represents the base font size (16px/1em by default), and --ratio determines the ratio between each font size in the scale. There are many ratios that are typically used in modern typography, and this table displays the most common. You can see these ratios in action at typescale.com. This method essentially turns their type scales into variable systems.

1.067	Minor Second
1.125	Major Second
1.200	Minor Third
1.250	Major Third
1.333	Perfect Fourth
1.414	Augmented Fourth
1.500	Perfect Fifth
1.600	Minor Sixth
1.618	Golden Ratio

Creating the Scale

Now that we have our CSS variables in place, we can define the font sizes for different elements. For World Anvil, let's create h1 through h6, progressively increasing based on the chosen ratio:

.user-css {
 --base-size: 1em;
 --ratio: 1.333;


 / * Calculate values * /
 --h6: calc(var(--base-size) * var(--ratio)) ;
 --h5: calc(var(--h6) * var(--ratio)) ;
 --h4: calc(var(--h5) * var(--ratio)) ;
 --h3: calc(var(--h4) * var(--ratio)) ;
 --h2: calc(var(--h3) * var(--ratio)) ;
 --h1: calc(var(--h2) * var(--ratio)) ;
}

This code determines the font size by multiplying the size of the previous level by the given ratio.

Applying the Scale

To apply the modular type scale, use the defined CSS variables in your style rules. Here's an example for the p, h6, h5, h4, h3, h2, and h1 elements:

p{font-size:var(--base-size)}
h6{font-size:var(--h6)}
h5{font-size:var(--h5)}
h4{font-size:var(--h4)}
h3{font-size:var(--h3)}
h2{font-size:var(--h2)}
h1{font-size:var(--h1)}

By using these CSS rules, you ensure that the font sizes of different elements follow the modular type scale you've defined. The p element will have the base font size, while each heading level will increase in size according to the chosen ratio.

Advanced: Expanding the Scale

One of the advantages of CSS variables is their flexibility. You can easily expand your modular type scale by adding more ratio variables. Let's consider an additional ratio, the Augmented Fourth ratio (1.414), and incorporate it into our scale:

.user-css {
 --base-size: 1em;
 --ratio: 1.333;
 --ratio-alt: 1.414; / * Augmented Fourth ratio * /


 / * Calculate values * /
 --h6: calc(var(--base-size) * var(--ratio)) ;
 --h5: calc(var(--h6) * var(--ratio)) ;
 --h4: calc(var(--h5) * var(--ratio)) ;
 --h3: calc(var(--h4) * var(--ratio)) ;
 --h2: calc(var(--h3) * var(--ratio)) ;
 --h1: calc(var(--h2) * var(--ratio)) ;
}

In this example, we've introduced --ratio-alt as the new ratio. Now, to switch to the Augmented Fourth for larger screens, we can add a media query.

@media (min-width: 40em
 .user-css {
  --ratio: var(--ratio-alt) ;
 }
}

Last Thoughts

Designing typography for your world doesn't have to be intimidating, even if you're not familiar with CSS. By leveraging ratios and CSS variables, you can create a consistent and visually pleasing hierarchy of font sizes with ease. Remember to define your base font size and ratio using CSS variables, calculate the font sizes based on the chosen ratio, and apply them to your BBCode elements using the font-size property. With this approach, you'll be well on your way to crafting beautiful and readable typography.

Table of Contents

Useful Sites

typescale.com
modularscale.com