Text Sizing Presets

10 text sizing presets available. Each preset defines 14 text sizes for desktop and mobile.

medium

Desktop: --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); --text-xs: clamp(0.54rem, 0.72vw, 0.72rem); --text-sm: clamp(0.615rem, 0.82vw, 0.82rem); --text-base: clamp(0.69rem, 0.92vw, 0.92rem); --text-lg: clamp(0.75rem, 1vw, 1rem); --text-xl: clamp(0.825rem, 1.1vw, 1.1rem); --text-2xl: clamp(0.975rem, 1.3vw, 1.3rem); --text-3xl: clamp(1.2rem, 1.6vw, 1.6rem); --text-4xl: clamp(1.5rem, 2vw, 2rem); --text-5xl: clamp(2.025rem, 2.75vw, 2.75rem); --text-6xl: clamp(2.475rem, 3.3vw, 3.3rem); --text-7xl: clamp(3rem, 4vw, 4rem); --text-8xl: clamp(3.5rem, 4.5vw, 4.5rem); --text-9xl: clamp(5.25rem, 7vw, 7rem);

Mobile: --text-2xs: 2.5vw; --text-xs: 2.75vw; --text-sm: 3vw; --text-base: 3.25vw; --text-lg: 3.5vw; --text-xl: 4.25vw; --text-2xl: 5vw; --text-3xl: 6vw; --text-4xl: 7vw; --text-5xl: 7.5vw; --text-6xl: 8.5vw; --text-7xl: 10vw; --text-8xl: 12vw; --text-9xl: 14vw;

mediumLarge

Desktop: --text-2xs: clamp(0.465rem, 0.651vw, 0.62rem); --text-xs: clamp(0.54rem, 0.756vw, 0.72rem); --text-sm: clamp(0.615rem, 0.861vw, 0.82rem); --text-base: clamp(0.69rem, 0.966vw, 0.92rem); --text-lg: clamp(0.75rem, 1.05vw, 1rem); --text-xl: clamp(0.825rem, 1.155vw, 1.1rem); --text-2xl: clamp(0.975rem, 1.365vw, 1.3rem); --text-3xl: clamp(1.2rem, 1.68vw, 1.6rem); --text-4xl: clamp(1.5rem, 2.1vw, 2rem); --text-5xl: clamp(2.025rem, 2.8875vw, 2.75rem); --text-6xl: clamp(2.475rem, 3.465vw, 3.3rem); --text-7xl: clamp(3rem, 4.2vw, 4rem); --text-8xl: clamp(3.5rem, 4.725vw, 4.5rem); --text-9xl: clamp(5.25rem, 7.35vw, 7rem);

Mobile: --text-2xs: 2.625vw; --text-xs: 2.8875vw; --text-sm: 3.15vw; --text-base: 3.4125vw; --text-lg: 3.675vw; --text-xl: 4.4625vw; --text-2xl: 5.25vw; --text-3xl: 6.3vw; --text-4xl: 7.35vw; --text-5xl: 7.875vw; --text-6xl: 8.925vw; --text-7xl: 10.5vw; --text-8xl: 12.6vw; --text-9xl: 14.7vw;

largeSmall

Desktop: --text-2xs: clamp(0.465rem, 0.682vw, 0.62rem); --text-xs: clamp(0.54rem, 0.792vw, 0.72rem); --text-sm: clamp(0.615rem, 0.902vw, 0.82rem); --text-base: clamp(0.69rem, 1.012vw, 0.92rem); --text-lg: clamp(0.75rem, 1.1vw, 1rem); --text-xl: clamp(0.825rem, 1.21vw, 1.1rem); --text-2xl: clamp(0.975rem, 1.43vw, 1.3rem); --text-3xl: clamp(1.2rem, 1.76vw, 1.6rem); --text-4xl: clamp(1.5rem, 2.2vw, 2rem); --text-5xl: clamp(2.025rem, 3.025vw, 2.75rem); --text-6xl: clamp(2.475rem, 3.63vw, 3.3rem); --text-7xl: clamp(3rem, 4.4vw, 4rem); --text-8xl: clamp(3.5rem, 4.95vw, 4.5rem); --text-9xl: clamp(5.25rem, 7.7vw, 7rem);

