This is a small project that simply brings together several useful JavaScript functions:
Typography.baseline(element)will calculate the baseline ratio of a given element. This is mostly used internally, but it’s useful enough that I made it a publicly-available function.Typography.underline(element, style)will draw a “typographically proper” underline directly under a given element (e.g. an underline with “holes” in it for the typeface’s descenders).
Currently, Typography.js relies on MooTools (built using mootools-1.2.1-core,
though other versions may work). I’m not very good at JavaScript, at all — the
plan is to eventually be framework‐agnostic, but I’m certainly not there yet.
I’m a huge typophile, and I’m always interested in anything related to anything that might improve the state of typography on the web. Please feel free to contact me if you see a problem that you’d like me to consider attempting to fix and include in this library, that relates to typography in any way. That being said, I’ve got several plans for this library, which may or may not see implementation:
- A collection of functions providing designers with the ability to design against a true “baseline grid” on the web as has been standard in the print design industry for ages. Not just a “vertical rhythm”, mind you. See some of these articles for more information: Setting up a Baseline Grid, Compose to a Vertical Rhythm, Setting Type on the Web, Incremental Leading
- Some sort of central system for using typefaces on the web. Should
automatically use whichever of the following systems make most sense in a
given context:
@font-face, Cufón, sIFR, or IE’s Embedded OpenType (in approximate order of usefulness). Other things worth looking at may be dojo.gfx’s implementation and SVG fonts.