Typography

These guidelines summarize how we use typography at GitHub, and serve as guardrails for designers to design freely with best typographic practices in mind.

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 diffierentiate information and establish hierarchy.

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 it's 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—commonly used at GitHub to display metadata or captions

$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: desktop1.25 line-height1.5 line-height
12px1518
14px17.521
16px2024
20px2530
24px3036
32px4048
40px5060
48px6072

Marketing Typography Scale

Our Marketing Typography Scale aligns with our core typography scale, except for one additional header size:

Font size: desktop1.25 line height1.5 line height
64px8096

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 #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.

Related Typography Components

Primer includes many typographic solutions. Please utilize them when possible before creating a custom component. Some include:

Further Reading and Resources

Contributors: jhuashaoEdit this page on GitHub