tidy-type

  A focused CSS library
  for tidy typesetting.

✓ Ridiculously tiny.
  230 bytes minzipped the last time I checked.

✓ Brings structure.
  Professional typographic rhythm, and opt-in plugins:

• a real baseline grid (coming soon)
• professional tables (coming soon)
• proper sub- and superscripts (coming soon)
• rules and borders (coming soon)
• drop caps (coming soon, if needed)

✓ Just works.
  Out of the box. With any font, any layout, any stylesheet, and any framework.

✓ Tweakable.
  If you’re pedantic like me, you can fine-tune every single aspect of it.

CSS typesetting?

In its original sense, typesetting is the art of arranging cast metal sorts (characters) and slugs (spaces) into lines. These lines would then be clustered together into a forme to transfer ink onto a page. A typesetter needed an eye for proportion, excellent manual skills, and lots of patience.

Today typesetting is almost always done digitally, with very powerful tools like Adobe InDesign.

But CSS has never had any typesetting tools. So getting it right has meant a lot of manual labour – much like in the old times. This article by Espen Brunborg should give you an idea.

If you’re interested, there’s some more reading [here](./For the curious.md).

A CSS library?

tidy-type is not a CSS framework. There are swarms of them out there – and few really tackle the problem of typesetting.

tidy-type is different. It’s not a framework – it’s a CSS library. It solves just one complex problem – online typesetting.

It does one thing and does it well. It integrates well with your stylesheets, and with any existing CSS framework.

Focused?

tidy-type is focused on the single problem it solves. In most cases it will set no more than four properties:

• the font size
• the line height
• top and bottom padding
• top and bottom margins

All the rest is up to you or up to the framework you’re using.

Usage

Add the class tidy-type to a container element. All <p>, <ul>, <ol>, <dl>, <pre>, <blockquote>, <h4>, <h5>, <h6>, <dt>, <h3>, <h2> and <h1> elements inside will be aligned to a typographic grid.

If you want to apply the same styles to another element like a <div>, you have the classes tidy-type--p, tidy-type--h4, tidy-type--h3, tidy-type--h2 and tidy-type--h1 at hand.

Using LESS?

Then you can customize any sizes and proportions by overriding our variables. Here’s how:

@import 'tidy-type/source/settings';

@tidy-type-proportion:  1.5;      // Perfect fifth
@tidy-type-grid-unit:   0.85rem;  // Generous 1.7× line height

License

MIT © Tomek Wiszniewski