Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/drwpow/responsive-typography
An easy, responsive, universal typographic scale for the web powered by CSS variables
https://github.com/drwpow/responsive-typography
Last synced: 2 months ago
JSON representation
An easy, responsive, universal typographic scale for the web powered by CSS variables
- Host: GitHub
- URL: https://github.com/drwpow/responsive-typography
- Owner: drwpow
- Created: 2020-07-19T19:15:30.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-08-03T03:59:39.000Z (over 4 years ago)
- Last Synced: 2024-05-16T14:43:34.720Z (7 months ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📐 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`:
```js
import "responsive-typography/default-scale.css";
```
You can then use `.font-u#` and `.font-d#` utility classes anywhere in your markup:
```html
Increase Font Size +4
Increase 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:
```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.
### JS
You can also load the values yourself if using a CSS-in-JS solution:
```js
import { defaultScale as scale } from "responsive-typography";
const MyComponent = () => (
Increase Font Size +4
Increase Font Size +2
Decrease Font Size -2
);
```
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:
```js
import { Scale } from "responsive-typography";
const scale = new Scale({ factor: 2, delta: 5 }); // increase font size 2× every 5 steps
console.log(scale(4));
// -> "1.7411011266em"
console.log(scale(-2));
// -> "0.7578582833em"
console.log(scale(4, { root: true }));
// -> "1.7411011266rem"
```
Need help? Try our [online calculator](https://codepen.io/dangodev/full/ZEzmJaB).