Text Properties in Figma

A typeface consists of letterforms and glyphs sharing design features, while a font is a file with the visual details of each glyph. The font family property refers to the collection of styles encompassing a specific typeface, such as Helvetica, Times New Roman, or Roboto. When you create a new text layer in Figma, it defaults to the Inter font family.

To change the font family:

1. Locate the Typography section within the Design panel.
2. Use the font picker dropdown in the Design panel to explore and select the font family of your choice.

After choosing a font family, you gain access to a variety of font styles, also known as weights. Each font family, like Inter, includes its own set of styles, such as thin, light, regular, medium, bold, and more. These variations enable the communication of different tones and hierarchies within the text. For example, a heading would have a higher font weight than the body text.

To adjust the font weight for a selected font family:

1. Locate the field directly below the font family selection in the Design panel.
2. Click the dropdown menu indicated by an arrow to explore and select from the available styles.
3. For quicker adjustments, use keyboard shortcuts:

• Mac: Option Command with < or > keys
• Windows: Ctrl Alt with < or > keys

Font size determines how large or small your text appears. It is measured in density-independent pixels to ensure consistency across different screens.

To adjust font size:

1. Look for the Typography section in the Design panel. Here, you'll find a numerical dropdown filled with the default font size.
2. Clicking the arrow allows you to choose a predefined size, or you can type a specific number directly into the field for custom sizing.
3. Additionally, Figma supports quick adjustments via keyboard shortcuts:

• Mac: Press Shift Command and use the < key to increase size or the > key to decrease size.
• Windows: Hold down Ctrl Shift while pressing < to enlarge or > to shrink the text.

When translating designs to code, screen resolution affects text size. You can find the CSS pixel values in Dev mode's Typography section. For PDF exports, Figma renders font sizes in traditional print points (pt).

To adjust Numbers settings for your text:

• Select a text object on your canvas to bring up the Type settings in the Design panel on the right.
• Within the Typography section, click on Type settings icon and then select the Details tab in the window that pops up.
• Scroll to the Numbers section to find options for customizing numerical figures, which vary by font family.

Here, you will find these properties available:

• Style: Choose between proportional or monospace figures. Proportional figures adjust spacing based on character width, while monospace figures have uniform width.
• Position: Opt for subscript (below line) or superscript (above line) to change number positions, making them smaller than main text.
• Fractions: Convert numbers into fractions by typing X/X and applying the fraction feature.
• Slashed zero: Add a slash through the zero to differentiate it from the letter O.

The Fixed size property for text is located under the Layout section in the Design panel. It’s represented by a square icon with horizontal lines resembling text. This feature locks the width and height of the text layer, keeping them constant regardless of the text you add. This makes it a great option when you need your text to fit into specific spaces to ensure alignment and consistency.

Keep in mind that when your text exceeds the horizontal bounds, Figma automatically wraps it within the layer. However, text can overflow vertically without being clipped.

If you create a text box by clicking and dragging on the canvas, Figma defaults to Fixed size. Also, if you adjust a text layer's size after creation, Figma switches its resizing to Fixed size.

Under the Layout section of the Design panel, you'll find settings for Auto width and Auto height. These settings adjust how a text layer's size changes based on its content.

Auto width makes the text layer wider to accommodate all its contents in a single line, unless you press Return (Mac) or Enter (Windows) to start a new line. When you click on the canvas to add a text layer, Figma defaults to Auto width, allowing the layer to expand horizontally as you type.

Auto height, on the other hand, allows the text layer to grow vertically, fitting its contents within. If the text exceeds the layer's original width, Figma automatically wraps the text to a new line, expanding the layer's height to ensure all text is visible. These settings are useful for adapting text boxes to content dynamically, ensuring text remains legible and well-organized within your design.

The Letter spacing property, represented by the |A| icon in the Typography section of the Design panel, allows you to adjust the tracking, which is the space between characters in your text. This spacing can significantly affect the readability of your text, making it either more comfortable or more challenging to read, depending on how it's set.

To adjust letter spacing in Figma:

1. Select a text layer or just specific characters.
2. Change the input value in the Letter spacing property input.
3. Alternatively, use keyboard shortcuts to manipulate this value:

• Mac: Use Option with < or > to decrease or increase spacing.
• Windows: Use Alt with < or > to decrease or increase spacing.

If you need to adjust the space between two letters (mimicking kerning), simply place the cursor between them and modify the spacing using the steps above.