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.
- Click the icon to view, create and apply text styles
- Click the font name to browse a list of web, local, and shared fonts to find a typeface or font family
- Use the arrow to select a font weight or style.
- Use the arrow to adjust the size of your text
- Adjust the vertical distance between lines of text using the line height field.
- Adjust the horizontal distance between letters with letter spacing
- Adjust the vertical distance between paragraphs with paragraph spacing.
- Select how text overflows or wraps with resizing behavior.
- Adjust the horizontal alignment of text within the text box.
- Adjust the vertical alignment of text within the text box.
- 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.
- See a preview of any text properties
- Basics tab
- Choose how you want your text to horizontally resize
- Adjust the horizontal alignment of text
- Apply decoration to text, like strikethrough and underline
- Adjust the letter case. Choose from uppercase, lowercase, capitalize, and small caps.
- Change the spacing between paragraphs of text
- Create numbered or bulleted lists →
- Truncate text to hide overflow content
- Set max lines to determine when text truncation happens
- Toggle vertical trim
- Details tab
- Adjust indentation settings. Offset the first line of text with paragraph indentation. You can also toggle hanging quotes and hanging lists.
- Adjust the letter case. Choose from uppercase, lowercase, capitalize, and small caps. If available, you can also toggle case-sensitive forms and capital spacing.
- Apply any number settings, such as style, position (superscript and subscript), fractions, and more.
- Access any OpenType features, like letter forms, stylistic sets, character variants, horizontal spacing, and more
- Click to close the type settings panel.
- 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.
Figma represents text sizes in a few different ways.
If you're translating your designs to code, your screen resolution will determine the actual size of any text. You can view the CSS pixel value (px) of any text in the Inspect panel.
If you're exporting your designs to PDF, Figma will render font size using traditional print points (pt).
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*
Justify aligns the first word in each line of text to the left-most edge, and the last to the right-most edge. Figma spaces each word in a line of justified text uniformly.
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
Note: It's only possible to vertically align text in text layers with a Fixed Size. Layers with resizing set to Auto Width or Auto Height will ignore alignment.
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.
Tip! Apply an underline to selected text using the keyboard shortcut:
- Mac: Option U
- Windows: Ctrl U
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 as
Title 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 (e.g. weight, 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.
Note:
When you apply superscript/subscript to text, Figma tries to use any superscript/subscript glyphs provided by the font. If it isn’t provided, Figma draws a synthesized version by using the font's standard version of the character, shrinking it, and positioning it accordingly.
This is often called “faux typography.”
Also, if you mix available and unavailable superscript/subscript glyphs in the same text layer, they’ll all update to the synthesized form for consistency.
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
Note: When you click on the canvas to create a text layer, Figma uses Auto Width. If you click and drag in the canvas, Figma will use Fixed Size. If you adjust the size of a text layer after it is created, Figma updates the resizing to 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.
Tip! Tracking describes the letter spacing process in pre-digital systems and is usually represented in pixels (px). Use this formula to convert tracking to letter spacing: 1000px tracking = 100% letter spacing = 1em letter-spacing (CSS)
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.
Translating line height: The Inspect panel allows you to view your designs as code. Each platform has a different way of representing line height.
Figma includes the appropriate values and measurements for each platform, as well as alternative units of measurement.
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:
- Select text in a list or a text layer with only list text.
- 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.
Tip! Paragraph indentation applies to all paragraphs in a text layer. If you wish to indent a single paragraph, you will need to create a separate text layer for it.
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.
Note: Figma will create a new paragraph when you use the Enter or Return keys. This is something to bear in mind if your text resizing is set to Auto Width.
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.