Font Size

• Classes
• Customize

Classes #

Font-size utility classes.

Responsive - target a breakpoint by adding the @{breakpoint} suffix (e.g., .text-sm@md).

Customize #

To customize the font-size scale, pass the $font-size map to the config module in your style.scss file:

// option 1: create a static font-size scale
@use 'config' as * with (
  $font-size: (
    'xs': '0.6875rem',
    'sm': '0.8125rem',
    'base': '1rem',
    'md': '1.1875rem',
    'lg': '1.4375rem',
    'xl': '1.75rem',
    '2xl': '2.0625rem',
    '3xl': '2.5rem',
    '4xl': '3rem'
  )
);

// option 2: edit the font-size variables at a specific breakpoint
// @all → initial font-size scale
// @md → update the scale at the medium breakpoint
@use 'config' as * with (
  $font-size: (
    '@all': (
      'xs': '0.6875rem',
      'sm': '0.8125rem',
      'base': '1rem',
      'md': '1.1875rem',
      'lg': '1.4375rem',
      'xl': '1.75rem',
      '2xl': '2.0625rem',
      '3xl': '2.5rem',
      '4xl': '3rem'
    ),
    '@md': (
      'xs': '0.75rem',
      'sm': '0.9375rem',
      'base': '1.125rem',
      'md': '1.375rem',
      'lg': '1.625rem',
      'xl': '2rem',
      '2xl': '2.5rem',
      '3xl': '3rem',
      '4xl': '3.625rem'
    )
  )
);

// option 3: create a fluid typography scale
// @sm → minimum scale values
// between @sm and @lg → the scale values are automatically updated
// @lg → maximum scale values
@use 'config' as * with (
  $font-size: (
    'fluid': (
      '@sm': (
        'xs': '0.6875rem',
        'sm': '0.8125rem',
        'base': '1rem',
        'md': '1.1875rem',
        'lg': '1.4375rem',
        'xl': '1.75rem',
        '2xl': '2.0625rem',
        '3xl': '2.5rem',
        '4xl': '3rem'
      ),
      '@lg': (
        'xs': '0.75rem',
        'sm': '0.9375rem',
        'base': '1.125rem',
        'md': '1.375rem',
        'lg': '1.625rem',
        'xl': '2rem',
        '2xl': '2.5rem',
        '3xl': '3rem',
        '4xl': '3.625rem'
      )
    )
  )
);

The map will automatically generate a list of font-size variables:

:root {
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.1875rem;
  --text-lg: 1.4375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.0625rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3rem;
}