Documentation and examples for Chi typography.
The sans-serif font stack is used to display all typography within Chi except code. For code, Chi defers to a monospace font stack.
font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
font-family: Menlo, Consolas, "Liberation Mono", Courier, monospace;
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 |
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. |
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> | |
<em> | Emphasis |
<i> | Italic |
<mark> | Mark |
<small> | Small |
<strong> | Strong |
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>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="-text--large"></p>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="-text--larger"></p>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="-text--small"></p>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="-text--smaller"></p>
Code tags are used to wrap inline snippets of code.
This <code> will render as inline code.
This <code><code></code> will render as inline code.Pre tags are used to wrap multiple lines of code.
<p>This code will render as a code block.</p><pre>
<code><p>This code will render as a code block.</p></code>
</pre>
Use <ul> tags for unordered lists and <ol> tags for ordered lists.
<ul class="-text">
<li></li>
</ul><ol class="-text">
<li></li>
</ol>To remove default list styling, apply the class .-nostyle
<ul class="-text -nostyle">
<li></li>
</ul>To display list items inline, apply the class .-inline
<ul class="-text -inline">
<li></li>
</ul>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>