Azuro – A New Typeface For Reading On Screens

Axel, an economical, highly legible font family optimized for on-screen use in office apps such as Microsoft Excel. Last year 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 theirresistibly 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 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…"