Explore Text Properties

You can adjust the properties of your text layers in the Text section of the Properties Panel.

This gives you access to a variety of properties. This allows you to control everything, from appearance and position, to any OpenType features.

As there are a variety of properties you can apply to Text, we've grouped them into three distinct groups.

We've based these groups on the location of the properties, or where you can find them.


Text Settings in the Properties Panel

From the Text section you can:

  1. View, create and apply Text Styles to selected text
  2. Browse a list of web, local and shared fonts to find the perfect Font
  3. Select a Font Style or weight
  4. Adjust the Size of your text
  5. Adjust the Line Height, the vertical distance between lines of text
  6. Adjust the Letter Spacing, the uniform distance between letters
  7. Adjust the Paragraph Spacing, the vertical distance between paragraphs
  8. Offset text with Paragraph Indentation
  9. Adjust the Horizontal Alignment of text within the text layer
  10. Adjust the Vertical Alignment of text within the text layer
  11. Open the Type Details menu to explore more text properties and OpenType features

Font Family

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.

We refer to the collection of a typeface's styles as a  Font Family. For example: Helvetica, Times New Roman and Roboto are all Font Families.

We use Roboto as the default font for any new Text layers. You can select another Font Family using the Font picker.

Learn more about finding the perfect font in our Browse and Manage Fonts article.

Font Style

A typeface can have any number of styles or Weights. For example: Regular,  Bold or Italic.We refer to these as Styles.

Each Font Family will come with a selection of Styles. These vary between Fonts.

Roboto includes: Roboto Thin; Light; Regular; Medium; Bold; Black and more.

You can find the Font Style field underneath the Font Family field.

Font Size

You can also choose the  Font Size i.e. what scale you want us to display your Text layers at. We represent Font size in Points (pt).

The Font Size field can be found to the right of the Font Style.

You can enter a number in the field provided, or use the arrow to select a Font Size from our list of default sizes.

Line Height

Line height allows you to control the vertical distance between lines of text in a paragraph. You may have also heard this referred to as "line spacing".

Line height can help you to balance your designs and improve the readability of your copy.

  • You can reduce the Line height to make paragraphs more compact.
  • Or, increase the Line height to take up more space.

Having too small a Line Height can make text difficult to read. Whereas too large a Line Height can make text look messy and disjointed. Have a play with different values to see what looks right!

Keep in Mind

  • We calculate the Line height percentages based on the Font Size.
  • By default, Text layers have their Line height set as Auto. This uses the default or intrinsic Line height of that specific font.
  • You can choose to use the font's default Line height (Auto), or specify your own values. You can enter either a percentage (%) or fixed (px) value in the Line height field.
    • We will base a Percentage (%) on the Font Size. As you adjust the Font Size, we will the effective Line Height. We round these values to the nearest pixel.

      e.g. Font size: 100px; Line height: 200% = Effective Line height: 200 px.

    • We determine Fixed Line Heights in pixels (px). We won't change the Effective Line height, even if you change the Font or Font Size.
  • You can use the Line height field to switch between different values. We'll convert the value to the new unit for you.
    • If you enter “%” in the field we will convert the current value to a corresponding percentage value.
    • If you enter “px” in the field we will convert the current value to a corresponding pixel value.
  • You can translate your Figma designs to code using the Code panel. You can view your designs as code for CSS, Android or iOS formats.

    Each platform has a different way of representing Line height. We include the appropriate values and measurements, based on your chosen platform.

    We also include alternative units of measurement. This helps when adapting your designs for different platforms.

Letter Spacing

Letter Spacing allows you to define the space between characters in a word, line of text, or paragraph.

This affects the legibility of a block of text - how easy it is to read. Tighter letter spacing can reduce readability, while wider spacing can improve it.

You can adjust the letter spacing uniformly for an entire block of text. Or, you can select a specific word or character.

Note: Kerning refers to the process of adjusting the space between individual characters. This makes the distribution of letters and the space between them appear even. You can emulate Kerning in Figma by adjusting the Letter Spacing of a single character.

