These guidelines summarize how we use typography at GitHub, and serve as guardrails for designers to design freely with best typographic practices in mind.
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.
|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|
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;
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|
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|
It is best practice at GitHub to keep unique type styling to a minimum as to align stylistically with our other products.
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.
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.
When certain typographic patterns in your design emerge, or you believe a certain solution should be made into a component, reach out to the #design-systems 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.
Primer includes many typographic solutions. Please utilize them when possible before creating a custom component. Some include: