Strong

Anatomy

Guidelines

When to use

Strong is the semantic typographic component for marking text with bold, visual importance. Use this component when the user must be aware of critical information—names, counts, actions or key terms—especially when the items are related to destructive actions the user may take.

Using Strong implies semantic meaning is important. If semantics are not required and establishing a visual hierarchy is the goal, consider using the Text component with a heavier font weight instead.

Strong vs. Emphasis

Strong and Emphasis are both typographic components built on top of Text to take advantage of the <strong> and <em> HTML tags, respectively. It's important to understand the difference so semantics remain intact within the page document:

• Strong uses a heavier font weight to highlight important, serious or urgent text for the user.
• Emphasis uses an italic font style to mark text with stressed emphasis. Importance is not necessary.

Best practices

Confirmation context

When asking users to confirm a destructive or significant action, use Strong to highlight the specific item being affected. Drawing attention to this item reduces the risk that the user will accidentally confirm a destructive and possibly irreversible action.

Metadata labels

Strong is commonly used in key-value metadata patterns where the label needs to stand out from its value. Keep the label concise and follow it with a colon.

Content

Scoping emphasis

Strong is meant to convey visual importance in a way that is easily scannable across the entire page. Use this component sparingly and with the least amount of words necessary to make the intention clear. Adding more words than needed to the emphasis scope will make the information harder for the user to scan.