Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
js
 
 
 
 
 
 

README.md

KerningPairs.js

This script was written to test and improve a new syntax for manual control over kerning in web typography. When this script is implemented you can add the kerning-pairs property in your CSS styles, as if it was a valid style.

If you have any suggestions of how to improve the syntax, or how it might fall over, please feel free to contribute!

Setup

Add kerningpairs.js at the end of your HTML page, just before the closing body tag.

<script src="./path-to-js/kerningpairs.js" type="text/javascript"></script>
		
</body>
</html>

Now you can start manually adjusting kerning in your own CSS.

CSS Syntax

The syntax is simple:

kerning-pairs: [first character][second character] distance[ , [first character][second character] distance]* ;

An example implementation:

h1 {
	kerning-pairs: az 0.02em,
					zy 0.01em,
					th 0.01em,
					ov -0.02em,
					ox -0.04em,
					og 0.005em,
					x  -0.04em,
					y  -0.04em;
}

This script is a Stylefill

A ‘Stylefill’ is a way to create new CSS properties using JavaScript. Stylefills are similar in concept to a polyfill, but are only focussed on extending CSS in new ways, and Stylefill.js is a library to help make it much easier.

Support

KerningPairs.js should work in all modern browsers, and IE9+.

About

Manually control kerning pairs in your CSS.

Resources

Releases

No releases published
You can’t perform that action at this time.