The Key to Achieving Responsive Text in Framer

The Key to Achieving Responsive Text in Framer

New

New

New

  • Tips & tricks

  • Responsive
  • Text
  • Tips & tricks

  • Responsive
  • Text
  • Tips & tricks

  • Responsive
  • Text

The Key to Achieving Responsive Text in Framer

In this Framer tutorial, I'm revealing the new way to handle responsive text that most people don't know about. Forget manually setting sizes for every breakpoint - now you can scale your entire typography system with a single value. You'll learn how to use REM units to create perfectly responsive text that automatically adapts to any screen size.

image of Nandi Muzsik

Posted by

Nandi

Size control UI with dropdown for units: Rem, Px, Fit
Size control UI with dropdown for units: Rem, Px, Fit
Size control UI with dropdown for units: Rem, Px, Fit

Table of contents

The old way: Manually setting sizes for each breakpoint

Before this update, the only way to make text responsive was by manually assigning different font sizes to each breakpoint inside a text style. Let’s say you had an H1 heading. You’d go into your text style settings and define:

The old way: Manually setting sizes for each breakpoint

Before this update, the only way to make text responsive was by manually assigning different font sizes to each breakpoint inside a text style. Let’s say you had an H1 heading. You’d go into your text style settings and define:

The old way: Manually setting sizes for each breakpoint

Before this update, the only way to make text responsive was by manually assigning different font sizes to each breakpoint inside a text style. Let’s say you had an H1 heading. You’d go into your text style settings and define:

The old way of setting breakpoints.

The old way of setting breakpoints.

The old way of setting breakpoints.

  • 48px for desktop

  • 43px for tablet

  • 38px for mobile

  • 48px for desktop

  • 43px for tablet

  • 38px for mobile

  • 48px for desktop

  • 43px for tablet

  • 38px for mobile

Text changing with breakpoints.

Text changing with breakpoints.

Text changing with breakpoints.

Not only did you have to do that every time for every text style, but if you ever wanted to make a global change (like scaling everything down for mobile) you’d have to update each breakpoint individually. And it gets worse.

These breakpoints aren’t linked to your actual responsive canvas settings. So even if you changed your tablet breakpoint from 810px to 600px, your styles wouldn’t reflect that automatically. The breakpoints in the styles are tied to fixed min-width values, which means there’s a disconnect between your layout and your typography.

Also styles only work on static text layers. If you’re using dynamic components like Staggered Cycle to animate words, you can’t apply text styles to them, which means you lose responsiveness altogether unless you manually set the font sizes. That’s a lot of work for something that should be seamless.

The new way: Base font sizes + REM units

Framer’s new method is beautifully simple: you define a base font size at the breakpoint level and then use REM units (like 1rem, 2rem, etc.) for your typography.

Not only did you have to do that every time for every text style, but if you ever wanted to make a global change (like scaling everything down for mobile) you’d have to update each breakpoint individually. And it gets worse.

These breakpoints aren’t linked to your actual responsive canvas settings. So even if you changed your tablet breakpoint from 810px to 600px, your styles wouldn’t reflect that automatically. The breakpoints in the styles are tied to fixed min-width values, which means there’s a disconnect between your layout and your typography.

Also styles only work on static text layers. If you’re using dynamic components like Staggered Cycle to animate words, you can’t apply text styles to them, which means you lose responsiveness altogether unless you manually set the font sizes. That’s a lot of work for something that should be seamless.

The new way: Base font sizes + REM units

Framer’s new method is beautifully simple: you define a base font size at the breakpoint level and then use REM units (like 1rem, 2rem, etc.) for your typography.

Not only did you have to do that every time for every text style, but if you ever wanted to make a global change (like scaling everything down for mobile) you’d have to update each breakpoint individually. And it gets worse.

These breakpoints aren’t linked to your actual responsive canvas settings. So even if you changed your tablet breakpoint from 810px to 600px, your styles wouldn’t reflect that automatically. The breakpoints in the styles are tied to fixed min-width values, which means there’s a disconnect between your layout and your typography.

Also styles only work on static text layers. If you’re using dynamic components like Staggered Cycle to animate words, you can’t apply text styles to them, which means you lose responsiveness altogether unless you manually set the font sizes. That’s a lot of work for something that should be seamless.

The new way: Base font sizes + REM units

Framer’s new method is beautifully simple: you define a base font size at the breakpoint level and then use REM units (like 1rem, 2rem, etc.) for your typography.

Setting REM units.

Setting REM units.

Setting REM units.

Let’s break it down:

  • Set your base font size per breakpoint

    Select your desktop breakpoint and look for the Typography section in the right panel. You’ll now see a Base field, that’s your root font size. For example, set it to 20px on desktop, 18px on tablet, and 16px on mobile.

  • Use REM in your text styles

    Instead of defining your text size in pixels, switch to rem. So your H1 might be 2.4rem, and Body could be 1rem. Since 1rem = your base font size, all your text will scale proportionally when breakpoints change.

  • Apply a layout template

    To keep your base font sizes consistent across pages, set them inside a layout template. Framer lets you create these from the Assets panel under Templates. Define your typography base sizes once in the layout template, and every page that uses it will inherit them automatically.

This means you now have a single point of control for responsive typography. Want all your text a bit larger on mobile? Just increase the mobile base size. Done.

Make it the default

If you’re serious about consistency, start every project by setting up a layout template with your base font sizes. This becomes your foundation, and every page will follow its rules.

It might take two extra minutes up front, but it’ll save you hours in the long run. Responsive text doesn’t have to be a pain. With base font sizes and rem units, Framer has made it dead simple to create typography that scales beautifully across all devices, without the manual labor. Now that you know the key, go update your styles and let Framer do the heavy lifting.

Let’s break it down:

  • Set your base font size per breakpoint

    Select your desktop breakpoint and look for the Typography section in the right panel. You’ll now see a Base field, that’s your root font size. For example, set it to 20px on desktop, 18px on tablet, and 16px on mobile.

  • Use REM in your text styles

    Instead of defining your text size in pixels, switch to rem. So your H1 might be 2.4rem, and Body could be 1rem. Since 1rem = your base font size, all your text will scale proportionally when breakpoints change.

  • Apply a layout template

    To keep your base font sizes consistent across pages, set them inside a layout template. Framer lets you create these from the Assets panel under Templates. Define your typography base sizes once in the layout template, and every page that uses it will inherit them automatically.

This means you now have a single point of control for responsive typography. Want all your text a bit larger on mobile? Just increase the mobile base size. Done.

Make it the default

If you’re serious about consistency, start every project by setting up a layout template with your base font sizes. This becomes your foundation, and every page will follow its rules.

It might take two extra minutes up front, but it’ll save you hours in the long run. Responsive text doesn’t have to be a pain. With base font sizes and rem units, Framer has made it dead simple to create typography that scales beautifully across all devices, without the manual labor. Now that you know the key, go update your styles and let Framer do the heavy lifting.

Let’s break it down:

  • Set your base font size per breakpoint

    Select your desktop breakpoint and look for the Typography section in the right panel. You’ll now see a Base field, that’s your root font size. For example, set it to 20px on desktop, 18px on tablet, and 16px on mobile.

  • Use REM in your text styles

    Instead of defining your text size in pixels, switch to rem. So your H1 might be 2.4rem, and Body could be 1rem. Since 1rem = your base font size, all your text will scale proportionally when breakpoints change.

  • Apply a layout template

    To keep your base font sizes consistent across pages, set them inside a layout template. Framer lets you create these from the Assets panel under Templates. Define your typography base sizes once in the layout template, and every page that uses it will inherit them automatically.

This means you now have a single point of control for responsive typography. Want all your text a bit larger on mobile? Just increase the mobile base size. Done.

Make it the default

If you’re serious about consistency, start every project by setting up a layout template with your base font sizes. This becomes your foundation, and every page will follow its rules.

It might take two extra minutes up front, but it’ll save you hours in the long run. Responsive text doesn’t have to be a pain. With base font sizes and rem units, Framer has made it dead simple to create typography that scales beautifully across all devices, without the manual labor. Now that you know the key, go update your styles and let Framer do the heavy lifting.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More posts

More posts

  • Laptop screen displaying a no-code design tool with interface for creating scroll animations

    How to Play Video on Scroll on Framer Websites

    Guide

    Laptop screen displaying a no-code design tool with interface for creating scroll animations

    How to Play Video on Scroll on Framer Websites

    Guide

    Laptop screen displaying a no-code design tool with interface for creating scroll animations

    How to Play Video on Scroll on Framer Websites

    Guide

  • "Add to calendar" button with calendar icon, hover effect, and cursor pointer on dark background

    How to Create an “Add to Calendar” Button in Framer

    Guide

    "Add to calendar" button with calendar icon, hover effect, and cursor pointer on dark background

    How to Create an “Add to Calendar” Button in Framer

    Guide

    "Add to calendar" button with calendar icon, hover effect, and cursor pointer on dark background

    How to Create an “Add to Calendar” Button in Framer

    Guide

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback