Fit Text

May 30, 2023

Introducing Fit Text—a new feature allowing you to design text that scales to fit. Design bold headers that resize along with your browser, or any section. Simply create a Text Layer, head over to the Size property and set it to Fit. You can also use Fit Text on multiple lines of text, which you can create by hitting enter when you want your line to break. Define minimum and maximum font sizes by using the Min Width and Max Width properties. This can be done on the Text Layer itself, or any parent layer. Best of all, this feature keeps your sites blazing fast. Framer can render your typography at the right size even before JavaScript runs on your website. No flashes on refresh, and no expensive calculations on resize. We think you’ll love it. You can find a Fit Text demo here. Have fun.

  • Set Size to Auto on any Text Layer

  • Create ranges with min and max width

  • Create multiple lines with line breaks

  • Works with any Custom Web Font

  • Works with Icon and Emoji fonts

  • Smooth and performant resizing

Introducing Fit Text—a new feature allowing you to design text that scales to fit. Design bold headers that resize along with your browser, or any section. Simply create a Text Layer, head over to the Size property and set it to Fit. You can also use Fit Text on multiple lines of text, which you can create by hitting enter when you want your line to break. Define minimum and maximum font sizes by using the Min Width and Max Width properties. This can be done on the Text Layer itself, or any parent layer. Best of all, this feature keeps your sites blazing fast. Framer can render your typography at the right size even before JavaScript runs on your website. No flashes on refresh, and no expensive calculations on resize. We think you’ll love it. You can find a Fit Text demo here. Have fun.

  • Set Size to Auto on any Text Layer

  • Create ranges with min and max width

  • Create multiple lines with line breaks

  • Works with any Custom Web Font

  • Works with Icon and Emoji fonts

  • Smooth and performant resizing

Introducing Fit Text—a new feature allowing you to design text that scales to fit. Design bold headers that resize along with your browser, or any section. Simply create a Text Layer, head over to the Size property and set it to Fit. You can also use Fit Text on multiple lines of text, which you can create by hitting enter when you want your line to break. Define minimum and maximum font sizes by using the Min Width and Max Width properties. This can be done on the Text Layer itself, or any parent layer. Best of all, this feature keeps your sites blazing fast. Framer can render your typography at the right size even before JavaScript runs on your website. No flashes on refresh, and no expensive calculations on resize. We think you’ll love it. You can find a Fit Text demo here. Have fun.

  • Set Size to Auto on any Text Layer

  • Create ranges with min and max width

  • Create multiple lines with line breaks

  • Works with any Custom Web Font

  • Works with Icon and Emoji fonts

  • Smooth and performant resizing