Typography
Text sizes, weights and font families used across GitHub.
Primer Design System
Site navigation
On this page
On this page
The following typographic styles are not yet fully integrated into Primer components or CSS utilities
Typographic styles
Overview
Typography design tokens use rem units for a more accessible browser zoom experience. Additionally, line height values are unitless and vary per style, making them align to the 4px grid. Each style is opinionated, as reflected in the “shorthand” tokens which control size, family, weight, and line-height with a single font CSS declaration.
Headings
Body
Code
Font weight
Font weight options include light, normal, medium, and semibold.
Font family
Each font stack uses system fonts, which are optimized for performance.
Best practices
Hierarchy
When establishing hierarchy for GitHub products, designers should remember that we stress efficient, clean reading experiences for our users. Refrain from utilizing color as a primary method of emphasis.
Readability
Line height—Utilize line-height tokens for proper alignment.
Line length—It's considered a good practice to keep lines around 80 characters or less—W3 Page Structure Guidelines. Cases vary depending on the situation, but this serves as a general rule of thumb for designing layouts.
Type alignment—Our content is typically left-aligned and ragged right. Be sensible in deviating from this standard, as justifying, centering, and right-aligning text is atypical of GitHub products.
Font weight—Adjust font weight to add emphasis and differentiate content hierarchy.
Letter spacing—Please refrain from altering letter-spacing on our products. There may be rare scenarios in which this is acceptable, but generally speaking, this should be avoided altogether.
Do
Use weight CSS variables to set font-weight
Don’t
Don't use arbitrary weight number values for font-weight
Do
Use semantic title markup combined with styles
Don’t
Don’t adjust semantic heading tag order to achieve a specific visual design