Typography

Typography component makes it easy to apply a default set of font weights and sizes in your application. Use typography to present your design and content as clearly and efficiently as possible.

// CSS
@import url("https://magnificentui.netlify.app/src/components/typography/typography.css");

// HTML
<link rel="stylesheet" href="https://magnificentui.netlify.app/src/components/typography/typography.css">

Headings

The heading has 6 sizes. h1 h2 h3 h4 h5 h6

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading

h6. Heading

<h1 class="h1">h1. Heading</h1>
<h2 class="h2">h2. Heading</h2>
<h3 class="h3">h3. Heading</h3>
<h4 class="h4">h4. Heading</h4>
<h5 class="h5">h5. Heading</h5>
<h6 class="h6">h6. Heading</h6>

Font and its CDN

Fontsource can be configured to load specific subsets, weights and styles.

This is an IBM Plex Sans font

//CSS
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,700&display=swap");

// HTML
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>

Note: Used 10px as root font size.