# State of The Art Web Typography

We have reached the state that Web typography can be **much** better than it used to be. What kind of tools is in our hands?

* [Hyphenator](http://code.google.com/p/hyphenator/), with this JavaScript hyphenation support, reading justified text on your browser will no longer be a pain.
* [Knuth and Plass Line Breaking](http://www.bramstein.com/projects/typeset/) in JavaScript, combining this and Hyphenator then you will get beautiful typesetting like [this sample](http://www.bramstein.com/projects/typeset/flatland/).
* [optimizeLegibility](http://www.aestheticallyloyal.com/public/optimize-legibility/), CSS rule text-rendering: optimizeLegibility; will turn on cross browser kerning-pairs & ligatures, which is also critical for good typography. It does have some drawbacks though.
* Web fonts solutions like [TypeKit](http://typekit.com/) and high quality free web fonts from websites like [Font Squirrel](http://www.fontsquirrel.com/), provided much more vivid user experience than standard web fonts like Verdana and Georgia, but they should be chosen very carefully, otherwise the results can be much worse.
* [-moz-font-feature-settings](https://developer.mozilla.org/en/CSS/-moz-font-feature-settings), this feature, although it’s Firefox 4 only, can be very fun to experiment with, since it opens an [entire new world](http://hacks.mozilla.org/2009/10/font-control-for-designers/) of rich OpenType typography to the web. Combining this with web fonts solutions can make it even more useful.
* [-webkit-font-smoothing](http://maxvoltar.com/archive/-webkit-font-smoothing), when used in a clever way, can improve legibility (and some designers prefer grayscale antialiasing to subpixel antialiasing, that’s why it’s so popular nowadays). Unfortunately there are many existing websites abusing this CSS rule, including [Apple](http://www.apple.com) and [Twitter](http://www.twitter.com). In general, I suggest leaving it alone unless it’s absolutely necessary.
* [SmartyPants](http://daringfireball.net/projects/smartypants/) will convert ugly quotes, dashes and consecutive dots into beautiful punctuations that you really meant to use. It saves a lot of editing efforts.
* [MathJax](http://www.mathjax.org/), the only weakness of web typography comparing to [TeX](http://en.wikipedia.org/wiki/TeX) is math equations, MathJax is so good that it totally eliminated this weakness.

Think about it: what if we create an automatic web typesetting tool, combining all these efforts, how beautiful the result we will get? That’s what I am trying to do recently.

## Author: Jiang Jiang

A software engineer from China, working on some OS for a fruit company. Interested in typography and science fiction.

## 3 thoughts on “State of The Art Web Typography”

1. 梁海 says:

Also, expecting more tools enhancing Chinese typography for the web. 😀

2. Vayn says:

@梁海 yep, I agree with you. Although we have much more typography tools for web, there are few tools could be used for Chinese typography

3. 梁海 says:

@Vayn Now even can’t find a tool to justify a Chinese (mixed with some western characters or Arabic numbers) paragraph’s text alignment. 🙁