Technology

Translating typography for the web [part 1]

Posted by Pixafy Team

translating-typography-for-web-blog-graphic

Ah, the enchanting world of typography!  More than once, I caught myself lost looking at signage, posters and shampoo bottles, merely absorbing the beauty of letter shapes without stopping at their interpretation.

From medieval manuscripts, through the Gutenberg Press all the way to the 21st century, typography left its fascinating paper trail for contemporary designers to be enchanted. However, the enchantment can quickly turn into frustration when beautifully crafted type meant for print enters the world of web. Not all is lost, quite the opposite: web typography already came a long way and @font-face is here to prove it. For type lovers engaging on web design and development – and I include myself in that group – understanding the requirements and limitations of the medium is key to avoiding frustration. 

[series_block]

This post is part of a series on “Translating typography for the web”:

[/series_block]

Typography1

Source: http://www.printmag.com/imprint/is-medieval-evil/

A few requirements on my latest projects made me think about parallels and differences between traditional typography elements and web typography, and how to improve the use of type on the screen.

Between testing, experience and research, I put together a list of important points to consider about the subject and references that may save you a lot of time and improve the quality of your web typography. Here’s the first installation of translating typography for the web. Stay tuned for part two! (Update: “Translating typography for the web” [part 2] is live!)

Anti-aliasing, font-hinting and other caveats

This may be the biggest source of frustration: type looks wonderful on Photoshop, but when rendered by the browser, it looks bulky, jagged or #$@%&* [insert your favorite colorful adjective here]. Anti-aliasing is meant to reduce eye strain by making text more readable, and it does it very successfully in many circumstances. In a nutshell, by adding semi-transparent pixels to the edges of characters, their shapes looks smoother.

“How does my software know where to add such pixels,” you may ask… A good part of the process is done through font hinting, which is a set of mathematical instructions that compares the alignment of letterforms against the pixel grid, and from that comparison it determines which critical areas should be adjusted.

That is where the gap starts, at least from a web developer’s perspective. When dealing with Photoshop, we have five pre-set anti-alias settings (none, sharp, crisp, strong and smooth), while most browsers/platforms will only allow toggling between on and off (a setting that most users will never touch). As a general rule, Mac users will see thicker fonts (font-smoothing on by default) while Windows users will see thinner fonts. Therefore, matching web type cross-browsers to Photoshop exactly is close to impossible. In very critical pieces of header logos that rely heavily on typography, it may be a good idea to use text as image, although that is not a choice at all for content. For those cases, we still have to deal with the differences.

Typography2.jpg

Source: http://blog.typekit.com/2010/12/14/a-closer-look-at-truetype-hinting/

It is important to mention that certain fonts have been designed and hinted specifically for the web, and will have a more consistent rendering and improved readability. Think Verdana, Ubuntu…

If you wish to go deeper into anti-aliasing, font hinting and sub pixel rendering, The Ails Of Typographic Anti-Aliasing may be a good place to start. To delve into the realm of CSS rendering, Pixafy developer Patrick Coleman also explores issues in CSS subpixel rendering.

Blessings of @font-face

Fonts imported via @font-face still have their own differences in comparison to their equivalents in print. Dealing with 4 different file formats (EOT, WOFF, TTF and SVG) is one of the causes. Some are very evident differences, such as ligatures, while others are subtle. Still, we web developers and font-aficionados couldn’t be happier about the world of possibilities that @font-face provides us. The variety of font-families keeps growing and the quality continuously improves, to our delight!

Elements of print typography and their HTML/CSS counter-parts

For those used to the print environment it is natural to think of kerning calculation in terms of proportion. When we transfer kerning settings to its relative in the web world, letter-spacing, we usually deal with absolute values. One may argue “What about Ems?” EM’s are indeed proportional units, however we are still tied to pixel units. Most browsers, Firefox being exception, round decimal values down to its lower unit. Different platforms also render differently, and negative value may have some wacky results. Testing is definitely required in this case. For some kerning training and playing time, I recommend http://type.method.ac/

Leading in the web world translates to line-height and along with padding and margin, helps to enforce text-flow and necessary white space rest for the readers eyes. Just as in print, balance between these 3 factors are essential for a good user experience. Good news is that these elements can be precisely controlled through ems percentages and or absolute values.

An example that should not to be followed with letter-spacing, line-height, text-indent and padding fail, can be found here: “How to piss off your designer friends and give them a migraine“!

Aspects of hierarchy can be achieved through many approaches, but a clear example would be hinted by h1, h2, HTML tags. Following this structure has a three-fold effect: it is good practice/coding, improves SEO and ensures a good experience for users dependent on screen readers.

The growing families of web fonts also play an important roll on setting hierarchy throughout the layout. Combinations of weight and different typefaces are excellent tools for this purpose. Take Open Sans as an example: it is available in a great variety of weights (from book to extra-bold), in italic and condensed form. Add a contrasting serif or script font and get the party started!

Before the party turns into mayhem, it is a good idea to check how the different fonts interact – font personalities may muffle, crash and conflict with one another. Successful combinations however, enhance the best qualities of the involved parties, just as in any good partnership. Although there is no limit or recommended number of fonts to be used in a design, as the number of fonts increase, the more challenging it is to achieve a harmonious result. Font Combinator (http://font-combinator.com/) is good tool for playing with web font  interactions and quickly check how they visually work together.

Another cool tool is Font Swapper (http://www.webtype.com/tools/swapper/). By entering a website URL, it is possible to see at a quick glance see how a website will look by changing heading and body fonts.

Typography4

Contrast by weight
Source: http://sara-lindholm.tumblr.com/post/19620301450/kentson-poster-helvetica-via-smooth

Excitingly, the number of ways in which designers and developers can leverage and control typography on the web is increasing. Check out the second installation of “Translating typography for the web,” where I continue to delve into type rendering and the golden typography path!

Share your questions and comments below, or tweet us @Pixafy!