Headings

Concise includes all standard HTML headings <h1> through <h6>. Also included are classes .h1 through .h6 that match the size of their respective headings, but can be used on any element.

A SASS map has been created for each of the various heading sizes to make scaling as simple as possible. You can find these maps at the top of the /base/_headings.scss file.

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

Font Families

Typography is a key to effective design, so Concise makes it simple to control in your project.

By default, Helvetica, with Arial as a fallback, is used as the default font for headings on non-mobile devices. However, for Android phones, Droid Sans is used as the default font, with Helvetica and Arial as fallbacks.

You can change the $base-heading-font-family variable in the /helpers/_variables.scss file to adjust the base font families.

Sub-Headings

You also can create sub-headings for your headings using the <small> tag or the .small class. !important is included to avoid specificity issues.

<h1>Heading 1 <small class="color-gray">This is a sub-heading</small></h1>
<h2>Heading 2 <small class="color-gray">This is a sub-heading</small></h2>
<h3>Heading 3 <small class="color-gray">This is a sub-heading</small></h3>
<h4>Heading 4 <small class="color-gray">This is a sub-heading</small></h4>
<h5>Heading 5 <small class="color-gray">This is a sub-heading</small></h5>
<h6>Heading 6 <small class="color-gray">This is a sub-heading</small></h6>

Extra-Large

Sometimes there is a need for headings that are larger than the standard <h1> through <h6>. Anticipating this need, Concise comes with three classes that can be used to super-size your type.

<h1 class="giga">Giga Heading</h1>
<h2 class="mega">Mega Heading</h2>
<h3 class="kilo">Kilo Heading</h3>