Type.js allows you to write new CSS properties to take finer typographic control of type styles on the web.
Latest version: 1.0
Set up is simple. Upload type.js
to your site, and link it in your HTML, just before the end of the body
.
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:
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.
This whole page is an example! Inspect away to see how it works.
Manually adjust the space between two specific glyphs with a simple syntax. Read more about manual kerning here.
kerning-pairs
accepts a comma separated list of two glyphs, then the distance you want between them. Accepts positive or negative distances.
{Any glyph}{Any glyph} {Any distance}{Any CSS unit}
Set rules for where lines will to break in a paragraph. Read more about rag rules here.
rag-adjust
accepts four values that describe where your lines should break.
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.
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.
widow-adjust
accepts the style property you want to use to fix your paragraph.
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.
Set a minimum and maximum font-size for text when using a viewport unit for font-size
.
min-font-size
and max-font-size
accepts any font-size
value and CSS unit. Does not accept viewport units.
{Any value}{Any css unit}
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:
…to:
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.