<!-- Huge -->
<h1 class="typo-huge">Aeroporto di Bologna</h1>
<!-- Xlarge -->
<h2 class="typo-xlarge">Aeroporto di Bologna</h2>
<!-- Large -->
<h3 class="typo-large">Aeroporto di Bologna</h3>
<!-- Medium -->
<h4 class="typo-medium">Aeroporto di Bologna</h4>
<!-- Base -->
<p class="">Aeroporto di Bologna</p>
<!-- Small -->
<p class="typo-small">Aeroporto di Bologna</p>
<{{el}} class="{{ class }}">{{ text }}</{{el}}>
/* Huge */
{
"el": "h1",
"class": "typo-huge",
"text": "Aeroporto di Bologna"
}
/* Xlarge */
{
"el": "h2",
"class": "typo-xlarge",
"text": "Aeroporto di Bologna"
}
/* Large */
{
"el": "h3",
"class": "typo-large",
"text": "Aeroporto di Bologna"
}
/* Medium */
{
"el": "h4",
"class": "typo-medium",
"text": "Aeroporto di Bologna"
}
/* Base */
{
"el": "p",
"class": "",
"text": "Aeroporto di Bologna"
}
/* Small */
{
"el": "p",
"class": "typo-small",
"text": "Aeroporto di Bologna"
}
Style rules for typografy are defined in: src/sass/04-elements/_elements.typo.scss
| font-size (px) | line-height (px) | font-size (%) | line-height |
|---|---|---|---|
| 12px | 16px | 75% | 1.5 |
| 16px | 24px | 100% | 1.5 |
| 20px | 28px | 125% | 1.4 |
| 24px | 32px | 150% | 1.333 |
| 28px | 40px | 175% | 1.428 |
| 32px | 48px | 200% | 1.5 |
| 48px | 64px | 300% | 1.333 |
| 64px | 72px | 400% | 1.125 |