#Font

Cirrus incorporates beautiful typography to make your website stand out from the rest. Nunito Sans, by Vernon Adams is chosen for the default typography for most elements such as paragraphs, articles, blockquotes, and more while Montserrat adds a bold but elegant touch to titles. The font-size have been converted to rems which is independent of the font sizes of the parent elements. The default is set to 1rem (16px) where each interval of rem is 16 pixels.

Sample paragraph with title, subtitle, and text:

This is a title.

This is a subtitle.

This is some text to go along with the titles above.

<p class="title">This is a title.</p>
<p class="subtitle">This is a subtitle.</p>
<p>This is some text to go along with the titles above.</p>

#Headings

Cirrus styles the standard header tags h1, h2, h3, h4, h5, h6 with font sizes ranging from 4rem to 1rem where each rem is 16px. Cirrus allows you to choose between two fonts: Montserrat and Nunito Sans by specifying the font weight of the headers. Simply add the font-alt font-light class to your headings to use Nunito Sans and leave it as is to use Montserrat.

Standard headings:

this is h1h1 3rem (48px)

this is h2h2 2.5rem (40px)

this is h3h3 2rem (32px)

this is h4h4 1.75rem (24px)

this is h5h5 1.5rem (16px)
this is h6h6 1.25rem (12px)
Light headings:

this is h1h1 3rem (48px)

this is h2h2 2.5rem (40px)

this is h3h3 2rem (32px)

this is h4h4 1.75rem (24px)

this is h5h5 1.5rem (16px)
this is h6h6 1.25rem (12px)
<h1 class="uppercase">this is h1<span class="desc"><code>h1</code> 3rem (48px)</span></h1>
<h2 class="uppercase">this is h2<span class="desc"><code>h2</code> 2.5rem (40px)</span></h1>
</h2>
<h3 class="uppercase">this is h3<span class="desc"><code>h3</code> 2rem (32px)</span></h1>
</h1>
<h4 class="uppercase">this is h4<span class="desc"><code>h4</code> 1.75rem (24px)</span></h1>
</h4>
<h5 class="uppercase">this is h5<span class="desc"><code>h5</code> 1.5rem (16px)</span></h1>
</h5>
<h6 class="uppercase">this is h6<span class="desc"><code>h6</code> 1.25rem (12px)</span></h1>
</h6>
                        
<h1 class="font-alt font-light uppercase">this is h1<span class="desc"><code>h1</code> 3rem (48px)</span></h1>
<h2 class="font-alt font-light uppercase">this is h2<span class="desc"><code>h2</code> 2.5rem (40px)</span></h1>
</h2>
<h3 class="font-alt font-light uppercase">this is h3<span class="desc"><code>h3</code> 2rem (32px)</span></h1>
</h1>
<h4 class="font-alt font-light uppercase">this is h4<span class="desc"><code>h4</code> 1.75rem (24px)</span></h1>
</h4>
<h5 class="font-alt font-light uppercase">this is h5<span class="desc"><code>h5</code> 1.5rem (16px)</span></h1>
</h5>
<h6 class="font-alt font-light uppercase">this is h6<span class="desc"><code>h6</code> 1.25rem (12px)</span></h6>

#Headline

Added
0.5.5

For larger titles, using a headline would be the best choice.

headline-1headline-1 6.5rem (104px)

headline-2headline-2 5.5rem (88px)

headline-3headline-3 4.5rem (72px)

headline-4headline-4 3.5rem (56px)

#Blockquotes

Blockquotes are beatifully designed to help you cite from other sources.

You know, I think Cirrus is a pretty good CSS framework. - Marc Andreessen 

<blockquote>
    <p>You know, I think Cirrus is a pretty good CSS framework. - <em>Marc Andreessen</em>
</blockquote>

#Typesetting

Paragraph

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Blockquote

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

Article
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

#Text Transformations

Cirrus comes with a ton of ways to customize your text ranging from changing font weights to changing font styles.

Font weights:

Thin (200)

The quick brown fox jumps over the lazy dog.

<p class="font-thin">The quick brown fox jumps over the lazy dog.</p>

Light (300)

The quick brown fox jumps over the lazy dog.

<p class="font-light">The quick brown fox jumps over the lazy dog.</p>

Regular (400)

The quick brown fox jumps over the lazy dog.

<p class="">The quick brown fox jumps over the lazy dog.</p>

Semibold (600)

The quick brown fox jumps over the lazy dog.

<p class="font-semibold">The quick brown fox jumps over the lazy dog.</p>

Bold (700)

The quick brown fox jumps over the lazy dog.

<p class="font-bold">The quick brown fox jumps over the lazy dog.</p>

#Font Awesome

Using Font Awesome? Cirrus makes it easy to integrate glyphs into your website. Just add the fa-wrapper class along with your desired glyph class.

Note that glyph sizes now inherity directly from parent classes. Glyphs appear the best when the font size is a multiple of 7.

X-Small (7px)

<span class="icon subtitle" style="font-size: 7px">
    <i class="fab fa-wrapper fa-github"></i>
</span>

Small/Default (14px)

<span class="icon subtitle" style="font-size: 14px">
    <i class="fab fa-wrapper fa-github"></i>
</span>

Large (21px)

<span class="icon subtitle" style="font-size: 21px">
    <i class="fab fa-wrapper fa-github"></i>
</span>

X-Large (28px)

<span class="icon subtitle" style="font-size: 28px">
    <i class="fab fa-wrapper fa-github"></i>
</span>

#Misc.

Along with all the features above, Cirrus also has some smaller features that didn't quite make it on those lists but still deserve a mention.

Anchor

The quick brown fox jumps over the lazy dog. 
<a>The quick brown fox jumps over the lazy dog.</a>

Emphasis

The quick brown fox jumps over the lazy dog. 
<em>The quick brown fox jumps over the lazy dog.</em>

Small

The quick brown fox jumps over the lazy dog. 
<small>The quick brown fox jumps over the lazy dog.</small>

Strong

The quick brown fox jumps over the lazy dog. 
<strong>The quick brown fox jumps over the lazy dog.</strong>

Underline

The quick brown fox jumps over the lazy dog. 
<u>The quick brown fox jumps over the lazy dog.</u>

White

The quick brown fox jumps over the lazy dog.

<p class="white">The quick brown fox jumps over the lazy dog.</p>

Faded

The quick brown fox jumps over the lazy dog.

<p class="faded">The quick brown fox jumps over the lazy dog.</p>

Italics

The quick brown fox jumps over the lazy dog.

<p class="italics">The quick brown fox jumps over the lazy dog.</p>

Caret

<p class="caret"></p>

#Other Text Elements

Some other text elements.

YOLO  <abbr>
Foo bar  <code>
Deleted  <del>
Deleted  <del>
Italis  <i>
Inserted  <ins>
Alt + F4  <kbd>
Highlight  <mark>
漢 kan 字 ji <ruby>
Strikethrough  <s>
Sample  <samp>
TextSubscript  <sub>
TextSuperscript  <sup>
  <time>
x = y + 2  <var>