Typography

System Fonts

As of version 1.6, Cyclops has moved to using system fonts in the browser. With this method, fonts used by different operating systems are explicitly called in the font-family property.

The Font Stack

Font System
-apple-system iOS Safari, macOS Safari, macOS Firefox
BlinkMacSystemFont macOS Chrome
Segoe UI Windows
Roboto Android, Chrome OS
Oxygen KDE
Ubuntu Ubuntu
Cantarell GNOME
Fira Sans Firefox OS
Droid Sans Older Versions of Android
Helvetica Neue macOS versions < 10.11
Sans-Serif Any

The font stack looks like this in implementation.

        
font-family:  -apple-system,
              BlinkMacSystemFont,
              "Segoe UI",
              "Roboto",
              "Oxygen",
              "Ubuntu",
              "Cantarell",
              "Fira Sans",
              "Droid Sans",
              "Helvetica Neue",
              Sans-Serif;
        
      

Headings

H1 36pt System Font h1 small text

H2 30pt System Font h2 small text

H3 24pt System Font h3 small text

H4 18pt System Font h4 small text

H5 13pt System Font h5 small text
H6 12pt System Font
        
<h1>H1 36pt System Font <small>h1 small text</small></h1>
<h2>H2 30pt System Font <small>h2 small text</small></h2>
<h3>H3 24pt System Font <small>h3 small text</small></h3>
<h4>H4 18pt System Font <small>h4 small text</small></h4>
<h5>H5 13pt System Font <small>h5 small text</small></h5>
<h6>H6 12pt System Font</h6>
        
      

Content Headings

Add the .content-header to any html header entity, and it will automatically add a border below the header text.

H1 36pt System Font h1 small text

H2 30pt System Font h2 small text

H3 24pt System Font h3 small text

H4 18pt System Font h4 small text

H5 13pt System Font h5 small text
H6 12pt System Font h6 small text
        
<h1 class="content-header">H1 36pt System Font
<small>h1 small text</small>
</h1>
<h2 class="content-header">H2 30pt System Font
<small>h2 small text</small>
</h2>
<h3 class="content-header">H3 24pt System Font
<small>h3 small text</small>
</h3>
<h4 class="content-header">H4 18pt System Font
<small>h4 small text</small>
</h4>
<h5 class="content-header">H5 13pt System Font
<small>h5 small text</small>
</h5>
<h6 class="content-header">H6 12pt System Font
<small>h6 small text</small>
</h6>
        
      

Sometimes you'll want to treat multiple entities, such as Server name and it's description, as the content header. Wrap your content in a div with the .content-header class.

QA1DEVLBTEST01

Load Balancer Test VM

        
<div class="content-header">
<h1>QA1DEVLBTEST01</h1>
<p class="lead">Load Balancer Test VM</p>
</div>
        
      

Body Copy

The default font-size is 14px, with a line-height of 1.428 (20px).

I could see why some of the boys took him for snobby. He had a quiet way about him, a walk and a talk that just wasn't normal around here. He strolled, like a man in a park without a care or a worry in the world, like he had on an invisible coat that would shield him from this place. Yeah, I think it would be fair to say...I liked Andy from the start.

I could see why some of the boys took him for snobby. He had a quiet way about him, a walk and a talk that just wasn't normal around here. He strolled, like a man in a park without a care or a worry in the world, like he had on an invisible coat that would shield him from this place. Yeah, I think it would be fair to say...I liked Andy from the start.

        
<p>...</p>
        
      

Alignment

Justified text.

No wrap text.

Truncating text. Truncating text. Truncating text. Truncating text. Truncating text. Truncating text. Truncating text. Truncating text.

Left aligned text.

Center aligned text.

Right aligned text.

Right aligned text on viewports sized SM (small) or wider.

Right aligned text on viewports sized MD (medium) or wider.

Right aligned text on viewports sized LG (large) or wider.

Right aligned text on viewports sized XL (extra-large) or wider.

        
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

<p class="text-sm-right">Right aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-right">Right aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-right">Right aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-right">Right aligned text on viewports sized XL (extra-large) or wider.</p>
        
      

Color

Success Text Color

Warning Text Color

Danger Text Color

De-emphasize

        
<p class="text-success">Success Text Color</p>
<p class="text-warning">Warning Text Color</p>
<p class="text-danger">Danger Text Color</p>
<p class="deemphasize">De-emphasize</p>
        
      

Transformation

Lowercase text.

Upperscase text.

Capitalized text.

        
<p class="text-lowercase">Lowercase text.</p>
<p class="text-uppercase">Upperscase text.</p>
<p class="text-capitalize">Capitalized text.</p>
        
      
anchor link to top of page