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>