Typography

Native HTML text elements, unstyled and ready to inherit your design.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs

A paragraph of text. Jazz styles native HTML elements directly with no class names needed for basic usage.

A second paragraph. Spacing between paragraphs is handled automatically.

<p>A paragraph of text.</p>
<p>A second paragraph.</p>

Inline text

Strong importance

Emphasized text

Bold, no added importance

Idiomatic or technical term

Underlined annotation

~~Struck-through, no longer accurate~~

Highlighted for reference

Fine print or side comment

H₂O (subscript)

E = mc² (superscript)

HTML (abbreviation)

The Elements of Typographic Style

An inline quotation pulls text into context.

~~Removed from the document~~

Inserted into the document

Press ⌘K to open the palette.

const x = 42

Let x be an unknown quantity.

Output: Error: file not found

Visit the documentation to learn more.

<strong>Strong importance</strong>
<em>Emphasized text</em>
<b>Bold, no added importance</b>
<i>Idiomatic or technical term</i>
<u>Underlined annotation</u>
<s>Struck-through, no longer accurate</s>
<mark>Highlighted for reference</mark>
<small>Fine print or side comment</small>
H<sub>2</sub>O E = mc<sup>2</sup>
<abbr title="HyperText Markup Language">HTML</abbr>
<cite>The Elements of Typographic Style</cite>
<q>An inline quotation pulls text into context.</q>
<del>Removed from the document</del>
<ins>Inserted into the document</ins>
<kbd>⌘K</kbd>
<code>const x = 42</code>
Let <var>x</var> be an unknown quantity. Output:
<samp>Error: file not found</samp> <a href="#">documentation</a>

Lists

Unordered item
Unordered item
Unordered item

Ordered item
Ordered item
Ordered item

Term: Description of the term above.
Another term: Its description.

<ul>
  <li>Unordered item</li>
</ul>

<ol>
  <li>Ordered item</li>
</ol>

<dl>
  <dt>Term</dt>
  <dd>Description.</dd>
</dl>

Blockquote

The details are not the details. They make the design.

Charles Eames

<blockquote>
  <p>The details are not the details. They make the design.</p>
  <footer>Charles Eames</footer>
</blockquote>

Code

const greeting = "hello, world"
console.log(greeting)

<pre><code>const greeting = "hello, world"
console.log(greeting)</code></pre>