Responsive Type — Create responsive typography using REM

Why Typography Needs an Upgrade

If you’re still manually setting font sizes for desktop, tablet, and mobile in Framer — for example, 48px here, 38px there — you’re doing too much. Not only is it time-consuming, but it also creates inconsistencies, especially when you want to make global changes or apply styles to dynamic text components.

There’s a cleaner way to manage it all: using rem units tied to base font sizes in your text styles.

What Are rem Units?

In Framer (and CSS), 1rem equals the root (base) font size.

If your base size is 16px, then:

• 1rem = 16px

• 2rem = 32px

• 3rem = 48px

When you update the base size, all text using rem units adjusts proportionally. This makes your typography more scalable, more consistent, and much easier to maintain.

Step-by-Step: Set Up Responsive Typography with rem

1. Define Base Font Sizes per Breakpoint

Go to your layout template in Framer and define the base font sizes for each breakpoint. I typically use 16px as a base.

You only need to do this once in your template

2. Use rem in Your Text Styles

Instead of assigning pixel values like 48px to your H1, use rem units. If you already have a value in px, just change the unit to Rem and it will auto-convert.

Now, your text styles will adapt based on the base font size at each breakpoint.

3. Apply a Layout Template to All Pages

To keep everything consistent, use a layout template across your Framer project:

Click on your Desktop Breakpoint → And assign your template → Apply this layout to every page

Why This Is Game-Changer

You’ll never have to manually adjust every text style per breakpoint again. Global updates become instant.

Want your mobile typography slightly larger? Just bump up the mobile base size in the text style and all your styles will update automatically!