FontBook, The Team Behind The New App

The new FontBook app is a group effort, developed by long-standing editorial team members Andreas Pieper (code) and Mai-Linh Truong (database), with the collaboration of designer Jan Rikus Hillmann (user experience), and FontShop Germany General Manager and Fontblog editor Jürgen Siebert (chief editor). Additional assistance on the type classification came from type historian, typographer, author, and professor for Typography and Communikation Design at the Hochschule der Bildenden Künste Saar Indra Kupferschmid. It is quite amazing what a well-rounded, accomplished app FontBook has become, especially since this is only the inaugural 1.0 version. I had the distinct privilege of interviewing all the members in the FontBook app team.

The FontBook app for iPad development team, clockwise from top left: Andi Pieper, Mai-Linh Truong, Jürgen Siebert, and Jan Rikus Hillmann.

When and why was it decided that there was never going to be a printed FontBook any more, and how did that evolve into the plan to create an iPad app?

J Ü R G E N S I E B E R T| "The problems already started with FontBook 4 which was published in 2006. The number of fonts had increased dramatically by 30% to 32,000 samples from 90 foundries (25 more than the previous edition), and 100,000 additional references were included. We had to seriously compromise to make all those typefaces fit into one single volume. For example the showings of FF Meta (26 fonts) had to be downsized from three pages in FontBook 3 (published in 1998) to one page in FontBook 4, although in the meantime the type family had actually grown to an impressive 300 weights. We managed this by squeezing all the stylistic sets Reg / SC / LF / EXP / SC LF / SC EXP into only four lines of sample text; not very user-friendly. Yet this didn't prevent FontBook 4 from ending up 6,5 cm (2.6″) thick and weighing over 3 kg (6.5 lbs) heavy. A little known anecdote is that the binding had to be redone because the actual book was so heavy it 'fell' out of the hardcover in the first tests."

"After its publication five years ago the future of the printed FontBook became an on-and-off discussion without ever coming to any satisfactory conclusion. Eventually it became clear it was very unlikely there would ever be a new printed FontBook, and for a while it looked like the FontShop website would remain the only way to browse, search and purchase fonts from FontShop. Expanding FontShuffle to become a FontBook for iPhone seemed impractical because of the limited screen size. However the emergence and rapid adoption of the iPad by the general public last year offered unprecedented new options. In December 2010 Joan Spiekermann and myself decided to explore the possibility of an iPad version of our catalogue. One month later we had established a development team comprised of FontBook veterans Mai-Linh Truong, Andi Pieper and me, plus UX-designer Rikus Hillmann. Within 10 days – which was record timing – we developed a working prototype that we presented at a board meeting by the end of January 2011, in order to get a development budget. The board was thrilled with the concept, and approved the project. From there on everything went smoothly, even faster and better than estimated, as we did the job in just five months, and with ten times more content than was originally planned."

Jürgen Siebert, FontShop Germany General Manager and Fontblog editor

On a conceptual level – and regardless of the fact that FontBook is an actual book and the iPad app an application – what are the major differences (and similarities) in approach of the data that needs to be treated?

J Ü R G E N S I E B E R T| "Our initial challenge was that the FontBook database needed to be fundamentally rearranged. Our first concern was to make the style classification much more detailed. For practical reasons the FontBook only had 8 very broad classes. FontShuffle, our free iPhone app. Using this as a basis, and with the help of professor and type historian Indra Kupferschmid we created a similar system for the FontBook app v 1.0: 7 main type categories with 5 subclasses each."

Professor Indra Kupferschmid refined the FontBook classification.

How did you go about fine-tuning the type classes?

I N D R A K U P F E R S C H M I D| "The classification is based on earlier research I had done, as well as the classification that was derived from that for the Fontshuffle app. The idea behind the sorting according to form model is that finding and comparing/combining fonts is made easier. We tried to make the subclasses consistent; for example we now have a humanist serif, sans, slab and script group. Agreeing on the right names for the groups in both German and International English turned out to be quite hard though. Once that was done I assigned every single typeface by hand in a Filemaker database. Yes, umpteen evenings. I wish I had had the time to go through them all again and check them a second time, so I guess we will still find the occasional typeface among the almost 7500 which doesn't sit quite right."

Every typeface was assigned to only one sub-classification. Were there many difficult choices?

I N D R A K U P F E R S C H M I D| "That a typeface can only belong to one class was a restriction in the database which made the sorting very difficult at times. Is a typeface with sturdy serifs and stroke contrast a serif or already a slab (e.g. FF Tisa, FB Ibis)? Also deciding when a typeface does have so much flavour that it belongs to the display category or not was tricky. I had to constantly imagine by which means a potential user would want to find this particular font, because the categories will mainly be used for browsing. If someone is looking up a specific typeface he will probably do this via a search for the name or designer."

You have completely left behind any references to FontBook as a "book". How did the concept for the characteristic interface originate and evolve?

Mai-Linh Thi Truong, FontBook databank management, FSI – FontShop International

M A I - L I N H T R U O N G| "FontBook, even in its printed format, has always been about innovation. Even with all the technology available today, it would still be a huge challenge to produce, since you'd still have the problem of having to load thousands of fonts and generate them in a printable format. In the mobile version, we had to address all of the same problems, i.e.: how do you crunch an immense amount of editorial information and visual data into a compact format that is easy to navigate and elegantly designed? We were very lucky to get veteran FontBook programmer Andi Pieper and UI-designer Jan Rikus Hillmann to join forces creatively and come up with this idea of treemapping to solve the problem of cumbersome item lists. They also drew some inspiration from the realm of gamification, and from the iPad itself as a medium. So in addition to its straightforward lookup functions, the 'spirit' of the navigation also consciously incorporates a playful facet that encourages you to hop around and explore through quantum leaps and non-linear pathways."

