I’ve cre­ated a large col­lec­tion of open source li­braries for im­prov­ing type and ty­pog­ra­phy on the web. Some of my li­braries are used on mil­lions of web­sites around the world.

Be­low is just a small se­lec­tion of my most well-known open source pro­jects. My Github pro­file con­tains sev­eral other use­ful li­braries and tools.

The State Of Web Type (defunct)

The State of Web Type con­tains up to date browser sup­port data for type and ty­po­graphic fea­tures. I cre­ated the State of Web Type be­cause no other browser sup­port data site goes into the nec­es­sary de­tail for type and ty­pog­ra­phy fea­tures.

The site is fre­quently up­dated with new data and en­tirely open source. Any ad­di­tions, cor­rec­tions, or com­ments are very wel­come.

• Visit the State of Web Type
• View Source Code
• Re­port an is­sue

Font Face Observer

Font Face Ob­server is a small li­brary that pro­vides JavaScript font load events. It will de­tect when a web font has loaded and no­tify you. It is com­pat­i­ble with all web font ser­vices and self-hosted fonts.

The Fil­a­ment Group has an ex­cel­lent ar­ti­cle on how to use Font Face Ob­server’s font events to ef­fi­ciently load fonts. The “Pro­fes­sional Web Ty­pog­ra­phy” book by Donny Truong also has a sec­tion on how to use Font Face Ob­server.

• Visit Font Face Ob­server
• View Source Code
• Re­port an is­sue

Type Rendering Mix

Each op­er­at­ing sys­tem has its own text ren­der­ing en­gine. Some en­gines ren­der the same type­face lighter and some ren­der it heav­ier. This re­sults in your site look­ing dif­fer­ently on each op­er­at­ing sys­tem. Web de­vel­op­ers of­ten work around this by dis­abling sub pixel an­tialias­ing, but this re­duces the fi­delity of the text.

To­gether with Tim Brown I de­vel­oped Type Ren­der­ing Mix, which lets you ap­ply CSS based on the text ren­der­ing en­gine and an­tialias­ing method your browser is us­ing. You can use it to switch to a lighter or heav­ier weight of your type­face based on the browser and op­er­at­ing sys­tem your vis­i­tors are us­ing.

• Visit Type Ren­der­ing Mix
• View Source Code
• Re­port an is­sue

Hypher: hyphenation engine

Hy­pher is a fast and small hy­phen­ation en­gine writ­ten in JavaScript. It works in both the browser and Node.js and comes with hy­phen­ation dic­tio­nar­ies for more than 30 lan­guages. For jQuery users a plu­gin is also in­cluded.

• View Source Code
• Re­port an is­sue

Typeset

Type­set is an im­ple­men­ta­tion of the Knuth and Plass line break­ing al­go­rithm in JavaScript. By man­u­ally break­ing para­graphs into lines it is pos­si­ble to achieve higher qual­ity type­set­ting than of­fered by mod­ern browsers. It also opens up the pos­si­bil­ity of us­ing cus­tom text shapes as shown be­low.

While Type­set fully im­ple­ments the Knuth and Plass al­go­rithm, it should be con­sid­ered a proof of con­cept. It is not ready for pro­duc­tion use (and most likely will never be).

• View Source Code
• Re­port an is­sue

Treesaver: adaptive magazine layouts

Treesaver is an in-browser read­ing ex­pe­ri­ence that dy­nam­i­cally adapts to a user’s de­vice and screen size. Us­ing web-stan­dard tech­nolo­gies pre­sent in HTML5, Treesaver en­ables in­no­v­a­tive, vi­su­ally ap­peal­ing col­umn-based page de­signs that don’t re­quire any ad­di­tional down­loads: all you need is a mod­ern web browser.

Most web­sites dis­play the same de­sign to all users, no mat­ter what browser or de­vice they are us­ing. Be­cause these de­signs don’t take into ac­count the screen size, users on mo­bile de­vices must of­ten re­sort to fre­quent zoom­ing and scrolling in or­der to read con­tent. To­gether with Fil­ipe Fortes, Scott Kel­lum, and Roger Black.

• View Source Code
• Re­port an is­sue

I’ve cre­ated and con­tributed to sev­eral other in­ter­est­ing pro­jects:

• web­font­loader — A web font loader that provides font events.
• promis — A small embeddable Promise polyfill.
• url-tem­plate — An URI template implementation.
• char­ac­ter­set — Manipulate and create character sets.
• col­umn-se­lec­tor — A jQuery table column selector plugin.
• open­type.js — An OpenType, TrueType and WOFF parser.
• xsltj­son — Convert XML to JSON using a XSLT stylesheet.
• uni­code-to­k­enizer — Unicode tokenizer for line breaking.

You can view all of my pro­jects on my Github pro­file page.