Title font size migration from sx to CSS variables
Title (Heading) font sizes map from sx keywords to CSS variables and pixel values: sx 0 = 12px (primitive: --base-size-12), sx 1 = 14px (primitive: --base-size-14), sx 2 = 16px (primitive: --text-title-size-small), sx 3 = 20px (primitive: --text-title-size-medium), sx 4 = 24px (primitive: --base-size-24), sx 5 = 32px (primitive: --text-title-size-large), sx 6 = 40px (primitive: --base-size-40), sx 7 = 48px (primitive: --base-size-48), sx 8 = 56px (primitive: --base-size-56).
Body text font size migration from sx to CSS variables
Body text font sizes map from sx keywords to CSS variables and pixel values: sx 0 = 12px (primitive: --text-body-size-small), sx 1 = 14px (primitive: --text-body-size-medium), sx 2 = 16px (primitive: --text-body-size-large), sx 3 = 20px (primitive: --base-size-20), sx 4 = 24px (primitive: --base-size-24), sx 5 = 32px (primitive: --base-size-32), sx 6 = 40px (primitive: --base-size-40), sx 7 = 48px (primitive: --base-size-48), sx 8 = 56px (primitive: --base-size-56).
Font family migration from sx to CSS variables
Font family values map from sx keywords to CSS variables: normal (system sans-serif) maps to --fontStack-system or explicitly --fontStack-sansSerif, mono (monospace) maps to --fontStack-monospace.
SCSS variable to CSS variable migration - typography sizes
Legacy SCSS font size variables map to CSS variables: $h00-size-mobile to --text-display-size, $h0-size-mobile to --text-title-size-large, $h1-size-mobile to 26px (deprecated), $h2-size-mobile to 22px (deprecated), $h3-size-mobile to 18px (deprecated), $h00-size to --base-size-48, $h0-size to --text-display-size, $h1-size to --text-title-size-large, $h2-size to --base-size-24, $h3-size to --text-title-size-medium, $h4-size to --text-title-size-small, $h5-size to --text-body-size-medium, $h6-size to --text-body-size-small, $font-size-small to --text-body-size-small.
SCSS variable to CSS variable migration - font weight
Legacy SCSS font weight variables map to CSS variables: $font-weight-bold to --base-text-weight-semibold, $font-weight-semibold to --base-text-weight-medium, $font-weight-normal to --base-text-weight-normal, $font-weight-light to --base-text-weight-light.
SCSS variable to CSS variable migration - line height
Legacy SCSS line height variables map to numeric values: $lh-condensed-ultra to 1, $lh-condensed to 1.25, $lh-default to 1.5.
SCSS variable to CSS variable migration - font stacks
Legacy SCSS font stack variables map to CSS variables: $body-font to --fontStack-system, $mono-font to --fontStack-monospace, $body-font-size to --text-body-size-medium, $body-line-height to --text-body-lineHeight-medium.
macOS capitalization on Desktop
On macOS in GitHub Desktop, title case is used for headlines and buttons. This differs from Primer guidelines. Example: 'Current Repository'.
Windows capitalization on Desktop
On Windows in GitHub Desktop, sentence case is used for headlines and buttons. This is aligned with Primer guidelines. Example: 'Current repository'.
Desktop uses system fonts
GitHub Desktop uses system fonts for typography. On macOS, the system font is San Francisco Pro (SF Pro). On Windows, the system font is Segoe UI.
Figma mockup font recommendations for Desktop
When creating design mockups for GitHub Desktop in Figma, use macOS fonts (Primer Web defaults) unless the feature is Windows-specific. For Windows-specific features, use Segoe UI. Segoe UI reads smaller and tighter than SF Pro, so adjusting point size may be needed to maintain visual consistency.
Desktop typography styles and text-x-small
GitHub Desktop typography styles and sizes follow the same guidelines as Primer Web, with the addition of a text-x-small style at 11pt used for all small, secondary text.
Typography preference for system defaults
Mobile design prefers to lean on system defaults for type styles rather than defining custom type styles. System defaults provide dynamic type sizes, bi-directionality, dark mode, voiceover, internationalization, and more functionality for free.
Android Material Theming with Inter typeface
The Android app uses Material Theming that allows Inter as the default typeface, providing a clearer reading experience for interface text.
Functional text colors in mobile toolkit
There are currently six functional colors used for text in the mobile toolkit: textPrimary, textSecondary, textTertiary, textPlaceholder, and link. The primary through tertiary values should map closely to the visual hierarchy or importance hierarchy of content on a screen. The link color renders blue and affords actionable elements like buttons or links.