Typolize NPM | npm.io

Typolize

Typolize provides sensible default styling for good typography on the web. It consists of a reset and customizable variables that let you create harmonious type sizing and spacing.

Customising the following variables will give a completely different feel to the proportion and scale of your site or application.

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

Typesetting

Generating a scale is useful to create typography which shares a common derivative. Sometimes this can lack contrast so by picking out certain steps in the scale it allows you to create a more distinctive look.

Below is an example of customizing the typesetting in Typolize.

: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-small: var(--font-size--1);
}

Spacing

Control spacing between type by applying margins using either the --em or --rem variable with a range between -2 and 10.

For example:

*+* {
	margin-top: var(--em-1);
}

h1, h2, h3, h4, h5, h5, h6 {
    margin-top: var(--em-3);
    margin-bottom: var(--em-2);
}

section {
    margin-top: var(--rem-4);
    margin-bottom: var(--rem-6);
}

Leading Trim

Apply leading trim to any element using --leading-trim: '', --leading-trim-over: '' or --leading-trim-under: ''.

By class

.button {
    --leading-trim: '';
}

Or selectors

h1, h2, h3, h4, h5, h6, p, li {
    --leading-trim: '';
}

Adjust to different fonts by setting the --cap-height which is a percentage of the font-size.

:root {
    --cap-height: 0.75;
}

See the demo for examples of it being used. Take a look at the default theme for an example of the settings.

Install

Download directly from a CDN using unpkg
```
https://unpkg.com/typolize/dist/typolize.css
```
Or use in your node project using the following
```
npm install typolize
```
Import into your stylesheet
```
@import 'typolize'
```
Customize using the variables explained above