Azuro – A New Typeface For Reading On Screens

FontShop has always been concerned about all aspects of legibility, especially in new media. Two years ago FontShop AG (FontShop Germany) released a brand new typeface by Erik SpiekermannAxel, an economical, highly legible font family optimized for on-screen use in office apps such as Microsoft Excel. Last year FSI FontShop International was the first foundry to offer a type collection specifically aimed at web designersWeb FontFonts, available in .eot and .woff font format, and optimised to achieve the best possible legibility on screen. And today FontShop AG publishes its second font product – Azuro, a new four-weight font family developed by Georg Seifert and mastered by Jens Kutilek. Azuro is probably the first type family whose appearance on screen was extensively tested on MS Windows, Mac OS and Apple iOS already during the earliest stages of the design process, and whose design was informed by the results of this continuous testing. The TrueType flavoured OpenType family comes in the four basic styles Regular, Italic, Bold and Bold Italic, with 589 glyphs per font including the Greek and Cyrillic alphabets. The typeface is available as Azuro Office for use on desktop computers (€199) and as Azuro Web in .eot and .woff format (€149). However, to celebrate its release FontShop offers both versions at the irresistibly low introductory price of €19.90 each until May 31, 2011.


Georg Seifert: type design geek and programming genius.

Georg Seifert is a young talented type designer and programmer. While still studying at the Bauhaus University in Weimar he started working on his very first type design Graublau Sans, released six years later in 2005. Since 2006 he is developing his own type design application Glyphs, a font editor with usability and design in mind, and with a strong focus on streamlining the workflow. He also created the monospaced typeface Olivegreen, designed for personal use, for his own e-mail correspondence and for displaying programming code.

Jens Kutilek studied Communication Design in Braunschweig. After graduating he founded the web design agency Netzallee. He works at the font technology department at the Berlin office of FSI – FontShop International since 2007. Highlight of the Netzallee website is Comic Jens, a free alternative to the widespread and generally despised Comic Sans. Kutilek’s instrumental involvement in the mastering of the new Azuro font family is described in the latter part of this post.


Comparison between Azuro and three “standard” system fonts – Arial, Verdana and Lucida Grande. Take the time to get accustomed with the new shapes of Azuro, as our eyes are very much used to continuously seeing Arial, Verdana and/or Lucinda Grande on screen.

The Design of Azuro

Azuro is a sans serif typeface specifically designed for on-screen writing and reading. What differentiates this font family from other high-quality screen typefaces like Arial, Verdana or Lucida Grande is that Azuro has more character. This however is less for aesthetic reasons than for increasing legibility. The letter forms are based on the humanist shapes which serve as skeleton for serif faces, as well as on handwriting when this benefits the distinction between different characters – for example the double-storey ‘g’, the cursive ‘k’, the long tail on the ‘Q’, cap height smaller than ascenders, and so on; see the illustration below.

Similar to other screen fonts Azuro has generous counters, and the round characters are made as open as possible. Georg Seifert tested these characteristics on Macintosh screens, Windows screens and iOS screens from the first day of the design process. Every stroke and every curve he drew in Glyphs was immediately checked on these three devices and subsequently fine-tuned. Georg’s commitment went so far as to jailbreak his iPhone and hack the iOS system font Helvetica by replacing the original glyphs with the glyphs from Azuro. This allowed him to examine the behaviour of Azuro when mailing or twittering.