Tip! You may also be familiar with the term "tracking". Tracking describes the Letter Spacing process in pre-digital systems. Tracking is usually represented in Pixels (px).

Want to move between Tracking, Letter Spacing or letter-spacing (CSS)? Use this formula:
1000px Tracking = 100% Letter Spacing (in Figma) = 1em letter-spacing in CSS

Paragraph Spacing

The Paragraph Spacing setting allows you to control the distance between paragraphs.

This can increase or reduce the "white space" within a design. White space can help to focus the viewer's attention on specific elements. As well as increase legibility and readability of text.

We represent Paragraph Spacing as a  Pixel (px) value.

  • You can enter a px value directly in the field to adjust the Letter spacing.
  • You can also hover above the Paragraph Spacing icon, then drag left or right to scrub the field. This allows you to decrease (left) or increase (right) the value.

Note: We create a new paragraph when you use the "enter" or "return" key. This is something to bear in mind if your Text layers are set to Grow Horizontally.

Paragraph Indentation

Traditionally, Paragraph Indentation shows a viewer where the paragraph begins. This helps to improve readability and allows viewers to better scan through the text in a design.

When you apply Paragraph Indentation, we will offset the text in the  first line to the right. You can only apply Paragraph indentation to left justified Text.

We represent Paragraph Indentation as a Pixel (px) value.

Keep in Mind

  • We apply Paragraph Indentation 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.
  • It's less common to use Paragraph Indentation in web design. Adjusting the Paragraph Spacing will help viewers to navigate between paragraphs.
  • A good rule of thumb is to avoid indentations greater than 4 times the Font Size. We also recommend taking the width of the Text layer into account. The wider the layer, the larger the indentation.

Horizontal Alignment

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

You can choose between:

  • Left
  • Center
  • Right
  • Justify

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

Justify will align the first word in each line of text to the left edge of the text layer, and the last to the right. Each word in a line of justified text is then separated by equal spacing.

Vertical Alignment

Alignment determines how we distribute Text within its bounding box. Vertical alignment defines how to align text within the text layer, along the y (vertical) axis.

We align text with the edge of the Text layer's bounds. You can choose from:

  • Top
  • Middle
  • Bottom

Note: It's only possible to vertically align text in Fixed Size Text layers. Layers with "Grow Vertically" or "Grow Horizontally" applied will adapt in size as you add text.


Explore Type Details

The Type Details Panel gives you access to some extra Text properties. You can also access any OpenType features from this panel.

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

For every Font you can:

  1. View a Preview of any text properties
  2. Adjust the Resizing behavior of the Text layer
  3. Adjust the Horizontal Alignment of text
  4. Apply Decoration to text, which includes:
    1. Underline
    2. Strikethrough
  5. Adjust the Letter Case, including: Uppercase, Lowercase, Capitalize and Small Caps.
  6. Apply any Number settings, including: Style, Position, Fractions and any related OpenType features.
  7. Access any OpenType features.
  8. Close the Type Details panel.

Preview

At the top of the Type Details panel we have a preview window. We will always fix the preview window in this position.

You can use this to see how a particular property or OpenType feature may look. Hover over any feature or property to see a preview of it applied.

We'll display some sample text that best suits the feature you're previewing. We'll show:

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

Resizing

The  Resizing property controls how a Text layer shrinks or grows to accommodate Text.

There are three settings available:

  • Grow Horizontally: The width of the Text layer will extend, so all content fits within the Text layer's bounds. New lines of text are only created when you use the "return" or "enter" key on your keyboard.
  • Grow Vertically: The height of the Text layer will extend to fit all content. Any lines that extend beyond the original width of the Text layer are wrapped and will appear on a new line
  • Fixed Size: Both the width and height of the Text layer remains consistent, even as you add new Text. We will wrap any additional text to fit the width of the Text layer. Text can still extend beyond the Text layer's bounds and we won't clip it. This can make aligning Text layers in relation to other layers difficult.