Jan Rikus Hillmann, UX designer of FontBook, burningbluesoul.com

J A N R I K U S H I L L M A N| ""Even on the iPad, there's no way to swipe your way through a 1700-page bible like the FontBook. Even hardcore type fanatics would end up in the hospital because their fingers would fall off, and the touchscreen would be dripping with blood (ever tried to clean one of these sonofabitches?). So we had to find another way to access the font info. We kept asking ourselves: "how do you find a needle in a typestack?" Should we just dive right into the stack? But in the end it was simple to find the trick. Ultimately, we didn't question, we simply did: while researching visual idea resources for FontShop, I found plenty of systematic approaches that could apply to the problem of structuring font families visually, for example periodic tables, cool abbreviations, and all that good scientific-looking stuff that could be used to win typographic hearts and minds… yes, we are talking real science here."

"I've also always been a fan of info-viz tile systems, but at the same time I kept thinking how I could extend this to incorporate a substantial interaction approach and a visual representation of information. Plus simple usability, playful interaction and good navigation clues. At the same time, Andi Pieper, who was in charge of the native programming, also needed some creative coding challenges to keep him calm and stop him from being all grumpy from having to battle day and night with the huge amount of information and the insane complexities of the database. So he came up with some very amusing and witty stuff including the spangly star visual that ripples out when you tab a favorite, and the 'dive-into' animations."

"Our first meeting was hilarious. Andi, being Austrian, and Austrians being a totally reticent bunch, and me being a Frisian (North German), and Frisians also being not terribly talkative, got together and had a very un-talkative kick-off meeting, trying to persuade each other with image-based interaction moods, screenshots of websites and lots of wild gestures that we both learned from our iPad-savvy kids. So there we were, developer and programmer, watching pictures at an exhibition, and bang, boom, we were somehow inspired to build the biggest book on the planet containing things like Chinese and Arabic text!"

"Don't ask me how we came up with the idea for the interactive tree-map. All I can remember is that we had a couple of beers and concluded that lists suck, but that this is normal. The rest is tree-map history. And there you have it."

Andreas Pieper, programmer of FontBook, null2.net

A N D I P I E P E R| "Rikus came up with a few examples of treemaps. one of them was a Flash-based news aggregator. Then I remembered a small app that visualising the contents of your hard disk which I always found to be a valuable tool for getting rid of hidden cruft. It originated on MS Windows (SequoiaView) but there are implementations for the Mac as well (GrandPrespective). Doing some research on treemaps I found a bit of theory (471 k PDF) and code. Armed with this information and a small test database I implemented a proof-of-concept app demonstrating the interaction on the actual device. It worked really well and got everyone excited."

"There were of course problems. For example, if there are huge differences between the largest and the smallest items in the dataset, small items tend to be too small to touch. I solved that by doing some pre-processing of the value set. As a result the tile sizes that you see are not exactly proportional to the real values; they are skewed for usability. Another thing is the actual number of tiles shown on a single screen. There is a maximum of about 120 items per screen, beyond that the tiles get too small for a touch interface. At first we tried to solve this by adding more layers to the interface. You would tap on Designers, then S, then Sp, and then Spi to finally get to a map showing Erik's tile. So for some crowded letters like S you had to go through four or five navigation layers before you saw a single font. In the end (actually at the last minute) we decided completely scrap that idea and do larger, horizontally scrollable treemaps for the larger datasets instead. It was a real cliffhanger down to the last second."

How are the fonts rendered?

A N D I P I E P E R| "For obvious reasons, there are no fonts packaged in the app itself (except the interface font FF Good). It is all png images. Luckily, FontShop already has a sophisticated render farm in production for their website, so we just load everything we need from there. The app also manages a local cache to make sure we request samples only once and store them locally once we have them."

Does this mean the app can't be used without an internet connection?

M A I - L I N H T R U O N G| "Sure it can. Although all font displays are rendered online in real-time through the dedicated font-rendering servers, the editorial metadata is contained in the app. If you're on the go, the app includes a special "offline" setting that enables you to browse a reduced selection of specially prepared offline content temporarily, until you can get back online again and access the full content."

One of the drawbacks of the printed FontBook is that the content of each edition was outdated quite soon. How is this addressed in the app?

A N D I P I E P E R| "Obviously we wanted to have live database updates, but this was one of the things we had to stop working on and set aside for a future update in order to meet the looming deadline. So currently, database updates have to go through an appstore update cycle – whenever new material is added to fontshop.com, we can publish it shortly after as appstore updates. This works perfectly fine, yet it's not ideal, given the size of the app with all the offline content. In an upcoming version we will definitely have the mechanism in place to distribute database content updates directly. Appstore updates will only be necessary for functional enhancements, and there are quite a few in the pipeline."

M A I - L I N H T R U O N G| "Actually it's astonishing how many people still consider the FontBook to be the best font reference in the world. And as far as I know, nobody has had the balls to come up with something better or more comprehensive. Still, the mobile version is a huge improvement in many ways, since app data can be drawn from our regular fontshop.com webupdates. One of the great things about the mobile FontBook is that we can easily squeeze in vast amounts of data, far more than you could ever fit into one printed volume. The last FontBook was big enough to crack open your skull, but the new FontBook app will totally blow your mind."