CSS Modular Type

A PostCSS and TailwindCSS plugin to generate modular type scales, inspired by Fluid Type Scale Calculator.

Warning

Still in beta. Report any issues if found.

# npm
npm install css-modular-type --save-dev

# or yarn
yarn add -D css-modular-type

# or pnpm
pnpm add -D css-modular-type

You can add this plugin as a PostCSS plugin inside your postcss.config.js:

// postcss.config.js
const postcss = require("css-modular-type/postcss");
// or just `require('css-modular-type)` as `postcss` is the default export;
// const postcss = require("css-modular-type")

module.exports = {
  plugins: [postcss()],
};

Or as a TailwindCSS plugin by adding in your tailwind.config.js file:

module.exports = {
  /* ... other tailwind styles ... */
  theme: {},
  plugins: [require("css-modular-type/tailwind")],
};

:root {
  /* css-modular-type-generate */
}

:root {
  --font-size--2: clamp(0.69rem, 0.01vw + 0.69rem, 0.70rem);
  --font-size--1: clamp(0.83rem, 0.14vw + 0.81rem, 0.94rem);
  --font-size-0: clamp(1.00rem, 0.33vw + 0.93rem, 1.25rem);
  --font-size-1: clamp(1.20rem, 0.61vw + 1.08rem, 1.67rem);
  --font-size-2: clamp(1.44rem, 1.03vw + 1.23rem, 2.22rem);
  --font-size-3: clamp(1.73rem, 1.62vw + 1.40rem, 2.96rem);
  --font-size-4: clamp(2.07rem, 2.46vw + 1.58rem, 3.95rem);
  --font-size-5: clamp(2.49rem, 3.65vw + 1.76rem, 5.26rem)}
}

The plugin comes with the following default configuration, but it is possible to customise pretty much all config options to your liking.

module.exports = {
  plugins: [
    require("css-modular-type")({
      minScreenWidth: 320,
      maxScreenWidth: 1536,
      minFontSize: 16,
      maxFontSize: 20,
      minRatio: 1.2,
      maxRatio: 1.333,
      minStep: 2,
      maxStep: 5,
      precision: 2,
      prefix: "font-size-" /* set to "fluid-" in tailwind plugin */,
      rootFontSize: 16,
      suffixType: "numbered" /* set to "values" in tailwind plugin */,
      suffixValues: ["xs", "sm", "base", "md", "lg", "xl", "2xl", "3xl"],
      unit: "rem",
      replaceInline: false /* postcss plugin only */,
      generatorDirective: "css-modular-type-generate" /* postcss plugin only */,
    }),
  ],
};

Note

Options marked as (p) only applies to postcss plugin.

Type: number

Viewport width of your font's baseline step on minimum (mobile) screens widths.

Type: number

Viewport width of your font's baseline step on maximum (desktop) screens widths.

Type: number

Minimum font size of your baseline step on minimum (mobile) screen widths. The base font size won't go below this size when the viewport is at minScreenWidth or below.

Type: number

Maximum font size of your baseline step on maximum (desktop) screen widths. The base font size won't go above this size when the viewport is at maxScreenWidth or above.

Type: number

Font scaling ratio for minimum/maximum screen width. Could be one of the ratio given below or a custom one.

• 1.067 (Minor Second)
• 1.125 (Major Second)
• 1.200 (Minor Third)
• 1.250 (Major Third)
• 1.333 (Perfect Fourth)
• 1.414 (Augmented Fourth)
• 1.500 (Perfect Fifth)
• 1.618 (Golden Ratio)

Type: number

Minimum steps of font scales to produce (excluding your base font size on minimum screen width). So, if you set minStep to 2 and maxStep to 5, it'll generate 8 font scales variables i.e, minStep + maxStep + 1 (base font size).

Type: number

Maximum steps of font scales to produce (excluding your base font size on maximum screen width). So, if you set minStep to 1 and maxStep to 3, it'll generate 5 font scales variables i.e, minStep + maxStep + 1 (base font size).

Type: number

Root font size (default is usually 16px on all browsers). This is used to calculate rem values.

Type: number

Precision of generated font values.

Type: string

Prefix of generated font variables.

Type: "numbered" | "values"

Suffix to use for generated font scales. Could be one of:

• numbered: Generated font variables will have the format of --${prefix}${number}. For example, with default configuration, it'll generate variables as: --font-size--1, --font-size-0, --font-size-2 etc.

