Understanding Text Properties

There can often be a difference in how browsers and operating systems render text. This can make designing across systems and platforms unpredictable.

Figma uses its own custom text rendering. This ensures your designs look consistent, regardless of your browser or operating system.

In this article, we'll explore Text Properties, what they mean, and how they are applied.

We've broken Text Properties down into three main categories:

  1. Font Settings
    1. Font Family
    2. Font Style
    3. Font Size
  2. Paragraph Settings
    1. Line Height
    2. Letter Spacing
    3. Paragraph Spacing
    4. Paragraph Indentation
  3. Advanced Type Properties
    1. Resizing
    2. Alignment
    3. Transform
    4. Decoration
    5. Features
    6. Numbers

You can make changes to a Text layer's properties in the Design tab of the Properties Panel. The Properties Panel is the sidebar on the right side of the Figma UI.

Learn more about creating and updating Text layers in our Getting Started with Text article.


Font Settings

A Typeface is comprised of a set of letterforms and glyphs that are related by similar design features. A Font is a file that contains the visual details that make up the design of each letter within a particular typeface.

A typeface can have any number of styles or Weights. For example: Regular, Bold or Italic.

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.

You can adjust three different aspects of a Text layer's Font:

  1. Font Family
  2. Font Style
  3. Font Size

Learn more about fonts and writing in other languages in our articles:

Font Family

By default, any Text layer you create will use the Roboto Font Family.

You can select another Font Family in the Text section of the Properties Panel:

You can use the drop down to scroll through available Fonts. Or, start typing the Font name in the field.

Font Style

You can then select which Font Style you want to use. Every Font Family will come with its own set of Styles.

For example: The Roboto Font Family includes Roboto Thin, Light, Regular, Medium, Bold, Black and a bunch of Roboto Italic styles.

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

You can click on the field and select your desired Style from the list:

Font Size

You can also choose the Font Size i.e. what scale your Text layers are displayed at. Font size is represented in Points (pt).

The Font Size field can be found next to the Font Style field: 

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


Paragraph Settings

The next set up properties allow you to define how the Text layer is placed in the canvas. These properties allow you to update the:

  1. Line Height
  2. Letter Spacing
  3. Paragraph Spacing
  4. Paragraph Indentation

Line Height

Updated Text Rendering

We changed how we calculate and display Line height in April, 2019. There are two aspects to these changes:

  1. We now calculate the Line height percentages based on the Font Size. We used to calculate this based on the font's default Line height.
  2. We also addressed some issues relating to Line Height via an update in text rendering. You can update existing Text layers so that they use the new rendering.

Learn more about updating existing text layers in our Changes to Line Height article.

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.You can reduce the Line height to make paragraphs more compact. Or, increase the Line height to take up more space.

You can adjust the Line height setting in the Text section of the Properties Panel: Image Caption: You can access Line height in the Text Section of the Properties Panel. You can find this below the Font settings.

Tip! 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.

For example: you may want to use tighter Line Height for headings or block quotes, and larger Line Heights for paragraph text.

Changing the Line Height

By default, any new Text layers will have their Line height set to 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.

  • You can set the Line height as a Percentage of the Font Size. This allows the Line height to scale as the Font Size changes. We round any percentage-based Line heights to the nearest pixel.

    For example: a Font size of 100px and a Line height of 200% would result in a Line height of 200 px. 
  • You can also set a Fixed Line Height in pixels (px). This will ensure the effective Line Height never changes, even if you change the Font or Font Size.

    For example: if you add a fixed Line height of 100px, it will stay at 100px even if you change the Font size to 200px. 

Tip! 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.

Translating Line Height to Code

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.

  1. Select the Text layer. If you only want to apply it to part of the text, select any text you wish to update:
  2. Update the Letter Spacing using the | A | setting. We represent Letter spacing as a percentage (%) value.
  3. You can enter a percentage % value: directly in the field. Or "scrub" the field by hovering over the | A | icon and dragging left or right:

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).

You can use the formula below to move between Tracking, Letter Spacing or letter-spacing (CSS):

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.

You can adjust the Paragraph Spacing of Text layers in the Text section of the Properties Panel. 

We represent Paragraph Spacing as a Pixel (px) value. You can enter a px value directly in the field to adjust the Letter spacing.

Tip! You can also hover above the Paragraph Spacing icon, then drag left or right to scrub the field. This allows you to increase (right) or decrease (left) the value.

Note: You create a new paragraph when you use the "enter" or "return" key within a Text layer. 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.

As this moves the text to the right, you can only apply Paragraph indentation to left justified Text.

You can adjust the Paragraph Indentation setting in the Text section of Properties Panel. We represent Paragraph Indentation as a Pixel (px) value.

Keep in Mind

  • We apply your Paragraph Indentation settings 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.
  • Adding Paragraph Spacing (see above) will also allow viewers to navigate between paragraphs. It's less common to use Paragraph Indentation in web design.
  • Try to avoid indentations greater than 4x the Font Size. For example: For Text with a Font Size of 16px, aim for a Paragraph indentation between 16-64px. You should also take into account the width of the Text layer. The wider the layer, the larger the indentation.

