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.
Type properties are text-specific properties that allow you to control everything from the style and format of the text, to specific OpenType features and variable font settings.
This article covers just one aspect of working with text and type properties. Check out these other articles to learn more about working with text in Figma Design.
- Guide to text in Figma Design: an overview of creating, editing, and styling text layers.
- Add fonts to Figma Design: instructions for using your own fonts in Figma Design.
- Text dimensions and resizing: control how text wraps and overflows in your designs.
- Adjust fill, stroke, and effect properties: change other properties of text layers.
- Troubleshoot issues with text and fonts: fix issues with fonts and text layers.
Access type properties
You can find text-specific properties in the right sidebar. Your access and permissions will determine how you interact with text properties.
Edit text properties
As there are a number of typography properties available, we've grouped them by their location in Figma. You can view more details about each property in the Explore type properties section below.
Typography properties
You’ll find the most common text properties in the Typography section of the right sidebar. Use the image below to identify each property. Click the property name to learn more about each property.
View the list of properties and links
- Select to create and apply text styles.
- Select the font name to browse a list of web fonts, fonts installed on your computer, and shared fonts to find a typeface or font family.
- Select a font weight or style.
- Adjust the font size of your text.
- Use line height to adjust the vertical distance between lines of text.
- Use letter spacing to adjust the horizontal distance between letters.
- 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.
Looking for the text resizing property? You can update resizing for text layers in the Layout section of the right sidebar. Learn more about text dimensions and resizing.
Type settings
The Type settings menu gives you access to additional text properties and OpenType features. Go to the Typography section and click to open the type settings.
Type settings are grouped under two tabs: Basics and Details. If the font you’re using is a variable font, you’ll also see a Variable tab.
Preview type settings
You can use the preview at the top of the type settings panel to see how a particular property or OpenType feature looks.
Hover over any feature or property to see the preview. Figma displays sample text based on 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.
- 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.
- Toggle vertical trim.
- Create numbered or bulleted lists.
- Change the spacing between paragraphs of text.
- Toggle Truncate text to hide any content that goes beyond the maximum number of lines.
- Set the maximum number lines to determine when your text will be truncated.
- Adjust Indentation settings:
- Adjust paragraph indentation to offset the first line of text in a paragraph.
- Toggle hanging quotes
- Toggle hanging lists
- Use Letter case to transform text into another case, this is a non-destructive action. Choose from uppercase, lowercase, capitalize, and small caps. If available, you can also toggle case-sensitive forms and capital spacing.
- Adjust properties related to Numbers, such as style, position (superscript and subscript), fractions, and more.
- Adjust any OpenType features. These can vary between fonts. For example: in the Inter font, you can adjust Letter forms, Stylistic sets, Character variants, Horizontal spacing, and present numbers as fractional denominators and numerators.
- Click to close the type settings panel.
A variable font is a font that provides a range of dynamic font variations for a typeface in a single file. A regular static font can only contain one font per file.
You can customize different properties of a variable font, such as weight, width, optical size, and slant. Some font authors will additional properties you can customize for more style options.
Inspect text in Dev Mode
If you have access to Dev Mode, you can inspect text layers and their properties in the Inspect panel. Learn how to access Dev Mode in design files.
- Confirm that you have a Text layer selected. If there have been changes since you last viewed this layer, you can Compare changes.
- Choose the Code output you’d like to view text properties for.
- Review text properties in the Typography section of the right sidebar.
- Click to copy all text properties to your clipboard.
- Preview and copy the Contents of the text layer.
View text properties as a viewer
If you have view access to the file, and don’t use Dev Mode, you can still view text properties in design files.
- Select Properties in the right sidebar.
- View the Content of the text layer.
- View text properties in the Typography section.
- Click Copy to add all text properties to your clipboard.
- Click on a single property to copy that property to your clipboard.
Explore type properties
Alignment
Alignment determines how Figma distributes text within the bounding box. There are two alignment settings, one for each axis, horizontal and vertical.
Horizontal alignment defines how to align the text along the x axis (horizontal). 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 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 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 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, or use the keyboard shortcut:
- Mac: Option U
- Windows: Ctrl U
You can then access additional underline settings. From Type settings, select the chevron to view and adjust Underline details:
- Style: Select a solid, dotted, or wavy underline style.
- Thickness: Adjust the width of the underline.
- Offset: Adjust the distance of the underline text from its original position
- Skip ink: Adjust the behavior of the underline when the line passes through part of a letter or glyph. When enabled, the underline will skip areas where the part of a glyph character crosses an underline.
- Color: The color of the underline.
Font family, weight, size
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.
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 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 Typography section in Dev Mode.
You can also view these values in the Properties panel if you have view access to the file and don't use Dev Mode.
If you're exporting your designs to PDF, Figma will render font size using traditional print points (pt).
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.
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 (for example, weight or aspect ratio).
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 the manual printing process and is usually represented in 1/1000em. One unit of tracking (1/1000em) is approximately equal to 0.001em letter-spacing (CSS). You can use this formula to convert tracking to letter spacing: letter spacing = tracking/1000.
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.
You can also view these values in the Properties panel, under Typography, if you have view access to the file and don't use Dev Mode.
Figma allows you to set a fixed line height in pixels (px) or a line height that's a percentage of the font size (%).
By default, line height is set to Auto. This is calculated using the font's default line height, 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: Each platform has a different way of representing line height. Figma includes values and measurements for each platform in Dev Mode.
You can also view alternative units of measurement. For line height this means both a fixed line height in pixels and as a percentage of the font size.
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 →
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.
- Enter a px value in the List spacing field. 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 Typography section of the right sidebar.
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.
Create fractions from numbers. Enter a fraction as X/X and click the to turn it into a fraction.
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.
Faux typography
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.
Use slashed zero to display the zero integer with a slash through it. This is another way to distinguish it from the letter O.
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
OpenType features
OpenType can refer to a format or a set of features or functions available in a font. In Figma Design, we're referring to the OpenType features that a font supports.
Figma supports OpenType features across all fonts. But its worth mentioning that not all fonts support the same OpenType features. Supported features can include settings like: letterforms, stylistic sets, character variants, horizontal spacing, and more.
Paragraph indent
Paragraph indentation offsets the text in the first line to the right. You can only apply paragraph indentation to text that uses the horizontal alignment setting Text-align left.
Figma represents paragraph indentation as a pixel (px) value. Use the Paragraph Indent field to adjust paragraph indentation.
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.
Note: 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.
Vertical trim in Dev Mode
If vertical trim is enabled on a text layer, you’ll see leading-trim: both; in the Typography section in Dev Mode.
Vertical trim translates to two CSS properties in Dev Mode: leading-trim and text-edge. It’s worth noting that both of these properties are draft features that aren’t widely supported by web browsers.
This setting won’t change the measurements or properties of the text layer, but it may change the final dimensions of its parent layer.