Handling typography

loonar-wp/assets/styles

├── admin/
├── animation/
├── base/
├── config/
├── elements/
├── tools/
├── typography/
│   ├── _headline.scss
│   └── _text.scss
└── woocommerce/

Throughout your project you should be using reusable and adaptive typography. You should create a preset for every type of headline or text which you think will be used more than once. You can verify that on the design or style guide given by the UI team.

Headlines

caution

You should not set the font-family, font-weight or font-size directly. Instead, you should use the font-stack, font-weight functions and spread mixin respectively.

Create a %placeholder for every headline variation your project used in the design.

• The name should begin with headline-.
• The name should end with the number representing the size of the headline (1 - largest, 6 - smallest)

loonar-wp/assets/styles/typography/_headline.scss

%headline-1 {
  @include spread(font-size, 24px, 50px);

  font-family: font-stack(main);
  font-style: normal;
  font-weight: font-weight(bold);
}

%headline-2 {
  @include spread(font-size, 22px, 40px);

  font-family: font-stack(main);
  font-style: normal;
  font-weight: font-weight(bold);
}