Alignment

Text Alignment determines how the Text is distributed within its bounding box.

You can adjust both the Horizontal and Vertical alignment of a Text layer.

Horizontal

Horizontal alignment defines how you align the text along the x axis.

You can set horizontal alignment to:

  • Left:
  • Center:
  • Right:
  • Justify:

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.

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

  1. Select the Text layer you'd like to update.
  2. Locate the Text section in the Properties Panel.
  3. Use the Horizontal Alignment buttons to switch between the alignment options.

    They appear in the following order, left to right:
    1. Text Align Left
    2. Text Align Center
    3. Text Align Right

Note: If you want to Justify text, you will need to open the Advanced Type Menu:

  1. Click the three dots in the bottom-right corner of the Text section.
  2. In the Alignment section, select the Justify option. This Justify icon is three horizontal lines all with the same length:

Vertical

Vertical alignment defines how to align text within the text layer, along the y axis.

You can align the text with the Top or Bottom edge of the Text Layer’s bounds. Or choose to center the text in the Middle of the Text layer.

Note: It's only possible to vertically align text in Fixed Size Text layers. Text layers that "Grow Vertically" or "Grow Horizontally", will shrink or grow in size to accommodate Text.

  1. Select the Text layer you'd like to update.
  2. Locate the Text section in the Properties Panel.
  3. Use the Vertical Alignment buttons to switch between the alignment options.

    They appear in the following order, left to right:
    1. Align Top
    2. Align Middle
    3. Align Bottom

Advanced Type Menu

The Advanced Type menu gives you access to additional Text settings, that you may not need to use as often.

You can access the Advanced Type Menu from the Text section. Click the three vertical dots in the bottom-right corner: 

From here, you can adjust the following settings:

  1. Resizing
  2. Alignment (You can access an additional Justify setting here)
  3. Transform
  4. Decoration
  5. Features
  6. Numbers

Resizing

The Resizing setting 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 automatically adjust, so that 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 automatically adjust 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: This means that both the width and height of the Text layer remains consistent, even as new Text is added. Any additional text will still be wrapped to fit the width of the Text layer. Text can still extend beyond the Text layer's bounds and won't be clipped. However, this will make aligning and positioning the Text layer in relation to other layers difficult.

When you select the Text tool and create a new Text layer by clicking on the canvas once, this will create a Text layer with its Resizing 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.

Note: If you manually adjust the size of a Text layer after it is created, then the Resizing behavior will be changed to Fixed Size.

Adjusting Resizing Behavior

You can adjust a Text layer's Resizing behavior.

  1. Select the Text layer.
  2. Click the three horizontal dots to open the Advanced Type menu.
  3. Use the buttons to switch between the Resizing options. They appear in the following order, left to right:
    1. Grow Horizontally
    2. Grow Vertically
    3. Fixed Size
  4. The Text layer will now use the new Resizing behavior.

Alignment

You can also adjust the Horizontal Alignment in the Advanced Type menu. This gives you access to an additional setting: Justify Text.

See: Horizontal Alignment.

Transform

The Transform settings allow 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:

  1. Uppercase - indicated by the AB icon - transforms your text to UPPER CASE.
  2. Lowercase - indicated by ab icon - transforms your text to lower case.
  3. Capitalize - indicated by the Ab icon - transforms the first character of every word to upper case. You may know this as "Title case".

You can transform an entire Text layer, or a selection of text within the layer.

  1. Select the text, or Text layer, you would like to Transform.
  2. Open the Advanced Type menu in the Properties Panel.
  3. Select the transformation from the options:
    1. [AB] Upper Case
    2. [ab] Lower Case
    3. [Ab] Capitalize

Tip! You can click on a selected icon again to remove the transformation and return to the previous state.

Decoration

In addition to changing the Font Style, you can also add Decoration to Text layers.

Applying Text Decoration will add a decorative line to any selected text.

You have two types of Decoration available:

  1. Strikethrough
  2. Underline

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.

One common use in web design is displaying the original price of an item, next to its reduced or discounted price.

  1. Select the text you wish to apply Strikethrough to.
  2. Open the Advanced Type menu.
  3. Select Strikethrough [S] in the Decoration section:

Underline

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

You can use underline to place emphasis on a particular section of the text, or indicate text that 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.

  1. Select the text you wish to Underline.
  2. Open the Advanced Type menu.
  3. Select Underline [U] in the Decoration section:

Tip! You can also use the Keyboard shortcuts:

MacOS: [⌘]+ [U]

Windows: [Ctrl] + [U]

Features

There are a range of Text Features available. These features allow you to apply specific decorations or treatments to selected text.

You can create the following features:

  1. Discretionary and Historical Ligatures
  2. Fractions
  3. Small Caps
  4. Subscript
  5. Superscript

Discretionary and Historical Ligatures

A ligature is a glyph or symbol that appears to combine multiple characters into a single letter. There are four different types of ligatures: Standard, Contextual, Discretionary and Historical.

Standard and Contextual ligatures improve the readability of the text. Whereas Discretionary and Historical ligatures are ornamental.

