Typography

Documentation and examples for Grayshift typography, including global settings, headings, body text, lists, and more.

Global settings

Grayshift sets basic global display, typography, and link styles. When more control is needed, check out the textual utility classes.

  • Use Inter font family for excellent readability on computer screens.
  • For a more inclusive and accessible type scale, we assume the browser default root font-size (typically 16px) so visitors can customize their browser defaults as needed.
  • Set the global link color via var(--body-color).
  • Use var(--body-bg) to set a background-color on the <body>.

Headings

All HTML headings, <h1> through <h6>, are available.

h1

h2

h3

h4

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

Lists

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

<ul class="list-unstyled">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>