Content

Typography

Theme

Hound

Framework

Tailwind CSS

Typography

Fonts

Headings

Inter

Body

Inter

Typography

Headings

Headings come in two flavors. Default and Display. Default headings are tweaked to render at predesigned styles. You can modify these in the custom CSS included with the theme.

Display headings make use of new utility classes added for the sake of keeping typography more consistent.

For responsive screens adjust sizes using Tailwind's class modifiers i.e,md:text-5xl text-3xl

A quick brown fox jumps over
the lazy dog.

h1 — 48px (3rem)

A quick brown fox jumps over the lazy dog.

h2 — 36px (2.25rem) / 40px (2.5rem)

A quick brown fox jumps over the lazy dog.

h3 — 30px (1.875rem) / 36px (2.25rem)

A quick brown fox jumps over the lazy dog.

h4 — 24px (1.5rem) / 32px (2rem)

A quick brown fox jumps over the lazy dog.

h5 — 20px (1.25rem) / 28px (1.75)

A quick brown fox jumps over the lazy dog.

h6 — 16px (1rem) / 19.2px (1.5rem)

.html
.html.erb
.haml.erb

<h1 class="text-5xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">A quick brown fox jumps over the lazy dog.</h1>
<h2 class="text-4xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">A quick brown fox jumps over the lazy dog.</h2>
<h3 class="text-3xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">A quick brown fox jumps over the lazy dog.</h3>
<h4 class="text-2xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">A quick brown fox jumps over the lazy dog.</h4>
<h5 class="text-xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">A quick brown fox jumps over the lazy dog.</h5>
<h6 class="text-lg font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">A quick brown fox jumps over the lazy dog.</h6>

<%= content_tag :h1, "A quick brown fox jumps over the lazy dog.", class: "text-5xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight" %>
<%= content_tag :h2, "A quick brown fox jumps over the lazy dog.", class: "text-4xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight" %>
<%= content_tag :h3, "A quick brown fox jumps over the lazy dog.", class: "text-3xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight" %>
<%= content_tag :h4, "A quick brown fox jumps over the lazy dog.", class: "text-2xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight" %>
<%= content_tag :h5, "A quick brown fox jumps over the lazy dog.", class: "text-xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight" %>
<%= content_tag :h6, "A quick brown fox jumps over the lazy dog.", class: "text-lg font-extrabold text-slate-900 dark:text-slate-100 tracking-tight" %>

%h1.text-5xl.font-extrabold.text-slate-900.dark:text-slate-100.tracking-tight A quick brown fox jumps over the lazy dog.
%h2.text-4xl.font-extrabold.text-slate-900.dark:text-slate-100.tracking-tight A quick brown fox jumps over the lazy dog.
%h3.text-3xl.font-extrabold.text-slate-900.dark:text-slate-100.tracking-tight A quick brown fox jumps over the lazy dog.
%h4.text-2xl.font-extrabold.text-slate-900.dark:text-slate-100.tracking-tight A quick brown fox jumps over the lazy dog.
%h5.text-xl.font-extrabold.text-slate-900.dark:text-slate-100.tracking-tight A quick brown fox jumps over the lazy dog.
%h6.text-lg.font-extrabold.text-slate-900.dark:text-slate-100.tracking-tight A quick brown fox jumps over the lazy dog.

Typography

Display headings

Useful for very large titles and high pixel-density screens (mobile and tablet devices).

A quick brown fox jumps over the lazy dog.

h1 — 96px (6rem)

A quick brown fox jumps over the lazy dog.

h2 — 72px (4.5rem)

A quick brown fox jumps over the lazy dog.

h3 — 60px (3.75rem)

A quick brown fox jumps over the lazy dog.

h4 — 48px (3rem)

A quick brown fox jumps over the lazy dog.

h5 — 36px (2.25rem)

A quick brown fox jumps over the lazy dog.

h6 — 30px (1.875rem)

.html
.html.erb
.haml.erb

