Typography
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.
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 .chi-code
.
Tag | Example |
---|---|
<abbr> | Abbreviated |
<b> | Bold |
<code> | Code |
<del> | |
<em> | Emphasis |
<i> | Italic |
<mark> | Mark |
<small> | Small |
<strong> | Strong |
Code
Inline code
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.
Code blocks
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>
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>
- List item 1
- List item 2
- List item 2.1
- List item 2.2
- List item 3
- List item 4
<ol class="-text">
<li></li>
</ol>
No style
To remove default list styling, apply the class .-no-style
- List item 1
- List item 2
- List item 2.1
- List item 2.2
- List item 3
- List item 4
<ul class="-text -no-style">
<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>