Explore text properties

Who can use this feature

Supported on any team or plan

Anyone with can edit access to a file can apply and adjust text properties.

Text properties allow you to control everything from the appearance and position of text, to resizing behavior and OpenType features.

In this article, we'll take you through all the properties available for text. As there are a number of properties available, we've grouped them by location in this article, followed by sections with additional details. 

Access text properties

Text properties can be found in the right sidebar and in the type settings panel. 

Right sidebar

Apply and adjust text properties in the Text section of the right sidebar.

Use the annotated image below to identify each property in the properties panel. Click the link to learn more about each property.

1. Click the icon to view, create and apply text styles
2. Click the font name to browse a list of web, local, and shared fonts to find a typeface or font family
3. Use the arrow to select a font weight or style.
4. Use the arrow to adjust the size of your text
5. Adjust the vertical distance between lines of text using the line height field.
6. Adjust the horizontal distance between letters with letter spacing
7. Adjust the vertical distance between paragraphs with paragraph spacing.
8. Select how text overflows or wraps with resizing behavior.
9. Adjust the horizontal alignment of text within the text box.
10. Adjust the vertical alignment of text within the text box.
11. Click to open the type settings panel and explore more text properties.

Type settings panel

The Type settings panel gives you access to additional text properties and OpenType features.

To open the type settings panel, click the three dots in the bottom-right corner of the Text section.

1. See a preview of any text properties
2. Basics tab
3. Choose how you want your text to horizontally resize
4. Adjust the horizontal alignment of text
5. Apply decoration to text, like strikethrough and underline
6. Adjust the letter case. Choose from uppercase, lowercase, capitalize, and small caps.
7. Change the spacing between paragraphs of text
8. Create numbered or bulleted lists →
9. Truncate text to hide overflow content
10. Set max lines to determine when text truncation happens
11. Toggle vertical trim
12. Details tab
13. Adjust indentation settings. Offset the first line of text with paragraph indentation. You can also toggle hanging quotes and hanging lists.
14. Adjust the letter case. Choose from uppercase, lowercase, capitalize, and small caps. If available, you can also toggle case-sensitive forms and capital spacing. 
15. Apply any number settings, such as style, position (superscript and subscript), fractions, and more.
16. Access any OpenType features, like letter forms, stylistic sets, character variants, horizontal spacing, and more
17. Click to close the type settings panel.
18. Variable tab (available for variable fonts only). Adjust a font's variable axes settings.

Preview

Use the preview at the top of the type details panel to see how a particular property or OpenType feature looks. Hover over any feature or property to see the preview.

Figma will display sample text that best suits the feature you're previewing. This includes:

• Blocks of text for alignment, spacing, and indentation.
• Numerals for number properties.
• Letters (or combinations of letters) affected by ligatures or stylistic alternatives.

Font family, weight, size

Font family

There are a few terms associated with a font:

• A typeface is a set of letterforms and glyphs with similar design features.
• A font is a file containing the visual details that make up the design of each glyph or letter in that typeface.
• A font family is the collection of styles that make up a typeface. For example: Helvetica, Times New Roman, and Roboto are all font families.

Figma will use Inter as the default font for new text layers in a session. You can select another font family using the font picker. Click the arrow to explore styles for the selected font.

Font weight

A typeface can have any number of styles or weights. Every font family will come with its own selection of styles. For example, a few font weights from the Inter font family include thin, light, regular, medium, bold, black, and more.

You can access weights once you select the font family. Adjust the font-weight using the field directly below the font family.

• Click the arrow to explore styles for the selected font.
• Use the keyboard shortcuts to increase and decrease the font-weight.
  • Mac: Hold down ⌥ Option ⌘ Command and < to increase or > to decrease.
  • Windows: Hold down Ctrl Alt and < to increase or > to decrease.

Font size

Font size controls the scale of your text. Figma represents font size in density-independent pixels.

Adjust the font size using the field next to the font style. There are a few ways to adjust font size:

