Type, grids and color

See examples of typography in our example website ->

Source Sans 3

Source Sans 3 is our primary sans-serif font. It should be used in headings and body text as the primary sans-serif font on your website. When Sources Sans Pro is not available, we have a fallback sans-serif font stack with Helvetica Neue, Helvetica and Arial.

Weights

Regular | font-weight: 400

Regular Italic

Semi-Bold | font-weight: 600

Semi-Bold Italic

Bold | font-weight: 700

Bold Italic

Black | font-weight: 900

Black Italic

Source Serif 4

Source Serif 4 is our primary serif font. It should be used in headings and body text as the primary serif font on your website. When Sources Sans Pro is not available, we have a fallback serif font stack with Georgia, Times and Times New Roman.

Weights

Regular | font-weight: 400

Regular Italic

Semi-Bold | font-weight: 600

Semi-Bold Italic

Bold | font-weight: 700

Bold Italic

Black | font-weight: 900

Black Italic

Roboto Slab

Roboto Slab is a secondary font. It should only be used as a display font (headings) - it is not appropriate for blocks of text.

Weights

Regular | font-weight: 400

Regular Italic

Bold | font-weight: 700

Bold Italic

Roboto Mono

Roboto Mono should only be used for monospaced HTML elements like the pre or code tag

Ideally, there’s a symbiotic relationship between each of these three elements of typography in order to create an optimal reading experience for paragraphs of text (this does not apply to headings). Lines that are not too long, not too short, and not too far away from each other, in proportion to font size.

Font size is your starting place. For longer form text (like the body of an article) your font size should make a comfortable reading experience for someone sitting a natural distance from their screens, without hunching forward or squinting. Tip: we generally set our longer form text to anywhere between 20-23 pixels. For shorter lengths (like in card summaries) smaller font weights can be employed because the line lengths are often much shorter, and reading time is also much shorter. Tip: we generally set our shorter lengths of text between 18-20px.

Line length should be somewhere between 45-75 characters long (though we’ll go up to 90 characters to accommodate our grid structure).

Line height should be somewhat more open for longer form text (like the body of an article) and more compact for shorter lengths (like in card summaries). Tip: we recommend employing ems for your unit of measurement so that the line height will respond to your font size as Decanter employs modular type to accommodate responsive design. For longer form text, we’ll set the line height to 1.4-1.5ems, and for shorter lengths 1.2-1.3ems works well. (A more compact line height is also desirable for headings to keep the lines tight together so your eyes see them as a single group, rather than disparate lines of text.)

Typography styles throughout Decanter employ a modular scaling system that affords for sizes of type to scale down or up depending on your screen size. This system allows designers the ability to set type styles for one screen size without having to manually scale them down at each breakpoint.

See examples of grids, breakpoints and spacing in our example website

Breakpoints

• XS: 0 - 575px
• SM: 576 - 767px
• MD: 768 - 991px
• LG: 992 - 1199px
• XL: 1200 - 1499px
• 2XL: 1500px and up

Grids

See examples of colors in our example website

Decanter employs the Stanford identity color palette guidelines. You can learn more about color usage at Stanford on the identity website.