Hello, friends. You’ve stumbled upon our typographic style guide. Welcome! The following sections explore the type system used in our branding and, specifically, on this site. Below you will find specifications for our current type system. Feel free to explore the way we are using type across this interactive space. It probably goes without saying, but this is a living document. As such, it’s subject to change whenever we get a wild hair.

Major Typographic Elements

This section outlines the major structural typographic elements you will find across the site. A solid typographic system is the gateway to understanding. It is also a living, breathing environment, and that environment needs a little tending from time to time.

Typefaces

There are two major type families used across the studio site: Franklin Gothic URW, and Adobe Garamond Pro. There are minor differences when crossing over to our non-web-based branding, but we keep it in the gothic and Garamond avenue. We source our faces from the fine folks at Typekit. Unless otherwise specified, all type across the site is subject to the following pattern:

body {
  font-family: "franklin-gothic-urw", sans-serif;
  font-size: 1.125rem; /* 18px */
  line-height: 1.625;
  color: #333;
  font-weight: 300;
}

Headings

h1,h2,h3,h4,h5,h6 {
  font-weight: 500;
  text-rendering: optimizeLegibility;
  line-height: 1.4;
  margin: 0 0 16px;
}

First Level Heading

h1 {
  font-size: 3rem; /* 48px */
}

Second Level Heading

h2 {
  font-size: 2.25rem; /* 36px */
}

Third Level Heading

h3 {
  font-size: 1.25rem; /* 20px */
  text-transform: uppercase;
}

Fourth Level Heading

h4 {
  font-size: 1.15rem; /* 18.4px */
}

Fifth Level Heading

h5 {
  font-size: 1rem; /* 16px */
  text-transform: uppercase;
}

Sixth Level Heading

h6 {
  font-size: 1rem; /* 16px */
  font-weight: 300;
}

Paragraphs

This is a standard paragraph. Paradigm workflow parallax physical computing moleskine co-working pivot fund affordances entrepreneur grok. Paradigm engaging piverate integrate unicorn paradigm waterfall is so 2000 and late workflow long shadow. Ideate hacker human-centered design experiential prototype pitch deck co-working thinker-maker-doer sticky note. Waterfall is so 2000 and late venture capital thought leader long shadow earned media ship it innovate Steve Jobs integrate quantitative vs. qualitative.

p {
  color: #333;
  margin: 0 0 28px;
  padding: 0;
}

Blockquotes

This is a blockquote. Waterfall is so 2000 and late venture capital thought leader long shadow earned media ship it innovate Steve Jobs integrate quantitative vs. qualitative.

blockquote {
  color: #fdca49;
  font-size: 2rem;
  line-height: 1.35;
  font-family: "adobe-garamond-pro", serif;
  font-style: italic;
  margin: 3rem 0;
}

Lists

• unordered list item 1
• unordered list item 2
• unordered list item 3
• unordered list item 4

1. ordered list item 1
2. ordered list item 2
3. ordered list item 3
4. ordered list item 4

ol, ul {
  margin: 0 0 24px 24px;
  padding: 0;
}

li {
  margin-bottom: 5px;
}

Other Typographic Elements

Hello, friends. You’ve stumbled upon our typographic style guide. Welcome! The following sections explore the type system used in our branding and, specifically, on this site. Below you will find specifications for our current type system. Feel free to explore the way we are using type across this interactive space.

Code Blocks

Code examples on the site follow industry convention utilizing monospace fonts, in this case the Courier typeface.

code {
  font-family: Courier, monospace;
  font-size: 1rem; /* 16px */
}

Pre-formatted Text

When the <pre> element is used in concert with the <code> element the resulting code block follows the following stylistic pattern:

pre {
  background-color: #fdfcfd;
  margin: 1rem 0 2rem;
  padding: 1.5rem 1rem;
}