Typography on the Web

I’m pretty content. Almost all the things we got accustomed to in everyday (printed) typography are now also possible on the web — and more — if you only know and care enough about it. I don’t mourn poorly produced paperbacks when I can read a casual story on screen (and then delete it), nor do I miss huge format newspapers that pile up in my wastepaper and were always too large to read on trains anyway.

Of course, not everything we see and read on screens is fine typography, but that’s how it was in the early days of DTP, too — people using a medium and software who aren’t experts in the field yet — and how it still is for the majority of “offscreen” typography. Think sales flyers, cereal packaging or patient information. What we gained with modern web technology is the ability to have the layout (and even fonts) automatically react to outside conditions like screen format, device capabilities, user preferences, or even reading distance. Design is no longer about tailoring invariable content to one specific embodiment; the web forces us to think about typography in terms of parameters and to get clear about content versus form.

Typography hits us on two different levels: by the look of it, telling us if this is something we may like or should be interested in, and by the necessity to read it. If we have to read this time table, contract or assembling instruction we will do so regardless of its looks. We may find it more or less comfortable to read but our brains are incredibly capable of deciphering the most cryptic glyphs in context. If you want to attract designer or improve everyone’s reading experience in general, here are a few things to keep in mind, in any medium:

☞ Make sure the rendering of the typeface you chose is excellent in the size you chose, well spaced and of even color. Set font-smoothing options to “subpixel-antialiased” or “auto” for small text on light background for better legibility; “font-smoothing: antialiased” (full-pixel greyscale antialiasing) looks good in sizes above 60px.

☞ If you don’t have good control over hyphenation, don’t justify texts, especially not in narrow columns. Hyphenation on the web is still tricky and algorithms for anything but English poor. Java Script hyphenation is an option.

☞ Make use of the font’s built-in kerning. Switch on kerning (and other features like ligatures) via “font-feature settings” or “optimize-legibility” (read up on the quirks of the latter option).

☞ Beware of faux-bold and faux-italic. Don’t use the styling functions/tags if you don’t have the respective font available on the site. Check how you call the fonts in your font-loading CSS, either as a merged family (via “bold” or “italic”) or individually by its full name.

☞ Text doesn’t have to be large to be readable, dare to use sizes smaller than 24px, but check the rendering across all browsers and platforms if the type is smaller than 16px. Keep the apparent size (large or small x-height) of the font in mind.

Line-length (and other measures) should scale with your screen size, but set an appropriate max-width. You can use media queries to switch font styles relative to line-length, or landscape vs. portrait screen orientation. Short lines look and read well in a narrower, economic typeface, longer lines in a wider font.

☞ Adjust line-height and margins in relation to line-length. Text on small screens in short lines need only a little bit of leading and padding and are more comfortable to read when set quite compact (= less scrolling). Longer lines need larger line-height (120% of the font-size and more).

Size is relative. The closer we hold a text to our face, the smaller the nominal font-size, line-height and margins can be. (Check universal measures like arc minutes: size in relation to reading distance).

☞ Try size-specific variants of a type series for different text types and sizes, e.g. a family’s text styles for body copy and display styles or narrow variants for headlines. Multiple widths of a family can be used to accommodate longer and shorter headlines for instance.

☞ And lastly, mind ortho-typography sandtraps like „“ ’ — and –, especially in large headlines and pull-quotes. Correct quotes and dashes are easy to use on the web (make sure you spec UTF-8 encoding). These kind of things stand out saliently and contribute to the still prevailing skepticism whether good typography on the web is possible at all. It is.


Veröffentlicht in Type | Kommentieren

Deutscher Gießzettel für Antiqua

bei Lieferung nach Minima, von 48p aufwärts:

– – – – -::::;;!!??(())[[]]’’**»»««„„““111122223344555566778899990000A

Nach TGL 2967 (DDR Industrienorm). Weil ich das gerade brauchte. Vielleicht hilft es ja noch jemandem.

