📅 April 22, 2022

Fluid Typography in Oxygen Builder

Today we'll be looking at how to achieve truly fluid typography in Oxygen using the CSS clamp() function. It's actually pretty simple and straightforward despite not being something that Oxygen includes by default as a feature in their builder.

Here's a look at how we'll be using our clamp function:

@media (max-width: breakpoint) {
  h1 { font-size: clamp(min, preferred, max); }

The first step is to determine your default heading sizes as well as the size of your largest viewport breakpoint. In our case, this is 72 pixels for the headings with a 1120px breakpoint. From there, you can calculate your responsive size in vw by dividing. 72/1120 gives us a viewport width of 6.42. Now it's just a simple media query to set our responsive sizes!

@media (max-width: 1120px) {
  h1 { font-size: clamp(24px, 6.42vw, 72px); }

Update May 6th, 2022:

Now, for us to achieve truly fluid typography, we really should be using a relative font size unit like REM. The reason for this is mostly due to accessibility issues. The last thing we want is for someone to come along to our site and try to increase the font size, and have our website not respect that request.

For this to work, we'd have to change our code to something like this:

@media (max-width: 1120px) {
  h1 { font-size: clamp(1.2rem, 6.42vw, 4rem); }

The values in the code above are arbitrary, and unfortunately, there is no way to calculate a VW size BASED on the REM value, so even using the above code you will notice a jump in font size at your breakpoint if the user has changed the base sizing. At the very least, however, you'll still be allowing your users to change the size if they need to!