An easy, responsive, universal typographic scale for the web powered by CSS variables.
Install it using npm:
npm install logarithmic-type-scale
There are 3 different ways to consume this. Use what’s right for you!
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.
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.
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.