Skip to main content

Font size

The font size classes set the font-size style for an element.

Each font size base class has a class to go with each of the media query viewport sizes. For example:

font-size-3-3xs
font-size-3-2xs
font-size-3-xs
font-size-3-sm
font-size-3-md
font-size-3-lg
font-size-3-xl
font-size-3-1xl
font-size-3-3xl
font-size-3-4xl
font-size-3-5xl

Font sizes​

The font size values are set with the font size variables. The default sizes for the base classes are:

ClassValue
font-size-0000.5rem
font-size-000.75rem
font-size-00.875rem
font-size-11rem
font-size-21.1rem
font-size-31.2rem
font-size-41.3rem
font-size-51.4rem
font-size-61.5rem
font-size-71.6rem
font-size-81.7rem
font-size-91.8rem
font-size-101.9rem
font-size-112rem
font-size-122.5rem
font-size-133rem
font-size-143.5rem
font-size-154rem
font-size-164.5rem
font-size-175rem
font-size-186rem
font-size-197rem
font-size-208rem

Example usage​

Below is a simple example setting the font size of a paragraph:

<p class="font-size-3">This is a paragraph with a font size of 1.25rem</p>

Below is an example setting the font size of a paragraph with a different font size for medium and larger screens.

<p class="font-size-3 font-size-6-md">This is a paragraph with a font size of 1.25rem for small screens and 2rem for medium and larger screens.</p>

How to import into your CSS​

Import this into your CSS with:

@import 'cacao-css/dist/typography/size.css';
@import 'cacao-css/dist/typography/size-variables.css';

Imports are available for all media query viewport sizes.

@import 'cacao-css/dist/typography/3xs/size.css';
@import 'cacao-css/dist/typography/2xs/size.css';
@import 'cacao-css/dist/typography/xs/size.css';
@import 'cacao-css/dist/typography/sm/size.css';
@import 'cacao-css/dist/typography/md/size.css';
@import 'cacao-css/dist/typography/lg/size.css';
@import 'cacao-css/dist/typography/xl/size.css';
@import 'cacao-css/dist/typography/2xl/size.css';
@import 'cacao-css/dist/typography/3xl/size.css';
@import 'cacao-css/dist/typography/4xl/size.css';
@import 'cacao-css/dist/typography/5xl/size.css';

See Import Cacao CSS for more information.

Source CSS​

Default styles​

typography/size.css
/* =========================================================================== *\
    Font size utilities
\* =========================================================================== */

.font-size-000 {
    font-size: var(--font-size-000);
}

.font-size-00 {
    font-size: var(--font-size-00);
}

.font-size-0 {
    font-size: var(--font-size-0);
}

.font-size-1 {
    font-size: var(--font-size-1);
}

.font-size-2 {
    font-size: var(--font-size-2);
}

.font-size-3 {
    font-size: var(--font-size-3);
}

.font-size-4 {
    font-size: var(--font-size-4);
}

.font-size-5 {
    font-size: var(--font-size-5);
}

.font-size-6 {
    font-size: var(--font-size-6);
}

.font-size-7 {
    font-size: var(--font-size-7);
}

.font-size-8 {
    font-size: var(--font-size-8);
}

.font-size-9 {
    font-size: var(--font-size-9);
}

.font-size-10 {
    font-size: var(--font-size-10);
}

.font-size-11 {
    font-size: var(--font-size-11);
}

.font-size-12 {
    font-size: var(--font-size-12);
}

.font-size-13 {
    font-size: var(--font-size-13);
}

.font-size-14 {
    font-size: var(--font-size-14);
}

.font-size-15 {
    font-size: var(--font-size-15);
}

.font-size-16 {
    font-size: var(--font-size-16);
}

.font-size-17 {
    font-size: var(--font-size-17);
}

.font-size-18 {
    font-size: var(--font-size-18);
}

.font-size-19 {
    font-size: var(--font-size-19);
}

.font-size-20 {
    font-size: var(--font-size-20);
}

3xs styles​

typography/3xs/size.css
/* =========================================================================== *\
    Font size utilities
\* =========================================================================== */

@media (--m-3xs) {
    .font-size-000-3xs {
        font-size: var(--font-size-000);
    }

    .font-size-00-3xs {
        font-size: var(--font-size-00);
    }

    .font-size-0-3xs {
        font-size: var(--font-size-0);
    }

    .font-size-1-3xs {
        font-size: var(--font-size-1);
    }

    .font-size-2-3xs {
        font-size: var(--font-size-2);
    }

    .font-size-3-3xs {
        font-size: var(--font-size-3);
    }

    .font-size-4-3xs {
        font-size: var(--font-size-4);
    }

    .font-size-5-3xs {
        font-size: var(--font-size-5);
    }

    .font-size-6-3xs {
        font-size: var(--font-size-6);
    }

    .font-size-7-3xs {
        font-size: var(--font-size-7);
    }

    .font-size-8-3xs {
        font-size: var(--font-size-8);
    }

    .font-size-9-3xs {
        font-size: var(--font-size-9);
    }

    .font-size-10-3xs {
        font-size: var(--font-size-10);
    }

    .font-size-11-3xs {
        font-size: var(--font-size-11);
    }

    .font-size-12-3xs {
        font-size: var(--font-size-12);
    }

    .font-size-13-3xs {
        font-size: var(--font-size-13);
    }

    .font-size-14-3xs {
        font-size: var(--font-size-14);
    }

    .font-size-15-3xs {
        font-size: var(--font-size-15);
    }

    .font-size-16-3xs {
        font-size: var(--font-size-16);
    }

    .font-size-17-3xs {
        font-size: var(--font-size-17);
    }

    .font-size-18-3xs {
        font-size: var(--font-size-18);
    }

    .font-size-19-3xs {
        font-size: var(--font-size-19);
    }

    .font-size-20-3xs {
        font-size: var(--font-size-20);
    }
}

2xs styles​

typography/2xs/size.css
/* =========================================================================== *\
    Font size utilities
\* =========================================================================== */

@media (--m-2xs) {
    .font-size-000-2xs {
        font-size: var(--font-size-000);
    }

    .font-size-00-2xs {
        font-size: var(--font-size-00);
    }

    .font-size-0-2xs {
        font-size: var(--font-size-0);
    }

    .font-size-1-2xs {
        font-size: var(--font-size-1);
    }

    .font-size-2-2xs {
        font-size: var(--font-size-2);
    }

    .font-size-3-2xs {
        font-size: var(--font-size-3);
    }

    .font-size-4-2xs {
        font-size: var(--font-size-4);
    }

    .font-size-5-2xs {
        font-size: var(--font-size-5);
    }

    .font-size-6-2xs {
        font-size: var(--font-size-6);
    }

    .font-size-7-2xs {
        font-size: var(--font-size-7);
    }

    .font-size-8-2xs {
        font-size: var(--font-size-8);
    }

    .font-size-9-2xs {
        font-size: var(--font-size-9);
    }

    .font-size-10-2xs {
        font-size: var(--font-size-10);
    }

    .font-size-11-2xs {
        font-size: var(--font-size-11);
    }

    .font-size-12-2xs {
        font-size: var(--font-size-12);
    }

    .font-size-13-2xs {
        font-size: var(--font-size-13);
    }

    .font-size-14-2xs {
        font-size: var(--font-size-14);
    }

    .font-size-15-2xs {
        font-size: var(--font-size-15);
    }

    .font-size-16-2xs {
        font-size: var(--font-size-16);
    }

    .font-size-17-2xs {
        font-size: var(--font-size-17);
    }

    .font-size-18-2xs {
        font-size: var(--font-size-18);
    }

    .font-size-19-2xs {
        font-size: var(--font-size-19);
    }

    .font-size-20-2xs {
        font-size: var(--font-size-20);
    }
}

xs styles​

typography/xs/size.css
/* =========================================================================== *\
    Font size utilities
\* =========================================================================== */

@media (--m-xs) {
    .font-size-000-xs {
        font-size: var(--font-size-000);
    }

    .font-size-00-xs {
        font-size: var(--font-size-00);
    }

    .font-size-0-xs {
        font-size: var(--font-size-0);
    }

    .font-size-1-xs {
        font-size: var(--font-size-1);
    }

    .font-size-2-xs {
        font-size: var(--font-size-2);
    }

    .font-size-3-xs {
        font-size: var(--font-size-3);
    }

    .font-size-4-xs {
        font-size: var(--font-size-4);
    }

    .font-size-5-xs {
        font-size: var(--font-size-5);
    }

    .font-size-6-xs {
        font-size: var(--font-size-6);
    }

    .font-size-7-xs {
        font-size: var(--font-size-7);
    }

    .font-size-8-xs {
        font-size: var(--font-size-8);
    }

    .font-size-9-xs {
        font-size: var(--font-size-9);
    }

    .font-size-10-xs {
        font-size: var(--font-size-10);
    }

    .font-size-11-xs {
        font-size: var(--font-size-11);
    }

    .font-size-12-xs {
        font-size: var(--font-size-12);
    }

    .font-size-13-xs {
        font-size: var(--font-size-13);
    }

    .font-size-14-xs {
        font-size: var(--font-size-14);
    }

    .font-size-15-xs {
        font-size: var(--font-size-15);
    }

    .font-size-16-xs {
        font-size: var(--font-size-16);
    }

    .font-size-17-xs {
        font-size: var(--font-size-17);
    }

    .font-size-18-xs {
        font-size: var(--font-size-18);
    }

    .font-size-19-xs {
        font-size: var(--font-size-19);
    }

    .font-size-20-xs {
        font-size: var(--font-size-20);
    }
}

sm styles​

typography/sm/size.css
/* =========================================================================== *\
    Font size utilities
\* =========================================================================== */

@media (--m-sm) {
    .font-size-000-sm {
        font-size: var(--font-size-000);
    }

    .font-size-00-sm {
        font-size: var(--font-size-00);
    }

    .font-size-0-sm {
        font-size: var(--font-size-0);
    }

    .font-size-1-sm {
        font-size: var(--font-size-1);
    }

    .font-size-2-sm {
        font-size: var(--font-size-2);
    }

    .font-size-3-sm {
        font-size: var(--font-size-3);
    }

    .font-size-4-sm {
        font-size: var(--font-size-4);
    }

    .font-size-5-sm {
        font-size: var(--font-size-5);
    }

    .font-size-6-sm {
        font-size: var(--font-size-6);
    }

    .font-size-7-sm {
        font-size: var(--font-size-7);
    }

    .font-size-8-sm {
        font-size: var(--font-size-8);
    }

    .font-size-9-sm {
        font-size: var(--font-size-9);
    }

    .font-size-10-sm {
        font-size: var(--font-size-10);
    }

    .font-size-11-sm {
        font-size: var(--font-size-11);
    }

    .font-size-12-sm {
        font-size: var(--font-size-12);
    }

    .font-size-13-sm {
        font-size: var(--font-size-13);
    }

    .font-size-14-sm {
        font-size: var(--font-size-14);
    }

    .font-size-15-sm {
        font-size: var(--font-size-15);
    }

    .font-size-16-sm {
        font-size: var(--font-size-16);
    }

    .font-size-17-sm {
        font-size: var(--font-size-17);
    }

    .font-size-18-sm {
        font-size: var(--font-size-18);
    }

    .font-size-19-sm {
        font-size: var(--font-size-19);
    }

    .font-size-20-sm {
        font-size: var(--font-size-20);
    }
}

md styles​

typography/md/size.css
/* =========================================================================== *\
    Font size utilities
\* =========================================================================== */

@media (--m-md) {
    .font-size-000-md {
        font-size: var(--font-size-000);
    }

    .font-size-00-md {
        font-size: var(--font-size-00);
    }

    .font-size-0-md {
        font-size: var(--font-size-0);
    }

    .font-size-1-md {
        font-size: var(--font-size-1);
    }

    .font-size-2-md {
        font-size: var(--font-size-2);
    }

    .font-size-3-md {
        font-size: var(--font-size-3);
    }

    .font-size-4-md {
        font-size: var(--font-size-4);
    }

    .font-size-5-md {
        font-size: var(--font-size-5);
    }

    .font-size-6-md {
        font-size: var(--font-size-6);
    }

    .font-size-7-md {
        font-size: var(--font-size-7);
    }

    .font-size-8-md {
        font-size: var(--font-size-8);
    }

    .font-size-9-md {
        font-size: var(--font-size-9);
    }

    .font-size-10-md {
        font-size: var(--font-size-10);
    }

    .font-size-11-md {
        font-size: var(--font-size-11);
    }

    .font-size-12-md {
        font-size: var(--font-size-12);
    }

    .font-size-13-md {
        font-size: var(--font-size-13);
    }

    .font-size-14-md {
        font-size: var(--font-size-14);
    }

    .font-size-15-md {
        font-size: var(--font-size-15);
    }

    .font-size-16-md {
        font-size: var(--font-size-16);
    }

    .font-size-17-md {
        font-size: var(--font-size-17);
    }

    .font-size-18-md {
        font-size: var(--font-size-18);
    }

    .font-size-19-md {
        font-size: var(--font-size-19);
    }

    .font-size-20-md {
        font-size: var(--font-size-20);
    }
}

lg styles​

typography/lg/size.css
/* =========================================================================== *\
    Font size utilities
\* =========================================================================== */

@media (--m-lg) {
    .font-size-000-lg {
        font-size: var(--font-size-000);
    }

    .font-size-00-lg {
        font-size: var(--font-size-00);
    }

    .font-size-0-lg {
        font-size: var(--font-size-0);
    }

    .font-size-1-lg {
        font-size: var(--font-size-1);
    }

    .font-size-2-lg {
        font-size: var(--font-size-2);
    }

    .font-size-3-lg {
        font-size: var(--font-size-3);
    }

    .font-size-4-lg {
        font-size: var(--font-size-4);
    }

    .font-size-5-lg {
        font-size: var(--font-size-5);
    }

    .font-size-6-lg {
        font-size: var(--font-size-6);
    }

    .font-size-7-lg {
        font-size: var(--font-size-7);
    }

    .font-size-8-lg {
        font-size: var(--font-size-8);
    }

    .font-size-9-lg {
        font-size: var(--font-size-9);
    }

    .font-size-10-lg {
        font-size: var(--font-size-10);
    }

    .font-size-11-lg {
        font-size: var(--font-size-11);
    }

    .font-size-12-lg {
        font-size: var(--font-size-12);
    }

    .font-size-13-lg {
        font-size: var(--font-size-13);
    }

    .font-size-14-lg {
        font-size: var(--font-size-14);
    }

    .font-size-15-lg {
        font-size: var(--font-size-15);
    }

    .font-size-16-lg {
        font-size: var(--font-size-16);
    }

    .font-size-17-lg {
        font-size: var(--font-size-17);
    }

    .font-size-18-lg {
        font-size: var(--font-size-18);
    }

    .font-size-19-lg {
        font-size: var(--font-size-19);
    }

    .font-size-20-lg {
        font-size: var(--font-size-20);
    }
}

xl styles​

typography/xl/size.css
/* =========================================================================== *\
    Font size utilities
\* =========================================================================== */

@media (--m-xl) {
    .font-size-000-xl {
        font-size: var(--font-size-000);
    }

    .font-size-00-xl {
        font-size: var(--font-size-00);
    }

    .font-size-0-xl {
        font-size: var(--font-size-0);
    }

    .font-size-1-xl {
        font-size: var(--font-size-1);
    }

    .font-size-2-xl {
        font-size: var(--font-size-2);
    }

    .font-size-3-xl {
        font-size: var(--font-size-3);
    }

    .font-size-4-xl {
        font-size: var(--font-size-4);
    }

    .font-size-5-xl {
        font-size: var(--font-size-5);
    }

    .font-size-6-xl {
        font-size: var(--font-size-6);
    }

    .font-size-7-xl {
        font-size: var(--font-size-7);
    }

    .font-size-8-xl {
        font-size: var(--font-size-8);
    }

    .font-size-9-xl {
        font-size: var(--font-size-9);
    }

    .font-size-10-xl {
        font-size: var(--font-size-10);
    }

    .font-size-11-xl {
        font-size: var(--font-size-11);
    }

    .font-size-12-xl {
        font-size: var(--font-size-12);
    }

    .font-size-13-xl {
        font-size: var(--font-size-13);
    }

    .font-size-14-xl {
        font-size: var(--font-size-14);
    }

    .font-size-15-xl {
        font-size: var(--font-size-15);
    }

    .font-size-16-xl {
        font-size: var(--font-size-16);
    }

    .font-size-17-xl {
        font-size: var(--font-size-17);
    }

    .font-size-18-xl {
        font-size: var(--font-size-18);
    }

    .font-size-19-xl {
        font-size: var(--font-size-19);
    }

    .font-size-20-xl {
        font-size: var(--font-size-20);
    }
}

