Typography

Font-family

Too many type sizes and styles at once can spoil any layout. We decided that the best option will be use Inter which is easy accessible from Google Fonts. During the installation of @mercell/tailwind we are adding font-family code so you don't have to worry and change anything to achieve one font in whole project.

This is a Hero title

<h1>{message}</h1>
<p className="hero">{message}</p>

This is a big title

<h2>{message}</h2>
<p className="title-big">{message}</p>

This is a medium title

<h3>{message}</h3>
<p className="title-medium">{message}</p>

This is a subtitle

<h4 className="subtitle">{message}</h4>
<p className="subtitle">{message}</p>

This is a body title

<p className="title">{message}</p>

This is a body text

<p>{message}</p>

This is a caption title

<p className="title-caption">{message}</p>

This is a caption text

<p className="text-caption">{message}</p>

This is a small title

<p className="title-small">{message}</p>

This is a small text

<p className="text-small">{message}</p>