Typography Guidelines

[jhuashao]

Typography

These guidelines summarize how we use typography at Github, and serve as guardrails for designers to design freely with best practices in mind.
Good typography enhances the user’s experience by providing a well-structured vessel to hold a product’s content

Typefaces

At Github, our teams utilize system-fonts, which allow for optimized performance. This design decision takes advantage of:

• retina screens
• dynamic kerning
• additional font-weights
• improved readability
• Operating system-agnostic design

Segoe UI for Windows
San Francisco for macOS and iOS
Ubuntu for Ubuntu Linux (most commonly used in Linux distros)

Font Stack

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

For more information on how Github uses typography for product design, check out Mark Otto’s article: Shipping System fonts to Github.com

Type Scale and Line-Height

Principles of Usage

Utilize components
Primer has many typographic solutions that have been created for developers and designers. Please refer to the docs to access them
List of helpful components:

• subheads
• Label
• etc.

Be aware of our usage of system-fonts:
Because Github font-stack defaults to system-fonts, it is important for designers to be aware of this fact when making design decisions. It’s recommended designers become familiar with typefaces themselves, and understand their nuances.

Please refer to the Typefaces section of this document to access our font-stack and resources.

Layouts and Typographic Guidance:
Line length:
Line length is important to consider when designing with body text in mind. Cases vary depending on the situation, but this serves as a general rule of thumb for developing products at Github
Type Consistency:
Don’t overuse different type sizes, weights, and styling. Try to keep this to a minimum in order to

etc.

[jhuashao]

https://www.are.na/joshua-shao/design-systems-typography

[jhuashao]

https://design.firefox.com/photon/visuals/typography.html