2xl styles​

typography/2xl/size.css
/* =========================================================================== *\
    Font size utilities
\* =========================================================================== */

@media (--m-2xl) {
    .font-size-000-2xl {
        font-size: var(--font-size-000);
    }

    .font-size-00-2xl {
        font-size: var(--font-size-00);
    }

    .font-size-0-2xl {
        font-size: var(--font-size-0);
    }

    .font-size-1-2xl {
        font-size: var(--font-size-1);
    }

    .font-size-2-2xl {
        font-size: var(--font-size-2);
    }

    .font-size-3-2xl {
        font-size: var(--font-size-3);
    }

    .font-size-4-2xl {
        font-size: var(--font-size-4);
    }

    .font-size-5-2xl {
        font-size: var(--font-size-5);
    }

    .font-size-6-2xl {
        font-size: var(--font-size-6);
    }

    .font-size-7-2xl {
        font-size: var(--font-size-7);
    }

    .font-size-8-2xl {
        font-size: var(--font-size-8);
    }

    .font-size-9-2xl {
        font-size: var(--font-size-9);
    }

    .font-size-10-2xl {
        font-size: var(--font-size-10);
    }

    .font-size-11-2xl {
        font-size: var(--font-size-11);
    }

    .font-size-12-2xl {
        font-size: var(--font-size-12);
    }

    .font-size-13-2xl {
        font-size: var(--font-size-13);
    }

    .font-size-14-2xl {
        font-size: var(--font-size-14);
    }

    .font-size-15-2xl {
        font-size: var(--font-size-15);
    }

    .font-size-16-2xl {
        font-size: var(--font-size-16);
    }

    .font-size-17-2xl {
        font-size: var(--font-size-17);
    }

    .font-size-18-2xl {
        font-size: var(--font-size-18);
    }

    .font-size-19-2xl {
        font-size: var(--font-size-19);
    }

    .font-size-20-2xl {
        font-size: var(--font-size-20);
    }
}

3xl styles​

typography/3xl/size.css
/* =========================================================================== *\
    Font size utilities
\* =========================================================================== */

@media (--m-3xl) {
    .font-size-000-3xl {
        font-size: var(--font-size-000);
    }

    .font-size-00-3xl {
        font-size: var(--font-size-00);
    }

    .font-size-0-3xl {
        font-size: var(--font-size-0);
    }

    .font-size-1-3xl {
        font-size: var(--font-size-1);
    }

    .font-size-2-3xl {
        font-size: var(--font-size-2);
    }

    .font-size-3-3xl {
        font-size: var(--font-size-3);
    }

    .font-size-4-3xl {
        font-size: var(--font-size-4);
    }

    .font-size-5-3xl {
        font-size: var(--font-size-5);
    }

    .font-size-6-3xl {
        font-size: var(--font-size-6);
    }

    .font-size-7-3xl {
        font-size: var(--font-size-7);
    }

    .font-size-8-3xl {
        font-size: var(--font-size-8);
    }

    .font-size-9-3xl {
        font-size: var(--font-size-9);
    }

    .font-size-10-3xl {
        font-size: var(--font-size-10);
    }

    .font-size-11-3xl {
        font-size: var(--font-size-11);
    }

    .font-size-12-3xl {
        font-size: var(--font-size-12);
    }

    .font-size-13-3xl {
        font-size: var(--font-size-13);
    }

    .font-size-14-3xl {
        font-size: var(--font-size-14);
    }

    .font-size-15-3xl {
        font-size: var(--font-size-15);
    }

    .font-size-16-3xl {
        font-size: var(--font-size-16);
    }

    .font-size-17-3xl {
        font-size: var(--font-size-17);
    }

    .font-size-18-3xl {
        font-size: var(--font-size-18);
    }

    .font-size-19-3xl {
        font-size: var(--font-size-19);
    }

    .font-size-20-3xl {
        font-size: var(--font-size-20);
    }
}

