Text Properties
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.
Size
Size indicates the scale of the characters. Depending on the software, text size is measured in different units, such as pixels or points.
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.
Letter Spacing
Letter spacing is the amount of space between each character. Increasing the value spreads the characters apart horizontally.
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.
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).
Paragraph Spacing
Paragraph spacing refers to the amount of vertical space between paragraphs in the same text box.
Figma, a prototyping tool and graphics editor, has additional details on text properties.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn UI and UX Design on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Introduction to UI and UX Design
Get started with User Interface (UI) and User Experience (UX) Design and learn how to wireframe and prototype using Figma.Beginner Friendly2 hours