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.
• The default variant is now "body2" instead of "body1".
• A warning will be logged during development if a heading variant is used without explicitly setting the render prop.

Examples

Heading

Heading variants of the Typography will render the respective <h1> to <h6> heading elements. You should use the render prop to override the rendered element and maintain proper heading structure in your application. When the render prop is not set, StrataKit will log a warning during development.

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.

In these cases, combine a larger variant with the render prop to set a generic <span> or <div> element:

<Typography variant="h6" render={<span />}>
  This change cannot be undone.
</Typography>

Variants

All of the stock MUI Typography variants are available, with sizing adjusted to fit StrataKit’s more compact visual language.

✅ 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 especially important 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.