Mobile: --text-2xs: 2.75vw; --text-xs: 3.025vw; --text-sm: 3.3vw; --text-base: 3.575vw; --text-lg: 3.85vw; --text-xl: 4.675vw; --text-2xl: 5.5vw; --text-3xl: 6.6vw; --text-4xl: 7.7vw; --text-5xl: 8.25vw; --text-6xl: 9.35vw; --text-7xl: 11vw; --text-8xl: 13.2vw; --text-9xl: 15.4vw;

large

Desktop: --text-2xs: clamp(0.465rem, 0.713vw, 0.62rem); --text-xs: clamp(0.54rem, 0.828vw, 0.72rem); --text-sm: clamp(0.615rem, 0.943vw, 0.82rem); --text-base: clamp(0.69rem, 1.058vw, 0.92rem); --text-lg: clamp(0.75rem, 1.15vw, 1rem); --text-xl: clamp(0.825rem, 1.265vw, 1.1rem); --text-2xl: clamp(0.975rem, 1.495vw, 1.3rem); --text-3xl: clamp(1.2rem, 1.84vw, 1.6rem); --text-4xl: clamp(1.5rem, 2.3vw, 2rem); --text-5xl: clamp(2.025rem, 3.1625vw, 2.75rem); --text-6xl: clamp(2.475rem, 3.795vw, 3.3rem); --text-7xl: clamp(3rem, 4.6vw, 4rem); --text-8xl: clamp(3.5rem, 5.175vw, 4.5rem); --text-9xl: clamp(5.25rem, 8.05vw, 7rem);

Mobile: --text-2xs: 2.875vw; --text-xs: 3.1625vw; --text-sm: 3.45vw; --text-base: 3.7375vw; --text-lg: 4.025vw; --text-xl: 4.8875vw; --text-2xl: 5.75vw; --text-3xl: 6.9vw; --text-4xl: 8.05vw; --text-5xl: 8.625vw; --text-6xl: 9.775vw; --text-7xl: 11.5vw; --text-8xl: 13.8vw; --text-9xl: 16.1vw;

mediumSizeLargeTitles

Medium body text (2xs-4xl) with large title sizes (5xl-9xl).

Desktop: --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); --text-xs: clamp(0.54rem, 0.72vw, 0.72rem); --text-sm: clamp(0.615rem, 0.82vw, 0.82rem); --text-base: clamp(0.69rem, 0.92vw, 0.92rem); --text-lg: clamp(0.75rem, 1vw, 1rem); --text-xl: clamp(0.825rem, 1.1vw, 1.1rem); --text-2xl: clamp(0.975rem, 1.3vw, 1.3rem); --text-3xl: clamp(1.2rem, 1.6vw, 1.6rem); --text-4xl: clamp(1.5rem, 2vw, 2rem); --text-5xl: clamp(2.025rem, 3.1625vw, 2.75rem); --text-6xl: clamp(2.475rem, 3.795vw, 3.3rem); --text-7xl: clamp(3rem, 4.6vw, 4rem); --text-8xl: clamp(3.5rem, 5.175vw, 4.5rem); --text-9xl: clamp(5.25rem, 8.05vw, 7rem);

Mobile: --text-2xs: 2.5vw; --text-xs: 2.75vw; --text-sm: 3vw; --text-base: 3.25vw; --text-lg: 3.5vw; --text-xl: 4.25vw; --text-2xl: 5vw; --text-3xl: 6vw; --text-4xl: 7vw; --text-5xl: 8.625vw; --text-6xl: 9.775vw; --text-7xl: 11.5vw; --text-8xl: 13.8vw; --text-9xl: 16.1vw;

largeSizeMediumTitles

Large body text (2xs-4xl) with medium title sizes (5xl-9xl).

