Typography

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

Usage

Typography of Hummingbird follows a standard typographic scale with six levels of headings, paragraphs, and other text elements. The base font size is 16px, and the line height is set to 1.5 for optimal readability.

Figtree font

Hummingbird uses the Figtree font by default. Add the following @import statement to the CSS or include CDN link in the <head> of the HTML document to load the font.

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

Headings

h1 to h6 headings are available, with decreasing font sizes and consistent margins.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Text colors

Apply semantic text-* utility classes to any text element to indicate emphasis, status, or hierarchy.

This is primary text

This is secondary text

This is success text

This is warning text

This is danger text

This is info text

This is subtle text

This is muted text

This is default text

This is highlight text

This is emphasis text

HTML

<p class="text-primary">This is primary text</p>
<p class="text-secondary">This is secondary text</p>
<p class="text-success">This is success text</p>
<p class="text-warning">This is warning text</p>
<p class="text-danger">This is danger text</p>
<p class="text-info">This is info text</p>
<p class="text-subtle">This is subtle text</p>
<p class="text-muted">This is muted text</p>
<p class="text-default">This is default text</p>
<p class="text-highlight">This is highlight text</p>
<p class="text-emphasis">This is emphasis text</p>

Font sizes

Apply text-* size utility classes to control the font size of text elements.

This is a sample text

HTML

<p class="text-xs">This is a sample text</p>
<p class="text-sm">This is a sample text</p>
<p class="text-base">This is a sample text</p>
<p class="text-lg">This is a sample text</p>
<p class="text-xl">This is a sample text</p>
<p class="text-2xl">This is a sample text</p>
<p class="text-3xl">This is a sample text</p>

Font weight

Use font-* utility classes to adjust the weight of text based on emphasis and hierarchy.

This text is very thin.

This text is extra light.

This text is light.

This text is normal weight.

This text is medium weight.

This text is semi-bold.

This text is bold.

This text is extra bold.

This text is very heavy (black).

HTML

<p class="font-thin">This text is very thin.</p>
<p class="font-extralight">This text is extra light.</p>
<p class="font-light">This text is light.</p>
<p class="font-normal">This text is normal weight.</p>
<p class="font-medium">This text is medium weight.</p>
<p class="font-semibold">This text is semi-bold.</p>
<p class="font-bold">This text is bold.</p>
<p class="font-extrabold">This text is extra bold.</p>
<p class="font-black">This text is very heavy (black).</p>

Text alignment

Use text-* alignment utility classes on text elements to control horizontal alignment.

text-left aligns text to the left.

text-center centers the text.

text-right aligns text to the right.

text-justify stretches text to align both left and right edges.

text-start aligns text to the start based on text direction.

text-end aligns text to the end based on text direction.

HTML

<p class="text-left"><span>text-left</span> aligns text to the left.</p>
<p class="text-center"><span>text-center</span> centers the text.</p>
<p class="text-right"><span>text-right</span> aligns text to the right.</p>
<p class="text-justify"><span>text-justify</span> stretches text to align both left and right edges.</p>
<p class="text-start"><span>text-start</span> aligns text to the start based on text direction.</p>
<p class="text-end"><span>text-end</span> aligns text to the end based on text direction.</p>

Text wrap

Apply text wrapping utilities such as text-wrap or text-nowrap to control how text flows within its container.

text-wrap - This text wraps onto the next line when it reaches the container width.

text-nowrap - This text stays on one line and does not wrap.

HTML

<p class="text-wrap border border-danger/40"><strong>text-wrap</strong> - This text wraps onto the next line when it reaches the container width.</p>
<p class="text-nowrap border border-danger/40"><strong>text-nowrap</strong> - This text stays on one line and does not wrap.</p>

Text transform

Use text transform utilities like uppercase, lowercase, or capitalize to change the casing of text.

Lowercase text

Uppercase text

Capitalized text

HTML

<p class="lowercase">Lowercase text</p>
<p class="uppercase">Uppercase text</p>
<p class="capitalize">Capitalized text</p>

Text decoration

Apply text decoration utilities to style the appearance of text.

