Typography is a key part of creating a usable, consistent experience in any interface.

This component can use icons. For more information, check out the icons documentation.

Font

Joystick uses Open Sans as the default font. Open Sans is a simple, clean, light-weight font that is available for free from Google Fonts.

To use Open Sans in your Joystick project, paste the following line of code as the first element in the <head> of your HTML document.

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700' rel='stylesheet' type='text/css'>

Body Text

Placing text in <p> tags will automatically apply the default body text styles. There is a class available, .joy-text-body, but it should on be used in situations where you need to explicitly specify the style of some text.

Create smaller, muted text by applying the class .joy-text-body--small.

Lead sentence usually found at the top of a page or section. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Base body text.

Body small

<p class="joy-text-body--lead">
  Lead sentence usually found at the top of a page or section. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>

<p>
  Base body text.
</p>

<p class="joy-text-body--small">
  Body small
</p>

Color

Default color

Weak color

Error color

<p class="joy-text-color--default">Default color</p>
<p class="joy-text-color--weak">Weak color</p>
<p class="joy-text-color--error">Error color</p>

Links

Links also require no class for styles; a simple <a> tag is all you need.

I'm a link to somewhere in a sentence.

<p>
  I'm <a href="#links">a link to somewhere</a> in a sentence.
</p>

Headings

Headings come in 4 sizes and must include a heading class. h1, h2, h3, etc. do not have any styling by default. Any class can be added to any heading (<h6 class="joy-text-heading--large">) and heading classes can even be applied to <span> tags if needed.

Heading large

Heading medium

Heading small

Heading Label

<h1 class="joy-text-heading--large">
  Heading large
</h1>

<h2 class="joy-text-heading--medium">
  Heading medium
</h2>

<h3 class="joy-text-heading--small">
  Heading small
</h3>

<h4 class="joy-text-heading--label">
  Heading Label
</h4>

Alignment

Helper classes to quickly align a text element left, center, or right.

The quick brown fox jumps over the lazy dog.

<p class="joy-text-align--left">The quick brown fox jumps over the lazy dog.</p>
<p class="joy-text-align--center">The quick brown fox jumps over the lazy dog.</p>
<p class="joy-text-align--right">The quick brown fox jumps over the lazy dog.</p>

Inline Code

Wrap inline code in <code> tags with the class .joy-text-code.

Wrap inline code in <code class="joy-text-code">&lt;code&gt;</code>
tags with the class <code class="joy-text-code">.joy-text-code</code>.

Longform Text

Wrap longform text elements with .joy-text-longform in order to add padding and margins to typography elements.

Lead sentence usually found at the top of a page or section. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Something

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

Ordered List Item #1
Ordered List Item #2
Ordered List Item #3

<div class="joy-text-longform">
  <p class="joy-text-body--lead">
    Lead sentence usually found at the top of a page or section. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown <code class="joy-text-code">fox jumps</code> over the lazy dog.</p>
  <h3 class="joy-text-heading--small">Something</h3>
  <ul>
    <li>The quick brown fox jumps over the lazy dog.</li>
    <li>The quick brown fox jumps over the lazy dog.</li>
  </ul>
  <ol>
    <li>Ordered List Item #1</li>
    <li>Ordered List Item #2</li>
    <li>Ordered List Item #3</li>
  </ol>
</div>