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 `md` [breakpoint](./breakpoints) to be larger on desktop.
| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
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](/utilities/typography#heading-utilities). which requires no additional CSS.
Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example:
```scss
.styles {
@include h1;
}
```
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`:
```scss
.styles {
@include h1-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:
