Typography

Introduction

Within the design system, responsive typography had been introduced to ensure that the text scales appropriately across different screen sizes. To accommodate this and align have the correct font-family, font-size, weight, line-height and letter-spacing, abstraction classes have been created to make it easy to use. These classes are based on the Tailwind CSS framework but stand outside of the utility-first approach.

For titles the following classes are available:

typo-primary-title
typo-secondary-title
typo-tertiary-title
typo-quaternary-title
typo-quinary-title

For text the following classes are available:

typo-primary-text
typo-secondary-text
typo-tertiary-text
typo-quaternary-text
typo-intro-text
typo-quote-text
typo-button-text
typo-button-text-small

By default, the <html> has the typo-primary-text styles applied, so body text will be correctly styled by default.

WARNING

The following properties are not available through utility classes: font-family, font-size, weight, line-height and letter-spacing. Because the responsive typography sets these properties correctly there is no need for using utility classes. The main goal is to apply specific typography classes based on the function of the text, and not to mix these with utility classes.

Lists

Ordered Lists

Ordered Lists use decimal numbers as marker for each list item by default using the list-ordered class.

ordered.html

html

<ol class="list-ordered">
  <li>Nulla vitae elit libero, a pharetra augue.</li>
  <li>Cras justo odio, dapibus ac facilisis in.</li>
  <li>Tellus ac cursus commodo, tortor mauris condimentum.</li>
  <li>Egestas eget quam. Fusce dapibus</li>
  <ol>
    <li>Nulla vitae elit libero, a pharetra augue.</li>
    <li>Cras justo odio, dapibus ac facilisis in.</li>
    <ol>
      <li>Nulla vitae elit libero, a pharetra augue.</li>
      <li>Cras justo odio, dapibus ac facilisis in.</li>
    </ol>
  </ol>
</ol>

Unordered Lists

Unordered Lists use a bullet point as marker for each list item by default using the list-unordered class. But you can set the marker by providing a Codey Tailwind class:

Class	Marker
`list-dot`	Dot
`list-check`	Checkmark
`list-chevron-right`	Chevron Right

unordered.htmldot.htmlcheck.htmlchevron-right.html

html

<ul class="list-unordered">
  <li>Nulla vitae elit libero, a pharetra augue.</li>
  <li>Cras justo odio, dapibus ac facilisis in.</li>
  <li>Tellus ac cursus commodo, tortor mauris condimentum.</li>
  <li>Egestas eget quam. Fusce dapibus</li>
  <ul>
    <li>Tellus ac cursus commodo, tortor mauris condimentum.</li>
    <li>Egestas eget quam. Fusce dapibus</li>
    <ul>
      <li>Tellus ac cursus commodo, tortor mauris condimentum.</li>
      <li>Egestas eget quam. Fusce dapibus</li>
    </ul>
  </ul>
</ul>

html

<ul class="list-dot">
  <li>Nulla vitae elit libero, a pharetra augue.</li>
  <li>Cras justo odio, dapibus ac facilisis in.</li>
  <li>Tellus ac cursus commodo, tortor mauris condimentum.</li>
  <li>Egestas eget quam. Fusce dapibus</li>
  <ul>
    <li>Tellus ac cursus commodo, tortor mauris condimentum.</li>
    <li>Egestas eget quam. Fusce dapibus</li>
    <ul>
      <li>Tellus ac cursus commodo, tortor mauris condimentum.</li>
      <li>Egestas eget quam. Fusce dapibus</li>
    </ul>
  </ul>
</ul>

html

<ul class="list-check">
  <li>Nulla vitae elit libero, a pharetra augue.</li>
  <li>Cras justo odio, dapibus ac facilisis in.</li>
  <li>Tellus ac cursus commodo, tortor mauris condimentum.</li>
  <li>Egestas eget quam. Fusce dapibus</li>
  <ul>
    <li>Tellus ac cursus commodo, tortor mauris condimentum.</li>
    <li>Egestas eget quam. Fusce dapibus</li>
    <ul>
      <li>Tellus ac cursus commodo, tortor mauris condimentum.</li>
      <li>Egestas eget quam. Fusce dapibus</li>
    </ul>
  </ul>
</ul>

html

<ul class="list-chevron-right">
  <li>Nulla vitae elit libero, a pharetra augue.</li>
  <li>Cras justo odio, dapibus ac facilisis in.</li>
  <li>Tellus ac cursus commodo, tortor mauris condimentum.</li>
  <li>Egestas eget quam. Fusce dapibus</li>
  <ul>
    <li>Tellus ac cursus commodo, tortor mauris condimentum.</li>
    <li>Egestas eget quam. Fusce dapibus</li>
    <ul>
      <li>Tellus ac cursus commodo, tortor mauris condimentum.</li>
      <li>Egestas eget quam. Fusce dapibus</li>
    </ul>
  </ul>
</ul>

Tailwind Typography Showcase

Primary Title

Secondary Title

Tertiary Title

Quaternary Title

Quinary Title

Primary Text will look like this. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Secondary Text will look like this. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Intro Text will look like this. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Quote Text will look like this. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lists

Ordered List

Nulla vitae elit libero, a pharetra augue.
Cras justo odio, dapibus ac facilisis in.
Tellus ac cursus commodo, tortor mauris condimentum.
Egestas eget quam. Fusce dapibus

Nulla vitae elit libero, a pharetra augue.
Cras justo odio, dapibus ac facilisis in.

Nulla vitae elit libero, a pharetra augue.
Cras justo odio, dapibus ac facilisis in.

Unordered List: Default

Nulla vitae elit libero, a pharetra augue.
Cras justo odio, dapibus ac facilisis in.
Tellus ac cursus commodo, tortor mauris condimentum.
Egestas eget quam. Fusce dapibus

Tellus ac cursus commodo, tortor mauris condimentum.
Egestas eget quam. Fusce dapibus

Tellus ac cursus commodo, tortor mauris condimentum.
Egestas eget quam. Fusce dapibus

Unordered List: Dot

Nulla vitae elit libero, a pharetra augue.
Cras justo odio, dapibus ac facilisis in.
Tellus ac cursus commodo, tortor mauris condimentum.
Egestas eget quam. Fusce dapibus

Tellus ac cursus commodo, tortor mauris condimentum.
Egestas eget quam. Fusce dapibus

Tellus ac cursus commodo, tortor mauris condimentum.
Egestas eget quam. Fusce dapibus

Unordered List: Check

Nulla vitae elit libero, a pharetra augue.
Cras justo odio, dapibus ac facilisis in.
Tellus ac cursus commodo, tortor mauris condimentum.
Egestas eget quam. Fusce dapibus

Unordered List: Chevron Right

Nulla vitae elit libero, a pharetra augue.
Cras justo odio, dapibus ac facilisis in.
Tellus ac cursus commodo, tortor mauris condimentum.
Egestas eget quam. Fusce dapibus

Figma Design File

The design file can be consulted here

Typography ​

Introduction ​

Lists ​

Ordered Lists ​

Unordered Lists ​

Tailwind Typography Showcase ​

Primary Title

Secondary Title

Tertiary Title

Quaternary Title

Quinary Title

Lists

Ordered List

Unordered List: Default

Unordered List: Dot

Unordered List: Check

Unordered List: Chevron Right

Typography

Introduction

Lists

Ordered Lists

Unordered Lists

Tailwind Typography Showcase