Skip to main content
Version: Next

Font Size

Font Size

Utilities for controlling the font size of an element.

NamespaceOutput
text-xs{ fontSize: 12 }
text-sm{ fontSize: 14 }
text-base{ fontSize: 16 }
text-lg{ fontSize: 18 }
text-xl{ fontSize: 20 }
text-2xl{ fontSize: 22 }
text-3xl{ fontSize: 24}
text-4xl{ fontSize: 26}
text-5xl{ fontSize: 28}
text-6xl{ fontSize: 30}

Custom Font Size

If you didn't get suitable font size for your project app, you can define your font size by adding in osmi.config.js file.

Create Pre-defined

export default {
// font family
font: {
size: {
"super-big": 50,
"super-large": 60,
"crazy-large": 80,
},
},
};

Usage

apply("text-super-big");

Responsive Font Size

Utilities for controlling the font size of an element with automatically resize depends on device resolution.

Pre-defined Responsive Size

NamespaceDescription
text-r-xsResponsive version for text-xs
text-r-smResponsive version for text-sm
text-r-baseResponsive version for text-base
text-r-lgResponsive version for text-lg
text-r-xlResponsive version for text-xl
text-r-2xlResponsive version for text-2xl
text-r-3xlResponsive version for text-3xl
text-r-4xlResponsive version for text-4xl
text-r-5xlResponsive version for text-5xl
text-r-6xlResponsive version for text-6xl

Dynamic Responsive Size

If you want to have responsive text size based on screen width resolution. Use this syntax:

Example:

apply("text/50"); // 50% of screen width resolution