Typography

Our typography is built with rems, making it easier to fine-tune your type across different breakpoints.

Headers

Header tags are numbered h1 through h6 and have tight leading. We only use h1 tags once in the page, preferably in a marketing banner or tout. The body of the page is free to use h2 through h6.

For smaller viewports, the font size of headers is reduced to be more appropriate for the width constraints of the device.

<h1>This is an h1 header.</h1>
<h2>This is an h2 header.</h2>
<h3>This is an h3 header.</h3>
<h4>This is an h4 header.</h4>
<h5>This is an h5 header.</h5>
<h6>This is an h6 header.</h6>

This is an h1 header.

This is an h2 header.

This is an h3 header.

This is an h4 header.

This is an h5 header.

This is an h6 header.

Responsive text!

Use the responsive-text class on text elements to invoke sizing that responds to the size of the viewport.
Currently this is invoked on large viewports and up. Text sizes are not effected on small and medium viewports.

<h1 class="responsive-text">This is a responsive h1 header.</h1>
<h2 class="responsive-text">This is a responsive h2 header.</h2>
<h3 class="responsive-text">This is a responsive h3 header.</h3>

This is a responsive h1 header.

This is a responsive h2 header.

This is a responsive h3 header.

If a heading needs the semantic weight of one heading and the style of another, adding the header class will give it that style. There is also two other title style utilities that can be added to a heading. .small-title and .large-title

<h1 class="h6">This is an h1 header with h6 styles.</h1>
<h2 class="h5">This is an h2 header with h5 styles.</h2>
<h3 class="h4">This is an h3 header with h4 styles.</h3>
<h4 class="h3">This is an h4 header with h3 styles.</h4>
<h5 class="h2">This is an h5 header with h2 styles.</h5>
<h6 class="h1">This is an h6 header with h1 styles.</h6>
<h4 class="large-title">This is an h4 header with large-title styles.</h6>
<h4 class="small-title">This is an h4 header with small-title styles.</h6>

This is an h1 header with h6 styles.

This is an h2 header with h5 styles.

This is an h3 header with h4 styles.

This is an h4 header with h3 styles.

This is an h5 header with h2 styles.

This is an h6 header header with h1 styles.

This is an h4 header with .large-title styles.

This is an h4 header with .small-title styles.

Colors

Our typography supports many different classes for changing the color of a piece of text.

<h4 class="primary">Canada Invades US!</h4>
<h4 class="alt">Canada Invades US!</h4>
<h4 class="play1">Canada Invades US!</h4>
<h4 class="play3">Canada Invades US!</h4>
<h4 class="play5">Canada Invades US!</h4>
<h4 class="playbar">Canada Invades US!</h4>
<h4 class="sub">Canada Invades US!</h4>
<h4 class="connect-amp">Canada Invades US!</h4>
<h4 class="connect">Canada Invades US!</h4>
<h4 class="light">Canada Invades US!</h4>
<h4 class="dark">Canada Invades US!</h4>
<h4 class="amber">Canada Invades US!</h4>
<h4 class="white">Canada Invades US!</h4>

Canada Invades US!

Paragraphs

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap <strong> around type to make it bold!. You can also you <em> to italicize your words.

<p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap <strong> around type to <strong>make it bold!</strong>. You can also you <em> to <em>italicize your words</em>.</p>

Links

Links are very standard, and the color is preset to the Sonos primary color.

You can also control the color of a link by adding a sonos product class to it.

<p>Links are very standard, and the <a href="#">color is preset</a> to the Sonos primary color.</p>

<a href="#">default color</a>
<a href="#" class="alt">.alt</a>
<a href="#" class="play1">.play1</a>
<a href="#" class="play3">.play3</a>
<a href="#" class="play5">.play5</a>
<a href="#" class="playbar">.playbar</a>
<a href="#" class="sub">.sub</a>
<a href="#" class="connect-amp">.connect-amp</a>
<a href="#" class="connect">.connect</a>
<a href="#" class="light">.light</a>
<a href="#" class="dark">.dark</a>
<a href="#" class="amber">.amber</a>

