Skip to main content
Version: 0.6

Font Size

Font Size

Utilities for controlling the font size of an element.

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 CustomTheme.js file:

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

Responsive Font Size

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

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