Typography

Fonts

Solid assumes you have two fonts available on your app: Proxima Nova and Caponi. BuzzFeed employees can download these fonts from our Solid fonts repo.

Headers and Sizing

Header sizes are defined from h1 to h6. Additionally, Solid provides responsive prefixed utility classes ranging from .xs-text-1 to .xs-text-6 for sizing blocks of text. For the same font size across devices, use the default .xs-text-n class. Headers and text sizing classes have no margins or padding by default.

h1, .xs-text-1 1.75rem, 28px

The quick brown fox jumps over the lazy dog.

h2, .xs-text-2 1.375rem, 22px

The quick brown fox jumps over the lazy dog.

h3, .xs-text-3 1.125rem, 18px

The quick brown fox jumps over the lazy dog.

h4, .xs-text-4 1rem, 16px

The quick brown fox jumps over the lazy dog.

h5, .xs-text-5 0.875rem, 14px

The quick brown fox jumps over the lazy dog.

h6, .xs-text-6 0.75rem, 12px

The quick brown fox jumps over the lazy dog.
<h1>The quick brown fox jumps over the lazy dog.</h1>
<p class="xs-text-1">The quick brown fox jumps over the lazy dog.</p>
<h2>The quick brown fox jumps over the lazy dog.</h2>
<p class="xs-text-2">The quick brown fox jumps over the lazy dog.</p>
<h3>The quick brown fox jumps over the lazy dog.</h3>
<p class="xs-text-3">The quick brown fox jumps over the lazy dog.</p>
<h4>The quick brown fox jumps over the lazy dog.</h4>
<p class="xs-text-4">The quick brown fox jumps over the lazy dog.</p>
<h5>The quick brown fox jumps over the lazy dog.</h5>
<p class="xs-text-5">The quick brown fox jumps over the lazy dog.</p>
<h6>The quick brown fox jumps over the lazy dog.</h6>
<p class="xs-text-6">The quick brown fox jumps over the lazy dog.</p>

.xs-text-6.md-text-5.lg-text-4Resize this window to see responsive text in action.

<p class="xs-text-6 md-text-5 lg-text-4">Resize this window to see responsive text in action.</p>

Slab Headers

Caponi Slab Semibold is BuzzFeed News' headline typeface (please avoid any other usage). It can be applied to any text element using .slab.

.slab

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.
<h1 class="slab">The quick brown fox jumps over the lazy dog.</h1>
<h2 class="slab">The quick brown fox jumps over the lazy dog.</h2>
<h3 class="slab">The quick brown fox jumps over the lazy dog.</h3>
<h4 class="slab">The quick brown fox jumps over the lazy dog.</h4>
<h5 class="slab">The quick brown fox jumps over the lazy dog.</h5>

Emphasis

Use the following html tags and utility classes to add emphasis to blocks of text.

.regular

The quick brown fox jumps over the lazy dog.

<p class="bold"><span class="regular">The quick brown fox</span>jumps over the lazy dog.</p>

strong, .bold

The quick brown fox jumps over the lazy dog.

<strong>The quick brown fox jumps over the lazy dog.</strong>
<p class="bold">The quick brown fox jumps over the lazy dog.</p>

em, .italic

The quick brown fox jumps over the lazy dog.

<em>The quick brown fox jumps over the lazy dog.</em>
<p class="italic">The quick brown fox jumps over the lazy dog.</p>

.caps

The quick brown fox jumps over the lazy dog.

<p class="caps">The quick brown fox jumps over the lazy dog.</p>

Overflow

Use the following utility classes to prevent blocks of text from wrapping or to truncate them (requires setting a width).

.nowrap

The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.

<p class="nowrap">The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.</p>

.truncate

The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.

<p class="truncate">The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.</p>

Alignment

Use these utility classes to align blocks of text. Requires using Solid's responsive prefixes.

.xs-text-left

The quick brown fox jumps over the lazy dog.

.xs-text-right

The quick brown fox jumps over the lazy dog.

.xs-text-center

The quick brown fox jumps over the lazy dog.

.xs-text-justify

The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.

<p class="xs-text-left">The quick brown fox jumps over the lazy dog.</p>
<p class="xs-text-center">The quick brown fox jumps over the lazy dog.</p>
<p class="xs-text-right">The quick brown fox jumps over the lazy dog.</p>
<p class="xs-text-justify">The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.</p>

Lists

Ordered and unordered lists require no classes by default. To remove all styling from either list, use the .list-unstyled class.

ol

  1. John
  2. Paul
  3. George
  4. Ringo

ul

  • John
  • Paul
  • George
  • Ringo

.list-unstyled

  • John
  • Paul
  • George
  • Ringo
<ol>
  <li>John</li>
  <li>Paul</li>
  <li>George</li>
  <li>Ringo</li>
</ol>

<ul>
  <li>John</li>
  <li>Paul</li>
  <li>George</li>
  <li>Ringo</li>
</ul>

<ul class="list-unstyled">
  <li>John</li>
  <li>Paul</li>
  <li>George</li>
  <li>Ringo</li>
</ul>