×

Typography

Examples

Example of headings

This is a h1 heading

This is a h2 heading

This is a h3 heading

This is a h4 heading

This is a h5 heading
This is a h6 heading
                        
<h1 class="h1">This is a h1 heading</h1>
<h2 class="h2">This is a h2 heading</h2>
<h3 class="h3">This is a h3 heading</h3>
<h4 class="h4">This is a h4 heading</h4>
<h5 class="h5">This is a h5 heading</h5>
<h6 class="h6">This is a h6 heading</h6>
                        
                     

Example of some body, subtitle and button text

body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam

body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam

subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
This is a button text this is a overline text this is caption text
                        
<p class="body1">
    body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
    blanditiis tenetur unde suscipit, quam beatae rerum inventore
    consectetur, neque doloribus, cupiditate numquam dignissimos laborum
    fugiat deleniti? Eum quasi quidem quibusdam
</p>
<p class="body2">
    body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
    blanditiis tenetur unde suscipit, quam beatae rerum inventore
    consectetur, neque doloribus, cupiditate numquam dignissimos laborum
    fugiat deleniti? Eum quasi quidem quibusdam
</p>
<h6 class="subtitle1">
    subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Quos blanditiis tenetur
</h6>
<h6 class="subtitle2">
    subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Quos blanditiis tenetur
</h6>
<span class="button-text">This is a button text</span>
<span class="overline-text">this is a overline text</span>
<span class="caption-text">this is caption text</span>
                        
                     

Example of text sizes

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

                        
<p class="text-xs">The quick brown fox jumps over the lazy dog.</p>
<p class="text-sm">The quick brown fox jumps over the lazy dog.</p>
<p class="text-base">The quick brown fox jumps over the lazy dog.</p>
<p class="italic text-md">The quick brown fox jumps over the lazy dog.</p>
<p class="text-lg">The quick brown fox jumps over the lazy dog.</p>
<p class="text-xl">The quick brown fox jumps over the lazy dog.</p>
<p class="text-2xl">The quick brown fox jumps over the lazy dog.</p>
<p class="italic text-3xl">
    The quick brown fox jumps over the lazy dog.
</p>
<p class="text-4xl">The quick brown fox jumps over the lazy dog.</p>
<p class="italic text-5xl">
    The quick brown fox jumps over the lazy dog.
</p>
<p class="text-6xl">The quick brown fox jumps over the lazy dog.</p>
<p class="text-7xl">The quick brown fox jumps over the lazy dog.</p>
<p class="text-8xl">The quick brown fox jumps over the lazy dog.</p>
<p class="text-9xl">The quick brown fox jumps over the lazy dog.</p>