Keep in mind: Discretionary ligatures aren't available in all fonts. Want to have a play? Check out the Playfair Display font (Google Web Font) to see these in action.

  1. Select the text, or Text layer you want to apply a ligature to.
  2. Open the Advanced Type menu in the Properties Panel.
  3. Select the Ligature icon [cc]: 
  4. Any supported ligatures will be applied.

Fractions

The Fractions feature allows you to accurately use fractions within your designs.

This takes any two numbers, separated by a slash, and creates a fraction out of them.

The first number will become the numerator (top). The second number will become the denominator (bottom). They will still be separated by a slash, known as the "solidus".

Keep in mind: Fractions aren't supported in all fonts. If you want to see these in action our default font, Roboto, supports Fractions.

  1. Enter a fraction in the Text layer in the following format: "first number"/"second number"
  2. Select the part of the text you want to create a fraction of: e.g. "1/3"
  3. Open the Advanced Type menu in the Properties Panel.
  4. Select the Fraction icon [1/3]:
  5. The numbers are now rendered as a fraction.

All Small Caps

The All Small Caps feature allows you to replace existing letters with Small Caps glyphs. 

Small Caps was traditionally used to display uppercase letters inline with lowercase letters, when setting type.

While this looks similar to an UPPERCASE transformation (see: Transform), Small Caps characters usually have different proportions to uppercase characters (e.g. weight, aspect ratio).

The size of Small caps glyphs can vary between fonts, but are usually rendered at around the x-height of the original font.

Keep in mind: The All Small Caps feature isn't supported in all fonts. They were initially designed to be used in body text, so you may not find these in Display fonts in particular. If you want to see these in action, our default font Roboto supports this.

  1. Select the text, or Text layer you want to transform.
  2. Open the Advanced Type menu in the Properties Panel.
  3. Select the All Small Caps icon [ᴀᴀ]:
  4. Click on the icon again to remove All Small Caps and return to the previous state.

Subscript

Subscript refers to a character, number or symbol that appears slightly below a normal line of text. It is normally rendered in a smaller font.

You may have seen subscript used:

  • In a chemical formula e.g. CO₂
  • Mathematical sequences or values
  • To create fraction and percentage symbols

Keep in mind: Subscript isn't supported in all fonts. If you want to see these in action Alegreya Sans (Google Font) supports Subscript.

  1. Select the portion of text you want to subscript.
  2. Open the Advanced Type menu in the Properties Panel.
  3. Select the Subscript icon [A₁]: 
  4. The selected text will be moved to the superscript position:
  5. Click on the icon again to return to the previous state.

Superscript

Superscript or "superior" refers to a character, number or symbol that appears slightly above a normal line of text. It is normally rendered in a smaller font.

You may have seen superscript as:

  • A citation or a footnote
  • Exponentials in a mathematical equation
  • An expression of a date e.g. 1ˢᵗ, 2ⁿᵈ and 3ʳᵈ

Keep in mind: Subscript isn't supported in all fonts. If you want to see these in action Alegreya Sans (Google Font) supports Subscript.

  1. Select the portion of text that you want to superscript.
  2. Open the Advanced Type menu in the Properties Panel.
  3. Select the Superscript icon []:
  4. The selected text will be moved to the superscript position:
  5. Click on the icon again to return to the previous state.

Numbers

The Number setting controls how numerals are vertically and horizontally distributed.

You can find the Number setting at the bottom of the Advanced Type menu. There are five Number properties to choose from:

  1. Default Figure
  2. Proportional Lining
  3. Tabular Lining
  4. Proportional Old Style
  5. Tabular Old Style

Note: Not all fonts will support these settings. If there are no visible changes to your text layer(s), then it's likely that the setting you chose isn't supported.

For example: Many traditional typesetting fonts will support both Proportional and Tabular figures. Whereas digital fonts will usually only support Proportional or Tabular figures.

Number Settings

The Default Figure setting will use the default figure settings of the font you're using. You can select this setting to return to the font's default.

Lining

Fonts that support Lining or "modern figures" render numerals at a consistent height. This ignores any ascenders or descenders and renders all numerals at the height of uppercase letters.

This approach is commonly used when numbers are displayed alone, or alongside uppercase text, like in a heading.

Old Style

Fonts that support Old style or non-lining "Text figures" render numerals at varying heights.

This takes in account if a numeral has an ascender or descender. This works like uppercase and lowercase letters within a typical line of text.

You may prefer to use Old style text figures when using numerals in a sentence or paragraph of text.

Proportional

Fonts that support Proportional figures will render numerals at varying widths. For example: the numeral "1" will take up less horizontal space than the numeral "8".

Proportional figures are usually used for lines or blocks of text. This spaced characters in relation to one another , creating a balanced appearance.

Tabular

Fonts that support Tabular figures will render numerals at a uniform width. You can think of this like a monospace or fixed-width font. For example: both the numerals "1" and "8" would occupy the same amount of horizontal space.

This makes Tabular figures particularly useful for financial tables and documents. Or any situation when you want to align columns of numbers.

Note: This will only apply to numerals within a block of text. Any punctation, including decimal points, will use proportional width.

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