logarithmic-type-scale v1.0.1

📐 Logarithmic Type Scale

An easy, responsive, universal typographic scale for the web powered by CSS variables.

Get Started

Install it using npm:

npm install logarithmic-type-scale

There are 3 different ways to consume this. Use what’s right for you!

Option 1: CSS Classes

If you’d like to use helper classes, import classes.css:

import "logarithmic-type-scale/classes.css";

<h1 class="font-u4">Increase Font Size +4</h1>
<h2 class="font-u2">Increase Font Size +2</h2>

<p>Normal font size</p>

<footer class="font-d1">Decrease Font Size -1</footer>

Add either a font-u* class to increase the font by * steps, or font-d* to decrease the font by * steps.

Option 2: CSS Variables

If you’d like instead to use this with CSS variables, import variables.css:

import "logarithmic-type-scale/variables.css";

.my-heading-class {
  font-size: var(--font-u4); /* Increase font size +4 steps */
}

.my-subheading-class {
  font-size: var(--font-u2); /* Increase font size +2 steps */
}

.my-small-class {
  font-size: var(--font-d2); /* Decrease font size -2 steps */
}

This will work in any CSS, Sass, or CSS-in-JS file provided that stylesheet is loaded.

Option 3: JS

You can also load the values yourself if using a CSS-in-JS solution:

import scale from "logarithmic-type-scale";

const MyComponent = () => (
  <div>
    <h1 style={{ fontSize: scale.u4 }}>Increase Font Size +4</h1>
    <h2 style={{ fontSize: scale.u2 }}>Increase Font Size +2</h2>
    <footer style={{ fontSize: scale.d2 }}>Decrease Font Size -2</footer>
  </div>
);

You can use either one of the methods above, or all three! They all can work in tandem; use whatever method is most convenient for your needs.