Using Text Styles

Applying and Creating Styles

By default all text you create is unstyled, meaning you just decide how it looks on the fly by setting font, size and color in the properties panes. To apply a style, select a text element or some text itself and click Text → Styles in the properties panel on the right and select a text style. You can remover any styling by clicking the x in Text → Styles again.

Managing Styles

You can manage your project styles in the left panel under Assets → Styles, You can create as many styles as you like.

Style Rich Text

If you copy and paste from a Notion or Google Docs document, or use the Framer content management system, you will most likely be working with long for content. In this case, you will want to add multiple styles in a single text element for things like title, header and paragraphs.We have optimized text styles specifically for this use case by coupling them to the HTML (e.g. H1, P, A) or Markdown element (#, ##) that is already embedded in your text. Thus, if you use rich text, your default styles will automatically applied—making styling long form content as simple as pasting in your document.If you want to change any of the styles that have been set for you, simply select the text that you want modified inline and set the style.

Note: Because the styles are coupled to html tags, they will automatically be optimized for SEO.

Note: You can also use Markdown style shortcuts when adding text to add headers, like in many other tools. (e.g. Prefixing a new line with # will create a h1 and ## will create a h2).

CMS Text Styles

Styles for content management text elements work very similarly to the workflow above, but for convenience we show all of the styles your text element can use directly in the properties panel. All of the possible styles are listed because the actual used styles depend on the content that’s loaded in from the content management system.

Style Links

You can find Link styles within the Link pop-out. To set a link style, select a text layer, click on the Link row, and click on the "Style" property. Link styles behave the same as the other styles, but comes with two main differences.

• They only contain a subset of overridable options, such as color and decoration. This allows you to use them with any heading or paragraph style without having to set all of the properties all over again.

• They have different states, hover, active and current, which you can style differently.

Override Colors

Sometimes you want to use a text style, but make an exception for a phrase to emphasise it. Instead of creating a separate style, you can override the color for a selection of text inside your style directly from the properties panel.