• Click the arrow to select a default font size.
• Enter your own number in the field.
• Use the keyboard shortcuts:
  • Mac: Hold down Shift ⌘ Command and < to increase or > to decrease.
  • Windows: Hold down Ctrl Shift and < to increase or > to decrease.

Alignment

Horizontal alignment

Alignment determines how we distribute text within its bounding box. Horizontal alignment defines how you align the text along the x axis (horizontal).

Left-aligned text is commonly used for paragraph text. Whereas center-aligned text is often used for shorter lines of text, like headings.

Use the icons to select the horizontal alignment. Choose from:

• Left
• Center
• Right
• Justify*

Vertical alignment

Alignment determines how we distribute text within its bounding box. Vertical alignment aligns text along the y axis (vertical).

Use the alignment icons to select a vertical alignment. Choose from:

• Top
• Middle
• Bottom

Decoration

Apply text decoration to an entire text layer, or to selected text. You have two types of decoration available:

• Strikethrough
• Underline

Strikethrough

Strikethrough adds a horizontal line through the center of your text.

Use strikethrough to indicate obsolete or inaccurate information. This allows you to convey its state, without redacting or obscuring the original text.

Click the icon to apply strikethrough to selected text.

Underline

Underline adds a horizontal line along the baseline of your text. Use underline to place emphasis on a particular section of the text, or show that it includes a link.

Underlining links is considered good practice in web design. If applied consistently, this can help to improve the accessibility of your design.

Click the icon to apply underline to selected text.

Letter case

Letter case allows you to change the case of selected text. This is super handy when you want to switch between cases without having to delete and retype your text. Choose from:

• Uppercase: transforms text to UPPER CASE
• Lowercase: transforms text to lower case
• Capitalize: transforms the first character of every word to upper case. You may know this asTitle case.
• Small Caps: transform text to SMALL CAPS. This displays uppercase letters inline with lowercase letters. While this looks like an UPPERCASE transformation, it's a little different. Small Caps characters usually have different proportions (for example, weight or aspect ratio).

Lists

Lists are a great way to organize and emphasize related information. List items in Figma can either be ordered or unordered in the form of a numbered or bulleted list.

Learn more about creating bulleted or numbered lists →

Numbers

The number section includes any properties or features for numerical figures. The properties in this section will depend on the font family you are using.

Style

Style options include proportional figures and monospace figures. Proportional figures have varying spacing depending on the width of the character being used. Monospace figures, also known as tabular figures, have the same width regardless of the character being used.

Both figures are offered in uppercase (also called lining style) or lowercase (also called old-style).

• Proportional uppercase/lining
• Proportional lowercase/old-style
• Monospace uppercase/lining
• Monospace lowercase/old-style

Position (subscript and superscript)

Use subscript or superscript to offset the position of numbers and characters.

Subscript characters are positioned below the line the type. Superscript characters are positioned above the line of type. Both default to a smaller size than the rest of the text.

Fractions

Create fractions from numbers. Enter a fraction as X/X and click the to turn it into a fraction.

Slashed zero

Use slashed zero to display the zero integer with a slash through it. This is another way to distinguish it from the letter O.

OpenType features

OpenType can refer to a format or a set of features or functions available in a font. In this article, we're referring to OpenType features.

Figma supports OpenType features across all fonts. Not all fonts support the same OpenType features.

Supported features include letterforms, stylistic sets, character variants, horizontal spacing, and more.

Learn more about OpenType features →

Resizing

The resizing property controls how a text layer shrinks or grows to accommodate its contents. There are several settings available:

• Auto width
• Auto height
• Fixed size

Auto width

With auto width , the width of the text layer grows so that all its contents fit within the layer's bounds. Figma will create new lines of text when you use the Return or Enter key.

Auto height

With auto height , the text layer grows to fit its contents. Figma will wrap any lines that extend beyond the original width of the text layer to a new line.

Fixed size