<h1 class="text-8xl tracking-tighter font-extrabold text-slate-900 dark:text-slate-100">A quick brown fox jumps over the lazy dog.</h1>
<h2 class="text-7xl tracking-tighter font-extrabold text-slate-900 dark:text-slate-100">A quick brown fox jumps over the lazy dog.</h2>
<h3 class="text-6xl tracking-tighter font-extrabold text-slate-900 dark:text-slate-100">A quick brown fox jumps over the lazy dog.</h3>
<h4 class="text-5xl tracking-tighter font-extrabold text-slate-900 dark:text-slate-100">A quick brown fox jumps over the lazy dog.</h4>
<h5 class="text-4xl tracking-tighter font-extrabold text-slate-900 dark:text-slate-100">A quick brown fox jumps over the lazy dog.</h5>
<h6 class="text-3xl tracking-tighter font-extrabold text-slate-900 dark:text-slate-100">A quick brown fox jumps over the lazy dog.</h6>

<%= content_tag :h1, "A quick brown fox jumps over the lazy dog.", class: "text-8xl tracking-tighter font-extrabold text-slate-900 dark:text-slate-100" %>
<%= content_tag :h2, "A quick brown fox jumps over the lazy dog.", class: "text-7xl tracking-tighter font-extrabold text-slate-900 dark:text-slate-100" %>
<%= content_tag :h3, "A quick brown fox jumps over the lazy dog.", class: "text-6xl tracking-tighter font-extrabold text-slate-900 dark:text-slate-100" %>
<%= content_tag :h4, "A quick brown fox jumps over the lazy dog.", class: "text-5xl tracking-tighter font-extrabold text-slate-900 dark:text-slate-100" %>
<%= content_tag :h5, "A quick brown fox jumps over the lazy dog.", class: "text-4xl tracking-tighter font-extrabold text-slate-900 dark:text-slate-100" %>
<%= content_tag :h6, "A quick brown fox jumps over the lazy dog.", class: "text-3xl tracking-tighter font-extrabold text-slate-900 dark:text-slate-100" %>

%h1.text-8xl.tracking-tighter.font-extrabold.text-slate-900.dark:text-slate-100 A quick brown fox jumps over the lazy dog.
%h2.text-7xl.tracking-tighter.font-extrabold.text-slate-900.dark:text-slate-100 A quick brown fox jumps over the lazy dog.
%h3.text-6xl.tracking-tighter.font-extrabold.text-slate-900.dark:text-slate-100 A quick brown fox jumps over the lazy dog.
%h4.text-5xl.tracking-tighter.font-extrabold.text-slate-900.dark:text-slate-100 A quick brown fox jumps over the lazy dog.
%h5.text-4xl.tracking-tighter.font-extrabold.text-slate-900.dark:text-slate-100 A quick brown fox jumps over the lazy dog.
%h6.text-3xl.tracking-tighter.font-extrabold.text-slate-900.dark:text-slate-100 A quick brown fox jumps over the lazy dog.

Typography

Lead paragraph

This is a lead paragraph. It stands out from regular paragraphs.

.html
.html.erb
.haml.erb

<div class="font-light text-base text-slate-700 tracking-normal dark:text-slate-300">
  <p>A lead paragraph stands out from regular paragraphs.</p>
</div>

<%= tag.div class: "font-light text-base text-slate-700 tracking-normal dark:text-slate-300" do %>
  <%= tag.p "A lead paragraph stands out from regular paragraphs.", class: "lead" %>
<% end %>

.font-light.text-base.text-slate-700.tracking-normal.dark:text-slate-300
  %p A lead paragraph stands out from regular paragraphs.

Typography

Blockquote

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

.html
.html.erb
.haml.erb

<figure class="pl-6 border-l-2 border-primary-500 py-1">
  <blockquote class="text-xl font-light mb-1 text-slate-800 dark:text-slate-100">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="text-slate-500 text-sm dark:text-slate-300">Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

<% tag.figure class: "pl-6 border-l-2 border-primary-500 py-1" do %>
  <%= tag.blockquote class: "text-xl font-light mb-1 text-slate-800 dark:text-slate-100" do %>
    <%= tag.p "A well-known quote, contained in a blockquote element." %>
  <% end %>
  <%= tag.figcaption class: "text-slate-500 text-sm dark:text-slate-300" do %>
Someone famous in
    <%= tag.cite "Source Title", title: "Source Title" %>
  <% end %>
