Skip to main content

Font styles

The font style classes set the font-style style.

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

style-italic-3xs
style-italic-2xs
style-italic-xs
style-italic-sm
style-italic-md
style-italic-lg
style-italic-xl
style-italic-1xl
style-italic-3xl
style-italic-4xl
style-italic-5xl

How to import into your CSS​

Import this into your CSS with:

@import 'cacao-css/dist/typography/style.css';

Imports are available for all media query viewport sizes.

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

See Import Cacao CSS for more information.

Source CSS​

Default styles​

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

.style-normal {
    font-style: normal;
}

.style-italic {
    font-style: italic;
}

3xs styles​

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

@media (--m-3xs) {
    .style-normal-3xs {
        font-style: normal;
    }

    .style-italic-3xs {
        font-style: italic;
    }
}

2xs styles​

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

@media (--m-2xs) {
    .style-normal-2xs {
        font-style: normal;
    }

    .style-italic-2xs {
        font-style: italic;
    }
}

xs styles​

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

@media (--m-xs) {
    .style-normal-xs {
        font-style: normal;
    }

    .style-italic-xs {
        font-style: italic;
    }
}

sm styles​

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

@media (--m-sm) {
    .style-normal-sm {
        font-style: normal;
    }

    .style-italic-sm {
        font-style: italic;
    }
}

md styles​

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

@media (--m-md) {
    .style-normal-md {
        font-style: normal;
    }

    .style-italic-md {
        font-style: italic;
    }
}

lg styles​

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

@media (--m-lg) {
    .style-normal-lg {
        font-style: normal;
    }

    .style-italic-lg {
        font-style: italic;
    }
}

xl styles​

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

@media (--m-xl) {
    .style-normal-xl {
        font-style: normal;
    }

    .style-italic-xl {
        font-style: italic;
    }
}

2xl styles​

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

@media (--m-2xl) {
    .style-normal-2xl {
        font-style: normal;
    }

    .style-italic-2xl {
        font-style: italic;
    }
}

3xl styles​

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

@media (--m-3xl) {
    .style-normal-3xl {
        font-style: normal;
    }

    .style-italic-3xl {
        font-style: italic;
    }
}

4xl styles​

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

@media (--m-4xl) {
    .style-normal-4xl {
        font-style: normal;
    }

    .style-italic-4xl {
        font-style: italic;
    }
}

5xl styles​

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

@media (--m-5xl) {
    .style-normal-5xl {
        font-style: normal;
    }

    .style-italic-5xl {
        font-style: italic;
    }
}