Category Archives: Typography

Five good links

Five-must-reads11From the FT, Adland’s continuing existential crisis, along with good observations as to how brands grow.

Twitter’s troubles, by Emily Bell along with a deeper dive from The Atlantic.

Story of the year; facebook’s interest in AI is going to become our reality. Posts from The Mail and The Guardian.

DC Thomson’s Jacqueline Wilson magazine goes Dyslexia friendly. A brilliant use of a really smart typography.

Dave Trott on the trouble with ‘content’.

‘The interface is the product’. Apple prove Steve Jobs’ mantra yet again with the introduction of their new system font.

san-francisco-fontHere’s a video from WWDC 2015 where Apple introduce their brand new font, San Francisco. It’s similar to Helvetica, but with several key differences that create a warmer, more gender neutral feel. In my opinion it draws heavily on the success of Proxima Nova discussed on this blog at length a few weeks ago. See more

The single reason why Proxima Nova is the world’s best font

proxim-helveticaThere’s a good story by on Medium today about Proxima Nova, the font that by many measures has replaced Helvetica as the world’s most popular typeface. Proxima was first drawn by Mark Simonson in 1981, it took a while to gain traction but after the release of Gotham in 2002 it really took off.

Fred Woodward commissioned Hoeffler to create Gotham when he took over as Creative Director at GQ, and very nice it looked too. But I had just taken over Fred’s job as art director of Rolling Stone, and was looking for a new geometric sans myself, so after consulting with my art department of Kory Kennedy, Devin Pedzwater and Matthew Ball, I chose Proxima, because it was just…better.

proxima-grabSince then I have used it in dozens of different roles. I put it in the million selling weekly What’s On TV, where the vast amount of TV listings require an exceptionally functional and legible font. I chose it for Chat, to bring a little glamour to the real life women’s weekly market, and I’ve used it endlessly on development projects where it’s essential to have a font that looks cool and modern, but that does not have a prescriptive point of view.

By this, I mean a font that doesn’t look too male, too female, too posh, too serious, too anything, but still holds deep emotional promise.

This is the genius of Proxima. The Medium article rightly makes the case for the lower case ‘a’ being the signature character, the single letter that defines the feeling of the whole font. And compared to Gotham, the Proxima ‘a’ wins hands down.

But in the first place, sans fonts are defined by the lowercase ‘i’. This letter can only be drawn in two ways, with either a rounded dot or a square edged dot.

Johnson’s London Underground font is an exception, with a diamond dot, and there are other fonts that have got squares with rounded corners, but you get the general idea here.

Helvetica has a square dot. This makes it strong, practical, manly even.

The alternative to Helvetica used to be Futura, the Bauhaus masterpiece so recently dumped by Ikea in favour of Verdana.

Futura has a round dot on the ‘i’. This makes it friendly, modern and possibly more female. But Futura predates Helvetica. It’s not built for the modern age, it’s got a small x-height and it doesn’t work on screen. What’s more, its ‘i’ dot looks underpowered compared to Proxima‘s

Which is why Proxima is so brilliant. It combines the strength of Helvetica with the feeling of Futura. And it’s the lowercase ‘i’ that proves it.

Mark-simonsenHere’s Mark Simonson at his desk, from a great story by Tamye Riggs on the adobe site about how Mark works, with lots of excellent examples and sketches.

original-proxima-grabAnd here is the original 1981 sketch for Proxima, taken from Cameron Moll’s Medium post.

Postscript: Mark Simonson and I exchanged a few messages on twitter after this post was published. In these he generously noted that Rolling Stone’s 2002 adoption of Proxima gave him the motivation to develop Proxima Nova with all the extra weights. 

Type size is your friend

streetsofsalem.comMost people never read more than 25% of even their favourite magazine. However, many editors are totally blind to this fact, insisting on getting every single word of their deathless prose wedged into the page. Invoking higher authority, this often produces nothing more than a sophisticated internal memo that no one will ever read.

As designers, we’re culpable in this, as it’s we who set the size of the type in the first place. Not only that, many designers seem to think that readers have 20/20 vision, and are perfectly willing to read large tracts of text across super wide columns in sizes that would strain the eyesight of fighter pilots.

Among many other reasons, this is a reason why I love The New Yorker so much.  Their text is beautifully set, 10/12, I believe, across the correct measure and with perfect kerning.

I’ve written about the print version of The New Yorker previously on this blog, and also had the pleasure of interviewing their creative director, Wyatt Mitchell, the podcast of which you can hear here.

But it’s how they treat their digital platform that’s interesting me now.

eleven postsI have very mixed feelings about this brand online. One of the great pleasures of The New Yorker is that they tell me what’s important, and what I should read. I trust the editors to edit, so when I get messages like the one above I GET REALLY STRESSED OUT!

But on the other hand, if there’s a story I want to read on the go, I’ll happily consume 10,000 words on the phone, such is their quality.

New yorker mobile typeWhich is why I’m so appreciative of the way they’ve set the type. The screen on the left (above) sets up the story with a hed and a picture. But click ‘read more’, and not only do you get the picture caption, (right) but the body copy goes up in point size.

Young-Napoleon-Hugo-D-Aviles-hugo-avilesIt’s a tiny move but it really does prove Napoleon’s point: “Execution is everything.”

This post was first published as part of my guest editorship of the American Society of Publication Designers blog.

Five must-see, must-read links

Five-must-readsThe New Yorker re-launches it’s website, claiming to bring all their sensibilites to the web, but at warp speed. Great post, thanks to @magcuture for the tip.

David Carr: ‘I’m not so much a digital native as a digital casualty’ Great writing by @carr2n in The New York Times. If you’re really keen, here’s another, even better piece by him on what it is to be a journalist today.

This chap has designed over 600 world class book jackets. Here’s how he does it.

Jeff Jarvis on how Forbes native advertising strategy has devalued his view of the brand.

Superb analysis of the new Airbnb logo.

How do you compete with a billion dollar logo?

buzzfeed-voxThis post was first published on The Media Briefing earlier this week.

Buzzfeed is now considered one of the world’s most innovative news organisation. It’s value is currently over $1b, getting close to the likes of The New York Times ($1.28b), and dwarfing other digital news sites. So it’s no surprise that more start-ups are wanting a slice of the pie.

American news site Vox is early out of the blocks, launched just three months after founder Ezra Klein left the Washington Post. He claims that Vox will ‘Explain the world’ but the site is already creating a stir, as evidenced by last weeks rant from a senior Facebook executive complaining that ‘Someone should fix this shit’

He was referring to Vox’s story about how you should ‘Wash your jeans instead of freezing them’, with the complaint was that they were not delivering  ‘A new home for serious journalism in a format that felt Internet-native’.

When it comes to content, you have to make your intentions very clear. Which is why design is central to a users understanding of what to expect. Can Vox persuade readers that it’s a real heavyweight political commentator? Can Buzzfeed change horses midstream and let us believe that they too should be taken seriously?

In short, what does the design of these two sites say about trust?

The logo fonts are fundamentally different. Buzzfeed’s is a functional sans, with an almost child-like feel created by the big lowercase ‘ee’. By contrast, Vox’s serif ‘V’ on their twitter icon is huge, and when spelt out has a sophisticated flourish. It feels high end, a bit like The Atlantic, redesigned by Pentagram not so long ago.

Newspaper-logosLikewise the colour means very different things. Not for nothing are serious newspaper logos black, and tabloids white out of red blocks. This visual language is impossible to deny: red means urgency, black is just inert. It has no opinion. (Although Stern have managed to have their cake and eat). But what does yellow mean in this equation?

Buzzfeed has built both traffic and reputation on spectacular viral techniques, listicles, cat videos, engaging headlines and their killer franchise, the online quiz, proving that content most people are interested in are stories about themselves.

But now they now want to do serious journalism. Reuters reports that they have boots on the ground in Ukraine, are publishing in-depth articles on Chinese dissenters and have had some big, breakout stories. But can Buzzfeed ever be regarded as a serious news site, when their key visual signature looks like this…

Buzzfeed-Logo-lolOr more precisely, LOL, in black type within a yellow circle.

The use of yellow has vexed media designers ever since CMYK was invented. It’s the brightest colour, but has the lowest tonal value, which means it has the highest level of visual cut-through.

US-small-coversNowhere is this more apparent than on a magazine newsstand, where yellow is the number one technique for getting a headline to stand out. For some brands, relying on yellow can cause real problems, as illustrated by the case of People, the world’s biggest and most profitable magazine brand. It costs a dollar more than most rivals, but because the whole category rely on yellow headlines, People looks cheap by association.

Moreover, in the world at large, yellow is often used to deliver marketing messages and price tags, which has taught us that when we see yellow, we’re being sold to.

Buzzfeed-desktop-homeIt all comes down to how it’s used. Like a celebrity news magazine, Buzzfeed, use bright yellow to draw our attention to comments, or small pieces of content that we may otherwise overlook.

It’s effective, but combined with a red logo, lemon tint panels and bright blue headlines, the combination of these colours creates a tabloid environment more akin to a Screwfix catalogue, than a premium destination for serious journalism.

Buzzfeed-mobile-articleAlthough to be fair, at the far more important mobile article level, the presentation is cooler, with the colour focused on social sharing buttons.

Grazia-magazineVox have taken a different tack. By making yellow the only colour, they’ve managed to retain it’s effectiveness, but without tarnishing it’s delivery. This is exactly what Grazia did in the magazine market. By using no colour other than yellow, the pallette looked like a fashion statement, and made the rest of the weekly market’s use of red obsolete overnight.

Vox--desktop-articleVox then go further by teaming yellow with grey, delivering a sense of sober authority. And in an unexpected twist, instead of black headlines, Vox use a very dark grey. When I first saw this in the ‘V’ of their twitter icon, I though it was an error, but this approach is consistently deployed in many places all through the site, particularly on mobile. The content can look pale and washed out, but it does prevent the words looking like sales messages.

Vox-mobile-HOMELinks are understated too, with a cool grey-blue, as opposed to Buzzfeed’s more eye-popping style.

Typographically, Vox has a cultured approach to their content. As any fule kno, there are only two fonts in the world, plain and fancy. Vox use both, with italic serif call-outs, traditional gothic headlines and modern sans text fonts. The feeling is sophisticated, although the small sizes create a somewhat pale reading experience.

Buzzfeed’s headlines and text are primarily in the highly legible and good-looking Proxima Nova. But with bits of Helvetica and other random fonts creeping in, there is a slight low-fi feeling and a lack of brand consistency.

Like Buzzfeed, Vox’s appeal is driven by virality of the headlines. Here’s a super-snarky story from Forbes, attempting to dismantle the thinking behind headlines such as ‘The Simpsons predicted the Ukraine crisis back in 1998’

VOX-desktop-homepageBut Vox are also using content curation as a way of building a content mix, as this homepage shows. Here, they pair a super-dull Russia and China story (good for credibility) alongside an orgasm story (good for clicks). Overall, I sense the desire to have a slice of Vice’s now very substantial content marketing pie.

Buzzfeed-mobile-HOMEBy comparison, even on mobile Buzzfeed go flat out for volume. Everything’s turned up to eleven, all of it looks fun, but there’s not a serious item in sight. And in the American style, deploy the hyped up tone of capping up every word in a headline: ‘A Naked Woman Has Made The Alphabet Out Of Human Hair’

Vox use a more measured upper and lower-case European approach: ‘How conspiracy theories explain political parties’. This typographic technique has less urgency, but a lot more conversational intimacy. And would certainly be preferred by Buzzfeed’s UK editors.

Overall, the Vox design direction is somewhat dull. But it’s undeniably modern, with yellow keeping the site just inside the pop culture canon. From a business point of view, they have set out to claim the journalistic high ground, and go viral from there. Buzzfeed are attempting world domination the other way round, by taking the lowland masses first, and then attempting to scale the higher peaks.

vox-native-advertising

Like Buzzfeed, Vox’s business model is based on ‘native advertising’ or any other term used to describe ads that look like a bit like editorial. However, unlike Buzzfeed, it’s really hard to see which posts are ‘sponsored’, and which are not.

Political authority and influence may be the motivation behind the site, but aside from the click-bait headlines it’s hard to detect any real sense of tone in the content.

