Font Size

Applies a specific font size to any body or other text element to control the font size independent of other factors (e.g. line height)

• How to
  • HTML Example:
  • SCSS Example:
• HTML
• SCSS

How to

To use these styles in a Vue component SCSS, you'll need:

@import '~@skyline/scss/src/core/UI.required';
@import '~@skyline/scss/src/utilities/utilities.typography';

HTML Example:

<p class="u-font-size--300">
  I am an example of using the typography utility on a paragraph
</p>

SCSS Example:

.font-size-example {
  font-size: font-size(300);
}

HTML

utility

• uutility

-

name

• font-size

--

fontSize

• 25010px

• 30012px

• 35014px

• 40016px

• 45018px

• 50020px

• 60024px

• 70028px

• 80032px

• 90036px

• 100040px

SCSS

• font-size: font-size(250);-10px

• font-size: font-size(300);-12px

• font-size: font-size(350);-14px

• font-size: font-size(400);-16px

• font-size: font-size(450);-18px

• font-size: font-size(500);-20px

• font-size: font-size(600);-24px

• font-size: font-size(700);-28px

• font-size: font-size(800);-32px

• font-size: font-size(900);-36px

• font-size: font-size(1000);-40px