The ABC App

Created by Bart De Keyzer and Frederik Jacques, This is how I learn my ABC is a beautiful little educational app (or digital book, should you prefer) for the iPad. Clearly aimed at children, the app is delightfully presented with clean, crisp illustrations, bold typography and subtle animations, and therefore will probably get just as many designers as parents buying it (and I’d guess most of the overlap between those). The app is in three sections, the first a tour through the alphabet where you get to admire the big illustrations, hear the sounds of the animals and read a fact or two about each one, and the other two are quizzes that let you match the letter to the animal or vice versa, and keep score on how well you’re doing.

There are some posters available to buy on Society 6 as well (there’s no page listing all of them that I can see, so I’ve linked to D for Dog here). I think the name of the app is a little too dominant on them, if you got a ‘full set’ it’d look pretty strange — I’d rather they be more traditional with the illustration and animal name front and centre with the name of the app much less visible. After all, if you buy these for your home, who are you advertising to?

Gå till webbsidan »

Beyond Helvetica: The Real Story Behind Fonts in iOS 7

This article by Jürgen Siebert was first posted on June 17, 2013 to the German The English translation for is by Maurice Meilleur.

There was no shortage of long-distance diagnoses of the typography in Apple’s recently presented mobile interface, iOS 7. The live-streaming keynote address from the WWDC developer’s conference last Monday hadn’t even started before the first typophiles started sharing their concerns on Twitter. The day before the announcement, our friend Stephen Coles was already deeply worried about the light weight of Helvetica on the display banners hanging at the WWDC venue in San Francisco:

“Skinny font as seen on the iOS 7 banner at WWDC.” Please, no.

— (@typographica) June 10, 2013

The next morning former New York Times art director Khoi Vinh compared the look of the new iOS to a cosmetics department:

Why iOS 7 looks like a makeup counter at Macy’s: My thoughts on iOS 7’s use of Helvetica Neue Ultra Light.

— Khoi Vinh (@khoi) June 11, 2013

And two days later, Thomas Phinney (formerly in the type team at Adobe) also took iOS 7’s typography to task:

1/2 iOS 7 preview: horrible type. Low foreground/background contrast & lighter weight Helvetica trending illegible.

— Thomas Phinney (@ThomasPhinney) June 13, 2013

2/2 Existing iOS Helvetica UI font was already anti-legibility. iOS 7 choices could make me run for the hills.

— Thomas Phinney (@ThomasPhinney) June 13, 2013

I should remind the early birds who were already chirping during the keynote:

  • that it will take at least another four months for the final version of iOS 7 to reach the market
  • that you can’t judge the effectiveness of a typeface in a dynamic OS from videos or screenshots
  • that no one commenting on the keynote said a word about iOS’s underlying font technology, which has obviously changed.

People did calm down over the subsequent days of the week-long conference. This was largely because of the presentations from Apple’s engineers devoted to ways the OS would handle fonts, in which they revealed the first details of the new technology.

Screenshot of the Music app in iOS 7 playing “Words” from the album “Sinking Ships” by The Bee GeesNo, text and words aren’t sinking ships in iOS 7.
In fact, it’s just the opposite.

In his session, Ian Baird, the person in Cupertino responsible for how Apple’s mobile products handle text, showed off what he called the “coolest feature in iOS 7”: Text Kit. Behind this name is a new API (application programming interface) for developers of apps in which text plays a critical role. Text Kit is built over Core Text, a sophisticated Unicode layout engine with a lot of power, the potential of which unfortunately hasn’t been very easy to tap in the past. But now, no one needs to struggle with it, because Text Kit is there to act as an interpreter.

Text Kit is a fast, modern layout- and text-rendering engine, easy to maintain through settings integrated into the User Interface Kit. Those settings give developers full control over all Core Text functions, so they can choose very precisely how text will behave in all user interface elements. To make that possible, Apple has revised UITextView, UITextLabel, and UILabel. The good news: this means the seamless integration of animation and text (the same principle behind UICollectionView and UITableView) for the first time ever in the history of iOS. The bad news: this means existing text-heavy apps will have to be redeveloped in order to support all these nifty new features.


Apple has rebuilt the text layout architecture in iOS 7, allowing developers to build control over the behavior of text and fonts into the user interfaces of their apps, with a level of dynamic freedom unheard-of before.

So what do all these new options mean, practically speaking? Developers can now drop long-form texts into reader-friendly, attractive layouts, with multiple columns and with image layers that aren’t chained to the grid. There are exciting new possibilities hiding behind the labels “Interactive Text Color”, “Text Folding”, and “Custom Truncation”. So, for example, it will soon be possible while composing in iOS to have the color of text change if the app recognizes a specific dynamic element (a hashtag, a Twitter account name, or the like). Or, we can trim longer texts into previews without being limited to options like before/after/middle; developers can define those options however they want.


With just a few lines of code, developers can display the time using presentable typography, with proportionally-spaced figures and the correct hh:mm divider.

