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

font-size: 14px; line-height: 1.75; font-weight: 400;
sample properties code

header one

font-size: 52px; line-height: 1.3; font-weight: 500;
scss variables:
$font-size-h1
Usage:
<h1>content</h1>

header two

font-size: 32px; line-height: 1.5; font-weight: 500;
scss variable:
$font-size-h2
Usage:
<h2>content</h2>

header three

font-size: 23px; line-height: 1.5; font-weight: 500;
scss variable:
$font-size-h3
Usage:
<h3>content</h3>

header four

font-size: 20px; line-height: 1.1; font-weight: 500;
scss variable:
$font-size-h4
Usage:
<h4>content</h4>
header five
font-size: 18px; line-height: 1.1; font-weight: 500;
scss variable:
$font-size-h5
Usage:
<h5>content</h5>

paragraph, large

font-size: 20px; line-height: 1.5; font-weight: 400;
scss variable:
$font-size-h4
Usage:
<p class='large'>content</p>

paragraph, medium

font-size: 18px; line-height: 1.5; font-weight: 300;
scss variable:
$font-size-large
Usage:
<p class='medium'>content</p>

paragraph

font-size: 16px; line-height: 1.75; font-weight: 400;
scss variable:
$font-size-base $font-size-root
Usage:
<p>content</p>

paragraph, small

font-size: 14px; line-height: 1.75; font-weight: 400;
scss variable:
$font-size-small
Usage:
<p class='small'>content</p>

micro font

scss variable:
$font-size-micro
Usage:
<p 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>

Typography Line Height and Letter Spacing

sample properties code

Header one Line Height Solid Lorem, ipsum dolor sit amet consectetur adipisicing elit.

line-height: 1;
scss variables:
$line-height-solid
Usage Examples:
<h1 class='ln-solid'>content</h1> <h2 class='ln-solid'>content</h1>

Header two Line Height Title Lorem, ipsum dolor sit amet consectetur adipisicing elit.

line-height: 1.25;
scss variables:
$line-height-title
Usage Examples:
<h2 class='ln-title'>content</h1> <p class='ln-title'>content</h1>

Paragraph Line Height Copy Title Lorem, ipsum dolor sit amet consectetur adipisicing elit.

line-height: 1.5;
scss variables:
$line-height-copy
Usage:
<p class='ln-copy'>content</h1> <h3 class='ln-copy'>content</h1>

Paragraph Tracked. Lorem ipsum dolor sit amet consectetur adipisicing elit.

letter-spacing: .1em;
scss variables:
$tracked
Usage:
<p class='tracked'>content</h1> <h3 class='tracked'>content</h1>

Paragraph Tracked Tight. Lorem ipsum dolor sit amet consectetur adipisicing elit.

letter-spacing: -.05em;
scss variables:
$tracked-tight
Usage:
<p class='tracked-tight'>content</h1> <h3 class='tracked-tight'>content</h1>

Paragraph Tracked Mega. Lorem ipsum dolor sit amet consectetur adipisicing elit.

letter-spacing: .25em;
scss variables:
$tracked-mega
Usage:
<p class='tracked-mega'>content</h1> <h3 class='tracked-mega'>content</h1>