See it in action: Turn off type.js
Grab type.js on GitHub

Latest version: 1.0

Implementation

Set up is simple. Upload type.js to your site, and link it in your HTML, just before the end of the body.

<script src="./type.js" type="text/javascript"></script>

Next, add a style tag before the script, and write these new CSS properties just like you would any other styles. This is a good start:

<style>
  body {
    min-font-size: 16px;
  }
  p, li, dd {
    rag-adjust: small-words;
    widow-adjust: padding-right;
  }
</style>

<script src="./type.js" type="text/javascript"></script>

Note: These new properties will only work with on-page CSS in a style tag. Styles in external CSS files, or inline-styles will not be recognized, for now.

Examples

This whole page is an example! Inspect away to see how it works.

Properties

Kerning Pairs

Manually adjust the space between two specific glyphs with a simple syntax. Read more about manual kerning here.

Properties

kerning-pairs accepts a comma separated list of two glyphs, then the distance you want between them. Accepts positive or negative distances.

kerning-pairs: az 0.02em;

Values

{Any glyph}{Any glyph} {Any distance}{Any CSS unit}

Example CSS

h1 {
  font-size: 3em;
  line-height: 1.2;
  kerning-pairs: az 0.02em,
                 zy 0.01em,
                 th 0.01em,
                 ov -0.02em;
}

Rag Adjust

Set rules for where lines will to break in a paragraph. Read more about rag rules here.

Properties

rag-adjust accepts four values that describe where your lines should break.

rag-adjust: small-words;

Values

Example CSS

p, li, h3, dd {
  max-width: 35em;
  rag-adjust: small-words;
}

Widow Adjust

Set rules for eliminating widows – or any grouping of less than 14 characters on the last line of a paragraph. Read more about fixing widows here.

Properties

widow-adjust accepts the style property you want to use to fix your paragraph.

widow-adjust: padding-right;

Values

Example CSS

p, li, h3, dd {
  max-width: 35em;
  widow-adjust: padding-right;
}

Min/max font-size

Set a minimum and maximum font-size for text when using a viewport unit for font-size.

Properties

min-font-size and max-font-size accepts any font-size value and CSS unit. Does not accept viewport units.

min-font-size: 20px;

Values

{Any value}{Any css unit}

Example CSS

h1 {
  font-size: 4vw;
  max-font-size: 50px;
  min-font-size: 30px;
}

Issues

Type.js only works within style tags on a page. For now. You can try using your external stylesheets by changing an option in the Type.js file. Change:

stylefill.options({
  externalCSS : false
});

…to:

stylefill.options({
  externalCSS : true
});

Note: This will cause the browser to download your external CSS files twice. Once, as per usual, and again to read the Type.js property values.

You can discuss this and more issues on GitHub.