On this page
Typography
Typefaces
The first three typefaces listed below are the most commonly utilized system-fonts on GitHub products. However, this isn’t a finite list, so keep in mind that typographic implementations may vary between browser settings and operating systems.
Inter UI and SF Mono are not system fonts, but are used in specialized scenarios to differentiate information and establish hierarchy.
| Example | Description |
|---|---|
 | San Francisco is a neo-grotesque sans-serif typeface designed by Apple to replace Helvetica Neue for OSX and iOS |
 | Segoe UI is a humanist sans-serif adopted by Microsoft as its default operating system font since Windows Vista |
 | Ubuntu is an OpenType-based, humanist sans-serif typeface. It became the default system font for Ubuntu 10.10 and is commonly used on Linux distros |
 | Inter UI is a typeface designed by Rasmus Andersson specially for user interfaces. Inter UI is used in our products as a display face in select circumstances |
 | SF Mono is a monospace typeface that is part of the San Francisco typeface family. SF Mono is monospaced across weights, so resetting SF Mono text into another font weight will not cause text to reflow |
Font stack
We utilize system fonts at GitHub, which allow for optimized performance. This design decision takes advantage of retina screens, dynamic kerning, additional font-weights, and improved readability.
System Fonts—default GitHub font-stack with ample fallbacks alongside emoji support
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
Monospace—used within GitHub product to display metadata or captions, and used in marketing contexts as subheaders
$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
Display face—the font stack that implements Inter UI
font-family: InterUI, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
For more information on why we made the change to system fonts, check out Mark Otto's article: Shipping System fonts to GitHub.com
Typography scale and line height
The typography scale is designed to work for GitHub's product interfaces and marketing sites. Font sizes are designed to work in combination with line-height values so as to result in more sensible numbers wherever possible.
| Font size: desktop | 1.25 line-height | 1.5 line-height |
|---|---|---|
| 12px | 15 | 18 |
| 14px | 17.5 | 21 |
| 16px | 20 | 24 |
| 20px | 25 | 30 |
| 24px | 30 | 36 |
| 32px | 40 | 48 |
| 40px | 50 | 60 |
| 48px | 60 | 72 |
Marketing typography scale
Our marketing typography scale aligns with our core typography scale, except for one additional header size:
| Font size: desktop | 1.25 line height | 1.5 line height |
|---|---|---|
| 64px | 80 | 96 |
Marketing typography also incorporates Inter UI as a display face. More information on marketing typography.
Applying typography
It is best practice at GitHub to keep unique type styling to a minimum as to align stylistically with our other products.
Hierarchy
When establishing hierarchy for GitHub products, designers should remember that we stress efficient, clean reading experiences for our users. Be sure to utilize Primer’s typography scale and typography utilities when doing so. Refrain from utilizing color as a primary method of emphasis.
Readability
Line height—Refer to our typography scale when structuring line height. Generally, our products should follow this scale without issues.
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.
Support
Iterate and componentize
When certain typographic patterns in your design emerge, or you believe a certain solution should be made into a component, reach out to the #primer channel on Slack to find out more on submitting your code or idea. You may also reach out by opening an issue in the Primer repo on GitHub.
Related typography components
Primer includes many typographic solutions. Please utilize them when possible before creating a custom component. Some include: