Elliot Jay Stocks on 'typography out'

This article first appeared in the Summer issue (231) of .net magazine – the world's best-selling magazine for web designers and developers.

You’ve probably heard of ‘mobile first’. You may also be familiar with ‘content first’ or ‘content out’. But did you know about ‘typography out’? If not, design guru, speaker, blogger and type expert extraordinaire Elliot Jay Stocks is here to explain all…

“The basic idea is that, rather than throwing things together in Photoshop or code or whatever, you focus on the details first and work out from there,” he explains. “So with ‘typography out’, you’re deciding on your typeface and your font size, your leading or line-height, and your measure (your width of the line) before you start to create your layout. All of these things are about proportions, and these proportions can then be taken out into other parts of the design; they inform the design as a whole.

“For years I didn’t do that at all,” he adds. “Type is almost an afterthought for a lot of people and it certainly was for me for a long time. But once you start doing it, it makes total sense.”

Smashing redesign

One of the first times Stocks put this approach into practice was when he led the recent redesign of the popular design blog Smashing Magazine. “I’d been doing some work for Smashing on their editorial board,” he explains. “And when talk sprung up of a redesign I said I’d really love to do it.

“I felt Smashing’s content was getting better and better: they’d gone from basic list features to something more intelligent. But the design of the site didn’t reflect that. It was still kind of childish in a way, a little bit overly friendly. I wanted to come up with a design that would reflect that growth into something a bit more adult.”

Focus on type

‘Typography out’ was a perfect fit for the project, Stocks explains. “It was obvious that we should focus on the typesetting of an article first because, well, why are you there? You’re there to read an article – so everything else in a way is secondary. Yes, navigation is important; yes, the general design of a thing is important. But the primary task is to read an article, so that should be the thing that then sets the tone for everything else.”

The whole process took a lot longer than he expected, though. “That was partly because of the way we focused on these finer typesetting details before any other design happened. But it was also because we wanted it to be responsive. With a site like that, which has a lot of navigation, that was a challenge. The main thing was that there were a lot of ads that were fixed width within a fluid-width layout. It’s a fairly difficult thing to deal with. Ben Bodien from Neutron Creations was responsible for a lot of the more complex CSS, to get all that working.” They were joined by regular .net writer Ryan Taylor and Smashing Magazine’s own Robin Schultz. “And then once we were done we handed it over to the Smashing team, who went into it again, refined it, did a lot of testing, and so on.

“I’m really happy with the way it’s come out,” Stocks smiles. “I think it fulfils the original idea: to make everything look a bit more grown up.”

Web font revolution

Two main factors have influenced Stocks’ thinking on ‘typography out’. One was the process of designing and producing the first edition of 8 Faces, his limited-edition print magazine about typography. “And at the same time, the web type revolution was starting to pick up steam,” he explains. “Mark Boulton was talking about ‘content out, not canvas in’. People were starting to think about type on the web because it was coming of age with services like Typekit and Fontdeck.

“So because we were thinking about type more intelligently, and because I’d gone off and done a project that forced me to think about type, those two things married up. My current thinking is a combination of the great stuff that people like Trent Walton, Mark Boulton, Tim Brown and others are doing, mixed with the perspective of doing print stuff as well.”

It’s partly this switching between the twin worlds of print and web design that have made Stocks’ design insights, shared via elliotjaystocks.com and his numerous speaking engagements, so useful and inspiring. But it wasn’t always this way. “For a long time I just focused on web design,” he recalls. “I did a few small print jobs, but nothing big. 8 Faces was explicitly born out of me being fed up with just doing web stuff.”

Specifically, Stocks was frustrated by the impermanence of web design. “Stuff you’ve worked so hard on just disappears – after a year, a few months, or, if you’re doing a holding page for an app say, it might be a couple of weeks,” he sighs. “I wanted something that would last. So that was the main motivation for creating 8 Faces, really. I just wanted to have something that would sit on the bookshelf for years to come.”

In the process, he learned a huge amount about typesetting. “Then, when I went back to doing web design, I found it had opened my eyes to a new way of looking at things. So I’d do more type-centric stuff on the web, then I’d go back to do the next edition of 8 Faces. And then the cycle would repeat itself.”

As the release of issue five approaches, this learning cycle continues. “When I do the print magazine I become really invigorated and revitalised by doing something so different,” says Stocks. “Suddenly you don’t have to deal with IE bugs or anything like that. You know what you do is going to look exactly the way you intend it to.

“But then equally, after doing that for a while you think: “Oh my God, there’s all this pressure: 2,000 copies are going to be printed and what if there’s a typo? What if the colour comes out wrong? And that’s kind of scary. And you think: ‘Oh, I’ll go back to web design where I can change anything and it’s all in flux the whole time.’ So I would always recommend to people that if you can swap between mediums, or any kind of combination of them, you should do so.

“I wouldn’t necessarily recommend everyone does a printed magazine,” he adds. “But a large scale project does really force you out of your comfort zone. It scares you in a really healthy way.”

Own company

Since leaving his last full-time job in 2008, Stocks has balanced freelancing for clients with his own side-projects. But in September he left client work behind for good to set up a new product company with Keir Whitaker, previously coding editor at Smashing Magazine and a former colleague at Carsonified. Forthcoming releases from Viewport Industries include Digest, a lifestyle newsletter that ‘celebrates the culture orbiting the web community’; Insites: The Book, a limited edition containing interviews with 20 of the web and tech industries’ leading figures; a one- day workshop in London entitled ‘Pragmatic Web Design’; and a number of digital tools that harness the power of WordPress, including an updated version of their WordPress theme, Starkers.

For those tempted to follow in Stocks’ footsteps and go it alone, he is strongly encouraging. “People think leaving their job is such a big jump – but it’s not as big a jump as you think it is,” he stresses. “That’s not to say it’s a decision you should take lightly: you have to be disciplined, and you have to plan. But in terms of risk, it’s often better than staying where you are.

“In the current climate, so many people have been made redundant, and it can often come as a complete surprise. Whereas when you’re working for yourself, if work starts to dry up you’re going to see that a few months in advance, and you can adjust accordingly – maybe put out a few feelers, lower your rates, perhaps, say yes to some stuff you might usually say no to. And all of those things mean that you’ve got a little more control.”