Typography

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, as well as adjusting the space between pairs of letters.

Examples

Example of headings

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading
h6 heading
                        
<h1 class="h1">h1 heading</h1>
<h2 class="h2">h2 heading</h2>
<h3 class="h3">h3 heading</h3>
<h4 class="h4">h4 heading</h4>
<h5 class="h5">h5 heading</h5>
<h6 class="h6">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 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

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

                        
<p class="text-xs">Hello World</p>
<p class="text-sm">Hello World</p>
<p class="text-base">Hello World</p>
<p class="italic text-md">Hello World</p>
<p class="text-lg">Hello World</p>
<p class="text-xl">Hello World</p>
<p class="text-2xl">Hello World</p>
<p class="italic text-3xl">Hello World</p>
<p class="text-4xl">Hello World</p>
<p class="italic text-5xl">Hello World</p>
<p class="text-6xl">Hello World</p>
<p class="text-7xl">Hello World</p>
<p class="text-8xl">Hello World</p>
<p class="text-9xl">Hello World</p>
Effects Typography