Typography

Headings

Use .h1 – .h4 class to change an elements font size and weight to match Miro heading styles. It is also normalizing each one of them.

<div>
	<h1 class="h1">Heading 1</h1>
	<h2 class="h2">Heading 2</h2>
	<h3 class="h3">Heading 3</h3>
	<h4 class="h4">Heading 4</h4>
</div>

Paragraph

Use .p-large,.p-medium or .p-small to change an elements font size and weight to match Miro paragraph styles.

<div>
	<p class="p-large">Paragraph large</p>
	<p class="p-medium">Paragraph medium</p>
	<p class="p-small">Paragraph small</p>
</div>

Fonts

To override fonts, you can use var(--header-font) for headers, and var(--body-font) for other texts.

--header-font: 'Open Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji;
--body-font: 'Open Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji,
    Segoe UI Emoji;

Font weight

We have 4 supported font-weights. You shouldn't have to use them when using the classes mentioned above.

--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 600;
--font-weight-black: 800;