Typography

Examples of available typography styles.

Font Families

The main body font for the site is Figtree, a modern sans-serif typeface that is easy to read and works well across different devices.

The main accent font is Outfit, a bold and distinctive typeface that adds character to the site. It is used for headings and important text elements.

The site also uses a variety of other fonts for specific purposes, such as code snippets and special text elements. These fonts are chosen to enhance readability and visual appeal. These fonts include: Audiowide, Syncopate, and Monoton.

There are two typography sets available on the site: the base tailwind utility classes and the prose classes.

Base

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph
Body text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Duis mollis, est non commodo luctus.Duis mollis, est non commodo luctus.

Small text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Duis mollis, est non commodo luctus.Duis mollis, est non commodo luctus.
Muted text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Duis mollis, est non commodo luctus.Duis mollis, est non commodo luctus.

Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Gradient text

Gradient text

First-line and first-letter

You see this old vinyl record, weathered and worn, its label scratched and faded? At first glance, it may appear as nothing more than discarded junk. Yet, to me, it holds something infinitely precious—the sound of my childhood. It's not just music; it's a treasure trove of memories, each groove on its surface a testament to days gone by. As I gently place the needle onto its surface, I am transported back to a time when summer nights stretched on forever, filled with the warmth of family gatherings and pop that emanates from the speakers is like a whisper from the past, a nostalgic echo of moments I hold dear.

Text color

This uses text-primary-content on a bg-primary background: text-bg-primary

This uses text-primary-content on a bg-soft-primary background: text-bg-soft-primary

This uses text-primary-content alongside a border-primary: text-border-primary

Semantic gradient background

Use these semantic gradient background classes to create a smooth left-to-right gradient. The gradient starts with the semantic color on the left and transitions to a 20% darker shade on the right. This helps add depth and visual interest while maintaining consistency with your theme colors.

Prose

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Paragraph

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Duis mollis, est non commodo luctus.Duis mollis, est non commodo luctus.

Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line rendered as bold text.

This line rendered as italicized text.

Lists
  • Unordered list item 1
  • Unordered list item 2
    • Nested item 1
    • Nested item 2
  1. Ordered list item 1
  2. Ordered list item 2
    1. Nested item 1
    2. Nested item 2

Blockquote
This is a blockquote, perfect for highlighting a key statement or a testimonial. It can span multiple lines to give it a bit more substance.

Code

This is an example of inline code within a paragraph.

// This is a code block.
function greet(name) {
  return `Hello, ${name}!`;
}