Veröffentlicht in Type | Kommentieren

Udo Jürgens – Indra

Ich habe da diese Theorie, dass ich nach einem Lied von Udo Jürgens benannt bin. Was sonst? 1970er Jahre, meine Eltern waren Schlagerfans, mein Vater hatte eine riesige Plattensammlung (zusammen mit dem hellblauen Käfer auch so ziemlich das einzige, was er mit in die Ehe brachte, wie meine Mutter ihm bis heute vorhalten würde). Erst sehr viel später erfuhr ich von der Mutter eines Freundes, einer Hinduismus-Expertin, was Indra noch ist.

Zurück zu Udo. 1970 war Indra die B-Seite von Babuschkin, einem Lied nach dem Muster seiner Erfolgsplatte Anuschka. Udofan dazu:

Nach dem Riesenerfolg mit Anuschka versuchte man auf dieser Welle weiter zu reiten. Babuschkin funktioniert nach dem gleichen Strickmuster, wie die Vorgängersingle und schaffte es wahrscheinlich auch aus diesem Grunde ebenfalls in die Charts (höchste Platzierung Rang 12). Die anspruchsvollere Nummer war aber sicherlich die B-Seite: Indra. Sie wurde von Udo Jürgens sogar in englisch aufgenommen und in Südafrika veröffentlicht.

Jetzt möchte ich das Lied natürlich brennend gerne auf englisch hören. Udo Jürgens ist gestern gestorben.

67-babuschkin_indra_frontCover Songtext: http://www.udojuergens.de/lied/indra


Veröffentlicht in Allgemeines | Kommentieren

I had never loved Helvetica

I had never loved Helvetica. Despite of being an omnipresent typeface, I really noticed and used her first in the form of the bland system font on a Mac Classic for my very first piece of typesetting as a design student. Although I can’t blame my unrefined typography solely on the crude font, I avoided her ever since. Besides that, it was the early 1990’s when humanist sans-serifs were the type to use and Meta had taken over as “the Helvetica of the nineties” (Robin Kinross). A time when it was the order of the day to “hate” Helvetica. Some colleagues never got over this.

I practiced a policy of peaceful indifference and our paths never crossed again. Until in 2007 when I was asked to research the history and development of Helvetica for a book and exhibition project on the occasion of the typeface’s 50th birthday. It was a timid approximation at first, but the more I learned about the genesis of the family, the background, the people and techniques involved, and above all saw the original drawings, proofs and corrections, there was a certain fondness growing inside of me. Meanwhile I find myself coming to Helvetica’s defense every once in a while, because she wasn’t meant to be as bland and unrefined as most of us digital natives got to know her. In fact, Neue Haas-Grotesk, as the foundry type version of Helvetica was called upon release in 1957, is a rather beautiful and soulful design.

Although being credited mostly to Max Miedinger alone, the development of the original Neue Haas-Grotesk in the mid 1950s owes just as much to Eduard Hoffmann, then president of the Haas typefoundry in Münchenstein near Basel. By the mid 1950s he recognized a decrease in sales and appreciation for the sans-serif typefaces in their program: Französische Grotesk and Normal Grotesk. Both designs, originally from 1890 and 1909 respectively, looked rather dated in the eyes of the leading Swiss typographers who preferred the more rigorous Akzidenz-Grotesk by Berthold instead. Hoffmann had planned to issue a new sans-serif since 1950 but hesitated facing the expenses. Now with the conspicuous rise of the “Swiss Typography” and the “International Style” the time had come.

Hoffmann commissioned graphic designer Max Miedinger, a former salesmen at Haas, to develop the new sans-serif which should be based on Haas’s reworking of Normal-Grotesk from 1954. Through his dialogue with customers, Miedinger had a good insight into the market’s demands and what makes a successful typeface. Work began in early fall of 1956 with the medium weight (Stempel’s official translation of Halbfett was Medium whereas other places may refer to it as the bold style). The new design was aimed to be presented at the Graphic 57 trade expo in June the following year. From very early on – even before the actual development began – Hoffmann consulted with prominent Swiss graphic designers and the weighty advertising departments of Basel’s chemical companies Geigy and Ciba. It was clear to him that the success of a new grotesk would largely depend on winning over the influential designers, because that meant the large printing offices would most certainly purchase the new typeface.

