Typography

Every visual element of our brand says something about us — even down to the fonts we use and how we use them. The specific styles, sizes and weights communicate the essence of the brand and place our brand within a meaningful hierarchy.

Heading Usage

h1 - h3 can be used in $darkest-gray and $white only and all caps only.
They all use Fira Sans $heading, uppercase .uppercase;, and font-weight of 200.

Page Title

h1. font-size: 2.25em; For use in lead areas only.

River heading

h2. font-size: 1.75em; For use as section, page or river headings.

Element heading

h3. font-size: 1.25em; For use as title or headings of elements. i.e. OfferBox, Value Props, Grid module elements, any grid style graphic element.

Subhead Usage

H4-h6 can be used in title case only.

They use Fira Sans $subhead and a font-weight of 400.

Sub-heading

h4. font-size: 2rem; For use as a sub-heading above or beneath an h1 or h2. Only to be used in $gray-darkest or $white.

If used as accent to title it should be red and have no margin

Text Title

h5. font-size: 1.75rem; For use as a title or heading within a text section. Can be used in $gray-darkest.

Accent Text Title

Body Copy

Body copy blocks should be left aligned by default. It should only center if the pattern centers it automatically.

Do not exceed more than two links per paragraph and links should not be more than four words long. Links outside of the paragraph tag but within the text block should be text links with the class .read-more, never buttons.

Example:

Etsy raclette vape, chillwave iPhone skateboard YOLO williamsburg pork belly ethical normcore viral. Quinoa paleo fingerstache, food truck helvetica fashion axe gochujang normcore. Post-ironic mlkshk lyft, fingerstache tumeric fixie hella whatever photo booth swag kombucha franzen affogato. Cray artisan portland kickstarter, four loko af biodiesel heirloom thundercats.

Fam coloring book snackwave, asymmetrical heirloom vexillologist pinterest. Shoreditch pork belly ennui fanny pack vegan fixie, messenger bag lyft wayfarers direct trade semiotics succulents waistcoat chartreuse flexitarian. Raw denim cred tousled, actually next level four loko venmo vice squid meh man braid letterpress cold-pressed.

Lomo wayfarers before they sold out

Translation Preview

What will our headlines, subhead and body copy look like in various languages?

English

H2. An Example of a lead heading & words. Question?

h4. An Example of a sub-heading. Question?

Example of Copy Body Text. Exclamation!

Spanish

H2. Un ejemplo de una gran partida &. ¿Pregunta?

h4 . Un ejemplo de un subtítulo . ¿Pregunta?

Ejemplo de texto copia de cuerpo . ¡Exclamación!

Portugese

H2 . Um Exemplo de um cabeçalho grande &. Questão?

h4 . Um exemplo de uma sub -rubrica . Questão?

Exemplo de texto cópia do corpo . Exclamação!

Chinese

H2 。大標題示例。題？

H4 。子標題的一個實例。題？

複製正文文本的例子。感嘆！

Annotations

Example of an annotation

add the class below to a p tag in order to produce a small annotation, copyright or legal disclaimer