Our typographic scale is held across variables within sky-toolkit-core, with classes available for use in sky-toolkit-ui.

Classes are semantic and decoupled from element styling; preventing misuse of HTML and providing greater control on the sizing of text elements.

🔗Typographic Scale

Whilst pixel values are provided for designers, developers should use the classes specified below for an automatic responsive typographic scale.

Heading Alpha

Desktop: 50px, Mobile: 36px

Heading Bravo

Desktop: 40px, Mobile: 29px

Heading Charlie

Desktop: 34px, Mobile: 25px

Heading Delta

Desktop: 28px, Mobile: 20px

Text Lead

Desktop: 22px, Mobile: 18px

Text Body

Desktop: 18px, Mobile: 16px

Text Smallprint

Desktop: 12px, Mobile: 12px

<h1 class="c-heading-alpha">Heading Alpha</h1>
<h2 class="c-heading-bravo">Heading Bravo</h2>
<h3 class="c-heading-charlie">Heading Charlie</h3>
<h4 class="c-heading-delta">Heading Delta</h4>

<p class="c-text-lead">Text Lead</p>
<p class="c-text-body">Text Body</p>
<p class="c-text-smallprint">Text Smallprint</p>