📐 Responsive Typography
An easy, responsive, universal typographic scale for the web powered by CSS variables.
Get Started
Install it using npm:
npm install responsive-typography
You can consume responsive-typography either using CSS and/or JS. Use either, or both! They work together nicely.
CSS
If you’d like to use the CSS utility classes, import /default-scale.css
:
;
You can then use .font-u#
and .font-d#
utility classes anywhere in your markup:
Increase Font Size +4Increase Font Size +2 Normal font size Decrease Font Size -1 Reset to base size
You can also load --font-u#
and --font-d#
global CSS variables anywhere in your CSS or your CSS-in-JS:
This will work in any CSS, Sass, or CSS-in-JS file provided that stylesheet is loaded.
JS
You can also load the values yourself if using a CSS-in-JS solution:
; const MyComponent = <div> <h1 style= fontSize: scaleu4 >Increase Font Size +4</h1> <h2 style= fontSize: scaleu2 >Increase Font Size +2</h2> <footer style= fontSize: scaled2 >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.
Advanced: generate your own scale
The default scale is a 2.25:6
typographic scale, meaning the font sizes increases by a factor
of 2.25
every 6
steps. You can generate your own typographic scale using the Scale
class:
; const scale = factor: 2 delta: 5 ; // increase font size 2× every 5 steps console;// -> "1.7411011266em"console;// -> "0.7578582833em"console;// -> "1.7411011266rem"
Need help? Try our online calculator.