4xl styles​

typography/4xl/size.css
/* =========================================================================== *\
    Font size utilities
\* =========================================================================== */

@media (--m-4xl) {
    .font-size-000-4xl {
        font-size: var(--font-size-000);
    }

    .font-size-00-4xl {
        font-size: var(--font-size-00);
    }

    .font-size-0-4xl {
        font-size: var(--font-size-0);
    }

    .font-size-1-4xl {
        font-size: var(--font-size-1);
    }

    .font-size-2-4xl {
        font-size: var(--font-size-2);
    }

    .font-size-3-4xl {
        font-size: var(--font-size-3);
    }

    .font-size-4-4xl {
        font-size: var(--font-size-4);
    }

    .font-size-5-4xl {
        font-size: var(--font-size-5);
    }

    .font-size-6-4xl {
        font-size: var(--font-size-6);
    }

    .font-size-7-4xl {
        font-size: var(--font-size-7);
    }

    .font-size-8-4xl {
        font-size: var(--font-size-8);
    }

    .font-size-9-4xl {
        font-size: var(--font-size-9);
    }

    .font-size-10-4xl {
        font-size: var(--font-size-10);
    }

    .font-size-11-4xl {
        font-size: var(--font-size-11);
    }

    .font-size-12-4xl {
        font-size: var(--font-size-12);
    }

    .font-size-13-4xl {
        font-size: var(--font-size-13);
    }

    .font-size-14-4xl {
        font-size: var(--font-size-14);
    }

    .font-size-15-4xl {
        font-size: var(--font-size-15);
    }

    .font-size-16-4xl {
        font-size: var(--font-size-16);
    }

    .font-size-17-4xl {
        font-size: var(--font-size-17);
    }

    .font-size-18-4xl {
        font-size: var(--font-size-18);
    }

    .font-size-19-4xl {
        font-size: var(--font-size-19);
    }

    .font-size-20-4xl {
        font-size: var(--font-size-20);
    }
}

5xl styles​

typography/5xl/size.css
/* =========================================================================== *\
    Font size utilities
\* =========================================================================== */

@media (--m-5xl) {
    .font-size-000-5xl {
        font-size: var(--font-size-000);
    }

    .font-size-00-5xl {
        font-size: var(--font-size-00);
    }

    .font-size-0-5xl {
        font-size: var(--font-size-0);
    }

    .font-size-1-5xl {
        font-size: var(--font-size-1);
    }

    .font-size-2-5xl {
        font-size: var(--font-size-2);
    }

    .font-size-3-5xl {
        font-size: var(--font-size-3);
    }

    .font-size-4-5xl {
        font-size: var(--font-size-4);
    }

    .font-size-5-5xl {
        font-size: var(--font-size-5);
    }

    .font-size-6-5xl {
        font-size: var(--font-size-6);
    }

    .font-size-7-5xl {
        font-size: var(--font-size-7);
    }

    .font-size-8-5xl {
        font-size: var(--font-size-8);
    }

    .font-size-9-5xl {
        font-size: var(--font-size-9);
    }

    .font-size-10-5xl {
        font-size: var(--font-size-10);
    }

    .font-size-11-5xl {
        font-size: var(--font-size-11);
    }

    .font-size-12-5xl {
        font-size: var(--font-size-12);
    }

    .font-size-13-5xl {
        font-size: var(--font-size-13);
    }

    .font-size-14-5xl {
        font-size: var(--font-size-14);
    }

    .font-size-15-5xl {
        font-size: var(--font-size-15);
    }

    .font-size-16-5xl {
        font-size: var(--font-size-16);
    }

    .font-size-17-5xl {
        font-size: var(--font-size-17);
    }

    .font-size-18-5xl {
        font-size: var(--font-size-18);
    }

    .font-size-19-5xl {
        font-size: var(--font-size-19);
    }

    .font-size-20-5xl {
        font-size: var(--font-size-20);
    }
}