Typography

Pico Reforged styles text by element. Write semantic HTML and the type scale, spacing and colors follow. There are no typography classes.

Responsive type#

The root font size is 100% (16px in most browsers) up to 1535px and takes one step to 106.25% (17px) from 1536px. Everything sized in rem or em follows it.

Build with --no-responsive-typography (or responsiveTypography: false) to keep 100% at every width.

Headings#

h1 to h6 have their own size, line height and top spacing. A heading that follows a paragraph, list, table, form, figure or similar block gets extra space above it, so sections breathe without any margin classes.

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

All headings use weight 600 and balanced line wrapping. The larger ones get a slightly tighter letter spacing.

Heading group#

Wrap a title and a subtitle in hgroup. The last child is muted and sits tight under the title.

<hgroup>
  <h2>Heading group</h2>
  <p>The subtitle uses the muted color.</p>
</hgroup>

Text#

Paragraphs, strong, em, u, s, small, sub and sup work as expected. small is set to 0.875em.

<p>
  A paragraph with <strong>strong text</strong>, <em>emphasis</em>, <u>underline</u>,
  <s>strikethrough</s> and <small>small print</small>. Water is H<sub>2</sub>O and E = mc<sup>2</sup>.
</p>

Lists#

Unordered lists use disc markers in the muted color. Nested lists sit closer to their parent. Description lists (dl) take the same text spacing as paragraphs.

<ul>
  <li>First item</li>
  <li>
    Second item with children
    <ul>
      <li>Nested one</li>
      <li>Nested two</li>
    </ul>
  </li>
</ul>
<ol>
  <li>Open the box</li>
  <li>Read the manual</li>
  <li>Plug it in</li>
</ol>
<dl>
  <dt>Cascade</dt>
  <dd>The order in which competing rules are resolved.</dd>
  <dt>Specificity</dt>
  <dd>How strongly a selector claims an element.</dd>
</dl>

Blockquote#

A blockquote has a left border and padding. A footer inside it is muted, which suits an attribution with cite. In right-to-left pages the border flips to the other side.

<blockquote>
  Simplicity is prerequisite for reliability.
  <footer><cite>Edsger W. Dijkstra</cite></footer>
</blockquote>

Address#

address is not italic. It takes the same spacing as a paragraph.

<address>
  Example Street 12<br />
  1000-001 Lisbon, Portugal
</address>

Related#

Links, mark, ins, del, abbr and kbd have their own pages: Link and Misc. Code is on Code.

Customization#

--pico-font-family

var(--pico-font-family-sans-serif)

Font stack for body text.

--pico-font-size

100%

Root font size before the responsive steps.

--pico-line-height

1.5

Base line height.

--pico-typography-spacing-vertical

1rem

Space below text blocks.

--pico-h1-color

light-dark(#13161c, #f4f5f8)

Color of h1. The same pattern exists for h2 to h6.

--pico-blockquote-border-color

var(--pico-muted-border-color)

Left border of blockquote.

--pico-blockquote-footer-color

var(--pico-muted-color)

Footer text inside blockquote.

Set the variables on :root to change them everywhere, or on one element to change only that element. See Themes for more.