Chi Documentation

Typography

Documentation and examples for Chi typography.

Grid

All components in Chi, including Typography, adhere to a 4px baseline grid. The grid promotes consistency and familiarity through repetition. Chi achieves this repetition by ensuring line-height, padding, border, and margin values are divisible by 4. For user friendliness, Chi utilizes rem units instead of pixels. A rem is a unit of measurement that is equal to the root html font-size. Chi's root is 16px. So 1rem equals 16px.

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: "Open Sans", "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. Headings in Chi can be defined as tags <h1> - <h6> or classes .a-h1 - .a-h6.

Heading
Example
<h1>

h1 Chi heading

<h2>

h2 Chi heading

<h3>

h3 Chi heading

<h4>

h4 Chi heading

<h5>
h5 Chi heading
<h6>
h6 Chi heading

Body text

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

Font size
Example

14px (0.875rem)

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.

Inline text

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

Tag
Example
<abbr>Abbreviated
<b>Bold
<code>Code
<del>Delete
<em>Emphasis
<i>Italic
<mark>Mark
<small>Small
<strong>Strong

Paragraphs

Base

14px (0.875rem) font size with 24px (1.5rem) line-height

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 class="-text"></p>

Large

16px (1rem) font size with 24px (1.5rem) line-height

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 class="-textLarge"></p>

Larger

18px (1.125rem) font size with 28px (1.75rem) line-height

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 class="-textLarger"></p>

Small

13px (0.8125rem) font size with 20px (1.25rem) line-height

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 class="-textSmall"></p>

Smaller

12px (0.75rem) font size with 20px (1.25rem) line-height

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 class="-textSmaller"></p>

Code

Inline code

Code tags are used to wrap inline snippets of code.

This <code> will render as inline 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.

  • List item 1
  • List item 2
    • List item 2.1
    • List item 2.2
  • List item 3
  • List item 4
<ul class="-text">
  <li></li>
</ul>
  1. List item 1
  2. List item 2
    • List item 2.1
    • List item 2.2
  3. List item 3
  4. List item 4
<ol class="-text">
  <li></li>
</ol>

No style

To remove default list styling, apply the class .-noStyle

  • List item 1
  • List item 2
    • List item 2.1
    • List item 2.2
  • List item 3
  • List item 4
<ul class="-text -noStyle">
  <li></li>
</ul>

Inline

To display list items inline, apply the class .-inline

  • List item 1
  • List item 2
    • List item 2.1
    • List item 2.2
  • List item 3
  • List item 4
<ul class="-text -inline">
  <li></li>
</ul>

Blockquotes

Blockquotes are used to quote content from another source.

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.

<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>

Text alignment

Change text alignment to justified, left, center, or right.

This text will render as justified

This text will render as left aligned

This text will render as center aligned

This text will render as right aligned

<p class="-textJustify">This text will render as justified</p>
<p class="-textLeft">This text will render as left aligned</p>
<p class="-textCenter">This text will render as center aligned</p>
<p class="-textRight">This text will render as right aligned</p>

Text transform

Change text transform to lowercase, uppercase, or capitalized.

This text will render as lowercase

This text will render as uppercase

This text will render as capitalized

<p class="-textLowercase">This text will render as lowercase</p>
<p class="-textUppercase">This text will render as uppercase</p>
<p class="-textCapitalized">This text will render as capitalized</p>

Text weight

Change text weight to thin, normal, bold, or bolder.

This text will render as thin

This text will render as normal

This text will render as bold

This text will render as bolder

<p class="-textThin">This text will render as thin</p>
<p class="-textNormal">This text will render as normal</p>
<p class="-textBold">This text will render as bold</p>
<p class="-textBolder">This text will render as bolder</p>

Text wrapping

Prevent text wrapping with nowrap or control overflow with truncate.

This text will render without wrapping

This text will truncate with an ellipsis

<p class="-textNoWrap">This text will render without wrapping</p>
<p class="-textTruncate">This text will truncate with an ellipsis</p>

Text colors

Change text colors with contextual classes.

.-textBrand

.-textSuccess

.-textWarning

.-textDanger

.-textInfo

.-textInverse

<p class="-textBrand">.-textBrand</p>
<p class="-textSuccess">.-textSuccess</p>
<p class="-textWarning">.-textWarning</p>
<p class="-textDanger">.-textDanger</p>
<p class="-textInfo">.-textInfo</p>
<p class="-textInverse">.-textInverse</p>