---
title: Typography
layout: common-ux-layout.hbs
---

<section class="sg-section">
<div class="h4">Font</div>
<h2>TUI Type Light</h2>
<p class="text-2"><a href="#"><img style="height:16px;width:16px;vertical-align:-.1em" src="https://www.tui.se/cdn/img/styleGuide/download.svg"> Download</a></p>
</section>
<section class="sg-section">
  <h4>Line Heights</h4>
  <p class="text-2">1.1 for Header 1 and 1 for character spacing.<br>
  1.2 for Header 2 to 5, Quote, Preamble &amp; Buttons</br>
  1.3 for Body</p>
</section>
<section class="sg-section">
  <p class="text-2">All values are converted to rounded pixelvalues in Sketch.<br>
  The typographic hierarchy is set from mobile first which means that ‘medium’ and ‘large’ will act as overrides when applicable. Fallbacks are shown below as greyed out.</p>
  <h3>Font families</h3>
</section>
<section class="sg-section">
  <span class="button-heading">typographic-responsive-scale</span>
  <div class="btn-border"></div>
  {{>headlines}}
</section>
<section class="sg-section">
  {{>body-text}}
</section>
<section class="sg-section">
  {{>lead-body-copy}}
  {{>blockquotes}}
</section>