Typography

‍Font Family

Ant Design defaults to using the system font, and in the Ant Design System for Figma, we've integrated the “SF Pro Text” font, which is specific to Mac systems. Ant Design of React uses system font family "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'". If you'd like to employ a different font family for your Figma project, you can find instructions below.

1. Open the Local Variables panel.
2. Open the 3. Typography collection.
3. In the Typography / Font Family group, edit the fontFamily variable in Default and Compact modes.
4. Done! After a few minutes, the font family will update for all styles and components.

Font Family (Code)

A default font family for code and keyboard text elements in Ant Design or React is "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace'". In Figma, we use "Courier Prime" as a default code font family. If you want to use a different font family in you Figma project, follow the instructions below:

1. Open the Local Variables panel.
2. Open the 3. Typography collection.
3. In the Typography / Font Family group, edit the fontFamilyCode variable in Default and Compact modes.
4. Done! After a few seconds, the font family will update for all styles and components.

Using different font family for headings

If you want to use a different font family for your headings:

1. Open the Batch Styler plugin.
2. In the plugin’s Text tab, press Command (or Ctrl on Windows) and select all text styles that have Heading in their name.
3. In the ‘Family’ input below, search and select a font family you want to use for your headings.
4. In the “Weight” input, replace “Semibold” with the font weight you want to use.
5. Press the Update styles button.

Note for developers

Currently, Ant Design does not offer a token for controlling the font family specifically for headings when it differs from the fontFamily token. Instead, you can implement a straightforward CSS override. For instance, if your design team has utilized "Montserrat" with a font-weight of "800" exclusively for headings, you can adjust your CSS as follows:

‍


Font Size

If you want to edit font size:

1. Open the Local Variables panel.
2. Open the 3. Typography collection.
3. In the Typography / Font Size group, edit the font size variable (for example, fontSize) in Default and Compact modes.
4. Done! After a few seconds, the font size will update for all styles and components that use the modified variable.

Line Height

In the Ant Design System for Figma, we use pixel values for text line heights (for example, 22px). In the Ant Design of React, however, the line height is based on decimal values (for example, 1.5). If you will change the line heights in Figma, make sure to convert the pixels to decimal values in your code correctly. If you want to edit the line height:

1. Open the Local Variables panel.
2. Open the 3. Typography collection.
3. In the Typography / Line Height group, edit the line height variable (for example, lineHeightLG) in Default and Compact modes.
4. Done! After a few seconds, the line height will update for all styles and components that use the modified variable.

Font Weight

Normal weight

Ant Design by default applies a normal (400) font weight to text and paragraphs. In the Ant Design System for Figma, we introduced a specific variable (fontWeightNormal) to manage the font weight for all elements set to normal. However, this variable is not utilized in the Ant Design for React. If you want to modify the default font weight in your code, you should adjust it in the CSS. For instance, you can change it by setting body { font-weight: 500; }. To modify the normal font weight in Figma:

1. Open the Local Variables panel.
2. Open the 3. Typography collection.
3. In the Typography / Font Weight group, edit the fontWeightNormal variable in Default and Compact modes.
4. Done! After a few seconds, the font weight will update for all styles and components that use the modified variable.

Strong weight

The strong weight in the Ant Design System for Figma is used in headings and bold texts. If you want to edit the weight of the fontWeightStrong variable:

1. Open the Local Variables panel.
2. Open the 3. Typography collection.
3. In the Typography / Font Weight group, edit the fontWeightStrong variable in Default and Compact modes.
4. Done! After a few seconds, the font weight will update for all styles and components that use the modified variable.