Typography

Our Typography is based on GitHub Primer typography tokens, providing consistent font sizing, weights, and line heights.

Heading hierarchy

Proper semantic heading hierarchy using native HTML elements styled by Primer.

Heading 1 (h1)

Used for page titles

Heading 2 (h2)

Used for main sections

Heading 3 (h3)

Used for subsections

Heading 4 (h4)

Used for smaller subsections

Heading 5 (h5)

Used for minor headings

Heading 6 (h6)

Used for smallest headings

Text elements

Common text elements using proper semantic HTML styled by Primer.

Paragraph: Regular paragraph text. The quick brown fox jumps over the lazy dog.

Emphasis: Emphasized text and strong text for important content.

Inline code: Use inline code for technical terms and code snippets.

Links: Standard link using Primer Link component.

Code block:

typescript
function example() {
  return "Code block example";
}

Blockquote:

This is a blockquote. Use for quotes or important callouts.

Lists:

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3

Usage guidelines

Typography should be applied using semantic HTML elements styled by Primer BaseStyles:

example.tsxtsx
{/* Preferred: Use native HTML elements (Primer base styles apply automatically) */}
<h1>Page Title</h1>
<h2>Section Heading</h2>
<p>Body paragraph text.</p>
<a href="#">Link text</a>
<code>Inline code</code>
<ul>
  <li>List item</li>
</ul>

{/* Alternative: Use Primer components for interactive/complex elements */}
import { Heading, Text, Link } from "@primer/react";
import classes from "./Example.module.css";

<Heading as="h1" className={classes.accentHeading}>Custom Styled Title</Heading>
<Text as="p" className={classes.mutedText}>Muted paragraph text.</Text>
<Link href="#" muted>Muted link</Link>

Refer to the Primer typography documentation for complete guidelines on font families, weights, and line heights.