• values: Generated font variables will have the format of --${prefix}${suffixValues[<font-step>]}. For example, if suffixType is set to values, it'll generate variables with suffix from suffixValues config option, like: --font-size-sm, --font-size-base, --font-size-md, etc.

Type: string[] | (defaultValues: string[]) => string[]

Array of suffix for each step in your type scale, in ascending order of font size. Will be used if suffixType is set to values.

Also takes a function which is called with the default values in case you want to extend the default values array like:

// postcss.config.js
module.exports = {
  plugins: [
    require("css-modular-type")({
      minStep: 3,
      maxStep: 6,
      suffixType: "values",
      suffixValues: (defaultValues) => ["2xs", ...values, "4xl"],
    }),
  ],
};

// will generate font values as: ["2xs", "xs", "sm", "base", "md", "lg", "xl", "2xl", "3xl", "4xl"]

Type: "px" | "rem"

Unit of output CSS.

Type: boolean

Whether to replace font variables inline.

Although, it is recommended to include all font variables using generatorDirective inside your :root {} selector so that you can access them globally, however, if you prefer to replace them inline you can do so by enabling replaceInline:

// postcss.config.js
module.exports = {
  plugins: [
    require("css-modular-type")({
      replaceInline: true,
    }),
  ],
};

/* other styles */
button {
  font-size: var(--font-size-1);
}

/* other styles */
button {
  font-size: clamp(1.2rem, 0.61vw + 1.08rem, 1.67rem);
}

Type: string

Generator directive string. Adding this string (as a comment) in any CSS selector will replace it with generated font variables. Requires replaceInline to be disabled.

It is recommended that you put this into your :root {} CSS selector so that you can access font variables globally.

Type: boolean

Whether to insert min and max font size as variables instead of inserting them directly.

// postcss.config.js
module.exports = {
  plugins: [
    require("css-modular-type")({
      insertMinMaxFontAsVariables: true,
    }),
  ],
};

:root {
  /* css-modular-type-generate */
}

:root {
  --font-size-min--2: 0.69rem;
  --font-size-max--2: 0.7rem;
  --font-size--2: clamp(
    var(--font-size-min--2),
    0.01vw + 0.69rem,
    var(--font-size-max--2)
  );
  --font-size-min--1: 0.83rem;
  --font-size-max--1: 0.94rem;
  --font-size--1: clamp(
    var(--font-size-min--1),
    0.14vw + 0.81rem,
    var(--font-size-max--1)
  );
  --font-size-min-0: 1rem;
  --font-size-max-0: 1.25rem;
  --font-size-0: clamp(
    var(--font-size-min-0),
    0.33vw + 0.93rem,
    var(--font-size-max-0)
  );
  --font-size-min-1: 1.2rem;
  --font-size-max-1: 1.67rem;
  --font-size-1: clamp(
    var(--font-size-min-1),
    0.61vw + 1.08rem,
    var(--font-size-max-1)
  );
  --font-size-min-2: 1.44rem;
  --font-size-max-2: 2.22rem;
  --font-size-2: clamp(
    var(--font-size-min-2),
    1.03vw + 1.23rem,
    var(--font-size-max-2)
  );
  --font-size-min-3: 1.73rem;
  --font-size-max-3: 2.96rem;
  --font-size-3: clamp(
    var(--font-size-min-3),
    1.62vw + 1.4rem,
    var(--font-size-max-3)
  );
  --font-size-min-4: 2.07rem;
  --font-size-max-4: 3.95rem;
  --font-size-4: clamp(
    var(--font-size-min-4),
    2.46vw + 1.58rem,
    var(--font-size-max-4)
  );
  --font-size-min-5: 2.49rem;
  --font-size-max-5: 5.26rem;
  --font-size-5: clamp(
    var(--font-size-min-5),
    3.65vw + 1.76rem,
    var(--font-size-max-5)
  );
}

In a tailwind project adding this plugin will create utility classes for changing font sizes. All options are the same between postcss and tailwindcss plugin (except for the ones marked as postcss-only).

Example usage:

import tailwind from "css-modular-type/tailwind";

export default = {
  theme: {},
  plugins: [
    tailwind({
      suffixType: "numbered"
    }),
  ],
};

Shows added utilities in auto-completion:

This plugin is mostly inspired by this blog post by Aleksandr Hovhannisyan.

Further resources:

• Generating font-size CSS Rules and Creating a Fluid Type Scale
• Flexible typography with CSS locks
• UTOPIA