Skip to content

Fonts modifiers

Pre-built CSS utility classes for applying font styles directly in HTML. These modifiers provide quick styling options without writing custom CSS.

Font weight modifiers

Control font weight using .font_[weight] classes:

  • .font_normal - Normal weight (400)
  • .font_medium - Medium weight (500)
  • .font_semibold - Semi-bold weight (600)
  • .font_bold - Bold weight (700)
  • .font_extrabold - Extra bold weight (800)

Font decoration modifiers

Add text decorations:

  • .font_line-through - Strikethrough text
  • .font_underline - Underlined text

Font style modifiers

Control font style:

  • .font_normal - Normal style
  • .font_italic - Italic style

Font size modifiers

Apply predefined font sizes:

  • .font_size-l - Large size
  • .font_size-m - Medium size (base)
  • .font_size-s - Small size
  • .font_size-xs - Extra small size

Text alignment modifiers

Control text alignment with .align_[direction] classes:

  • .align_left - Left-aligned text
  • .align_center - Center-aligned text
  • .align_right - Right-aligned text

Text transformation modifiers

  • .text_uppercase - Uppercase text

Overline modifier

The .overline class creates small, uppercase labels with letter spacing:

  • .overline - Standard overline style
  • .overline_s - Small overline style

Color modifiers

Apply colors using .color_[palette]-[shade] classes:

Neutral colors

  • .color_neutral-50 to .color_neutral-900

Primary colors

  • .color_primary-50 to .color_primary-900

Secondary colors

  • .color_secondary-50 to .color_secondary-900

Success colors

  • .color_success-50 to .color_success-900

Error colors

  • .color_error-50 to .color_error-900

Warning colors

  • .color_warning-50 to .color_warning-900

Semantic colors

  • .color_main - Main font color
  • .color_secondary - Secondary font color
  • .color_tertiary - Tertiary font color

Shade colors

  • .color_shade-light - Light shade
  • .color_shade-dark - Dark shade

Examples

Here are examples of font modifier usage:

HTML
<p class="font_bold font_size-l color_primary-700">
    Large, bold, primary text
</p>

<p class="font_normal font_size-m color_neutral-600">
    Normal weight, medium size, neutral text
</p>

<p class="font_italic font_underline align_center">
    Centered, italic, underlined text
</p>

<p class="overline color_secondary-500">
    Section Label
</p>

<h2 class="font_extrabold font_size-l align_center color_primary-900">
    Extra Bold Heading
</h2>

Font modifier tags

The font modifier classes can be used with any HTML element including <p>, <span>, <h1> through <h6>, <div>, and more.

LESS

You can modify any font modifier variable in your User Less section to change font modifier styles.

Font modifier variables

Variables used by font modifiers:

@baseFontFamilyName: 'Inter';
@baseFontSize: 16;

@fontSizeInPxXxl: @baseFontSize + 8;
@fontSizeInPxXl: @baseFontSize + 4;
@fontSizeInPxL: @baseFontSize + 2;
@fontSizeInPxM: @baseFontSize;
@fontSizeInPxS: @baseFontSize - 2;
@fontSizeInPxXS: @baseFontSize - 4;

@baseLineHeight: @baseFontSize + 8;

@lineHeightInPxXl: @baseLineHeight + 8;
@lineHeightInPxL: @baseLineHeight + 4;
@lineHeightInPxM: @baseLineHeight;
@lineHeightInPxS: @baseLineHeight - 4;
@lineHeightInPxXS: @baseLineHeight - 4;
@lineHeightInPxXxs: @baseLineHeight - 8;

@fontWeightNormal: 400;
@fontWeightMedium: 500;
@fontWeightSemibold: 600;
@fontWeightBold: 700;
@fontWeightExtrabold: 800;

@overlineFontSize: @fontSizeInPxS;
@overlineFontWeight: @fontWeightSemibold;
@overlineFontSizeS: @fontSizeInPxXS;

For example, to change the overline font size:

@overlineFontSize: 16; // Changes from default @fontSizeInPxS

Font modifier styles

Here are standard font modifier styles:

.font {
    &_normal {
        .weight-normal();
    }

    &_medium {
        .weight-medium();
    }

    &_semibold {
        .weight-semibold();
    }

    &_bold {
        .weight-bold();
    }

    &_extrabold {
        .weight-extrabold();
    }

    &_line-through {
        text-decoration: line-through;
    }

    &_underline {
        text-decoration: underline;
    }

    &_normal {
        font-style: normal;
    }

    &_italic {
        font-style: italic;
    }

    &_size-l {
        .size-l();
    }

    &_size-m {
        .size-m();
    }

    &_size-s {
        .size-s();
    }

    &_size-xs {
        .size-xs();
    }
}

.align {
    &_left {
        text-align: left;
    }

    &_center {
        text-align: center;
    }

    &_right {
        text-align: right;
    }
}

.text {
    &_uppercase {
        text-transform: uppercase;
    }
}

.overline {
    .font-size(@overlineFontSize);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: @overlineFontWeight;
    margin-bottom: @globalSpacing;

    &_s {
        .font-size(@overlineFontSizeS);
    }
}

.generate-font-color-modifier(neutral);
.generate-font-color-modifier(primary);
.generate-font-color-modifier(secondary);
.generate-font-color-modifier(success);
.generate-font-color-modifier(error);
.generate-font-color-modifier(warning);

.color_shade-light {
    color: @neutralColors0;
}

.color_shade-dark {
    color: @neutralColors1000;
}

Styles reference