Download from a CDN
https://unpkg.com/typolize/dist/typolize.css
Or use in your node project using the following
npm install typolize
And import into your stysheets
@import 'typolize'
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
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.