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