Over the following months a sedulous exchange of correspondence, drawings, and proofs between Miedinger and Hoffmann took place. Hoffmann elaborately documented the whole development process in a notebook. The new design was continually compared to samples of the competitor Akzidenz-Grotesk as well as Haas’s “old” grotesks. Its most unique new features were the consistently horizontal terminals, the large x-height, and the extremely narrow sidebearings. Never before were designers able to set type this tight. These features result in the typical dense, vigorous color of Neue Haas-Grotesk. The two men didn’t always agree. Many details were discussed over weeks and modifications would continue until late autumn. Miedinger in particular was not satisfied with the capital R and considered forms with a more diagonal leg than the vertical “Schelter R” tail that we now recognize as “typical Helvetica”. Also, the characteristic “a” with its drop-shaped bowl got its final form only after the inaugural presentation at the trade show.

The response to the new typeface was positive throughout and Neue Haas-Grotesk became an immediate success. Miedinger promptly took up work on additional weights. However, the competitors didn’t sleep either. Also in 1957, Adrian Frutiger’s Univers was issued by Deberny & Peignot and the German Bauer foundry published their Folio, both for hand-composition. For machine composition, the Monotype system was prevalent in Switzerland and with it Monotype Grotesque.

Meanwhile the rivalry among the different Swiss design schools and influential protagonists of the Swiss Typography in Basel and Zürich was is full swing and grew into a rivalry of the new typefaces Neue Haas-Grotesk and Univers. Competing for the favour of the influential designers, Haas countered Emil Ruder’s bias for Univers in Basel by commissioning leading Zürich designers like Josef Müller-Brockmann for work. The success of Neue Haas-Grotesk has to be thanked to effective marketing from day one. Articles, ads and supplements were placed in all relevant magazines, and extensive specimens designed by Hans Neuburg and Josef Müller-Brockmann. Most notably Haas issued a costly binder called “Satzklebebuch” with dummy texts in all styles and sizes, making it very convenient for typographers to lay-out pages. But Hoffmann knew that for truly challenging the competition, it was important to make Neue Haas-Grotesk available for machine composition.

In June 1959 Hoffmann took up negotiations with D. Stempel AG in Frankfurt, Germany, who held 51% of Haas’s shares. Besides producing foundry type, Stempel also manufactured the matrices for Linotype composing machines. The Germans were skeptical. Only five years earlier, in 1954, had they adapted Haas’s Normal-Grotesk for the Linotype which did not sell very well. Also the taste for sans-serif typefaces was considerably different across the border in Germany at that time. With a list of 62 potentially interested Swiss printers, Hoffmann was able to win Stempel over. The name “Neue Haas-Grotesk” however was deemed not suitable for an international market. Heinz Eul, sales manager at Stempel, suggested “Helvetia”, Latin for “Switzerland” but Hoffmann was not convinced, especially since a sewing machines manufacturer and an insurance company already carried that name. Instead he suggested “Helvetica” — the Swiss.

In the beginning only the Linotype version, issued in 1960, was called Helvetica. The type for hand composition was continued to be sold under its old name for several years (later at Stempel as “Helvetica A”). This made sense because the design had to be altered significantly to meet the requirements of the Linotype system. The Linotype machine casts one line of type at a time from a row of individual matrices which are assembled automatically by typing the text on a keyboard. One matrix holds two forms of the same character, usually either regular and italic, or regular and bold. As such, both forms on a matrix have to be exactly the same width. This “duplexing” inevitably leads to compromises: italics often appear to be too wide, bold styles on the other hand too narrow. Kerns – parts of a letter that extend onto the following sort – were not possible, which resulted in the typical narrow f’s in Linotype fonts.

