Typography
Optimized typographic scale presents the design and content clearly and efficiently.
Too many type sizes and styles at once can spoil any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.
Design System Font
The Unifi Design System font is Open Sans and will not be automatically loaded by the library. You are responsible for loading all fonts used in your application.
Open Sans is freely available via Google Fonts.
Here is a sample of how to load Open Sans via the link method with required font weights:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap">
Variants
All typography leverages the <Typography /> component. body2 is the default variant.
Note: Variants assume an html heading, but may not be the correct one for the flow of your document. Use the component prop to correct the semantic hierarchy as needed when using a variant for visual hierarchy.
Utility Scaling
To scale an instance of Typography relative to its initial size, use the scale prop.
Note: To adjust the entire scale of a variant, make your adjustment within theme customization as described in the Theme docs.
Colors
Theme and logical color variants are provided to Typography.
While it is assumed by initial that a parent color will be inherited, you can enforce that behavior by explicitly defining color="inherit" as shown in the last example.