The typography scale is designed to work for GitHub's product UI 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 sizes are smaller on mobile and scale up at the mdbreakpoint to be larger on desktop.
// h4—h6 remain the same size on both mobile & desktop
// Heading sizes - desktop
Font weight variables
Line height variables
Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as utilities. which requires no additional CSS.
Heading mixins are available for h1 through to h6, this includes the font-size and font-weight. Example:
Responsive heading mixins can be used to adjust the font-size between the sm and lg breakpoint. Only headings 1—3 are responsive. Heading 4—6 are small enough to remain the same between mobile and desktop. Responsive heading mixins include the font-size and font-weight as well as the media query. To use a responsive heading mixin, postfix the heading with -responsive:
Responsive type scale mixins are also available. Type scale mixins apply a font-size that gets slightly bigger at the lg breakpoint. They do not apply a font-weight. Like the responsive heading mixins, they are only available for size f1 to f3 and are postfixed with -responsive as in the example below: