Feb 8, 2024
Madhuri Maram
Text styles in Framer are predefined sets of typographic attributes that you can apply to text elements within your projects. They help maintain consistency across your design and can be easily updated globally.
What can Text styles help you with?
Here's what you need to know about text styles in Framer:
Predefined Styles: Framer has predefined text styles such as H1, H2, H3, and with a recent update, they have added H4, H5, and H6 support. You can choose to use them or keep your projects clean by only using the styles you need.
Automatic Addition: When using headings in the CMS, Framer will automatically add a matching text style, which simplifies the process of content creation and structuring.
Customization: While Framer allows you to create and apply text styles, it currently does not support applying multiple text styles within the same text box. If you need different styles within a single text box, you would have to break away from the style and set it manually.
Accessibility: When creating text styles, they are automatically assigned appropriate semantic tags like h1, h2, h3, or p, but you can override these tags using the accessibility panel.
Applying and creating styles
By default, all text is unstyled. To apply a style, select a text element or specific text and click Text → Styles in the properties panel. You can remove styling by clicking the × in the property panel.
Managing styles
Manage project styles in the left panel under Assets → Styles. Create as many styles as needed.
Link styles
Link styles can be accessed in the Link pop-out. To apply a link style, select a text layer, go to the Link row, and modify the "Style" property. Link styles offer a range of options and vary in states (hover, active, and current).