default color
.alt
.play1
.play3
.play5
.playbar
.sub
.connect-amp
.connect
.light
.dark
.amber
.white

Lists

Lists are helpful for, well, lists of things. You can change the default color by adding a Sonos product class.

ul.disc

List item with a much longer description or more content.
List item
List item
- Nested List Item
- Nested List Item
- Nested List Item
List Item
List Item
List Item

List item with a much longer description or more content.
List item
List item
- Nested List Item
- Nested List Item
- Nested List Item
List Item
List Item
List Item

<ul class="disc">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

ul.disc.play1

List item with a much longer description or more content.
List item
List item
- Nested List Item
- Nested List Item
- Nested List Item
List Item
List Item
List Item

List item with a much longer description or more content.
List item
List item
- Nested List Item
- Nested List Item
- Nested List Item
List Item
List Item
List Item

<ul class="disc play1">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

You can force the default black color of the list in conjunction with a color class by adding spans to your lis.

ul.disc.play1

List item with a much longer description or more content.
List item
List item
- Nested List Item
- Nested List Item
- Nested List Item
List Item
List Item
List Item

<ul class="disc play1">
  <li><span>List item with a much longer description or more content.</span></li>
  <li><span>List item</span></li>
  <li><span>List item</span>
    <ul>
      <li><span>Nested List Item</span></li>
      <li><span>Nested List Item</span></li>
      <li><span>Nested List Item</span></li>
    </ul>
  </li>
  <li><span>List Item</span></li>
  <li><span>List Item</span></li>
  <li><span>List Item</span></li>
</ul>

ul.circle

List item with a much longer description or more content.
List item
List item
- Nested List Item
- Nested List Item
- Nested List Item
List Item
List Item
List Item

List item with a much longer description or more content.
List item
List item
- Nested List Item
- Nested List Item
- Nested List Item
List Item
List Item
List Item

<ul class="circle">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

ul.square

List item with a much longer description or more content.
List item
List item
- Nested List Item
- Nested List Item
- Nested List Item
List Item
List Item
List Item

List item with a much longer description or more content.
List item
List item
- Nested List Item
- Nested List Item
- Nested List Item
List Item
List Item
List Item

<ul class="square">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

ul.no-bullet

List item with a much longer description or more content.
List item
List item
- Nested List Item
- Nested List Item
- Nested List Item
List Item
List Item
List Item

List item with a much longer description or more content.
List item
List item
- Nested List Item
- Nested List Item
- Nested List Item
List Item
List Item
List Item

<ul class="no-bullet">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Ordered Lists

List item with a much longer description or more content.
List item
List item
1. Nested List Item
2. Nested List Item
3. Nested List Item
List Item
List Item
List Item

List item with a much longer description or more content.
List item
List item
1. Nested List Item
2. Nested List Item
3. Nested List Item
List Item
List Item
List Item

<ol>
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ol>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ol>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

Description Lists

A Description List encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

Definition Term: Definition Description Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.

<dl>
   <dt>Definition Term</dt>
   <dd>Definition Description justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
</dl>

Blockquotes

Sometimes other people say smart things, and you may want to mention that through a blockquote callout. We've got you covered.

I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Isaac Asimov

<blockquote>I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.<cite>Isaac Asimov</cite></blockquote>

V-Cards

Here's a handy microformat-friendly list to address all your needs.

Gaius Baltar
123 Colonial Ave.
Caprica City
Caprica, 12345
g.balter@cmail.com

<ul class="vcard">
  <li class="fn">Gaius Baltar</li>
  <li class="street-address">123 Colonial Ave.</li>
  <li class="locality">Caprica City</li>
  <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
  <li class="email"><a href="#">g.baltar@cmail.com</a></li>
</ul>

Print Styles

Suit includes print styles developed by HTML5 Boilerplate to give you some basic print-specific styles. These are activated when you print through a media query. It includes:

Clearing out backgrounds, box shadows, and text shadows
Appending link URLs after the anchor text
Bordering blockquotes and pre elements
Page cleanup and window minimization

On top of that, we include a couple of simple classes you can use to control elements printing, or not printing. Simply attach .print-only to an element to only show when printing, and .hide-on-print to hide something when printing.