Search results

2 Typography

Set body copy so that each line is between 45 and 80 characters (9–14 words) wide.
Maintain a minimum contrast ratio of 70% between the foreground and background.
Whenever possible, type in adjacent columns should be aligned to a common typographic baseline.
Avoid font sizes smaller than 13px; prefer 15px as a default.

2.1 Weights

Use normal weight (400) for most situations. When emphasis is desired, use semibold (600). Light weight (300) is also acceptable in some circumstances. We do not use thin, medium, bold, or black weights.

Examples
.light-weight
font-weight: 300

As Gregor Samsa awoke one morning from uneasy dreams he found himself transformed in his bed into a gigantic insect. He was laying on his hard, as it were armor-plated, back and when he lifted his head a little he could see his domelike brown belly divided into stiff arched segments on top of which the bed quilt could hardly keep in position and was about to slide off completely. His numerous legs, which were pitifully thin compared to the rest of his bulk, waved helplessly before his eyes.

.normal-weight
font-weight: 400

As Gregor Samsa awoke one morning from uneasy dreams he found himself transformed in his bed into a gigantic insect. He was laying on his hard, as it were armor-plated, back and when he lifted his head a little he could see his domelike brown belly divided into stiff arched segments on top of which the bed quilt could hardly keep in position and was about to slide off completely. His numerous legs, which were pitifully thin compared to the rest of his bulk, waved helplessly before his eyes.

.semibold
font-weight: 600;

As Gregor Samsa awoke one morning from uneasy dreams he found himself transformed in his bed into a gigantic insect. He was laying on his hard, as it were armor-plated, back and when he lifted his head a little he could see his domelike brown belly divided into stiff arched segments on top of which the bed quilt could hardly keep in position and was about to slide off completely. His numerous legs, which were pitifully thin compared to the rest of his bulk, waved helplessly before his eyes.

<p class="[modifier class]">As Gregor Samsa awoke one morning from uneasy dreams he found himself transformed in his bed into a gigantic insect. He was laying on his hard, as it were armor-plated, back and when he lifted his head a little he could see his domelike brown belly divided into stiff arched segments on top of which the bed quilt could hardly keep in position and was about to slide off completely. His numerous legs, which were pitifully thin compared to the rest of his bulk, waved helplessly before his eyes.</p>
2.2 h3

Used for top-level page titles only.

Example

Tyger Tyger, burning bright, In the forests of the night; What immortal hand or eye, Could frame thy fearful symmetry?

<h3>Tyger Tyger, burning bright, In the forests of the night; What immortal hand or eye, Could frame thy fearful symmetry?</h3>
2.2.2 h4

Used for second-level section headings.

Example

Turning and turning in the widening gyre, the falcon cannot hear the falconer.

<h4>Turning and turning in the widening gyre, the falcon cannot hear the falconer.</h4>
2.2.3 h5

Used for third-level section headings.

Example
The Deliverator belongs to an elite order, a hallow subcategory. He's got esprit up to here.
<h5>The Deliverator belongs to an elite order, a hallow subcategory. He's got esprit up to here.</h5>
2.2.4 Small text

Used for metadata and copyright info. Ex, in a table, when the manufacturer and / or vendor are placed in the same cell as a product, these are styled as small text.

Example

I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhäuser Gate. All those moments will be lost in time, like tears in rain.

<p class="small">I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhäuser Gate. All those moments will be lost in time, like tears in rain.</p>
2.2.4.1 Contextual help text

Normally used to add context to a label or data point. Use with small and muted. Has a smaller line height for more compact display.

Example

And since this is not a naturally tenable position for a whale, this poor innocent creature had very little time to come to terms with its identity as a whale before it then had to come to terms with not being a whale any more.

<p class="small muted contextual-help-text">And since this is not a naturally tenable position for a whale, this poor innocent creature had very little time to come to terms with its identity as a whale before it then had to come to terms with not being a whale any more.</p>
2.2.5 Subtitle

Used in cards.

Examples
.subtitle
font-size: 18px;

There is nothing so loathsome as a sentimental surrealist.

.subtitle-small
font-size: 16px;

There is nothing so loathsome as a sentimental surrealist.

<p class="[modifier class]">There is nothing so loathsome as a sentimental surrealist.</p>
2.2.6 Muted

Use for labels, supplementary information, and metadata. Also use for placeholders in empty sections, ex, "No notes for this agenda"

Example

What are the stars but points in the body of God where we insert the healing needles of our terror and longing?

<p class="muted">What are the stars but points in the body of God where we insert the healing needles of our terror and longing?</p>