Text Properties

Published Jun 8, 2022Updated Dec 21, 2022
Contribute to Docs

Text properties refer to the text’s style settings, such as typeface, size, spacing, and alignment. In design software, default text properties are applied, and each property can be adjusted to suit the needs of the design.

Typeface

Typeface refers to a distinct visual style applied to the characters. For example, Times New Roman, Calibri, and Cambria are typefaces. The terms font and typeface are often used interchangeably, but font is a more specific description that includes the typeface, size, and weight. For example, “Times New Roman 24 Bold” and “Times New Roman 24 Light” are different fonts. This resource has additional information about typefaces and fonts.

A diagram that shows the difference between a typeface, such as “Inter” and a font, such as “Inter 40 Bold.”

Size

Size indicates the scale of the characters. Depending on the software, text size is measured in different units, such as pixels or points.

A diagram with text of different sizes, from size 12 up to size 72.

Weight

Weight refers to the thickness of the characters. Text with a heavier weight such as “Bold” is thicker than text with a lighter weight such as “Thin.” The range of available weights depends on the typeface, and some example weights include Thin, Regular, Medium, SemiBold, Bold, and Black.

A diagram with text of varying weights, arranged from lightest to heaviest.

Letter Spacing

Letter spacing is the amount of space between each character. Increasing the value spreads the characters apart horizontally.

A diagram that shows text with different percentages of letter spacing. Text with a higher percentage of letter spacing has more horizontal space between each character.

Line Height

Line height indicates the amount of vertical space that each line of text takes up. Increasing the line height adds vertical space to each line, but it does not impact the height of the characters.

Two blocks of text with different line heights. The block of text with a higher line-height value has more vertical space between each line.

Alignment

Alignment refers to the text’s position within the text box. Typically, the default settings align the text horizontally to the left and vertically to the top. The text’s horizontal alignment (left, center, right) can be adjusted separately from its vertical alignment (top, middle, or bottom).

Diagram that shows the options for horizontally aligning text in a text box: left, center, or right.

Diagram that shows the options for vertically aligning text in a text box: top, middle, or bottom.

Paragraph Spacing

Paragraph spacing refers to the amount of vertical space between paragraphs in the same text box.

Diagram that compares different values of paragraph spacing. The text with more paragraph spacing has additional vertical space between blocks of text.

Figma, a prototyping tool and graphics editor, has additional details on text properties.

All contributors

Looking to contribute?

Learn UI and UX Design on Codecademy