Skip to content
Primer Design System

Primer Design System

BrandAbout

Site navigation

  • Guides
    • Introduction
      • Introduction
      • Getting started
      • How to contribute
      • Getting started
      • Migration guides
      • Getting started
      • Theming
      • Theme reference
      • Linting
      • System props
      • Core concepts
      • Philosophy
      • Overriding styles
      • Hooks
    • Component lifecycle
    • Component status
      • Accessibility at GitHub
      • Guidelines
      • Tools
      • Alternative text for images
      • Assistive technology announcements
      • Descriptive buttons
      • Focus management
      • Headings
      • Links
      • Semantic HTML
      • Text resize and respacing
      • Tooltips
      • How to contribute
      • Design
      • Documentation
      • Handling new patterns
      • Adding new components
  • Foundations
      • Overview
      • Base scales
      • Accessibility
      • Getting started
      • Token names
      • Color
      • Size
      • Typography
      • Migrating
    • Responsive
      • Getting started
      • Animations
      • Borders
      • Box shadow
      • Colors
      • Details
      • Flexbox
      • Grid
      • Layout
      • Margin
      • Padding
      • Typography
    • Layout
    • Typography
      • Octicons
      • Octovisuals
      • Design guidelines
    • Content
  • UI patterns
    • Data visualization
    • Degraded experiences
    • Empty states
    • Feature onboarding
    • Forms
    • Loading
    • Messaging
    • Navigation
    • Progressive disclosure
    • Saving
  • Components
    • Action bar
    • Action list
    • Action menu
    • Anchored overlay
    • Autocomplete
    • Avatar
    • Avatar pair
    • Avatar stack
    • Banner
    • Blankslate
    • Border box
    • Box
    • Branch name
    • Breadcrumbs
    • Button
    • Button group
    • Checkbox
    • Checkbox group
    • Circle badge
    • Circle octicon
    • Clipboard copy
    • Close button
    • Comment box
    • Counter label
    • Data table
    • Details
    • Dialog
    • Flash
    • Form control
    • Header
    • Heading
    • Hidden text expander
    • Icon
    • Icon button
    • Image
    • Image crop
    • Label
    • Label group
    • Layout
    • Link
    • Markdown
    • Nav list
    • Octicon symbols
    • Overlay
    • Pagehead
    • Page header
    • Page layout
    • Pagination
    • Popover
    • Pointer box
    • Progress bar
    • Radio
    • Radio group
    • Relative time
    • Segmented control
    • Select
    • Select panel
    • Spinner
    • Split page layout
    • Stack
    • State label
    • Subnav
    • Tab container
    • Tab nav
    • Tab panels
    • Text
    • Text input
    • Text input with tokens
    • Textarea
    • Timeline
    • Toast
    • Toggle switch
    • Token
    • Tooltip
    • Tree view
    • Truncate
    • Underline nav
    • Underline panels
  • Deprecated components
    • Box overlay
    • Dropdown
    • Filter list
    • Filtered search
    • Menu
    • Select menu
    • Side nav
  • GitHub staff
    • GitHub shared components
  • Native
      • Getting started
      • Foundations
      • Components
      • Getting started
      • Foundations
      • Platforms
      • Foundations
  • GitHub

On this page

  • Weight
  • Font family
  • Font shorthand
  • Display
  • Title large
  • Title medium
  • Title small
  • Subtitle
  • Body large
  • Body medium
  • Body small
  • Caption
  • Code block
  • Inline code block

Typography

An overview of all available typography CSS variables
On this page
  • Weight
  • Font family
  • Font shorthand
  • Display
  • Title large
  • Title medium
  • Title small
  • Subtitle
  • Body large
  • Body medium
  • Body small
  • Caption
  • Code block
  • Inline code block

Weight

View in Storybook

Font family

View in Storybook

Font shorthand

Use the font declaration to set all font properties at once (font-weight, font-size, line-height, and font-family).

font: var(--text-display-shorthand);
View in Storybook

Display

View in Storybook

Title large

View in Storybook

Title medium

View in Storybook

Title small

View in Storybook

Subtitle

View in Storybook

Body large

View in Storybook

Body medium

View in Storybook

Body small

View in Storybook

Caption

View in Storybook

Code block

View in Storybook

Inline code block

View in Storybook

Footer

Edit this page on GitHub
1 contributorlangermank
Last edited by langermank on February 20, 2024