Typography styles are applied to some elements by default when including @featherds/styles. All typography styles are exposed through SCSS mixins and should be how all typography styles are consumed.

Recommendation

Use mixins where possible. They allow you to style the element with the correct typography without being constrained to a given element.

Examples

Display 1
Display 2
Display 3
Title
headline1
headline2
headline3
headline4
subtitle1
subtitle2
body-large
body-small
Header
Button
Caption
Overline
Anchor

Mixins

Mixins can be used by importing @featherds/styles/mixins/typography.

@import "@featherds/styles/mixins/typography";

It exposes the following mixins:

  • rendering
  • display1
  • display2
  • display3
  • title
  • headline1
  • headline2
  • headline3
  • headline4
  • subtitle1
  • subtitle2
  • body-large
  • body-small
  • header
  • button
  • caption
  • overline
  • screen-reader
  • anchor

Elements

Feather styles some HTML elements by default. Typography styles are applied to elements directly when you include @featherds/styles and add the .feather-styles class to a parent element.

@import "@featherds/styles";

This import will also style the following HTML Elements:

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • p
  • small
  • a