ESPI on site: Tomorrow’s web type today – TYPO 2012

Sketch: Sylvain Mazas 

A self described “hairy English web guy” and creator of 8 Faces magazine spoke at Typo Berlin on Saturday about the bleeding edge of experimentation in web typography.

Stocks began his explorations for selfish reasons – a yearning for the freedom and supreme control available in print. But soon realizing the lack of control can be a good thing and something to be embraced, while keeping our eyes open to things unconsidered before – especially now as so many things are rapidly changing.

Today there are many new approaches, techniques and technologies available to achieve more control with web typography, some work well, some sort of and others not at all. To start the discussion Stocks cites two jQuery plugins developed by Dave Rupert: Lettering.js, which gives you much greater control of your type by facilitating adjustment of individual letters or work , making fun things like kerning possible. Fittext.js treats type heading like images so they scale to the width of the container, which is a handy accessory for fluid or responsive layouts.

With these as a starting point Stocks introduces and explains how to implement four types of detail web typography, making the most of OpenType features within the browser:

ligatures
Ligatures add a nice touch to any site, as well as making text much easier to read (especially when typesetting large headlines). If the font you are using contains ligatures they are surprising easy to activate with CSS and widely supported by the browsers. Perhaps the biggest advantage is if they are not supported experiences degrade gracefully. See it in action and get the code.

Small caps and old style numerals
The time is fast approaching where we can move past faking this online (because really it never looks quite right)! Currently this is not supported in all web font files, but some foundries are starting to supply separate font files than be called as necessary in your CSS. See this in action and get the code.

Swashes
Whilst the idea and initial explorations in to Swashes is very exciting, browser support is extremely poor (currently only Firefox), and very few web fonts come with swashes. For now it is possible to use the same approach as above – activating a special font file with the required swash characters. See this in action and get the code . Adding strokes to text is certainly an interesting idea too.

Stylistic Alternates
Currently stylistic alternates have a specification but the browser support is very low, so it may be a while before it is widely used. In the meantime, you can also you an separate font file to serve up the Alternatives in typefaces like Bree. Once again you can see this in action and get the code from one Stocks blog.

Before rushing out and incorporating all of this awesomeness into your next project Stocks suggests four principles to evaluate if you are making the right choice:

Consider the typeface
Does it contain the things you need?

Consider the font file
Is it OpenType? Are the extra glyphs present?

Consider the browser
What features does it support? This something that can have massive variations.

Consider the user
What happens when things are missing, is it horrible and breaks the or is ok? Is it still a good enough experience? Will it break your site or design? 

Overall a really interesting and enjoyable talk – we are looking forward to incorporating some of these techniques into our own projects.

For more on Stocks talk and typographic explorations you can read Harry's post on the official TYPO blog or follow Elliot on twitter.