Typography: Overview

Note

At < 768px breakpoint, typography sizes will readjust to sizes optimized for mobile viewing

Main Content

H1 - centered by default

 <h1>

H1 Lorem Ipsum Dolor Sit Amet, Consectetur

Pseudo H1

 <p class="pseudo-h1">

Applies h1 styles without SEO consequences.

H1 Alternate - centered by default

 <h1 class="h1-alternate">

H1 Lorem Ipsum Dolor Sit Amet, Consectetur

H1 Alternate - SEO friendly

 <h1 class="h1-alternate">
 Lorem Ipsum
 <span class="secondary-info">Dolor Sit</span>
</h1>

Lorem Ipsum Dolor Sit

H2

 <h2>

H2 Lorem Ipsum Dolor Sit Amet, Consectetur

Pseudo H2

 <p class="pseudo-h2">

Applies h2 styles without SEO consequences.

H3

 <h3>

H3 Lorem Ipsum Dolor Sit Amet, Consectetur

Pseudo H3

 <p class="pseudo-h3">

Applies h3 styles without SEO consequences.

Secondary Info

 <div class="secondary-info">
Secondary Info Donec facilisis justo magna, id tincidunt orci placerat sed. Suspendisse in erat hendrerit, dictum nunc quis, dapibus lacus.

Article Body

 <p>

Paragraph 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.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Descriptive Body

 <div class="descriptive-body">
Descriptive Body Donec facilisis justo magna, id tincidunt orci placerat sed. Suspendisse in erat hendrerit, dictum nunc quis, dapibus lacus.

Credit with Link

 <div class="credit">
 Example Heading
<a href="#" class="content link">Link</a> </div>
Example Heading Link

Credit with Value

 <div class="credit">
 Example Heading
<span class="content value"> Value</span> </div>
Example Heading Value

Attribute Label

 <span class="content label">
  Example Heading
</span> 		Example Heading

Attribute Value

 <span class="content value">
  Example Value
</span> 		Example Value

Section Label

 <div class="section-label">
Section Label Donec facilisis justo magna, id tincidunt orci placerat sed. Suspendisse in erat hendrerit, dictum nunc quis, dapibus lacus.

Category Label

 <p class="category-label">
  Category label nullam quis risus eget urna mollis ornare
</p>

Category label nullam quis risus eget urna mollis ornare

Phone

 <span itemprop="telephone">
  <a href="tel:+18506484200">850-648-4200</a>
</span> 		850-648-4200

Dollars

 <span class="dollars" itemprop="priceRange">
  $$$$$
</span> 		$$$$$

Bulleted list

 <ul>
  <li>Ul li nam ut turpis vitae mi feugiat mattis</li>
  <li>Curabitur semper velit id mollis</li>
  <li>Ut fringilla accumsan felis, in iaculis lacus fermentum et</li>
</ul>
  • Ul li nam ut turpis vitae mi feugiat mattis
  • Curabitur semper velit id mollis
  • Ut fringilla accumsan felis, in iaculis lacus fermentum et

Bulleted Icon list with multiple lines

 <ul class="list-unstyled xs-divider">
 <li class="icon icon-general-close knottie-red">
  <p>Onsite Overnight Accommodations</p>
 </li>
 <li class="icon icon-general-checkmark green">
  <p>Onsite Wedding Consultant</p>
 </li>
 <li class="icon icon-general-checkmark green">
  <p>Outdoor Reception Area</p>
 </li>
 <li class="icon icon-general-close knottie-red">
  <p>Outside Caterers Allowed</p>
 </li>
</ul>

  • Onsite Overnight Accommodations

  • Onsite Wedding Consultant

  • Outdoor Reception Area

  • Outside Caterers Allowed

A within a P

 <p>
 <a href="#">
  LINK TEXT
 </a>
</p>

Paragraph anchor 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.

A within a H1

 <h1>
 HEADING TEXT
 <a href="#">BLACK LINK</a>
 <a href="#" class="blue">BLUE LINK</a>
</h1>

Heading 1 black link blue link

A within a H2

 <h2>
 HEADING TEXT  <a href="#">LINK</a>
</h2>

Heading 2 anchor

A within a H3

 <h3>
 HEADING TEXT  <a href="#">LINK</a>
</h3>

Heading 3 anchor

Fine Print

 <small>
  TEXT HERE
<small> 		Bacon ipsum dolor sit amet tail shoulder sirloin drumstick.

Byline

 <p class="byline">
  Normal byline text,
  <a href="#">
    link inside byline
  </a>.
</p>

Normal byline text, link inside byline.

Modules

H2 within a module

 <div class="modules">
 <h2 class="modules-header">
</div>

H2 Module lorem ipsum dolor sit amet, consectetur adipiscing

H3 within a module

 <div class="modules">
 <h3 class="modules-header-small">
</div>

H3 Module lorem ipsum dolor sit amet, consectetur adipiscing

Module with view more link

 <div class="modules with-more-link">
<h2 class="modules-header">Real Wedding Cakes</h2>
<a href="#" class="content link">View All &rtrif;</a>
</div>

Real Wedding Cakes

View All ▸

Footer

H2 within a footer

 <footer>
 <h2>
</footer>

H2 Footer Module lorem ipsum dolor sit amet, consectetur adipiscing

H3 within a footer

 <footer>
 <h3>
</footer>

H3 Module lorem ipsum dolor sit amet, consectetur adipiscing

Fonts

Font Name Weight Weight Name
Tisa Sans Light
Tisa Sans Regular
Tisa Sans Medium
Tisa Sans Bold
Tisa Light
Tisa Light Italic
Tisa Regular
Tisa Medium
Tisa Bold