Typography

Roux includes styles for headlines, body text, links and other typographic elements.

Considerations

Lean into typographic elements like <p>, <ul>, <ol>, <strong>, and headline tags instead of plain <div>.

Be sure to use headline levels in order (H1 followed by H2, etc) so that assistive technologies can navigate the page. Skipping a headline level causes confusion.

Examples

Basic Typography

<h1>First-level heading</h1>
<h2>Second-level heading</h2>
<h3>Third-level heading</h3>
<h4>Fourth-level heading</h4>
<p>
  A paragraph right here. Lorem ipsum dolor sit amet,
  <strong>consectetur adipiscing elit.</strong> Sed lectus nunc,
  <a href="#">faucibus at tempus in, mattis <em>eu tellus</em></a
  >. Quisque non neque vitae arcu aliquam scelerisque vitae id mauris.
  Suspendisse potenti.
</p>

<hr />

<p><small>Small text here that is legalese.</small></p>