This text is underlined.

This text has an overline.

This text is crossed out.

This text has no decoration.

This link underlines on hover.

Underline with pink decoration

This text has a wavy underline.

This text has a bigger underline offset.

This text has a thicker underline.

HTML

<p class="underline">This text is underlined.</p>
<p class="overline">This text has an overline.</p>
<p class="line-through">This text is crossed out.</p>
<p class="no-underline">This text has no decoration.</p>
<p>This <a href="#" class="no-underline hover:underline">link underlines</a> on hover.</p>
<p class="underline decoration-pink-500">Underline with pink decoration</p>
<p class="underline decoration-wavy">This text has a wavy underline.</p>
<p class="underline underline-offset-8">This text has a bigger underline offset.</p>
<p class="underline decoration-4">This text has a thicker underline.</p>

Line height

Apply leading-* or font-size shorthand utilities to control vertical spacing between lines of text.

This block uses no extra line spacing, causing the lines of text to appear very close together and making longer content harder to read.

This text uses a base font size with a fixed line height of 1.5, providing a compact but readable spacing suitable for UI copy and short content.

This paragraph applies a line height of 2rem, creating more vertical space between lines and improving overall clarity and readability for longer multiline text blocks.

This example uses a custom line height of 40px, resulting in more spacious line spacing that works well for large text, emphasis-heavy layouts, and prominent headings.

HTML

<p class="leading-none">This block uses no extra line spacing, causing the lines of text to appear very close together and making longer content harder to read.</p>
<p class="text-base/6">This text uses a base font size with a fixed line height of 1.5, providing a compact but readable spacing suitable for UI copy and short content.</p>
<p class="leading-8">This paragraph applies a line height of 2rem, creating more vertical space between lines and improving overall clarity and readability for longer multiline text blocks.</p>
<p class="leading-[40px]">This example uses a custom line height of 40px, resulting in more spacious line spacing that works well for large text, emphasis-heavy layouts, and prominent headings.</p>

Letter spacing

Use tracking-* utility classes to adjust the spacing between characters.

Letters are very tight.

Letters are a bit tight.

Letters have normal spacing.

Letters are spaced wider.

Letters are spaced even wider.

Letters are very widely spaced.

Letters have custom 5px spacing.

HTML

<p class="tracking-tighter">Letters are very tight.</p>
<p class="tracking-tight">Letters are a bit tight.</p>
<p class="tracking-normal">Letters have normal spacing.</p>
<p class="tracking-wide">Letters are spaced wider.</p>
<p class="tracking-wider">Letters are spaced even wider.</p>
<p class="tracking-widest">Letters are very widely spaced.</p>
<p class="tracking-[5px]">Letters have custom 5px spacing.</p>

Truncating text

Apply truncate to shorten overflowing text and display an ellipsis.

This is a short paragraph demonstrating text truncation in Tailwind when content overflows its container width.

HTML

<p class="truncate">This is a short paragraph demonstrating text truncation in Tailwind when content overflows its container width.</p>

Line clamp

Apply line-clamp-* utility classes to limit text to a specific number of lines and truncate overflow content.

This example uses an even longer block of text to show how three lines of content can be displayed before truncation occurs. This approach is useful when you want to show more context while still maintaining consistent spacing and preventing excessively tall content blocks.

HTML


<p class="line-clamp-3">
  This example uses an even longer block of text to show how three lines of
  content can be displayed before truncation occurs. This approach is useful
  when you want to show more context while still maintaining consistent
  spacing and preventing excessively tall content blocks.
</p>

List

Apply list-* utilities to control list markers.

list-disc

Apples are delicious and healthy.
Mountains offer breathtaking views.
Coding improves problem-solving skills.

list-decimal

First step: gather all ingredients.
Second step: preheat the oven.
Third step: mix and bake carefully.

list-none

Sunsets paint the sky beautifully.
Books open doors to new worlds.
Flowers brighten up any room.

<ul class="list-disc">
  <li>Apples are delicious and healthy.</li>
  <!-- ... -->