Desktop: --text-2xs: clamp(0.465rem, 0.713vw, 0.62rem); --text-xs: clamp(0.54rem, 0.828vw, 0.72rem); --text-sm: clamp(0.615rem, 0.943vw, 0.82rem); --text-base: clamp(0.69rem, 1.058vw, 0.92rem); --text-lg: clamp(0.75rem, 1.15vw, 1rem); --text-xl: clamp(0.825rem, 1.265vw, 1.1rem); --text-2xl: clamp(0.975rem, 1.495vw, 1.3rem); --text-3xl: clamp(1.2rem, 1.84vw, 1.6rem); --text-4xl: clamp(1.5rem, 2.3vw, 2rem); --text-5xl: clamp(2.025rem, 2.75vw, 2.75rem); --text-6xl: clamp(2.475rem, 3.3vw, 3.3rem); --text-7xl: clamp(3rem, 4vw, 4rem); --text-8xl: clamp(3.5rem, 4.5vw, 4.5rem); --text-9xl: clamp(5.25rem, 7vw, 7rem);

Mobile: --text-2xs: 2.875vw; --text-xs: 3.1625vw; --text-sm: 3.45vw; --text-base: 3.7375vw; --text-lg: 4.025vw; --text-xl: 4.8875vw; --text-2xl: 5.75vw; --text-3xl: 6.9vw; --text-4xl: 8.05vw; --text-5xl: 7.5vw; --text-6xl: 8.5vw; --text-7xl: 10vw; --text-8xl: 12vw; --text-9xl: 14vw;

mediumLargeSizeLargeTitles

MediumLarge body text (2xs-4xl) with large title sizes (5xl-9xl).

Desktop: --text-2xs: clamp(0.465rem, 0.651vw, 0.62rem); --text-xs: clamp(0.54rem, 0.756vw, 0.72rem); --text-sm: clamp(0.615rem, 0.861vw, 0.82rem); --text-base: clamp(0.69rem, 0.966vw, 0.92rem); --text-lg: clamp(0.75rem, 1.05vw, 1rem); --text-xl: clamp(0.825rem, 1.155vw, 1.1rem); --text-2xl: clamp(0.975rem, 1.365vw, 1.3rem); --text-3xl: clamp(1.2rem, 1.68vw, 1.6rem); --text-4xl: clamp(1.5rem, 2.1vw, 2rem); --text-5xl: clamp(2.025rem, 3.1625vw, 2.75rem); --text-6xl: clamp(2.475rem, 3.795vw, 3.3rem); --text-7xl: clamp(3rem, 4.6vw, 4rem); --text-8xl: clamp(3.5rem, 5.175vw, 4.5rem); --text-9xl: clamp(5.25rem, 8.05vw, 7rem);

Mobile: --text-2xs: 2.625vw; --text-xs: 2.8875vw; --text-sm: 3.15vw; --text-base: 3.4125vw; --text-lg: 3.675vw; --text-xl: 4.4625vw; --text-2xl: 5.25vw; --text-3xl: 6.3vw; --text-4xl: 7.35vw; --text-5xl: 8.625vw; --text-6xl: 9.775vw; --text-7xl: 11.5vw; --text-8xl: 13.8vw; --text-9xl: 16.1vw;

largeSmallSizeLargeTitles

LargeSmall body text (2xs-4xl) with large title sizes (5xl-9xl).

Desktop: --text-2xs: clamp(0.465rem, 0.682vw, 0.62rem); --text-xs: clamp(0.54rem, 0.792vw, 0.72rem); --text-sm: clamp(0.615rem, 0.902vw, 0.82rem); --text-base: clamp(0.69rem, 1.012vw, 0.92rem); --text-lg: clamp(0.75rem, 1.1vw, 1rem); --text-xl: clamp(0.825rem, 1.21vw, 1.1rem); --text-2xl: clamp(0.975rem, 1.43vw, 1.3rem); --text-3xl: clamp(1.2rem, 1.76vw, 1.6rem); --text-4xl: clamp(1.5rem, 2.2vw, 2rem); --text-5xl: clamp(2.025rem, 3.1625vw, 2.75rem); --text-6xl: clamp(2.475rem, 3.795vw, 3.3rem); --text-7xl: clamp(3rem, 4.6vw, 4rem); --text-8xl: clamp(3.5rem, 5.175vw, 4.5rem); --text-9xl: clamp(5.25rem, 8.05vw, 7rem);

