Typography

Skeletonic CSS v.1.0.5 sets global typography and headings. The styles can be found within the skeletonic-fonts CSS. You will need to import skeletonic-fonts.min.css (v.1.0.5) to display the default typography.

Skeletonic CSS v.1.0.5 carefully considered, readable typography. All HTML headers, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

HeadingDisplay
<h1></h1>

Heading 1 (4.2rem)

<h2></h2>

Heading 2 (3.3rem)

<h3></h3>

Heading 3 (2.6rem)

<h4></h4>

Heading 4 (2rem)

<h5></h5>
Heading 5 (1.6rem)
<h6></h6>
Heading 6 (1.3rem)
<h1>Heading 1</h1>
<span class="h1">Heading 1</span>

Font Family

By default, Skeletonic CSS v.1.0.5 provides a default web font (Open Sans). You might want to add your own font files into the CSS. Open Sans is a humanist sans serif typeface designed by Steve Matteson.

Examples

Open Sans Light 200

Open Sans is a humanist sans serif typeface.

Open Sans Light Italic 200

Open Sans is a humanist sans serif typeface.

Open Sans Regular 400

Open Sans is a humanist sans serif typeface.

Open Sans Regular Italic 400

Open Sans is a humanist sans serif typeface.

Open Sans Bold 700

Open Sans is a humanist sans serif typeface.

Open Sans Bold Italic 700

Open Sans is a humanist sans serif typeface.

Open Sans Semi Bold 500

Open Sans is a humanist sans serif typeface.

Open Sans Semi Bold Italic 500

Open Sans is a humanist sans serif typeface.

Open Sans Extra Bold 900

Open Sans is a humanist sans serif typeface.

Open Sans Extra Bold Italic 900

Open Sans is a humanist sans serif typeface.

The Anatomy of Skeletonic CSS - A lightweight, intuitive, accessible and ultra-responsive CSS Framework