Typeface#

The sans-serif font stack is used to display all typography within Chi except code. For code, Chi defers to a monospace font stack.

Sans-serif font stack#

font-family: "Inter", "Helvetica Neue", Arial, sans-serif;

Monospace font stack#

font-family: Menlo, Consolas, "Liberation Mono", Courier, monospace;

Headings#

Headings are used to illustrate the typographic hierarchy of a page. h1 defines the most important heading and h6 the least.

Body text#

Chi's default font size is 14px (0.875rem) and is intended to maximize screen real estate in dense, app oriented interfaces.

Inline text#

Styles for common inline text elements. Styles can be defined as tags <code> or classes .chi-code.

Code#

Inline code#

Code tags are used to wrap inline snippets of code.

This <code>&lt;code&gt;</code> will render as inline code.

Code blocks#

Pre tags are used to wrap multiple lines of code.

<p>This code will render as a code block.</p>

<pre>
  <code>&lt;p&gt;This code will render as a code block.&lt;/p&gt;</code>
</pre>

Lists#

Base#

Use <ul> tags for unordered lists and <ol> tags for ordered lists.

<ul class="-text">
  <li></li>
</ul>

<ol class="-text">
  <li></li>
</ol>

No style#

To remove default list styling, apply the class .-no-style

<ul class="-text -no-style">
  <li></li>
</ul>

Inline#

To display list items inline, apply the class -inline

<ul class="-text -inline">
  <li></li>
</ul>

Blockquotes#

Blockquotes are used to quote content from another source.

<blockquote>
  <p class="-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacus lacus, dictum quis mauris vel, commodo condimentum odio. Praesent lacus metus, vehicula at orci ac, fringilla mollis mauris.</p>
</blockquote>