With fixed size , both the width and height of the text layer will stay the same, regardless of the layer's contents. Figma will wrap any additional text that extends beyond the layer's horizontal bounds. Text can still extend beyond the text layer's vertical bounds without clipping. This can make aligning this with other layers difficult.

Spacing and formatting

Letter spacing

Letter spacing lets you define the space between characters in a word, line, or paragraph. This can determine how easy your text is to read.

This is not to be confused with kerning, which refers to the process of adjusting space between individual characters in a typeface.

Adjust the letter spacing for an entire text layer, or a selection of text. To replicate kerning, place the cursor between two letters and adjust the letter spacing.

Use the field to adjust letter spacing for your selection, or use the keyboard shortcuts:

• Mac: Hold down ⌥ Option and < to increase or > to decrease.
• Windows: Hold down Alt and < to increase or > to decrease.

If you select text with different letter spacing values, Figma will scale the letter spacing proportionally.

Line height

Line height allows you to control the vertical distance between lines of text in a paragraph. This can help to balance designs and improve the readability of your copy. This is the same as line spacing.

Small line heights can make text difficult to read. Large line heights can make text look messy and disjointed.

Use the field to adjust the vertical space between lines of text, or use the keyboard shortcuts:

• Mac: Hold down ⇧ Shift ⌥ Option and < to increase or > to decrease.
• Windows: Hold down Alt Shift and < to increase or > to decrease.

Figma allows you to set a fixed line height in pixels (px) or a line height that's a percentage of the font size (%).

Figma uses a font's intrinsic line height as the default value(Auto), which varies between typefaces. You can switch between fixed and percentage line heights and Figma will convert the value for you, to the nearest pixel.

List spacing

List spacing lets you control the distance between each line item in a bulleted or numbered list. By default, list spacing is set to 0 when creating a new list and for any existing text styles. Figma represents list spacing in pixels (px).

To adjust list item spacing:

1. Select text in a list or a text layer with only list text.
2. Use the field to enter a px value. Or hover above the icon and drag to decrease (left) or increase (right) the value.

You can also adjust list spacing from the Type details panel by clicking in the Text section of the right sidebar.

Paragraph indent

Paragraph indentation offsets the text in the first line to the right. You can only apply Paragraph indentation to text that uses Text-Align Left.

A good rule of thumb is to avoid indentations greater than 4 x the font size. We also recommend taking the width of the text layer into account - the wider the layer, the larger the indentation.

Figma represents paragraph indentation as a pixel (px) value. Use the Paragraph Indent field to adjust paragraph indentation.

Paragraph spacing

Paragraph spacing lets you control the distance between paragraphs. This can increase or reduce the whitespace around text in your design. White space can help to focus the viewer's attention, as well as increase legibility and readability.

Figma represents paragraph in pixels (px). Enter a px value in the paragraph spacing field. Or hover above the icon and drag to decrease (left) or increase (right) the value.

Text truncation and max lines

Truncate text hides text that overflows the bounding box. An ellipsis ... is added at the end of the text to indicate hidden overflow text.

Max lines allows you to set the number of lines of text before it truncates.

Max lines is available only if truncate text is enabled, and:

• Text resizing is set to auto height or auto width
• Vertical resizing is set to hug contents (for text living in auto layout frames)

Vertical trim

Use vertical trim to remove the extra space above and below text. This allows text layers to behave like other components in your layout by removing ambiguity around the bounding box of text content. 

This can help with handoff by making it easier to parse CSS margin and padding values with accurate pixel measurements that match your designs. 

Hanging quotes

Toggle hanging quotes to move a text layer's opening quotation marks outside of the bounding box.

Hanging lists

Toggle hanging lists to move bullet points or numbers of each list item outside of the bounding box. This aligns text content with the bounding box.

Variable fonts

A variable font provides a range of dynamic font variations for a typeface in a single file. While static fonts can only contain one font per file, a variable font can contain many.

Variable fonts also contain a wide range of property customizations, such as weight, width, optical size, and slant, but font authors can also provide additional customizations for more style options.

Learn more about variable fonts →