Example
Related
- Heading — For titles.
Props
Alignment
The horizontal alignment of content inside the text element.
Element placement should be handled by layout primitives, like Flex and Grid. Alignment should be employed sparingly.
The align prop is only supported on top-level components, and will be ignored on nested components (descendants of another Text component).
Logical alignment
Use logical values of "start" and "end" in most cases, since they respond to locale direction.
Avoid center-aligned text when you expect it to wrap. The starting edge moves around making it harder to read, especially for those with cognitive disabilities or dyslexia.
Forced alignment
Only use special values "FORCE_left" and "FORCE_right" in rare cases where locale direction should be ignored, such as numeric text within a tabular container.
Casing
How to transform the casing of the element’s contents, if at all.
Capitalize
Use with caution, typically on a single word. Title case shouldn’t apply to articles (a, an, the) and most prepositions (in, on, for, etc), but the "capitalize" text transform doesn’t discriminate. Consider an alternative JS solution for complex requirements.
Lowercase
Text in strictly "lowercase" should rarely be required, and has mostly been included for completeness.
Uppercase
Reserve "uppercase" for short title content. Large blocks of uppercase text present accessibility concerns, which should be avoided.
Color
Color can be used to express emotion and tone, as well as place emphasis and create associations. The use of color in the system should correlate with the tone of voice being used.
Neutral colors
Use neutral colors to convey information without attracting too much attention.
Functional colors
Functional colors are associated with specific app behaviours.
Semantic colors
Use semantic colors to clearly and predictably communicate status-based information to the user.
Overflow
How to handle white space and line breaks when the element’s text would otherwise overflow its content box.
You may also truncate text, which is a related but separate concern.
Break word
The "breakword" behaviour is employed as the default for safety. Allowing content to overflow its container should be a deliberate decision. This helps to avoid an unusually long string of text causing layout problems.
No wrap
Prevent the text from wrapping onto multiple lines. Only use "nowrap" when you expect the content to be extremely short, and may otherwise be “squashed” by surrounding elements.
Unset
When overflow is "unset" the browser will break lines according to normal line breaking rules. Words or unbroken strings (like URLs) will not break, even if they overflow the container.
Size
The size of text should correlate with the importance of the content, and its position in the information hierarchy.
Font sizes will responsively adjust depending on the device. Learn about platform scales in the typographic concepts guide.
Small
Only use "small" text for secondary content, like image captions and tooltips.
Regular
Use "regular" size text for UI controls and short messages.
As the default value it should typically be omitted, and is only included for illustrative purposes in the example below.
Medium
Consider "medium" text for long-form content, especially where users must concentrate on editing the text.
Large
The "large" size should typically be reserved for cases that are heading adjacent, like summary content following a title.
Truncate
Limit the contents of the element to the specified number of lines, or provide a shorthand boolean to conveniently express a single line.
Only truncate user-generated content that may not fit within a particular layout. Learn more about how and when to truncate text in the typographic concepts guide.
Variant
A subset of values available on the CSS font-variant-numeric property, which enable additional glyphs for numbers.
Diagonal fractions
Use "diagonal-fractions" to display fractions in a smaller format where the numerator (top number) and denominator (bottom number) are divided by a diagonal slash.
Ordinal
Use "ordinal" to enable special glyphs for ordinal markers.
Slashed zero
Use "slashed-zero" when a clear distinction between O and 0 is needed.
Tabular numbers
Use "tabular-nums" when numbers should have uniform widths, for clean formatting in tabular data contexts.
Right align numbers when they're in tabular data contexts. This keeps the decimal in the same place and makes numerical data easier to read and compare.
Visually hidden
Text content can be visually hidden and made accessible to assistive technologies using the visuallyHidden prop.
Weight
The weight determines how “bold” or “light” the text will appear.
Regular
Use the "regular" weight for most body copy.
As the default value it should typically be omitted, and is only included for illustrative purposes in the example below.
Medium
The "medium" weight is most commonly used for interactive elements.
Semi Bold
The "semibold" weight should only be used to indicate that an interactive element is “selected”, distinguishing it from its nearby counterparts.
Bold
Reserve "bold" text for titles and emphasis. Use sparingly to avoid diluting its impact.
Patterns
Line height
The line-height of each a Text element is baked into its size and unfortunately can’t be changed. Attempting to force the line-height of a text element manually will result in unexpected side-effects.
Learn about spacing in the typographic concepts guide.
Line length
Wide lines of text are difficult to read and make it harder for people to focus. While variable screen sizes make it difficult, aim for around 60 and no more than 80 characters per line including spacing.
Numerical data
Use tabular numbers for numerical data. In tables, numbers should be right aligned to make numerical data easier to read and compare. This applies to things like time stamps, currency values, etc.