webfonts Archives - NEWTYPOGRAPHY /
A short essay that formed the basis of a short presentation on Free Fonts to the 2012 isType Conference, Istanbul, Turkey.
‘Freeness’, vernacular English, meaning; being free and able to act at will, being open or available to all.
Presenting the idea that ‘freeness’ is a technological aspect of a font’s design, as equally important as ‘legibility’, ‘render quality’, or ‘language support’, and that, free fonts can enable usage that proprietary fonts are not designed for.
Type on the web is nothing like type on paper
The traditional relationship between font and reader, i.e. reading type on paper, is based on reading the printed artifact of a font, not the font itself. The internet has changed that relationship. Type has moved from paper, to widespread use within digital documents that are made to be moved and viewed across the internet. Type on the web is nothing like type on paper. With web based text the font itself is delivered directly to the reading medium.
In addition, the nature of ‘publishing’ has been changed by the internet, giving new access to and new forms of mass communication. More people can communicate their ideas and thoughts to more people, more freely, than ever before. There has been a steady explosion of textual content that is highly mobile, editable, searchable, can be archived, copied, and shared. In short, a major aspect of this content is its freeness. Text based content also means, potentially, typographically rich content. Ideally and practically, these new means of publishing and this new content need fonts that are as free as the content and technologies themselves. Set with proprietary type, this content would be less free; it could no longer necessarily be so freely moved, shared, or copied.
Proprietary Licensing versus Free Content
Delivering real fonts to users devices creates an issue with traditional font licensing. To render ‘active text’, with a served font, in a browser, a ‘real font’ has to be served onto the web. Once served, that font file becomes open to unlicensed use; users who have not paid for and agreed licensing terms to use a font are potentially able to access the font anyway. As the use of real fonts across the web became a technical practicality this became an issue for those producing, publishing and selling proprietary fonts. By 2009 there had emerged a general consensus within the ‘type industry’ that allowing real fonts on the web, with or without permission, was at best, a technical issue that needed resolving in favour of font vendors, and at worst, a technology that should not be adopted. As David Berlow of Font Bureau stated in an interview in 2009, in which he outlined the need for a new web-specific font standard and a new OpenType ‘permissions table’;
“How important dynamically rendered type is to design and use on the web must now be clear. In addition, the only other option [to e.g. a 'permissions table'] – that the type industry cede its intellectual property to the public without permission – is not going to happen.”(1)
or, as Chester Jenkins of the Village group of type foundries explained in 2010;
“We are 100% against @font-face, because it makes specified OpenType fonts freely accessible by, and to all. It is one thing to unknowlingly ‘share’ a Web-only font file, but quite another to give away an OpenType font file which can be used for anything.”(2)
The main technical issue with allowing real font use onto the web was simple, how can you protect real fonts on the web from unlicensed use?
Various proposals to protect fonts at browser level emerged from the font industry but these were not greeted well by net developers and net engineers. Firstly, the ‘policing’ of fonts on the web would have likely been wholly ineffective, and naturally, many on the development side of the web were not keen on building browser-level ‘Rights Management’ to restrict the web’s textual content. What emerged was, momentarily, a version of what Yochai Benkler describes as ‘a battle over the institutional ecology of the digital environment’(3). On one side, proprietary font foundries and vendors, on the other side, a wish to see libre software and open technology stay central at the heart of the web.
Putting up Hurdles
In the last few years more foundries have abandoned ideas of browser-side restrictions and instead adopted a more pragmatic approach to font usage across the web. Instead of aiming restriction at the end user, some commercial webfont services are trying “putting up hurdles” at the font server end. For example, Adobe’s Typekit and Extensis’s Webink create barriers of, for example, address checking, concealment, and the segmentation of font files. The aim is clearly to create new revenue whilst protecting intellectual property. This approach tolerates some potential for unlicensed use against an understanding that normal users will not have the knowledge or inclination to climb or by-pass these hurdles.
These ‘Pay-as-you-serve’ webfont services can be practical for some web designers, for example, allowing the typesetting of exact typefaces also used in printed material. But what about the makers of the majority of the web’s typographic content, who may need something without specific restrictions imposed by proprietary licenses, or simply need the ease of open services, or just want to use totally free fonts?
Produsers and Users
“Open Source is powerful because it’s an alternative to the status quo, another way to produce things or solve problems. And in many cases, it’s a better way. Better because current methods are not fast enough, not ambitious enough, or don’t take advantage of our collective creative potential.”
- Thomas Goetz (4)
There is a definite role for proprietary font licensing on the web and there is no point undervaluing the qualities it can bring, but, in the context of the technologies and new markets of the web, proprietary licensing places restrictions that encumbers use. In fact, proprietary licensing is specifically designed to encumber use. On the other hand, fonts released under free or libre licenses allow and encourage greater freedom for type across the web. Once freely available, these fonts can become a viable example of what Thomas Goetz describes as, a fast and ambitious alternative. Google’s webfont directory is an example of Goetz’s notion in action, quickly building an ambitious library of ‘libre’ webfonts to produce a technology driven service in a way that proprietary foundries had either not tried to do, or had been slow, or less willing to do.
On the back of such free and easy accessible webfonts, other platforms and services, such as WordPress, Weebly, Drupal, Jimdo, etc, have been able, in turn, to enable typographic and theme diversity through the use of free and easy webfonts. For example; blog, web and CMS theme developers tend to need to be able to offer typographic choice where extra licensing is non-existent, where there are no terms or conditions agreements before fonts can be used, where there are no restrictions or fees pegged to usage, and where there are no restrictions on commercial use. Free fonts can deliver all of these these simply and freely, whereas fonts covered by proprietary licensing must compromise in one area or more in order to protect the fonts from unlicensed use and to ensure revenue from font usage. In the end, the sheer number of users of free webfonts highlights that they are the most effective way to set type amongst the free and open textual content of the modern web.
The Democratisation of Content
“How we make information, how we get it, how we speak to others, and how others speak to us are core components of the shape of freedom in any society.”
- Yochai Benkler(5)
“To put it crudely, you cannot lay your hands on capital like you can lay your hands on the written word”
- Jacques Rancière, The Politics of Aesthetics.(6)
“The age of the printing press is giving way to the age of the computer networks. And this change in copying technology changes the ethical context in which we have to look at the consequences of what copyright law says, and the same laws that were painless, easy to enforce and arguably beneficial, in the age of the printing press, are none of those things today.”
- Richard Stallman(7)
Type is highly relevant at times of societal change, because without access to type, communicating, publishing and sharing unauthorised ideas, as text, is constrained. The new utilisation of moveable type in the sixteenth and seventeenth centuries enabled the growth of diverse threads in early modern Europe such as anti-authoritarianism, Nonconformism, The Enlightenmnet and Protestantism . The new, relatively cheap and mobile, technologies of electric typewriters and photocopiers enabled the emerging counter culture publications of the 1960′s and ’70′s.
A web dominated by proprietary fonts would be a web where rich typography would end up confined to certain sectors or districts of the web. At a time when the free-ness of net based communications comes more and more into focus, it may be important that the typesetting of text on the web becomes more free.
Vernon Adams, June 2012
(1) Real Fonts on the Web: An Interview with The Font Bureau’s David Berlow
by Jeffrey Zeldman, David Berlow. http://www.alistapart.com/articles/realfontsontheweb/
(2) Eye Magazine No.75. ‘Monitor: End of default’ by Simon Esterson, Jay Prynne.
(3) Yochai Benkler, The Wealth of Networks – How Social Production Transforms Markets and Freedom. http://www.jus.uio.no/sisu/the_wealth_of_networks.yochai_benkler/
(4) Thomas Goetz,’Open Source Everywhere’, Wired Magazine #11, 2003.
(5) Yochai Benkler, The Wealth of Networks – How Social Production Transforms Markets and Freedom. http://www.jus.uio.no/sisu/the_wealth_of_networks.yochai_benkler/
(6) Jacques Rancière, The Politics of Aesthetics, p.55
(7) Richard Stallman, ‘Copyright versus Community’; a talk given at Ravensbourne College of Design & Communication, UK, 2004.
Ttfautohint is a free autohinter for Truetype fonts, that aims to automate the creation of hinting instructions for Truetype fonts rendered on Windows XP, Vista and Windows7 and higher. Version 0.9.12 of Ttfautohint includes improved support for ‘Stem Width and Stem Positioning’ under Microsoft’s Cleartype font rendering.
Ttfautohint – Stem Width and Stem Positioning
Ttfautohint offers two different routines to handle stem widths and stem positions of Truetype fonts rendered under ClearType: ‘smooth’ and ‘strong’. The former uses discrete values which slightly increase the stem contrast with almost no distortion of the outlines, while the latter snaps both stem widths and stem positions to integer pixel values as much as possible, yielding a crisper appearance of Truetype fonts under ClearType.
The result is better browser rendering under Windows XP, Vista and Windows7, of webfonts that have been autoinstructed with ttfautohint. For example compare the following renderings of Ubuntu Regular. Top line is Ubuntu Font with no hinting at all, middle line is the original professional manually hinted font, and the last line is Ubuntu Font autoinstructed with ttfautohint;
At 10 pts;
At 20 pts;
‘Strong’ or ‘Smooth’ Positioning?
Ttfautohint’s ‘smooth’ and ‘strong’ stem positioning can be toggle on/off for 3 different Windows text rendering models; Standard Greyscale, GDI (Graphics Device Interface) ClearType, and DirectWrite ClearType. How these settings effect Truetype font rendering on Windows can be seen in the screenshots below.
Under DirectWrite ClearType the difference is less significant. Curves at particular text sizes will appear slightly crisper under ‘strong’ positioning. In the example above, ‘strong’ positioning has been applied to the upper line of text, and ‘smooth’ positioning to the lower line. Differences can be seem most clearly on the ‘a’ and ‘r’ characters. Difference is also seen on the ‘e’ character, however the middle ar of the ‘e’ becomes too wide under strong positioning.
The difference between manually instructed Truetype fonts and fonts auto-instructed with Ttfautohint under Windows Cleartype (GDI and DirectWrite) is getting smaller. For example comparing a number of details in text rendering it is noticeable that mostly rendering is comparable, though some details are better rendered under manual or auto instructions. The shots below show that manual hinting has given clearer rendering of a ‘caron’ at 10pt, but the same font (Ubuntu) auto-instructed renders the lowercase ‘eth’ clearer. Original manual hinting is the upper shot in each pair. Magnification is x800, x400, and actual size.
Ubuntu Font @ 12px – Windows 7 – Firefox 13 – DirectWrite ClearType | Original manual hinting
Ubuntu Font @ 12px – Windows 7 – Firefox 13 – DirectWrite ClearType | ttfautohint -x 0 -w ‘gGD’
Ubuntu Font @ 12px – Windows 7 – Firefox 13 – DirectWrite ClearType | Original manual hinting
Ubuntu Font @ 12px – Windows 7 – Firefox 13 – DirectWrite ClearType | ttfautohint -x 0 -w ‘gGD’
There are still some rendering issues with ttfautohint generated TrueType instructions. For example whilst the ‘strong’ stem positioning routine snaps both stem widths and stem positions to integer pixel values giving stems crisp rendering it can also cause some distortion, for example to diagonal stems at certain point sizes. For example, below the rendering of the Ubuntu Font under Windows GDI ClearType is similar between the original manually hinted font and the ttfautohint instructed version, except that the diagonal stem of the lowercase ‘s’ is rendered marginally too thin. Compare the similar rendering of the lowercase ‘a’ compared to the differences of the lowercase ‘s’ in the following screenshots.
Ubuntu Font – WinXP – GDI ClearType | Original manual hinting
Ubuntu Font – WindXP – GDI ClearType | ttfautohint -w ‘gGD’
Looking closely at x1600 magnification we can see clearer that the lowercase ‘a’ is rendered very similarly in the manually hinted and autohinted versions, but the diagonal stroke of the lowercase ‘s’ is rendered thinner in the autohinted font. The autohinted font is on the right in each pair of characters
Standard Windows Greyscale Font Rendering
Traditionally, manually hinted fonts used the TrueType ‘gasp table’ to render text at smaller sizes, e.g. below 16ppem, with no anti-aliasing. The lack of font ‘smoothing’ combined with hinting on both the y and x-axis gave these fonts crisp horizontal and vertical stems. Ttfautohint does not hint fonts across the x-axis (though this maybe be implemented later), so without anti-aliasing vertical stems could suffer from uneven rendering. Therefore fonts auto-instructed with ttfautohint have a ‘gasp table’ with anti-aliasing being applied for all ppem sizes. The result can be seen below; top is the original manually hinted Ubuntu font, lower is the same font auto-instructed with ttfautohint.
We can see the detailing of these two approaches closer at x400 magnification;
Italics and Other Weights
Regular weighted roman fonts are often the most straightforward to instruct, whereas bolder or lighter weights and sloping romans or italics can present more issues, especially for autohinting. The following shots result from testing Ubuntu Font Light and Bold weights and the Regular weighted italic.
[ above - Ubuntu Font Regular Italic | WinXP Cleartpe | Chrome | ttfautohint -w gGD ]
[ above - Ubuntu Font Light | WinXP Cleartpe | Chrome | ttfautohint -w gGD ]
Browser Tests & Screenshots
The following screenshots are from tests carried out on Windows 7 and Windows XP with default ClearType settings and standard greyscale anti-aliasing. Browsers used are Firefox 13 and Chrome 20. Fonts used in these tests were Ubuntu and Droid Serif, both downloaded from Google WebFonts.
The aim of the tests were to compare the browser rendering between the original manual TrueType ‘hinting’ and the autohinting created by TTFAutohint on various webfonts, browsers, and rasterisation engines.
Droid Serif Regular – Windows 7 | Cleartype – GDI & DirectWrite
Droid Serif Regular – Windows XP | GDI Cleartype
Ubuntu Font – Firefox 13 & Chrome 20 | Windows XP – Standard Greyscale & GDI Cleartype
One long-ish term project is to create versions of Nobile and Mako (above) customised for Android devices. This is likely to result in an amalgamation of features from both fonts into a new face, to give three GUI fonts for portable and handheld devices.
(above – Mako in progress on Android 2.3.3)
(above – Nobile in progress on Android 2.3.3)
(above) ‘Norican’ is a script based on the Stephenson Blake typeface ‘Glenmoy’ with elements from numerous other old script faces mashed in.
(below) Digital sketches for a new face. The diacritic marks are snatched from circa 1920′s Deberny & Peignot specimens.
‘Rammetto’ (that was ‘Bassbin’) is now available from the Google Webfont Directory at http://www.google.com/webfonts/specimen/Rammetto+One
It seems that the Occupy Movement has adopted Oswald Font as the movement’s default protest font. I am honoured and intrigued. Ironically i had already started on a font to donate to OccupyDesign before i realised Oswald had already been adopted and used for a while.
In fact Oswald was semi-inspired by the condensed gothics often favoured by the 1960s underground political presses. Because the posters, magazines and pamphlets were made on old presses, ‘Letrasetted’ or simply cut and pasted, the type of the political underground had an urgent, punchy and ‘unauthorised’ feel (and it was of course all 3 of those things).
‘Ponyland’ started as a mash-up of Francois, Open Sans, and Cantarell (see post here). A light version has been started, being further based on aspects of Novarese’s ‘Recta’ face (see below as ‘Chumba Bikes’ and ‘Now Open, Welcome’). The next phase is to bring this light font and the regular weighted original ‘Ponyland’ together into a single face. The regular weight of this can be seen below (as ‘DESGARÇON’ and ‘Oceanside Los Angeles’). The likelihood is that the face will keep the slightly extended uppercase of the light font but introduce some of the less rounded curves of Ponyland’s original lowercase curve-to-stem junctures (see lower, below) eg found on the ‘n’, ‘u’, ‘b’, ‘d’, ‘p’ and ‘q’. The light Recta-esque font will be kept for cross-breeding into future font designs.
(above) top text is with ‘text-rendering:optimizeLegibility’, on. Lower line is same text rendered with ‘text-rendering:optimizeLegibility’ toggled off. The lower line is correct letter spacing for the font. Letter spacing of upper line is inferior. See the ‘þjóða’ of ‘þjóðarinnar’, and, ‘geome’ of geometrísk.
(below) same screenshot enlarged to clarify differences between having text-rendering:optimizeLegibility on or off. Top line is on, lower line is off.
(below) Magnified even greater the difference in text rendering can be seen clearly. Upper line is with ‘text-rendering:optimizeLegibility’, on. Lower line is with ‘text-rendering:optimizeLegibility’, off.