Typographic aesthetes will be happy to learn that support for kerning and ligatures (Apple calls these macros “font descriptors”) will be turned on throughout iOS 7, effortlessly accessible even over very advanced visual effects like the deceptively real-looking handmade paper texture. But don’t worry: the magical letterpress look is, for now, the only remaining skeumorphism that has survived the update, and that only in the Notes app. Think of it as an example of something that can be turned off in the future, something developers will have the right to use, or not, as they wish.

But the hottest typographic number in iOS 7 is Dynamic Type. As far as I know, Apple’s mobile products will be the first electronic devices that will by default consider a quality of type that hasn’t been given so much attention since the age of letterpress. That’s right: we’re talking about an operating system, not an application or a layout job. It’s true, optical sizes were tried in photosetting and desktop publishing—but they weren’t really automatic, and some of the attempts turned out to be blind alleys (like Adobe Multiple Masters). And yes, there are any number of displays in industry products that use different ‘grades’ of text for smaller and larger settings. But optical sizing in iOS builds on these earlier attempts and offers astonishing possibilities.


The Dynamic Type waterfall in iOS 7 (middle) lets developers specify which fonts to use at each font size. This allows them to select heavier weights when type is small, for example. Compare this to the example on the left which demonstrates a simple decrease in size of the headline weight only, and the one on the right which shows just the text font getting larger. The letterspacing shown here isn’t perfect, but an app developer could always embed a different font family, one with a wider spaced variant for the text size. Update: It appears Dynamic Text does not work with custom embedded fonts like we hoped.

Thanks to Dynamic Type, users can now use sliders (with seven stops, found under Settings > General > Text Size) to adjust the text size in every app according to their own taste. And in case the largest size isn’t large enough, those with impaired vision can find under Settings > General > Accessibility a way to turn Dynamic Type up to its maximum size, options to “improve legibility” (which sets the text over a light gradient without changing its size), and optimize the background contrast.

Conclusion: When iOS is ready to be released in a few months, the operating system itself may not offer the best typography (using Neue Helvetica). But the OS’s underlying text layout and rendering technologies offer Apple and developers everything they need to conjure up dynamic and readable text on the Retina Display in ways they’ve never been able to before.

Gå till webbsidan »

Sketching Out of My Comfort Zone: A Type Design Experiment

For nearly three months last year, I drew some type every day. My “Daily Typesketch” was an experiment — in drawing, discipline, public practice, and in getting less fearful of process and paper.

Let me say this first: I know there are many designers who draw more and better than I; who have sketchbooks filled with lovely letters and exciting experiments. My hat is off to them, because I’m not like that. I’ve always thought of myself primarily as a digital designer — computers are my playgrounds, while paper usually instills in me a vague sense of dread (or at least, inconvenience). So it felt like quite an experiment last year when I committed to drawing some type every single day, on paper, and posting a photo of the sketch to a dedicated Flickr set.

I had been getting a bit frustrated in the months after finishing my first typeface, FF Ernestine. Over the course of three years, I had learned to draw type by making that typeface, and now every letter I drew still looked like it wanted to be part of that same family. I longed to diversify, but wasn’t sure how.

Process, Paper, Patience

At TYPO Berlin a year ago, I participated in Erik van Blokland and Paul van der Laan’s wildly popular TypeCooker critique session. I had known TypeCooker before — Erik’s “tool for generating type-drawing exercises”, which, in a manner of speaking, offers guided walks out of one’s type-drawing comfort zone. Pick a type of exercise and a level of difficulty, and the site generates a random combination of parameters, a “recipe” to follow. My TYPO submission was a narrow, tall, contrasted sans that was reasonably hard to draw, and I sweated over it for the better part of a week-end until I deemed it nice enough to show. “This is a very pretty sketch” was the verdict, “but where is the process?”

Craft is messy and dirty. Facing this is unsettling for a generation of designers raised with the shiny precision of computers.

That was when I realized I wanted (and needed) to get deeper into practice, into the process. Indeed process, like craft, seems fairly obvious to honor in theory and principle, but harder to embrace in practice. In-progress work is uncomfortable, it shows more open questions than answers; and “uncertainty”, as Paul Soulellis wrote in The Manual, “runs counter to how we’re trained to articulate our design values. We’re taught to express clearly and certainly”, but in-progress work is usually not clear yet, craft is messy and dirty, and sometimes you hit a dead end. Facing this is unsettling — maybe especially so for a generation of designers raised with the shiny precision of computers. We love that precision, even if deep down we know that it’s often a lie. The precise numbers of computers can make our work look like we’ve found answers when really all we have are questions, and the only truth we know is vague.

It is in this crucial point that paper is friendlier to the creative process than the screen: It supports (and renders) vagueness, sketchiness, better than computers do.

Type Cooker creator Erik van Blokland demonstrates the type sketching method passed down from Gerrit Noordzij and taught in the Type and Media program at The Hague.

