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