pglevy / typeset.css

A relational style sheet for better web typography

Typeset.css

A relational style sheet for better web typography

Usage

1. Copy and paste into your project or load it from the jsDelivr CDN:

https://cdn.jsdelivr.net/gh/pglevy/typeset.css@v1.0.2/typeset.css

1. Add data-typeset to a content parent element, like body or main.
2. Add overrides to default settings as needed, for example style="--size: 1.15rem;

Default Settings

--heading-stack: var(--sans-serif-stack);
--body-stack: var(--serif-stack);
--size: 1.2rem;
--measure: 72ex;
--height: 1.5;
--size-scale: 1.25;
--height-scale: 1.09;

View documentation and type sample