In the case of Neue Haas-Grotesk the size of each glyph on the body had to be slightly reduced to accommodate uppercase accents. The italic was completely redrawn by Stempel, as Haas’s version was regarded “not good enough”. The Medium was made slightly bolder, and the spacing of all styles was adjusted, making the Regular “lighter in flow” and the Medium more dense. It was not a premiss that the two typefaces had to be fully compatible since they were usually not used together at the same size. Hoffmann had no qualms about the changes as long as the overall design and proportions were maintained.

The immediate success of Neue Haas-Grotesk and Helvetica put pressure on both Haas and Stempel to issue additional weights and styles as quickly as possible. Styles of older typefaces were hastily tweaked and renamed “Helvetica” to meet the demand for a larger family, leading to many inconsistencies in design and proportions between the various fonts. The bold expanded style of Normal-Grotesk for instance was cast more tightly and adopted as “Helvetica Bold Expanded”. Similarly, Commercial-Grotesk — a sans derived from an Egyptian called Superba by cutting off the serifs — was respaced and adopted as Helvetica Medium Condensed, Bold Condensed and Compact (two years later, in 1966, revised by Matthew Carter and Hans Jürg Hunziker as Helvetica Compressed). Only the italic weights were fully original drawings. This stands in great contrast to Univers, which was planned as a systematic family right from the outset.

From the late 1960s on, further development of Helvetica was entirely taken over by Stempel in Frankfurt. They reworked Haas’s ad-hoc-additions of condensed and expanded styles, and added a Light and Light Italic. Hoffmann was right. The availability for the Linotype and the international distribution contributed enormously to Helvetica’s success, especially in the United States where the Linotype was the prevalent composing machine. Albeit not very systematic at first, the family grew into a large, versatile series of various widths. It was available in sizes as small as 5 pt, cast from extra hard alloy, up to the striking, large Poster styles — my personal favourite — in wood, aluminum or plastic. There were also several alternate characters available, most notably a capital ‘R’ with diagonal leg. Upon customer request Stempel provided a third form of ‘R’, in the so called “Futura-form”, an ‘A’ with round top (uh!), a single story ‘a’ or a ‘y’ with a straight descender.

Because of its wide spread, Helvetica was always among the first typefaces transferred into a new technology. However, almost all changes came with sacrifices to the original design, for instance the switch from metal to photo-typesetting in the late 1960s. For metal type, separate matrices were created to cast each size of a typeface. This allowed the design to be adjusted for the different sizes, optimizing spacing, proportions, and weight as needed. Photo-typesetting on the other hand enabled the infinite scaling of just one master design. To preserve at least some of the adjustments traditionally made for different sizes, foundries provided up to four sets of masters to be used for different size ranges. Another problem was the undesirable rounding of sharp edges in the photographic process. To work against this, the letter forms were drawn with exaggeratedly pointed corners and notches. Also, the width and spacing of all characters had to be reworked. While Linotype hot-metal machines justify the lines by means of mechanically expanding wedges — the “space bands” — phototype systems, as well as the Monotype machine, have to calculate the line-length and wordspaces from the width of the characters. Because computing unlimited spacing variations was not possible back then, the width of all characters had to follow a rather coarse 18-unit system (later 54 units). This again implied that all styles had to be redrawn.

When Helvetica was adapted as one of the first typefaces for digital typesetting — initially as bitmap fonts in the 1970s, later as outline fonts included in the first version of PostScript — many of the design limitations from analog systems were carried over to the digital realm. The version of Helvetica that comes with Macintosh’s operating systems today still retains the 18-unit width system from the phototype era. Many of the curves lack finesse and the italic was created by automatically slanting the roman. The adjustments for different size ranges were given up for a one-size-fits-all master drawing and spacing. In 1982 Linotype set out to revise and systematize the hodgepodge of fonts Helvetica had become over the years. Adopting the numeric naming system from the former competitor Univers, styles and weights were coordinated and complemented. The height of all capitals and lowercases were aligned throughout the family. Yet the wish for regularization and cohesiveness led to new compromises: condensed and expanded styles required squarer forms in the normal widths, again sacrificing some of the personality of the rounder original.

