Typography

Variable font scaling and text styling for headers, paragraphs, lists, and other text based elements.

Top

Usage

The typography component provides a base font size (14px) and line height (1.25em) on the html tag, which in turn allows for consistent rem font scaling. These values can be changed through $base-size and $base-line-height variables, or by overriding the html tag.

html {
    font-size: 16px;
    line-height: 1.5em;
}

Headings

All h1 through h6 headings have been styled for consistent presentation. This includes removing padding and margin, and re-scaling based on rem. These values can be changed through $h1-size, $h2-size, etc, variables.

Heading REM Scale PX Equivalent
h1 3rem 42px
h2 2.5rem 35px
h3 2.1rem 29px
h4 1.8rem 25px
h5 1.5rem 21px
h6 1.2rem 17px

Paragraphs & Lists

Both paragraphs and lists have been modified with a consistent margin, which can be altered through the $margin variable.

Blockquotes

Use a blockquote and an optional cite for quoting content from external sources.

<blockquote>
    <p>Titon Toolkit makes it easy to build responsive designs for mobile and desktop devices.</p>
    <cite>Miles Johnson</cite>
</blockquote>

Contextual Copy

Improve copy by altering the meaning through coloring. Each class represents a different contextual state.

<p class="text-muted">...</p>
<p class="text-info">...</p>
<p class="text-success">...</p>
<p class="text-warning">...</p>
<p class="text-error">...</p>
Top

Variables

Variable Default Description
$h1-size 3rem Heading font sizes. Uses rem scaling by default to scale based on the html font size.
$h2-size 2.5rem
$h3-size 2.1rem
$h4-size 1.8rem
$h5-size 1.5rem
$h6-size 1.2rem