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.
Win clients & work smarter with our FREE ebook: get it now!
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
Elliot Jay Stocks is a designer, speaker, and author. He is the creative director of Adobe Typekit, co-founder of lifestyle magazine Lagom, founder of typography magazine 8 Faces, and an electronic musician.
Generate New York 2015 will be packed with more top content from world-class speakers, including Mike Monteiro, Brad Frost, Val Head, JoonYong Park and many more. Head over to the Generate site to find out more and buy your ticket today!
Liked this? Try these...
