# Typography · MIAN

Headings, lead, body, links, quotes and lists that follow the noodle's heading and body fonts.

- Id: `typography` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/typography
- Use for: headings, text styles, prose, rich text, lists and quotes.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-h1 … mn-h4`: Heading styles for any element.
- `mn-lead · mn-muted · mn-small`: Intro paragraph · secondary text · small text.
- `mn-link`: Inline link.
- `mn-prose`: Styles raw HTML: Markdown output, CMS content.

## Accessibility

- Keep heading levels in order; the mn-h* classes let you pick the look independently of the level.

## Examples

### Prose

```html
<article class="mn-prose">
  <h1>Interfaces cooked differently</h1>
  <p class="mn-lead">A noodle is a design system: its own palette, radius, type and density over one component set.</p>
  <p>Switch the noodle in the header and this paragraph, its <a href="#typography">links</a> and its <code class="mn-code">code</code> change with it.</p>
  <h2>Why noodles</h2>
  <blockquote>Same flour and water, entirely different results.</blockquote>
  <ul><li>Twelve design systems</li><li>Light and dark for each</li><li>One class API</li></ul>
</article>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/typography/source