Unlike established news sites, I don’t yet know what Vox believe in, other than an enthusiasm for Obama Care. We may be conditioned to it, but when it comes to politics, readers need to know what the brand believes in order to work out the true colour behind the journalism.

This is a problem Buzzfeed just don’t have. What you see really is what you get. It’s not pretending to be cool, there’s no attempt to seduce with the presentation. Which makes me trust them all the more.

David Carson, and the layout that changed the way I work

We-SurfI believe this brilliant spread is from The End Of Print, one of David Carson’s many books featuring surf magazines he designed pre-Raygun. But I was reminded of it again last week, whilst working with a client around the theme of people and their passions.

David Carson made his name with some very funky typography, but in this instance it’s the sheer power of connection with his audience that impresses me still.

Photos can absolutely change peoples minds, the work of Don McCullin and others have proved that. But with ‘lifestyle’ media, to make the claim that content has changed behaviour, and (I assume) be able to back it up is rare indeed.

Brand or content, what should be seen first?

people-logosThe UK newspaper People closed their website a little while ago. Launched with the idea that it would be ‘Buzzfeed for grown ups’, pretty much everything went wrong, according to this excellent reporting from of all places, Buzzfeed. Patrick Smith reports that there was a lack of identity, a lack of focus, and a complete failure to grasp how the native advertising business model works.

people-multiThis lack of brand benefit is perfectly expressed in the website logo. The way it worked (or rather, didn’t), was that the People logo was preceeded by a rotating series of words; ‘Sporty’, ‘Famous’, ‘Glam’, ‘Funny’ and so on. The story underneath didn’t change, but the context did.

What this did was remove any trace of brand from the content beneath. The stories became entirely generic, no tone, no point of view, no recall.

buzzfeedBy way of contrast, this is Buzzfeed’s home screen from the very same day. Which, when you compare the lead stories of ‘Bachelor’ and ‘Wanker’, pretty well sums up why Buzzfeed’s tone is so sharp.

Print has similar issues, but the context is very different. On a newsstand, when is right to put a coverline above the logo, and when should you never do it? Find out more after the jump.

See more

The colour of money: why does Hearst’s hot new launch look so bland?

dr-oz-the-good-lifeDr. Oz is a controversial figure. Billed as ‘America’s Most Trusted Doctor‘ he’s a top-notch heart surgeon, has a huge TV show and a massive social following. Oz has been named one of Esquires 75 Most Influential People of the 21st Century, as “the most important and most accomplished celebrity doctor in history.” But he often attracts establishment criticism, not just for advocating alternative therapies, but for his style. As a recent New Yorker profile explains, he employs words that serious scientists shun, like “startling,” “breakthrough,” “radical,” “revolutionary,” and “miracle.”

See more

Why The Independent redesign does not go far enough

This is the fifth redesign in as many years, which suggests Last Chance Saloon is not too far away. But here at coverthink we live in The Now, so let’s not worry about that, and just look at the work. The website has been redesigned alongside the paper, and there are interesting plans to introduce a new tablet app, but overall there appears to be no big change to the marketing of the brand. So I’m guessing the four redesign KPI’s are as follows:

1. Differentiate the paper against ‘i’, the Independent’s cheaper tabloid cousin.

This picture shows the previous confusion between the two, with both carrying red in the masthead. The new design has undoubtably separated the two products, primarily through making the logo a black serif and putting it on its side. Magazine logos have been seen like this (The Face circa 1990) and I’m sure there will be European papers pulling this stroke too, but it’s not been seen on a British paper before.

Under normal circumstances, I hate type on it’s side. But in this instance I have real sympathy to the approach. Independent is a very long word, so this way the logo remains BIG and the remaining space is cut into a different sort of shape.

But with no logo at the top, the key is to put stuff in its place that genuinely expresses the brand essence. It can be content or marketing, but it has to really rock.

The top of the paper starts with a band of white space (including barcode and red eagle), signalling its ‘magaziney’ intentions. But this illumination means nothing if the content beneath doesn’t repay the investment.

On this cover the opportunity has been missed. The words are underwhelming, the type is small and there is no hierarchy within this critical part of the page. Which is frustrating, as some of the content is strong and highly ‘ownable’.

