Oxygen 6: Quick + Easy Fluid Responsive Typography

Also featured on YouTube.

Welcome back to another Oxygen Builder 6 design tutorial. In this video, I’m going to show you how you can make your typography fluid responsive quickly and easily using an online fluid text calculator by Utopia.

Also, just so you know, this method can be applied regardless of the page builder or setup you’re using.

As a quick reminder, I’m currently working on a brand-new Oxygen Builder 6 Design Mastery Course, which we’ll begin rolling out later this summer. You can expect a beginner’s guide (course taster) to be available around early July. If you’re interested, be sure to check out the Oxygen Builder course info page for more details. When the course officially launches, there will be a limited number of spaces available. I’ll share more details as we get closer to the launch date.

OK, let’s continue with this tutorial…

Continue this tutorial by watching the video below:

What is fluid responsive text? (In a nutshell)

Fluid responsive typography is a technique where text size scales smoothly across different screen (viewport) sizes using dynamic CSS values instead of fixed breakpoints.

CSS output

Fluid responsive text based on the input see in the video. Feel free to copy this to add to your CSS framework or stylesheet. Alternatively use the online calculator tool (link below) to create your own and set your own min and max calculations.

:root {
  --text-2xs: clamp(0.5276rem, 0.4361rem + 0.3055vw, 0.7035rem);
  --text-xs: clamp(0.7033rem, 0.5814rem + 0.4073vw, 0.9377rem);
  --text-s: clamp(0.9375rem, 0.775rem + 0.5429vw, 1.25rem);
  --text-m: clamp(1.2497rem, 1.033rem + 0.7237vw, 1.6663rem);
  --text-l: clamp(1.6658rem, 1.377rem + 0.9647vw, 2.2211rem);
  --text-2xl: clamp(2.2206rem, 1.8356rem + 1.2859vw, 2.9607rem);
  --text-3xl: clamp(2.96rem, 2.4468rem + 1.7141vw, 3.9467rem);
  --text-4xl: clamp(3.9457rem, 3.2616rem + 2.2849vw, 5.2609rem);
}

Defining everything in CSS (WPCodeBox)

Now, one thing that was brought to my attention is: what if you’re not using an add-on plugin and don’t have the option to customize headings within Global Styles?

In that case, we can define everything directly in CSS, as shown below.

/* Variables
------*/
:root {
  --text-2xs: clamp(0.5276rem, 0.4361rem + 0.3055vw, 0.7035rem);
  --text-xs: clamp(0.7033rem, 0.5814rem + 0.4073vw, 0.9377rem);
  --text-s: clamp(0.9375rem, 0.775rem + 0.5429vw, 1.25rem);
  --text-m: clamp(1.2497rem, 1.033rem + 0.7237vw, 1.6663rem);
  --text-l: clamp(1.6658rem, 1.377rem + 0.9647vw, 2.2211rem);
  --text-2xl: clamp(2.2206rem, 1.8356rem + 1.2859vw, 2.9607rem);
  --text-3xl: clamp(2.96rem, 2.4468rem + 1.7141vw, 3.9467rem);
  --text-4xl: clamp(3.9457rem, 3.2616rem + 2.2849vw, 5.2609rem);
}

/* CSS
------*/
.hero__heading {font-size: var(--text-4xl);}

h1 {font-size: var(--text-3xl);}
h2 {font-size: var(--text-2xl);}
h3 {font-size: var(--text-l);}
h4 {font-size: var(--text-m);}
h5 {font-size: var(--text-s);}
h6 {font-size: var(--text-xs);}

Resources

1. Online calculator: https://utopia.fyi/type/calculator/
2. Oxygen 6 Blueprint Tutorial
3. Oxygen Builder Design Mastery Course