#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 light class to your headings to use Nunito Sans and leave it as is to use Montserrat.

Standard headings:

this is h1h14rem (48px)

this is h2h23.5rem (40px)

this is h3h33rem (32px)

this is h4h42.5rem (24px)

this is h5h52rem (16px)
this is h6h61rem (12px)
Light headings:

this is h1h14rem (48px)

this is h2h23.5rem (40px)

this is h3h33rem (32px)

this is h4h42.5rem (24px)

this is h5h52rem (16px)
this is h6h61rem (12px)
<h1 class="uppercase">this is h1<span class="desc"><code>h1</code>4rem (48px)</span></h1>

<h2 class="uppercase">this is h2<span class="desc"><code>h2</code>3.5rem (40px)</span></h1></h2>

<h3 class="uppercase">this is h3<span class="desc"><code>h3</code>3rem (32px)</span></h1></h3>

<h4 class="uppercase">this is h4<span class="desc"><code>h4</code>2.5rem (24px)</span></h1></h4>

<h5 class="uppercase">this is h5<span class="desc"><code>h5</code>2rem (16px)</span></h1></h5>

<h6 class="uppercase">this is h6<span class="desc"><code>h6</code>1rem (12px)</span></h1></h6>
                        
<h1 class="light uppercase">this is h1<span class="desc"><code>h1</code>4rem (48px)</span></h1>

<h2 class="light uppercase">this is h2<span class="desc"><code>h2</code>3.5rem (40px)</span></h1></h2>

<h3 class="light uppercase">this is h3<span class="desc"><code>h3</code>3rem (32px)</span></h1></h3>

<h4 class="light uppercase">this is h4<span class="desc"><code>h4</code>2.5rem (24px)</span></h1></h4>

<h5 class="light uppercase">this is h5<span class="desc"><code>h5</code>2rem (16px)</span></h1></h5>

<h6 class="light uppercase">this is h6<span class="desc"><code>h6</code>1rem (12px)</span></h1></h6>

#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's got you covered with a bunch of font-sizes to help your glyphs fit within any component. Cirrus makes sure that each glyph is rendered correctly by setting the font sizes to base 7 since those glyphs preserve aspect ratios at those font sizes.

X-Small (7px)

<span class="icon">
    <i class="fa x-small fa-github"></i>
</span>

Small/Default (14px)

<span class="icon">
    <i class="fa small fa-github"></i>
</span>

Large (28px)

<span class="icon">
    <i class="fa large fa-github"></i>
</span>

X-Large (35px)

<span class="icon">
    <i class="fa x-large fa-github"></i>
</span>

XX-Large (42px)

<span class="icon">
    <i class="fa xx-large 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>