Typography

Description

A summary of typography styles on circleci.com


Typography

Font Families in Use

sample value code
roboto
roboto
scss variable:
$font-family-base $font-family-emphasis
Usage:
P tags, headers, all content
roboto mono roboto mono
scss variable:
$font-family-monospace
Usage:
Code tags

Font Families on Site

Note: The following is a list of font families present on the site, unrendered (as they currently aren't in use. This is mostly just for inventory purposes -- we may want to remove this later.

font variations
graphic web graphic web bold graphic web regular
output sans output sans regular output sans bold
proxima nova proxima nova 300 proxima nova 400 proxima nova 600 proxima nova 700

Typography Classes + Styles

sample properties code

header one

52px
scss variables:
$font-size-h1
Usage:
<h1>content</h1>

header two

32px
scss variable:
$font-size-h2
Usage:
<h2>content</h2>

header three

23px
scss variable:
$font-size-h3
Usage:
<h3>content</h3>

header four

20px
scss variable:
$font-size-h4
Usage:
<h4>content</h4>
header five
18px
scss variable:
$font-size-h5
Usage:
<h5>content</h5>

paragraph, large

20px
scss variable:
$font-size-h4
Usage:
<p class='large'>content</p>

paragraph

16px
scss variable:
$font-size-base $font-size-root
Usage:
<p>content</p>

paragraph, small

14px
scss variable:
$font-size-small
Usage:
<p class='small'>content</p>

micro font

12px
scss variable:
$font-size-micro
Usage:
<span class='font-micro'>content</span>
anchor links size and initial color are inherited
scss variable:
$text-color-hover
Usage:
<a>content</a>
strong, em, b size is inherited
scss variable:
$font-weight-bolder
Usage:
<strong>content</strong> <em>content</em> <b>content</b>
pre
size is inherited
scss variable:
$line-height-computed
Usage:
<pre>content</pre>
code 14px
scss variable:
$font-size-small $text-color $font-weight-bold $font-family-monospace $background-color-dark
Usage:
<code>content</code>
lede size is inherited, usually used at default 16px
scss variable:
$secondary-color $font-weight-bolder
Usage:
<span class='lede'>content</span>