IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Text

/

Design

Display user content or microcopy at common sizes.

Text is the most common typographical element within our interfaces. Think of it as the body copy.

IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Text documentation and examples.

Size

The level of text you select should provide the appropriate hierarchy and visual coherency within the interface.

If sending a check, please include the invoice number in the memo.

Default: Ideal for most text situations.

Style

The tight variation of text decreases the line height to save space. Because it is more difficult to read, tight is not intended for long blocks of copy.

If sending a check, please include the
invoice number in the memo.

Default: Ideal for most text situations.

Microcopy

The text component supports weight changes for emphasis. Be intentional when choosing to bring attention to information using italics or bold. There’s a hard limit of one bold or italicized phrase—do not change the weight of a complete sentence.

Use the non-label guidelines when typesetting text.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.