The list of what the web-typography framework must contain is long, really really long; small caps replacement, ligatures, quotation/inch marks, en/em hyphens and a lot more. So initially I started with small caps replacement for uppercase-abbrevations. UC-abbrevations is something that really “uglyfies” and disturbs the flow of a text. It is also fairly easy to script since strict rules can be set on how to identify all UC-words.

Today Typography.js only contains a script that picks up elements of the “typo”-class and runs through them finding words containing only uppercase letters. The words are then transformed into lowercase letters and a small caps class is applied to the individual word.

The script is “intelligent” in the way that it accepts diacritics such as : ; , . ” / ? ! as parts of the uppercase word but it leaves the diacritic itself untouched. Right now it does not recognise a combination like “the CSS-tables”, that’s on the to-do list :-)

Simplifyed, the script identifyes UC-words by counting, from first letter to the last, the number of letters within the Unicode range 65 to 90 (uppercase). If the uppercase count is equal to the length of the word it means that the word is all uppercase and shall therefore be scripted.

I’ll get back to the actual code in later posts.

Preview:
Typography.js – example with existing copy
Typography.js – type your own (my debugger/test version so there are flaws)

Future goals:
The overall goal is to work with true glypths, in other words OpenType fonts and unicode. Since Opera, Firefox will support and Safari and IE supports the @font-face feature and OpenType it is realistic to aim for true glyphts and not just scaling as the small-caps class does. True glypths gives such a higer quality to the details also since the contrast and blackness of the glypths is taken into consideration when designing small caps in an OpenType font.

Other goals is:
- enable customization and language support so that a web site owner can change typographic defaults due to the language typography.js is applied on.
- largely extend the typographic details the framework covers.
- and more that comes up as I go.

Background:
About 12 years ago I made an AppleScript suite of typographic tools for QuarkXPress, the suite automatized most of the typographic work that was needed for book and magazine publishing. After a year or two the suite was shelved but I could not get it out of my head. So now that I want to get deeper into development it feels like the perfect case; bring the suite back to life but in a web context.

“Web typography”, in my view, suffers from a serious shortage of “typography”. The term could be substituted with “Let me pick the fonts I want for my site” and most efforts is made trying to find techniques that allow the designer/web site owner to use custom fonts on their sites.

Custom fonts is good, but to me it is not what typography is about. Compare the typographic-features of print/desktop appications like QuarkXPress and InDesign to the non-existing features in browsers and webservers. You’ll see that there is years of work left before the web can be on the same typographic level as print. The basic conditions for webbased typography is really good; the typical web-project is following standards on how to handle content, design but also the avrage screen resolution is getting beyond the 1024×768 which ensures a lot of building blocks/pixels when rendering text on a screen.

Thats about it for now.

Keep in mind that I am a designer/art director since more then 10 years and the “Codecamp” project is my personal way of learning programing.

[Update]: I’ve renamed the Codeplay project to Codecamp since there is a company in the UK named Codeplay. My mistake, didn’t mean to cause any copyright infringements.