Typography
Text sizes, weights and font families used across GitHub.
Looking for Primer's color design tokens? See the typography primitives page.
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.
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.
Use weight CSS variables to set font-weight
Don't use arbitrary weight number values for font-weight
Use semantic title markup combined with styles
Don’t adjust semantic heading tag order to achieve a specific visual design