Keep in Mind

  • When you create a new Text layer by clicking on the canvas once, we create a Text layer set to Grow Horizontally.
  • If you click and drag in the canvas to create a new Text box, the Text layer's Resizing behavior will be set to Fixed Size.
  • If you manually adjust the size of a Text layer after it is created, then the Resizing behavior will change to Fixed Size.

Decoration

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

Strikethrough

Strikethrough adds a horizontal line through the center of any selected text.

You can use Strikethrough to indicate obsolete or inaccurate information. This allows you to convey its state, without redacting or obscuring the original text.

Underline

Underline decoration adds a horizontal line along the baseline of any selected text.

You can use this 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.

Tip! You can apply an underline to selected text using the Keyboard shortcuts:  

MacOS:  Command-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.

You can choose from:

  • Uppercase [AB]: transforms your text to UPPER CASE
  • Lowercase [ab]: transforms your text to lower case
  • Capitalize [Ab]: transforms the first character of every word to upper case. You may know this as "Title case"
  • Small Caps [ᴀᴀ]: transform text into "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)

Number

The Number section includes any properties or features for numerical figures.

This allows you to:

  1. Change the figure Style, options include:
    • Proportional Lining
    • Tabular Lining
    • Proportional Old Style
    • Tabular Old Style
  2. Offset numbers as Subscript or Superscript
  3. Create Fractions

OpenType

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.

Typeface creator's have full control over which OpenType features they support. They could be popular features - like kerning, case or numerical figures. Or, custom features like alternative characters or glyphs, and stylistic alternatives.

OpenType features vary between fonts, so we won't post a list of possible features.

Instead, we'll show you how to use the Type details panel. This will allow you to explore and interpret a font's available OpenType features.

Tip! You can learn more about OpenType and Figma in our blog post: An ode to OpenType.

You can explore OpenType features from the Type Details panel.

  • We display any OpenType features that the font supports below the Numbers setting.
  • We will grey out the OpenType feature if a font does not support it.
  • You can hover over a feature's button to view a preview of the feature.
  • We group OpenType features accordingly:
    1. Letterforms

      This includes:

      • Ligatures
      • Rare Ligatures
      • Contextual Alternates
      • Ordinals
  • Stylistic Sets ssxx

    These vary greatly - in name and availability - between fonts. A font can support up to 20 stylistic sets. Some examples include:

    • Stylistic Alternates
    • Alternate Digits
    • Disambiguation
    • Lower case R curves into rounded Neighbours
  • Character Variants cvxx

    These vary greatly - in name and availability - between fonts. These are at the discretion of the typeface creator. They could include the following types of variations:

    • Open Four
    • Closed lower case G
    • Closed lower case A
  • Horizontal Spacing (Kerning)
  • More features (Fraction denominators and numerators)


Other Properties in the Properties Panel

You can also apply properties outside of the Text properties to Text layers. This includes:

Fill

You can use the Fill property to change the color of your text.

  1. Find the Fill section of the Properties Panel: 
  2. Click the Fill thumbnail to open the Color Picker.
  3. You can then:
    1. Select a color from the canvas using the Eyedropper
    2. Explore colors and opacities using the sliders
    3. Select a color from your available Styles, or from the document's colors
    4. Enter a specific HEX or color profile code in the field provided

Learn more about working with Paints in our Using the Color Picker article.

Stroke

You can also apply Stroke properties to Text. This will apply a stroke around every character in your selection.

You will then be able to adjust a variety of Stroke properties:

  • Fill
  • Weight
  • Distribution
  • Cap
  • Join
  • Dashes
  • Miter Angle

Learn more about applying strokes in our Strokes article.

Effects

Text layers also support Effects.

  1. Find the Effects section in the Properties Panel: 
  2. Click the [+] plus icon next to the Effects property to add an Effect
  3. We'll apply a Drop Shadow by default, but you can also apply:
    • Inner Shadow
    • Layer Blur
    • Background Blur
  4. Click the Effect icon to select another Effect, and adjust the settings.

Learn more about working with Effects in our Effects article.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.