Embracing the famed “inside out” drawing technique was a key to the whole exercise. The basic idea of starting with fuzzy shapes and gradually “bringing them into focus”, making the shapes cleaner as the ideas get clearer, is tremendously helpful (and can, I think, be applied to all kinds of shapes, beyond the classic application echoing the strokes of broad-nibbed or pointed pens). Thus one gradually progresses from general proportions to details. This is likely the correct hierarchy of decision making — first fixing what is most relevant and visible in type, even at text sizes (proportion, weight, contrast, the rhythm of black and white), before getting hooked on little details.

I am better at details than the “big picture” – better at refining than defining.

This was an exercise in patience, too. I am better at details than the conceptual “big picture”, better at refining than defining, and the computer makes it a little too easy to jump right into the details, with which you fiddle around forever until you realize something big is off anyway. (I’ve lost count of the times I had to redraw all the curves in Ernestine because I decided the x-height wasn’t right yet after all.)

Letting Loose

So I started drawing, and I drew every day. Most of the sketches were based on TypeCooker, which made me draw things I wouldn’t usually draw, or even think of as good ideas. It asked for wide seriffed faces and compressed sans serifs, but also such strange things as a monospaced upright italic for TV subtitles, a wide light monoline serif with swashes but no ascenders, or a grunge monospaced Helvetica as drawn by Gerard Unger. (Making sense of these turned out to be interesting.) I drew with an x-height of 4cm on an 11×14 inch pad of transparent marker paper, tracing over the drawings in multiple steps when necessary. Typically I’d do 5–10 letters, a variable basic set that could form the basis for a typeface design (for lowercase this was typically an ‘o’ or maybe ‘e’, at least one arch, something with an ascender, something with a descender, one bowl-and-stick letter, and of course some diagonals and special favorites like ‘a’, ‘s’, or ‘g’). Usually I first made a quick, rough pencil sketch of the approximate structures and proportions, then started working with a pen as soon as I dared, sketching rough proportions and areas before filling in outlines and details. (I never quite lost my urge to add outlines prematurely, but doing this too soon invariably derailed the sketch.)

The best parts of daily sketching: slowly sensing better where black needs to go, and understanding I can build outwards from that fuzzy vision.

The learning curve was noticeable. A good month into the experiment, I tweeted: “Best parts of #dailysketching: Slowly sensing better where black needs to go; & understanding I can build outwards from that fuzzy vision.” It still took courage to lay down ink; applying a dab of slow-drying Tipp-Ex is not the same as hitting Cmd-Z, and having to cut up a drawing to get the spacing right does not feel the same as adjusting sidebearings on screen, where space is elastic and erasure leaves no marks. But my fearfulness of the physical process was evolving into thoughtfulness, my dread into respect.

I learned to think about type in new ways, practiced looking at it differently. I squinted, “unfocused” my eyes, and used a reduction glass. I learned to see the space between the letters as an inherent part of the design. I tried lots of different pens and attempted (mostly in vain) to trim the Tipp-Ex brush just the right way. And I began to feel more free to take on new ideas and try them out on paper without over-thinking details right away. Six weeks into the experiment I was “letting loose on … things I’ve exactly never drawn before”, as I wrote happily in the caption to a funky, brushy, reverse-contrast script sort of thing that I wouldn’t have conceived of trying to draw before. I had finally stopped worrying so much, and I was making letters, every day. Letters that didn’t look like Ernestine. Letters that didn’t look like they were finished, or had to be.

Public Practice

The decision to make drawing practice a daily exercise was a trick to make me stick with it. Keeping it up was a challenge sometimes, but it also brought beautiful opportunities, like drawing together with friends I happened to be visiting. In a similar way, publishing the work online was intended to up the pressure and confirm my commitment, but I also hoped it could trigger discourse that might prove helpful to me and maybe also inspiring to others.

Sometimes polish is simply not the point.

Of course, if embracing sketchiness and vagueness on my desk was hard, sharing it publicly was really scary. But I felt I needed to overcome the anxiety of showing something that isn’t as “clean” and “finished” as can be — for sometimes polish is simply not the point. In contrast to other “daily” doses of impressively final-looking work (like Jessica Hische’s famed Daily Drop Cap), sketchiness and roughness are at the heart of my experiment. My sketches are snapshots from a process, stills from a learning curve.

The project ended about as spontaneously as it began. After almost three months of daily drawing, and quite a bit of welcome input and exchange, I went on a vacation with a barely functional internet connection and the desire to disconnect from my routine for a bit. I look back fondly. I’ve learned a lot: much about the myriad shapes that type can take; some sketches have spawned little digital typeface prototypes; and I got out of my deadlock and frustration. While there remains so much that I haven’t yet learned, there is this: It’s true that if you want to draw type, then go draw type. Every day, if you have to. Try doing it loosely, looking beyond your own preferences, and resisting the pressure of polish. You will find new answers — and, what is more, new questions too.

Gå till webbsidan »