In 2004 designer Christian Schwartz was commissioned by a British newspaper to digitize Neue Haas-Grotesk. He calls it a “restoration”. With “as much fidelity to the original shapes and spacing as possible”, he carefully redrew the typeface to match Miedinger’s original forms. The series is comprised of two families: a display version retaining the characteristically tight spacing of the original’s larger sizes, and a text version which is slightly sturdier and more loosely spaced for smaller sizes. Furthermore, he incorporated the alternative glyphs for “a”, the straight-legged R and the original ç, as well as additional numerals and other amenities, but the essence of Neue Haas-Grotesk was preserved throughout.

Alfred Hoffmann, son of Eduard Hoffmann and former CEO of the Haas foundry, witnessed the development of Neue Haas-Grotesk and Helvetica for over 50 years. Upon seeing proofs of Schwartz’s new Neue Haas-Grotesk he was delighted: “There can be no greater present for the founding fathers. Almost better than the original”, he said.

I agree.


A selection of related images in my Flickr stream.



Veröffentlicht in Type | Getagged , | Kommentieren

Live Type Research in Barcelona

For those who followed my talk this morning at ATypI in Barcelona, here are some updates as they unfolded just in the past hour. Thankfully, Nina Stössinger and Dan Reynolds told me after my talk that the (OMG-excellent!) Antikvariat Morris stand at the conference had a copy of the first edition of Tschichold’s Neue Typographie on offer.

This was the book Maxim Zhukov inquired about, if I knew whether Ideal-Grotesk or Venus was used. He did not include any images of it in his emails (and why I did not ask for some or researched photos more thoroughly at that point I do not know, sloppy practical type historian). Anyway. While I was already attending the conference, I exchanged some emails with Stephan Müller of Lineto about this book, too, and how he always liked the typeface it was set in — Neue Moderne Grotesk — of which he made a revival.

So, was Die Neue Typographie set in Venus/Ideal or a NMG/Aurora face? A peek into Glenn’s copy revealed, it was a Wagner face of whatever name or version. Since the book was printed in Berlin, maybe from a local foundry there, e.g. Böttger/Berthold who carried that design under the name Breite Grotesk P. Robin Kinross writes in his introduction to the English edition that they used “a” Akzidenz-Grotesk. Haas’s version of NMG was called like this though I find it unlikely that a printer is Berlin acquired their type from Basel.

Below my poor phone photos. I could not afford to actually buy the book, but as I was kneeing there taking the snapshots, Pierre came around and said, he’s going to buy it now and I can come take good photos of it later in Strasbourg.

This is why I LOVE type research, and our international type community!

Veröffentlicht in Type | 2 Kommentare

Typeradio Interview

My friends at Typeradio posted an interview with me this week which we recorded last December in Saarbrücken when Liza and Donald were over for a workshop at HBKsaar. Among other things, we talked about how I got into typography, Helvetica, Fonts In Use and typeface classification.


Veröffentlicht in Type | Getagged | Kommentieren

Students and font licenses

Below, a comment from a Typedrawers discussion from last year that sparked my list of educational discounts for fonts. Recently, a friend who will take a new teaching position in the fall, asked my advice about classroom licenses and purchasing font collections, so perhaps this note is of help to more people here, too. 


I teach undergraduate and graduate students and I am very sure all of them but maybe the very beginners have/horde collections of (free) fonts I don’t want to know how and where they got them from. But I am totally to blame for that, too, at least in parts. Because I want them to practise choosing (the right) typefaces as much as possible, and to look beyond the tellerrand of fonts that come with the OS or Adobe applications. (These are actually almost banned by me). We have quite a big collection of classic typefaces (Font Folio and URW) and some hand full of newer typefaces, but I also want them to learn how to research what type foundries and offerings are out there, what fonts cost, how they can find the right typeface for their design (not one for the whole group), and also how to test these typefaces and make mockups without having the font files. Some developed really impressive skills in photoshopping MyFonts gifs and hacking FontShops rendering engine for their copy.