<% end %>

%figure.pl-6.border-l-2.border-primary-500.py-1
  %blockquote.text-xl.font-light.mb-1.text-slate-800.dark:text-slate-100
    %p A well-known quote, contained in a blockquote element.
  %figcaption.text-slate-500.text-sm.dark:text-slate-300
    Someone famous in
    %cite(title="Source Title") Source Title

Typography

Lists

Standard

A quick brown
fox jumps over
the lazy dog

Unstyled

A quick brown
fox jumps over
the lazy dog

Decimal

A quick brown
fox jumps over
the lazy dog

.html
.html.erb
.haml.erb

<ul class="list-disc">
  <li>A quick brown</li>
  <li>fox jumps over</li>
  <li>the lazy dog</li>
</ul>

<!--Reset-->
<ul class="list-reset">
  <li>A quick brown</li>
  <li>fox jumps over</li>
  <li>the lazy dog</li>
</ul>

<!--Decimal-->
<ol class="list-decimal">
  <li>A quick brown</li>
  <li>fox jumps over</li>
  <li>the lazy dog</li>
</ol>

<!--Standard-->
<%= tag.ul class:"list-disc" do %>
  <%= tag.li "A quick brown" %>
  <%= tag.li "fox jumps over" %>
  <%= tag.li "the lazy dog" %>
<% end %>

<!--reset-->
<%= tag.ul class:"list-reset" do %>
  <%= tag.li "A quick brown" %>
  <%= tag.li "fox jumps over" %>
  <%= tag.li "the lazy dog" %>
<% end %>

<!--Decimal-->
<%= tag.ol class:"list-decimal" do %>
  <%= tag.li "A quick brown" %>
  <%= tag.li "fox jumps over" %>
  <%= tag.li "the lazy dog" %>
  <% end %>

%ul.list-disc
  %li A quick brown
  %li fox jumps over
  %li the lazy dog
/ Reset
%ul.list-reset
  %li A quick brown
  %li fox jumps over
  %li the lazy dog
/ Decimal
%ol.list-decimal
  %li A quick brown
  %li fox jumps over
  %li the lazy dog

Typography

Body copy

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae illo nisi distinctio neque veniam aliquam debitis architecto quaerat. Temporibus, similique dolor quia voluptates maiores in placeat laborum deleniti ratione officiis. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum iure non velit dignissimos laudantium modi at, eum officiis ipsam, illo vitae omnis nam, ut nisi alias odio magni qui nostrum.

Id velit dolorum fugit, beatae unde sint saepe rerum impedit nihil deleniti recusandae quam amet nesciunt, eveniet maiores?

.html
.html.erb
.haml.erb

<div class="prose proze-slate dark:prose-invert">
  <p>Lorem ipsum...</p>
</div>

<%= tag.div class: "prose prose-slate dark:prose-invert" do %>
  <%= tag.p "Lorem ipsum" %>
<% end %>

.prose.prose-slate.dark:prose-invert
  %p Lorem ipsum...

Typography

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.

.html
.html.erb
.haml.erb

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

<%= tag.p "You can use the mark tag to #{tag.mark 'highlight'} text." %>
<%= tag.p tag.del "This line of text is meant to be treated as deleted text." %>
<%= tag.p tag.s "This line of text is meant to be treated as no longer accurate." %>
<%= tag.p tag.ins "This line of text is meant to be treated as an addition to the document." %>
<%= tag.p tag.u "This line of text will render as underlined." %>
<%= tag.p tag.small "This line of text is meant to be treated as fine print." %>
<%= tag.p tag.strong "This line rendered as bold text." %>
<%= tag.p tag.em "This line rendered as italicized text." %>

%p
  You can use the mark tag to
  %mark highlight
  text.
%p
  %del This line of text is meant to be treated as deleted text.
%p
  %s This line of text is meant to be treated as no longer accurate.
%p
  %ins This line of text is meant to be treated as an addition to the document.
%p
  %u This line of text will render as underlined.
%p
  %small This line of text is meant to be treated as fine print.
%p
  %strong This line rendered as bold text.
%p
  %em This line rendered as italicized text.

Content

Tables