I LOVE TYPOGRAPHY

Offscreen
Allen Tan Interviews Kai Brach

Based in Melbourne, Australia, Kai Brach is a 30 year-old web designer, working on user interfaces and websites for more than 10 years. Mid-2011 he started Offscreen, a quarterly print publication about the people behind websites, apps, and digital products.

What prompted you to make Offscreen?
In the middle of last year, I left my freelance clients to go on a 3-month hiatus traveling around the world. I met all these lovely, creative people I’d only known online through Twitter, Facebook or Dribbble. There are so many stories to be told about what happens behind the scenes of the sites and apps I use on a daily basis. After coming home, I thought about a better way to tell these stories. The digital environment is very short-lived: make something today, and tomorrow it’s disappeared into the vastness of the web.

Even though I’ve had an iPad since its early days, the magazines and e-books on it have so far done a bad job in creating and maintaining focus. Offscreen tries to help readers disconnect completely and re-connect on a level that’s more real, more tangible. that’s why there isn’t a digital version of the magazine. As the name suggests, Offscreen wants you to put your iPad down and focus on long-form writing about real people without the distractions of app notifications or incoming emails.

What was your layout design process like? How did it change as you got farther along?
Being a magazine buff with a nice collection of indie-magazines on my bookshelf, there were a lot of sources to draw inspiration from. Monocle was one of them, but there are lots of other small indie- magazines that I learned from by flicking through them. The iPad’s form-factor is fantastic. Considering that most of my readers would probably own one, I thought that a similarly-sized format could really work—the “offline companion” that fits into the same bag as the iPad or Macbook Air.

After picking the format, I played around with the grid and the layout of the master pages. It took many test files in InDesign before it got to the final version. If you’ve never done any editorial design, figuring out what page margins, column gutter widths, font sizes work well takes a lot of trial and error. (Having a UI-design background, I had barely used InDesign before.) So I did a lot of trial prints on my laser printer at home. Change the leading, bump up the font-size by .5 points, add 2 mm to the column width. Rinse, repeat.

At this stage, I didn’t have any actual content yet. So while figuring out the layout, I started conducting interviews and defining a photography style guide. There was a lot of back and forth: I had to change the layout to accommodate the content, and vice versa. It sounds a bit messy, but I enjoyed the organic process and the freedom of doing it “my way” despite of what I read and heard from other publishers, editors and designers. Once the visual language was established, it all came together rather quickly. I spent a lot more time in Photoshop, preparing and retouching photos, and in Google Docs, editing content with the help of my sub-editor and proofreader. Merging everything into Indesign was quite exciting because that’s when you first see it all come together to shape what will eventually be a real magazine.

How did you decide on Cyclone and Calluna for the magazine? Had you used them before?
I tested some classic serif typefaces like Garamond and Caslon, and contemporary magazine types such as Kepler and Lyon that work very well at small sizes. I also played around with some sans serif typefaces, but quickly abandoned the idea because they felt too modern. Offscreen is about returning to our roots and bringing back a traditional, calm reading experience.

Calluna strikes a nice balance between a traditional serif and a more playful contemporary text face. It works very well in both small and large sizes and could therefore easily be used as a display face. The various weights and styles allow for a range of applications, which was particularly helpful when a single typeface is used for all body text. I especially fell in love with Calluna’s small caps, something I tried working into every page. For example, the folio uses Calluna in small caps at 8.5 pt followed by a thick, bleeding line carrying a color code for each interview. Offscreen is a magazine about people, so their names appear (with very few exceptions) consistently across the whole magazine in prominent small caps at 15 pt bold, usually followed by their job title in regular italic and their location, in regular small caps at 8.5 pt.

The pull-quotes use Calluna’s beautiful set of discretionary ligatures. I first tried to apply the color specific to the interview to the text of the quotes, but this felt too distracting. So I tried a black version (both in terms of color and weight) and loved it. Even though the ligatures can seem a little over-decorative at times, I really like how they compliment the interview spreads.