</ul>
<ol class="list-decimal">
  <li>First step: gather all ingredients.</li>
  <!-- ... -->
</ol>
<ul class="list-none">
  <li>Sunsets paint the sky beautifully.</li>
  <!-- ... -->
</ul>

Vertical align

Use align-* utilities to adjust the vertical alignment of text within a line.

This text is aligned to the baseline

This text is aligned to the top

This text is aligned to the middle

This text is aligned to the bottom

This text is aligned to the top of the parent element's font

This text is aligned to the bottom of the parent element's font

<span class="align-baseline">This text is aligned to the baseline</span>
<span class="align-top">This text is aligned to the top</span>
<span class="align-middle">This text is aligned to the middle</span>
<span class="align-bottom">This text is aligned to the bottom</span>
<span class="align-text-top">This text is aligned to the top of the parent element's font</span>
<span class="align-text-bottom">This text is aligned to the bottom of the parent element's font</span>

Text shadow

Use text-shadow-* utilities to add depth and contrast to text.

Extra extra small text shadow

Extra small text shadow

Small text shadow

Medium text shadow

Large text shadow

Large shadow with 20% opacity

Large shadow with 30% opacity

HTML

<p class="text-shadow-2xs">Extra extra small text shadow</p>
<p class="text-shadow-xs">Extra small text shadow</p>
<p class="text-shadow-sm">Small text shadow</p>
<p class="text-shadow-md">Medium text shadow</p>
<p class="text-shadow-lg">Large text shadow</p>
<p class="text-shadow-lg/20">Large shadow with 20% opacity</p>
<p class="text-shadow-lg/30">Large shadow with 30% opacity</p>

Gradient text

Use bg-clip-text and text-transparent with background gradient utilities to render text with a gradient fill.

Hello World

HTML

<h1 class="bg-linear-to-r from-pink-500 to-violet-500 bg-clip-text font-extrabold text-transparent inline-block">Hello World</h1>

Inline elements

Various inline text elements are available for emphasis and clarity.

Bold: Use strong tags for bold text.
Italic: Use i tags for italic text.
~~Deleted text~~: Use del tags for deleted text.
Code: Use code tags for inline code snippets.
Keyboard input: Use kbd tags for keyboard input representation.
Highlighted text: Use mark tags for highlighted text.
Underlined text: Use u tags for underlined text.
Small text: Use small tags for smaller text.
^Superscript: Use sup tags for superscript text.
_Subscript: Use sub tags for subscript text.
Links: Use a tags for hyperlinks.
Emphasized text: Use em tags for emphasized text.

<p>This is a <strong>bold</strong> text.</p>
<p>This is an <i>italic</i> text.</p>
<p>This is a <del>deleted</del> text.</p>
<p>This is a <code>inline code</code> text.</p>
<p>This is a <kbd>keyboard input</kbd> text.</p>
<p>This is a <mark>highlighted</mark> text.</p>
<p>This is an <u>underlined</u> text.</p>
<p>This is a <small>small</small> text.</p>
<p>This is a <sup>superscript</sup> text.</p>
<p>This is a <sub>subscript</sub> text.</p>
<p>This is a <a href="#">link</a>.</p>
<p>This is an <em>emphasized</em> text.</p>

Responsive typography

Use Tailwind’s responsive design utilities to adjust typography for different screen sizes.

Responsive Heading

<h1 class="text-2xl md:text-4xl lg:text-5xl">Responsive Heading</h1>

Customization

Hummingbird’s typography can be customized using Tailwind’s theme variables feature. Modify font families, sizes, weights, and line heights using CSS variable under the @theme directive.

@theme {
  --font-sans: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --text-10xl: 10rem;
  --leading-xl: 2.5;
}

Grid

Background

Getting Started

Customize

Layout & content

Forms

Advanced Forms

Components

Typography

Usage

Figtree font

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text colors

Font sizes

Font weight

Text alignment

Text wrap

Text transform

Text decoration

Line height

Letter spacing

Truncating text

Line clamp

List

Vertical align

Text shadow

Gradient text

Hello World

Inline elements

Responsive typography

Responsive Heading

Customization