The second difficulty the new logo creates is how to divide the page. On a normal width, this can be done vertically, like the Daily Mail and Express; splash on the left, picture story on the right.

But with the new Indy, the narrow page means the picture story is presented over the splash. This profoundly diminishes the headlines’ importance, as well as suggesting the picture story is somehow part of it. All in all, it makes the paper feel more like a monthy review rather than a crusading, urgent and compulsive daily purchase.

2. Sell more ads.

This might work, as the paper looks more sophisticated. There’s a nice use of white space, elegant typography, and a sense of restraint all round. Regular advertising is going to stand out better. But as far as I can see, the increasing shift of clients money into content marketing has not been addressed.

3. Improve reader satisfaction

I loved the Independent when it launched in 1986, and so did many others. As the current editor Amol Rajan said this week, “It was radically different, politically neutral, with huge pictures and real gusto.” This is the top of the first issue, taken from the Indy’s own cover gallery. But in recent years it has struggled to maintain a clear editorial direction compared to the clarity of the Guardian, Telegraph and Times. Whether due to failure of editorial or creative direction is neither here nor there, a redesign is always an opportunity to have a fresh start.

The new look has been led by Matt Wiley, a well respected magazine designer, responsible for the upmarket men’s magazine Port, along with plenty of other good work.

A full set of original fonts have been cut especially for the paper. They’re really good new typefaces, and give a great opportunity for the Indy to deliver content in its own voice. There’s an excellent overview in Creative Review, taking us through the design in fine detail, along with many images of the type in action.

But for all the beauty of the type, some of it is just too small to be easily legible. Readers have complained, obliging Amol Rajan to say that he has taken these comments on board and ‘asked the designers to address them urgently’.

Roy Greenslade, writing in the Guardian, applauds the team for the redesign, appreciating the “commitment to essay-writing as distinct from news busy-ness”. But he also points to the weakness of placing the editorial on page two, as well as other flatplan adjustments. Overall, he suggests readers will more baffled more than anything else.

For me, I have mixed feelings. I’ve bought the paper three times in three days, having not picked up a copy for years. I’ve read it, and I’ve enjoyed it.

But for all the boldness of the new logo, they just haven’t gone far enough. If the Independent’s owner, Evgeny Lebedev, can describe his paper as having “a proud record of innovation”, he should have put his money where his mouth is and done this:

a) Make the splash headline really tell the story. A few more words would deliver real newsstand cut-through, as well as allowing the line to be replicated and owned across all the digital platforms.

b) Properly visualise the splash. Use an infographic, a powerful picture or a typographic solution. Make the whole cover an image that people will want to share, to establish the idea of the front page as an event, as opposed to a template.

c) Put less copy in the paper, make the type bigger, and let stories run longer online. That way, browsing the paper will be a more pleasurable experience, as well as letting the print serve to market the digital platform.

d) Move the horizontal ad position off page three onto page two. As it stands, the paper comes to a grinding halt before it’s even begun.

4. Stabilise newsstand circulation

As always, this is the only KPI editors and owners really care about. Here’s the petrol station in Hackney where I bought my issue last Thursday. Given the current landscape, you’d be a brave man to think that a redesign alone will shift more copies. The fact of the matter, is that paid-for media brands now have to work incredibly hard to stimulate demand. This requires great content, a powerful brand filter and a sophisticated marketing operation. Daily newspapers must set the agenda, and get talked about across every platform.

There’s an interview with Editor Amol Rajan in Media Week, where he talks a good talk about his hopes for the redesign. Media week says: “By recalling the spirit of its founders, Rajan hopes to reinforce the paper’s Enlightenment values and strike a chord in what he considers to be an increasingly ‘sceptical but engaged’ age”

But the line that caught my eye was: “There are maybe a dozen areas we can do absolutely better than everybody else”.

Like all the other serious broadsheets, The Independent covers just about everything. so communicating this brand’s point of difference is absolutely essential in letting the reader know why they are buying it. The primary task of a redesign like this is to focus the readers attention on the things that really matter, but for me this is where it falls down. The design is too polite, and the editorial direction not ruthless enough.

Add that to the lack of newsstand cut through, and I can’t see this redesign making any significant difference to copy sales any time soon. I really hope I’m wrong.