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.
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.
Spacing
Control spacing between type by applying margins using either the --em
or --rem
variable with a range between -2
and 10
.
For example:
Leading Trim
Apply leading trim to any element using --leading-trim: ''
, --leading-trim-over: ''
or --leading-trim-under: ''
.
By class
Or selectors
Adjust to different fonts by setting the --cap-height
which is a percentage of the font-size.
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 typolizeImport into your stylesheet
-
Customize using the variables explained above
Development
To customise the output or for development purposes.
- Download or fork the repo and install dependenciesnpm install
- Make changes to
src/typolize.css
- Build stylesnpm run build
- Styles are outputted to
dist/typolize.css