Wednesday, March 18, 2015

6 advanced web typography tips

6 advanced web typography tips

Elliot Jay Stocks reveals how to take your web-based typography to the next level.

Typography on the web has made huge leaps forward in recent years, allowing web designers to realise their designs with an almost print-like level of control. However, the details surrounding that control can still be challenging, and bleeding-edge technology like OpenType support is still in flux.

In his talk at Generate London, Typekit's creative director and 8 Faces founder Stocks took attendees through some of the most exciting recent developments that allow us to take web-based typography to the next level. Here are six tips of Stock's tips for upping your type game on the web…

01. Use font-feature-settings

Ligatures are very widely supported – they're on by default in Firefox and are very easy to turn on. This is often how people turn on ligatures and a bunch of other Open Type features: text-rendering: optimizeLegibility;

However, use with caution. A far more powerful way of doing so is: font-feature-settings.

This allows you to be a little more granular; to go in and say: "I want to turn this specific Open Type feature on or off". Also, optimizeLegibility isn't standardised and is a little bit buggy so generally not recommended – especially for body text.

02. Consider the typeface

The typeface is the design – the thing that exists in the ether that was created by the designer. Does the actual design contain swashes? Ligatures?

If it's not in the actual design, it's never going to make it into the font file and will certainly never make it to your browser. At the base level: did the person who designed this typeface actually design your secondary A style set option? Possibly not.

03. Consider the font file

Is it actually an OpenType font file being served? You're never going to be able to turn on an OpenType setting if you're serving a TrueType font, so this is a really important thing to consider. Even if it is OpenType, are the actual glyphs that you need inside the font file? Possibly not.

04. Consider the browser

Some browsers support some features, some they don't, some it's different on different operating systems. No matter how robust your CSS is, if you're testing it in a browser that physically doesn't support that feature, you're not going to see it.

05. Consider the user

Will the design break if ligatures are missing? Probably not. But it quite possibly will if the swash characters are missing and you're actually representing the company logo in web type. Perhaps, in that circumstance, you need to find another way of doing it.

06. Be responsible

Responsive web design is where our heads are at – but it's also about responsible web design. All these cool new shiny features are great, but we need to be mindful of when we use them. Pick the right features you want for the right scenario. This is a really exciting time to be working not he web because we've essentially caught up with what you can do in print.

Words: Elliot Jay Stocks