type.js

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

• emphasis – Text of three or less words in bold or italics does not break across lines.

• small-words – Breaks lines before words of three or less characters.

• prepositions – Breaks lines before prepositions. (English language only, for now.)

• dashes – Breaks lines before hyphens and dashes.

• all – Breaks lines before all of the above.

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

• padding-right – Increases padding-right until the widow is fixed. (Using box-sizing:border-box;)

• padding-left – Increases padding-left until the widow is fixed. (Using box-sizing:border-box;)

• word-spacing – Removes word-spacing until the widow is fixed.

• non-breaking-space – Adds a non-breaking space character ( ) between the last two words of the paragraph.

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.