The image above shows the four basic weights in the Azuro font family – Regular, Italic, Bold and Bold Italic. The difference between Regular and Bold is more pronounced than in most other screen fonts (and more than in sans serifs anyway. This makes bold words and bold passages in the text stand out more in relation to the basic text, especially when text smoothing is activated.

The character set of each weight of Azuro is fully equipped with 589 glyphs, including the Greek and Cyrillic alphabets, as well as arrows, fractions, various types of numerals, mathematical operators, additional ligatures, and more.


Azuro has a knack for languages, and comes fully equipped with accented characters, Greek and Cyrillic.

The animation below shows an e-mail consecutively set in Arial and Verdana – the most commonly used screen fonts for e-mails – and Azuro (see the red keyword in the salutation). Although our eyes are used to see the ubiquitous classics, it becomes immediately apparent that Azuro is more lively and reads more pleasantly. As with any change from the norm this effect becomes gradually clearer once we have become accustomed to the higher quality and we are confronted with the inferior quality again. In a discussion with Fontblog Georg Seifert remembers how he became aware of this phenomenon. “The improved legibility of Azuro on screen was so obvious every time I saw friends’ devices displaying the standard system fonts. This made me realise how quickly my eyes had adapted to the good legibility of Azuro.”


Animated comparison showing three versions of the same e-mail, with text set in respectively Arial, Verdana, and Azuro.

Mastering Azuro

Frequently FontShop customers ask what font technology is, or what the FontFont type department does exactly. In the case of Azuro where FontShop witnessed the development from up close it is interesting to highlight the technological achievements in detail.

If we have to make a comparison, we can safely say that the importance of technology in relation to design is as vital in font production as it is in the automobile industry. Even if only one little screw was incorrectly tightened or an electronic component fails to work, any modern car is recalled to be serviced, as it could make driving the car unpleasant, or even outright dangerous. The same applies to digital typefaces. Of course no actual lives depend on fonts working properly, but large advertising budgets or entire corporate identities can be compromised by faulty fonts. When a type family is installed company-wide and doesn’t function properly this can cause considerable (financial) damage to the company.


Technical check of Azuro – computer analysis reveals which glyphs need to be checked (red), which ones have already been corrected (green), composite glyphs (light blue), and which glyphs need no work (white).

After Georg Seifert finished drawing, testing and adjusting all the characters as well as spacing and kerning the fonts and defining the kerning classes, the “bodywork” of Azuro (the raw version) was released into the hands of Jens Kutilek. He explains his role in the font production process: “It is always beneficial to have the raw fonts looked over by someone who hasn’t seen them before. During the creation process the type designer can become so involved after working on the fonts for such a long time that certain errors don’t register anymore. If someone new looks at the fonts with a fresh eye errors that went previously unnoticed suddenly become obvious.”

Initially Kutilek conducted some sort of entrance examination, which checked whether all the necessary characters were present, were correctly named, and had the correct Unicode value assigned to them. He also took a look at the metrics, the horizontal and vertical measurements of the characters. Already at this early stage he examined various details. Were the mathematical signs of the same weight and were they aligned on the correct height? Were the accented characters as wide as the corresponding base characters? Did accents shift or were they even missing in specific glyphs?

For the visual comparison of the four typefaces Kutilek relied on the Autopsy tool by Yanone. It allows placing next to each other the corresponding characters of all the weights in a type family, thus revealing inconsistencies very easily. Not only did he discover some incorrectly positioned accents but also missing diacritics which needed to be added to make the language support of the fonts compliant with the WGL4-Standard (Windows Glyph List 4). The kerning classes defined by the type designer were examined and completed where necessary.

Next Kutilek fine-tuned the character outlines, the lines and curves that describe the letter forms. Type designers primarily pay attention to the overall shapes when drawing characters, and not so much that the curves are 100% technically accurate. It can happen that tiny corners and dents in curves and overlapping shapes remain, which are fixed afterwards during the mastering process. Additionally the curves must comply with certain technical requirements to ensure that optimisation for screen runs smoothly. For example Bézier node points must be inserted at the extremes so pixel position of those points can be adjusted on-screen through hinting.


Azuro numeral 5 before (left) and after (right) outline fine-tuning. In the corrected character outline at the right extra node points – which are of crucial importance for screen optimisation – were inserted at the vertical extremes.

Up to that point in the development of the fonts the letter contours were defined in PostScript format, for the simple reason that most type designers are more familiar with, and draw more easily using PostScript (Bézier) curves. TrueType curves are based on different mathematical algorithms. If one however wants to produce fonts optimised for screen switching to TrueType is unavoidable. The next step was the conversion of the character outlines to TrueType format. This is why the new fonts are called “TrueType-flavoured OpenType – they are TrueType fonts, but with an extended character set and added typographic features thanks to OpenType technology.

Then came the hinting which took up a major part of the mastering time. Without hinting the fonts would look quite poor under MS Windows. Macintosh OS X however ignores this additional screen optimisation. To compensate for this Georg Seifert already made sure during the drawing process that the fonts looked as good as possible on Macintosh screens; as previously mentioned a singular approach for the design of a type family for on-screen writing and reading.


The Autopsy application developed by Yanone assists in finding consistency errors, for example incorrectly positioned diacritics (left).

The type of hinting applied to Azuro guarantees the best display quality under MS Windows with ClearType activated. When hinting for ClearType-supported character smoothing fewer TrueType instructions are needed than when hinting for black-and-white representation of the glyphs. This produces smaller font files. Above all the horizontal strokes of the characters need to be properly defined, so that they don’t become too thin on screen and disappear, or that due to rounding errors parallel strokes sometimes are one pixel, and sometimes two pixels wide. In addition the top and bottom edges of the characters are brought to the same levels to ensure a consistent baseline, x-height, and ascenders/descenders, so the characters don’t “dance”. Furthermore hinting must be applied across the complete font family to avoid that identical strokes are displayed at different widths in different characters, or that stroke widths in the italic weights are bolder than those in the upright weights.

Basic optimisation can be done with automatic hinting, yet further down the line every single character must be examined separately in order to remove redundant instructions and add instructions that were overlooked by the automated process. In between the hinting must repeatedly be tested in several type sizes and adapted whenever needed. Jens Kutilek describes his experiences with this phase of the production process as “I make myself comfortable and listen to music. When immersing oneself in hinting it almost becomes a meditative experience.”
The vertical metrics as well as the ascender and descender lengths and thus the line height are particularly tricky to adjust. If this is not done carefully the line height may vary depending on the operating system. It is neither allowed to vary when switching the typeface from the Regular to the Bold weight. Because the individual browsers interpret line heights differently the vertical metrics in the Azuro web fonts are defined in another way than in the desktop fonts. Otherwise position of the baselines would vary across the various browsers, which would be immediately noticeable when switching browsers.

The different fonts in the family must also be named correctly to ensure that style-linking works properly on all operating systems. However for a four-weight family this is relatively simple.

The technical characteristics of the fonts, such as the OpenType features, must be tailored to the desired font format. For web fonts minimizing the file size is of crucial importance. Everything that is not instrumental to the font must be removed. For example Internet Explorer does not support kerning, making kerning information redundant in EOT web fonts. The Azuro WOFF fonts contain OpenType kerning, and the desktop fonts also still include old-fashioned kerning pairs. Although it increases the font file size, this type of kerning is supported in older versions of MS Office. Minimal font file sizes are the alpha and omega for fast website load times. Whereas an Azuro Office font “weighs” approximately 135 K, the size of the corresponding web font lies around 35 K. For a website with two fonts that is visited a thousand times a day the smaller file size reduces daily traffic volume by 200 MB!


Azuro leaving mastering: error-free font data.

At the end of the road Jens Kutilek summarises: “Final generation of the font data proved to be problematic. The application FontLab Studio commonly used for this has actually become technically outdated, and can’t produce state-of-the-art OpenType fonts that are up to par with the current high standards.” Fortunately a solution is available in Just van Rossum’s tool carrying the inconspicuous name ttx. It converts the generated fonts into XML, an easily editable code, allowing final manual changes directly in the source code of the fonts. “This however is not for the faint of heart, because you must know very well what you’re doing.”

Jens Kutilek concludes: “The Azuro fonts are hand crafted in the true sense of the word…”


Tags: , , , , , , ,

11 Comments:

  1. Es una excelente propuesta en relación a la forma de ir visualizando sin perder de vista la legibilidad en pantalla, en buena hora por los diseñadores web que poco a poco se les está armando de más herramientas para poder hacer frente a todo lo que llega segundo a segundo. Innovar es sinonimo de siempre ir hacia adelante con las nuevas tendencia en la rama del diseño web.

    Posted by Juan Durán on May. 13, 2011
  2. Very interesting. It is hard to accept the claim that Azuro is any more readable on a screen than the other examples. Claims like “it reads more pleasantly” have nothing to do with research, it is a very subjective statement. The idea that Azuro is technically superior may be true but an untrained user’s eye does not see that. We are all so inured in Arial/Verdana and the like that making the leap is difficult.
    The second is that, to me, there is an off putting disconnect and excessive complexity with letters like “k”, “q” and others. Then it seems to me that the currently popular upright tall fonts (sorry I don’t know the name for that) are a phase and distracting in a block of text. Azuro suffers from this disadvantage.

    Posted by Charles Kane on May. 13, 2011
  3. While I agree with Charles that some of the descriptive language is subjective, I disagree that making a leap is difficult. I have been using webfonts for clients for a while now, and the nonstandard options out there are just as easy to read as Arial/Verdana. This font fits that description as well.

    I did notice, however, that the ellipsis character in the sample text was mangled at any point-size. At least, I’m assuming it was meant to be an ellipsis.

    Best of luck with this new creation; it looks like an instant classic to me!

    Posted by Greg on May. 13, 2011
  4. It would have been interesting to read the article in Azuro, as a sort-of experiment revealed only at the end of it. I do like the sample email, although it seems a little cramped.

    Posted by Will Entrekin on May. 13, 2011
  5. I am not an authority on typography, by all means, but there is something that disturbs me about this typeface. While I like the general shapes and weighting of the glyphs a lot, I think the anti-aliasing is very bad at small sizes. At http://www.fontshop.com/search/?q=Azuro I set the font size to 10pt, and I noticed that while some of the vertical strokes are clearly drawn with a 1-pixel width, other strokes fall between two pixels and become slightly greyed-out with a 2-pixel width. Compare for example the “d” and “n” glyphs.

    Posted by Sondre on May. 13, 2011
  6. I congratulate you for the extensive search and the hard work,
    but I have to say (as a greek native) that as it concerns the greek
    glyphs there are many issues to be solved.

    Especially in the italic version there is too much ‘exoticism’
    (a common misconception) and the glyphs look clumsy
    and out of date.

    Briefly, in my opinion, the most disturbing glyphs are:
    Lc roman:
    alpha (α), lambda (λ), xi (ξ), chi (χ), omega (ω), final sigma (ς)
    Uc roman:
    omega (Ω)
    Lc italics:
    alpha (α), gamma (g), zeta (ζ), eta (η), kappa (κ), xi (ξ), chi (χ), omega (ω), final sigma (ς)
    Uc italics:
    Upsilon (Υ)

    It will take too long to explain here the inconsistencies,
    so you may contact with me if you need any suggestions.
    Or —for a more professional opinion— with Gerry Leonidas
    (Senior Lecturer in Typography at University of Reading, UK).

    Posted by Christos Tsolerides on May. 14, 2011
  7. One can’t please all the people all the time at every size of every glyph on every platform, or maybe that goes without saying? Good product!

    Posted by Dberlow on May. 14, 2011
  8. I totally agree with Dberlow.
    Thanks for a very interesting read and I hope there are going to be more articles like this in the future. I also bought the typeface which I’ll be very excited to use on my (work in progress) web log.

    Posted by Robert on May. 14, 2011
  9. @Sondre – The renderer on fontshop.com does not use the web font versions. I am not 100% certain, but I think that due to the humongous amount of fonts in the database the system does not differentiate between web fonts and desktop fonts. As not all of the fonts are already available in web font format it uses the “standard” desktop versions for rendering samples.

    Posted by Yves Peters on May. 14, 2011
  10. Whoa, kudos from David Berlow! In the field of web fonts this means a hell of a lot. Georg and Jens can be proud. : )

    Posted by Yves Peters on May. 14, 2011
  11. I think I overstated my opinion above and in no case
    meant to reduce the value of the work done. My criticism
    is based on the personal taste and concept of how the greek
    letters should look like. I hope my proposal for design
    suggestions didn’t sound rude or arrogant. I am not
    a design guru; just an everyday user of greek letters.

    Posted by Christos Tsolerides on May. 14, 2011

Post a comment:

  •  

The FontFeed

The FontFeed is a daily dispatch of recommended fonts, typography techniques, and inspirational examples of digital type at work in the real world. Eat up.

letter2 banner

Archives

Subscribe

The FontFeed RSS The FontFeed Comments RSS