Typography

This is where BaseWeb defines our most basic typographic elements. This includes things like base font styles, headings, links and emphasis elements.

Headings

Heading elements are used to describe the topic of the section it introduces. BaseWeb defines styles for headings <h1> to <h6>.

<h1>h1. BaseWeb Heading</h1>
<h2>h2. BaseWeb Heading</h2>
<h3>h3. BaseWeb Heading</h3>
<h4>h4. BaseWeb Heading</h4>
<h5>h5. BaseWeb Heading</h5>
<h6>h6. BaseWeb Heading</h6>

h1. BaseWeb Heading

h2. BaseWeb Heading

h3. BaseWeb Heading

h4. BaseWeb Heading

h5. BaseWeb Heading
h6. BaseWeb Heading

Paragraphs

The body copy is set by applying our default typographic settings to the <body> element and applying margins to our paragraph element.

<p>...</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

The default typographic settings. These dictate the base typographic styles for headings, body text, inline text elements and links as well as modifier classes.

Elements

HTML has a beautiful assortment of tools for adding rich semantics to a document. This is by no means a comprehensive list of HTML elements, but these are the inline text elements that BaseWeb specifically adds styles for.

Element Demo
<a> Anchor styles
<strong> Strong emphasis styles
<em> Stress emphasis styles
<small> Small styles
<mark> Marked styles
<ins> Insert styles
<del> Delete styles
<cite> Citation styles
<abbr> Abbr styles

Classes

In addition to our inline elements, BaseWeb provides these stylistic typographic classes for adding flair and visual depth to your documents without adding any semantic meaning.

Element Demo
.text-lead

This is some example lead in text.

.text-small

This is some example small text.

.text-soften

This is some example soften text.

.text-harden

This is some example harden text.

.text-left

This is some example text with left alignment.

.text-center

This is some example text with centered alignment.

.text-right

This is some example text with right alignment.

.text-justify

This is some example text with justified alignment.

.text-nowrap

This text doesn't wrap.

.text-lowercase

This is some example text with lowercase styles.

.text-uppercase

This is some example text with uppercase styles.

.text-capitalize

This is some example text with capitalize styles.

© 2018 . All rights reserved.