Typography

StrataKit MUI modifications

• The font-family has been changed to InterVariable. See self-hosting fonts.
• The typography scale has been adjusted to better align with StrataKit’s more compact visual language.
• Several new variants have been added.
• The default variant is now "inherit" instead of "body1".
• The render prop is required to be set for all heading variants.
• The stock MUI heading and subtitle variants all map to <h2> elements by default, except for the "h1" variant which still maps to <h1>. In all these cases, the render prop is required.
• The "secondary" color value has been removed. A "textTertiary" color value has been added.

Examples

Variants

The following custom Typography variants are available:

• "display-lg" / "display-md" / "display-sm"
• "headline-lg" / "headline-md" / "headline-sm"
• "body-lg" / "body-md" / "body-sm"
• "subtitle-lg" / "subtitle-md" / "subtitle-sm"
• "caption-lg" / "caption-md" / "caption-sm"
• "mono-sm"

All of the stock MUI Typography variants are also available for backwards compatibility, but not recommended for use.

Heading

StrataKit decouples the visual presentation of Typography from its semantic meaning. Any visual variant can be rendered as any HTML element using the render prop. This allows for maximum flexibility without compromising accessibility.

When using a heading variant, the render prop should typically be set to a heading element (<h1> to <h6>). Be sure to pick the most appropriate heading element required to maintain proper heading structure in your application.

Grabbing attention

You may want a statement to stand out. This statement might regard a special offer, or perhaps a warning. Standalone statements are not headings, since they do not introduce a new section of content. Do not use a semantic heading element in these cases. Instead, set the render prop to a generic element (<p> or <span> or <div>):

<Typography variant="subtitle-lg" render={<p />}>
  This change cannot be undone.
</Typography>

Colors

By default, the Typography component inherits the ancestor’s color. Use the color prop to explicitly set the text color.

The following color are available for the color prop:

• "textPrimary"
• "textSecondary"
• "textTertiary"
• "textDisabled"
• "primary"
• "error"
• "info"
• "success"
• "warning"

✅ Do

• Use the variant prop of the Typography component to affect the visual presentation of the text.
• Use the render prop to set the most semantically appropriate element. This is required for heading variants.

🚫 Don’t

• Don’t use Typography to disrupt or flatten the visual hierarchy.
• Don’t render a heading element when you simply want to grab attention.