I ended up liking Calluna so much that it formed the Offscreen logo, which is basically Calluna in black with a few manual alterations to some brackets and stems. Calluna is on Typekit, which helped me make a final decision on the typeface. I like consistency across different media, even though Calluna looks quite different on screen. It loses a bit of its round and playful dynamic when displayed in smaller sizes, which I assume is partly due to the low resolution of computer screens and the different ways browsers are rendering it. Finding an accompanying display typeface came easier. I played with Morgan Knutson’s Mensch for a while, which looks particularly nice in white with inlines applied on a color background. Its regular style didn’t appeal to me, though, so I looked for an alternative condensed typeface with a similar “decorated” feature. H&FJ’s Cyclone had me convinced straight away. In its regular uppercase style, Cyclone feels calm and bold yet still subtle, and transforms into a more embellished typeface with its inline.

In use, both typefaces find a nice balance between contemporary modern and a more traditional magazine look. There was a conscious decision to only have two typefaces throughout the magazine and have the text only black on white or vice versa.

What was your process in choosing a paper stock?
process of finding and choosing the stock was probably less experimental and exciting than you think. During my last trip to Berlin, I came across a German magazine called The Weekender. The paper used impressed me, even though it wasn’t anything fancy. It is a very basic uncoated paper, but its grainy texture with tiny remnants of wood and recycled paper gives it a very warm look and feel. I emailed the maker, Dirk Mönkemöller, and he was nice enough to give me the specs. It’s made from 100% recycled paper, which was great because the environmental impact of magazines has always been a concern of mine.

The Weekender gave me a good indication of how the ink would behave on paper. In talks with my printer, they reassured me that their machines will deliver a similar quality — and they did. My printer was in Berlin while I was back in Australia, so it was impossible for me to just drop by and grab a test print. So, there weren’t many trial prints. It still worked out well!

I’m in the process of moving to Berlin for 6+ months and will be able to oversee the print process for issue #2 a bit more closely.

You took a very interesting approach to ads: 8 pages in elegant black, with your sponsors’ logo and a blurb in white. Can you tell me more about that?
One thing that always puts me off in high-quality magazines are the ads. Not only are they disruptive, but often they’re just plain ugly. At the same time, I know how important they are in making a magazine financially viable.

By presenting the sponsors in the center of the magazine as an elegant showcase, the reading experience feels less interrupted, and the sponsors still get the attention they deserve. The magazine doesn’t shy away from telling readers the obvious: we depend on these companies.

To be honest, I was a bit hesitant at first, but can now say with confidence that this approach works really well for all involved: multiple people mentioned that, for the first time, they read every single word in a magazine—including in the ads. At the least, people notice the different approach which makes them more effective than typical ads.

It certainly takes a bit of courage and readiness. To my surprise, the sponsors for the first issues didn’t need much convincing. I think that was partly because they have little experience and expectations in print ad campaigns. The initial sponsorship fee for the first issue was fairly low, so there was low risk in giving this approach a try.

How did your experience as a web designer inform this project? Has this changed the way you approach your web work today?
One big takeaway from spending months in InDesign is that I now feel a lot more confident in my typographic skill set. There is still much more to learn, but I have a better understanding of the nitty- gritty that’s involved in providing this kind of reading experience—something many designers growing up in the digital era are simply not aware of.

Webfonts have come a long way over the past 2 years. What has been your experience doing typographic treatments on the web?
It certainly has come a long way. Iremember using 11 px Verdana in pretty much ALL my web designs in the early 2000s. The introduction of hosted font delivery services such as Fontdeck, Typekit and Google Webfonts has been a game changer. Being a self-taught web designer, I never gave typography the attention it deserves. So these services, web standards and new browser technologies have helped thousands of web folks like me learn more about typographic fundamentals.

I do recognize that typography on the web still has hurdles to overcome. Kerning can be a tricky business and is hard to get right even in print (still learning myself), but it is entirely disregarded on the web. I also enjoyed having a baseline grid in InDesign. I know there have been attempts (more like work- arounds) to create a baseline grid on the web too, but they never really work on a complex scale. It begs the question whether all these principles should be applied equally to the web. I can’t imagine a baseline grid system that operates reliably across browsers, platforms and devices, and still leaves enough freedom to do the very detailed pixel-adjustments required in great UI design.

Right now, the variety of typefaces and styles suddenly available feels a bit like when my mum discovered the fonts menu in MS Word. It has never been easier to impress someone by setting our body text in Proxima Nova. Don’t get me wrong, I love seeing all these new typefaces around on the web. But it would be great if all of us took this opportunity to first learn more about the underlying principles of typography and how to use them considerately.

Allen Tan is an interaction and graphic designer, and a assistant editor for Codex and Contents. He lives in Brooklyn and on the internet at @tealtan.