Normalizes typography and spacing harmoniously.

View on Github

Getting Started

Download from a CDN


Or use in your node project using the following

npm install typolize

And import into your stysheets

@import 'typolize'

How to Use

Customise the following variables to change modular scale of the type and spacing.

:root {
  --font-base: 16px;
  --line-ratio: 1.5;
  --font-ratio: 1.333;
  --spacing-ratio: 1;

Configure the default typesetting by setting the font sizes

:root {
--font-size-body: var(--font-size-0);
--font-size-h1: var(--font-size-7);
--font-size-h2: var(--font-size-5);
--font-size-h3: var(--font-size-3);
--font-size-h4: var(--font-size-2);
--font-size-h5: var(--font-size-1);
--font-size-h6: var(--font-size-0);
--font-size-p: var(--font-size-body);
--font-size-ul: var(--font-size-body);
--font-size-ol: var(--font-size-ul);
--font-size-blockquote: var(--font-size-body);

Manage spacing use em or rem variables var(-em-<n>) and var(--rem-<n>) where n is anything between -2 and 10.

For example:

code {
	margin-top: var(--em-1);
	margin-bottom: var(--em-2);

(T) Toggle Type Background


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Chuffin' nora where's tha bin any rooad aye by 'eck nobbut a lad. Cack-handed chuffin' nora eeh. Breadcake where there's muck there's brass ah'll gi' thee a thick ear ey up what's that when it's at ooam by 'eck. Dahn t'coil oil be reet bloomin' 'eck. Any rooad. Where there's muck there's brass bloomin' 'eck tha knows tintintin dahn t'coil oil. Tha what tell this summat for nowt is that thine ne'ermind ah'll box thi ears th'art nesh thee gi' o'er. What's that when it's at ooam appens as maybe mardy bum t'foot o' our stairs shu' thi gob. Aye nobbut a lad god's own county. That's champion shu' thi gob will 'e 'eckerslike tintintin a pint 'o mild cack-handed chuffin' nora. Appens as maybe shurrup. Shurrup be reet ah'll gi' thi summat to rooer abaht shurrup.