I like your idea [Silas Dilworth’s in the orginal message] of assigning a collection of fonts, and especially the class-room-multi-user idea (if I understood it correctly). But at the end of the day it all boils down to art schools without tuition fee, like in Germany, don’t have the funds to buy font licenses on a regular basis. The problem is not so much to get a license for 1–5 computers but to estimate and oversee bulk licenses, and come up with the budget for it. The students are usually using their own laptops in school. We for instance don’t have any school workstations or computer pools anymore where I would install the fonts. How many seats do I have to get with a changing number of students between 4 and 30? Are the foundries OK with the students installing them on their private computes, not the school machines? We don’t have a bookstore and our school is very small. Nobody wants to do the extra admin work, even I am not keen on that although I would do everything I possibly can to mediate in this matter.

Of course, students buy paper, computers, pencils and books for school, too, but only rarely are they willing to pay for font licenses for school assignments (some older students are starting to, though, my graduands did for their own final projects for instance). They want to try out the fonts before they buy, and I can understand that. It is only reasonably experienced designers who can judge a typeface by its specimen and imaging how it will behave in their real life environment, in their given language, before buying the cat in the bag. Stephen started this thread of foundry discounts on here, that is very helpful and I passed this on to the students. But honestly – they are not really helped with 10% off, they’d need at least 50% off to convince them. And then you have the problem again of what happens when they graduate. Are they to keep the license forever they paid at a student rate? Webfonts with trial licenses are at an advantage here, and I guess that all font-serving technologies could implement a testing-deal for matriculated students quite easily. Less so the small independent foundries I especially want the students to get to know of.

The best I seem to can do at the moment is emphasize and repeat every single day that it may be OK to show me this design idea with this font in class, but whenever they do something for the outside world or get paid for a design, they absolutely have to have their own license for the fonts they use. And I tell them how I obtained my collection of typefaces: by whenever I was asked to do something for a friend, family member or NGO for free (which was plenty), I said I would agree to go without payment but they have to pay for the font license. That always worked (and now I have quite a collection of script fonts :/ ).

Veröffentlicht in HBKsaar, Type | Getagged , | 3 Kommentare


Size specific designs are (luckily) more popular and talked about than ever before. Users as well as type and software companies are discussing how the use of different design variants can be made easier and more intuitive, or best even automated, so that if you set the typeface in a certain font-size, the appropriate optical size designed for this size range is chosen automatically.

In theory, this is a great idea. But the problem I see is, you can’t take the point size specified in the document as the only reference to determine what the ideal optical size to use would be. What if the user is setting a sign intended to be seen/read from further away? Or a poster, or boards for an exhibition? He might choose a large nominal point size which then prompts the application to switch to a deck or display variant, but the actual piece will be read at considerably larger reading distance = perceived in a much smaller size, more comparable to average body size at average sofa conditions. How to factor this in in an automated system? Minutes of arc?


Veröffentlicht in Type | Getagged , , | Kommentieren

The task of the designer is sometimes also to prevent things

20 years ago I learned this from Lucius Burkhardt in school. These days I turn to Mike Monteiro in my weak hours. “Why make something that isn’t great?”, as Jackson Cavanaugh puts it. Or rather, why release something that isn’t great? Make as much as you can, but think about what you put out into the world.


Veröffentlicht in Allgemeines | Kommentieren



Nick: I told Stephen the other day that I want to be Mike Parker when I grow up.
Indra: I told DB that I want to be Mike Parker, too. And DB told me that Kent wants to be Mike Parker.
Nick: I think everyone does. How could you not.


Photo by Jay Rutherford, TypeCon Milwaukee August 2012


Veröffentlicht in Type | Kommentieren