Typography

Usage

Legibility

Text legibility is primarily affected by color. All text on the website should comply with the Web Content Accessibility Guidelines (WCAG 2.0) Level AA requirements.

Please refer to the Colors section for more information on color contrast and accessibility.

Sizes

Disclaimer: Use these helpers when you need to modify the look of an element in cases where using a different element would lead to the wrong semantic meaning. A good example is the Ember.js home page, where a hero element exists which contains the <h1> for that page and therefore requires all subsequent headlines to shift down one level. The design does not know about this semantic shift, so all <h2> on that page need .text-xl to look like <h1> and so on.

Use .text-sm for small headings or notice paragraphs.

<div class="text-sm">
  Build with the teams that never stop shipping.
</div>

Use .text-base for body text, navigation items or links.

<div class="text-base">
  Build with the teams that never stop shipping.
</div>

.text-base is also the default paragraph size.

<div>
  Build with the teams that never stop shipping.
</div>

Use .text-md for section headings. This is also the default size for the h3 element.

<div class="text-md">
  Build with the teams that never stop shipping.
</div>

Use .text-lg for content page headings. This is also the default size for the h2 element.

<div class="text-lg">
  Build with the teams that never stop shipping.
</div>

Use .text-xl for landing page headlines. This is also the default size for the h1 element.

<div class="text-xl">
  Build with the teams that never stop shipping.
</div>

Use .text-hero-xl for headlines in page headers (heros).

<h1 class="text-hero-xl">
  Build with the teams that never stop shipping.
</h1>

Use .text-hero-base for plain text in page headers (heros).

<p class="text-hero-base">
  Ember.js is a productive, battle-tested JavaScript framework for building
  modern web applications. It includes everything you need to build rich UIs
  that work on any device.
</p>

Weights

Use .regular

<div class="text-md regular">
  Build with the teams that never stop shipping.
</div>

Use .bold if you must style something as bold and no semantic information needs to be carried. Prefer using <strong>.

<div class="text-md bold">
  Build with the teams that never stop shipping.
</div>