Robot typefaces are used as the main body font-family. Noto Sans font-family is used for headings and Courier font is used for code blocks.
Both, Roboto and Noto Sans are provided by Google Fonts and are imported in the _variables.scss file. Courier font is included natively on most systems.
ro:Kit headings have left oriented shadow applied to them by default. You can modify the shadow by changing $heading-shadow-class-name in _typography.scss or remove it by setting the variable to null.
| Variable | Description | Default Value | Location |
|---|---|---|---|
| $font-stack | Sets body font-family | Roboto, sans-serif | _variables.scss |
| $heading-font-stack | Sets heading font-family | "Noto Sans", sans-serif | _variables.scss |
| $code-font-stack | Sets code font-family | "courier", monospace | _variables.scss |
| $base-font-size | Sets base font-size | 14px | _variables.scss |
| $heading-shadow-class-name | Applies shadow class to headings | text-shadow-left | _typography.scss |
Following type scales are generated out-of-the-box: minor-second, major-second, minor-third, major-third, perfect-fourth, augmented-fourth, perfect-fifth, golden-ratio.
Type scales applied on a block element will scale fonts in its children elements of type p, div, section, header, footer, nav, h1, h2, h3, h4, h5, h6, small and .small.
Type scales are defined in a map components/_scales.scss. You can add or remove scales. All scale classes are generated from this map.
Hint: Type scales can also be applied on breakpoints.