_typography.scss

TLDR

The _typography.scss file defines various styles for typography in the project. It sets the font family, weight, and size for different headings and text elements. It also includes font-face definitions for the Metropolis font.

Classes

There are no classes defined in this file.

Methods

There are no methods defined in this file.

h1,
h2,
h3,
.title {
    font-family: Metropolis, sans-serif;
    font-weight: 600;
}

.font-semibold {
    font-weight: 600;
}

.text-heading8 {
    font-size: 32px;
    font-weight: 600;
}

.text-heading7 {
    font-size: 28px;
    font-weight: 600;
}

.text-heading6 {
    font-size: 25px;
    font-weight: 600;
}

.text-heading5 {
    font-size: 22px;
    font-weight: 600;
}

.text-heading4 {
    font-size: 20px;
    font-weight: 600;
}

.text-heading3 {
    font-size: 18px;
    font-weight: 600;
}

.text-heading2 {
    font-size: 16px;
    font-weight: 600;
}

.text-heading1 {
    font-size: 14px;
    font-weight: 600;
}

.text-base {
    font-size: 16px;
}

.text-75 {
    font-size: 12px;
    line-height: 16px;
}

.text-danger {
    color: var(--error-text);
}

// Metropolis font definitions
@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/metropolis/Metropolis-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Metropolis';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/metropolis/Metropolis-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/metropolis/Metropolis-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Metropolis';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/metropolis/Metropolis-RegularItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Metropolis';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/metropolis/Metropolis-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'Metropolis';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/metropolis/Metropolis-LightItalic.woff2') format('woff2');
}