Mobile: --text-2xs: 2.75vw; --text-xs: 3.025vw; --text-sm: 3.3vw; --text-base: 3.575vw; --text-lg: 3.85vw; --text-xl: 4.675vw; --text-2xl: 5.5vw; --text-3xl: 6.6vw; --text-4xl: 7.7vw; --text-5xl: 8.625vw; --text-6xl: 9.775vw; --text-7xl: 11.5vw; --text-8xl: 13.8vw; --text-9xl: 16.1vw;

mediumLargeSizeMediumTitles

MediumLarge body text (2xs-4xl) with medium title sizes (5xl-9xl).

Desktop: --text-2xs: clamp(0.465rem, 0.651vw, 0.62rem); --text-xs: clamp(0.54rem, 0.756vw, 0.72rem); --text-sm: clamp(0.615rem, 0.861vw, 0.82rem); --text-base: clamp(0.69rem, 0.966vw, 0.92rem); --text-lg: clamp(0.75rem, 1.05vw, 1rem); --text-xl: clamp(0.825rem, 1.155vw, 1.1rem); --text-2xl: clamp(0.975rem, 1.365vw, 1.3rem); --text-3xl: clamp(1.2rem, 1.68vw, 1.6rem); --text-4xl: clamp(1.5rem, 2.1vw, 2rem); --text-5xl: clamp(2.025rem, 2.75vw, 2.75rem); --text-6xl: clamp(2.475rem, 3.3vw, 3.3rem); --text-7xl: clamp(3rem, 4vw, 4rem); --text-8xl: clamp(3.5rem, 4.5vw, 4.5rem); --text-9xl: clamp(5.25rem, 7vw, 7rem);

Mobile: --text-2xs: 2.625vw; --text-xs: 2.8875vw; --text-sm: 3.15vw; --text-base: 3.4125vw; --text-lg: 3.675vw; --text-xl: 4.4625vw; --text-2xl: 5.25vw; --text-3xl: 6.3vw; --text-4xl: 7.35vw; --text-5xl: 7.5vw; --text-6xl: 8.5vw; --text-7xl: 10vw; --text-8xl: 12vw; --text-9xl: 14vw;

largeSmallSizeMediumTitles

LargeSmall body text (2xs-4xl) with medium title sizes (5xl-9xl).

Desktop: --text-2xs: clamp(0.465rem, 0.682vw, 0.62rem); --text-xs: clamp(0.54rem, 0.792vw, 0.72rem); --text-sm: clamp(0.615rem, 0.902vw, 0.82rem); --text-base: clamp(0.69rem, 1.012vw, 0.92rem); --text-lg: clamp(0.75rem, 1.1vw, 1rem); --text-xl: clamp(0.825rem, 1.21vw, 1.1rem); --text-2xl: clamp(0.975rem, 1.43vw, 1.3rem); --text-3xl: clamp(1.2rem, 1.76vw, 1.6rem); --text-4xl: clamp(1.5rem, 2.2vw, 2rem); --text-5xl: clamp(2.025rem, 2.75vw, 2.75rem); --text-6xl: clamp(2.475rem, 3.3vw, 3.3rem); --text-7xl: clamp(3rem, 4vw, 4rem); --text-8xl: clamp(3.5rem, 4.5vw, 4.5rem); --text-9xl: clamp(5.25rem, 7vw, 7rem);

Mobile: --text-2xs: 2.75vw; --text-xs: 3.025vw; --text-sm: 3.3vw; --text-base: 3.575vw; --text-lg: 3.85vw; --text-xl: 4.675vw; --text-2xl: 5.5vw; --text-3xl: 6.6vw; --text-4xl: 7.7vw; --text-5xl: 7.5vw; --text-6xl: 8.5vw; --text-7xl: 10vw; --text-8xl: 12vw; --text-9xl: 14vw;

9.6 KiB Raw Blame History