large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2oLqffn">medium bookmark / Raindrop.io</a> |  </p>
<div>
<p><a href="http://ift.tt/2neuOBF">Story Sans</a> is a new font family designed for <a href="http://trademe.co.nz/">Trade Me</a>. It’s a screen-first Grotesk typeface aligned specifically to Trade Me’s brand, values and tone of voice. Story Sans was designed with Trade Me’s internal design team,¹ and is licensed exclusively for their use. It’s currently used on their <a href="http://ift.tt/2lZD5rM">Preview</a> and <a href="http://ift.tt/2nesJWr">Ping</a> sites.</p>
</div>
<div>
<p>    <img alt="Story Sans &amp; Trade Me." src="http://ift.tt/2p4sU2K"></div>
<div>
<p>Trade Me is a household name in New Zealand. Started in 1999 by <a href="http://ift.tt/1tTDFoc">Sam Morgan</a>, “It was a novel concept; people sending money to sellers they’ve never met, for goods they’ve never seen.” The website accounts for a large chunk of New Zealand’s domestic internet traffic. What started as a site for buying and selling second-hand stuff has grown into a portfolio of several businesses.</p>
<p>In 2015 they started a massive re-branding and re-design project. “Our brand had grown in a pretty organic way since Sam Morgan founded the company. Unfortunately this didn’t always result in an intentional and cohesive result across such a large company and multiple products. We wanted to develop our brand, make it more consistent, and make sure we’re protecting and nurturing it as best we can. We felt we needed to evolve to better reflect the contemporary Trade Me and where we’re headed next.” As part of this new strategy they wanted a new custom typeface that could represent the Trade Me family now and in the future.</p>
<p>We started talking about the typeface in June, 2016. From these informal discussions came a brief detailing the expected screen-first technical and functional requirements: a sans-serif that works well at small sizes, looks good at large sizes, has clear numerals and matches system fallback fonts.</p>
<p>But the brief opened with, “the typeface should embody both our Trade Me brand tone of voice and brand personality.” This posed a fascinating question — what typeface is Trade Me?</p>
<p>The history of typefaces is rich and varied: there is an smorgasbord of genres, styles, and letterforms to choose from. The brief narrowed the selection to sans-serif. It’s a good, logical choice. Sans-serif is one of the oldest forms of lettering, but paradoxically one of the newest forms of printing type. They still feel modern. After careful analysis of their brief, values and typeface examples² I narrowed the selection of sans-serifs to three primary sub-genres and their best representative typeface:</p>
<ol>
<li>Grotesk — <i>Akzidenz-Grotesk</i></li>
<li>Geometric — <i>Futura</i></li>
<li>Neo-Grotesk — <i>Helvetica</i></li>
</ol>
<p>We then went through their respective histories and use to determine the best match for Trade Me’s brand tone of voice.</p>
</div>
<h2>1. Akzidenz-Grotesk</h2>
<div>
<p>    <img alt="Caslon 2-lines English, 1816." src="http://ift.tt/2p44pCT"></p>
<p>Caslon’s Two Lines English, 1816.</p>
</div>
<div>
<p>The first sans-serif printing type was Caslon’s <i>Two Lines English</i> in 1816, in uppercase only. It took nearly two decades for a sans-serif lower-case to be designed, and from there the development was largely focussed in <a href="http://ift.tt/2nei0eu">America and Germany</a>.</p>
</div>
<div>
<p>    <img alt="Breite Grotesk, Bauerschen Giesserei, 1909" src="http://ift.tt/2p47a7g"></p>
<p> Breite Grotesk, Bauerschen Gießerei, 1909</p>
</div>
<div>
<p>This is an early range of sans-serifs from the 1850’s, arranged in a 1909 specimen book from <a href="http://ift.tt/2nekxVT">Bauerschen Gießerei</a>. The foundry is marketing them as a unified set named “Breite Grotesk”.</p>
</div>
<div>
<p>    <img alt="breite_grotesk_comparison.jpg" src="http://ift.tt/2p4g5FF"></p>
<p>14pt Breite Grotesk (above) compared to 40pt (below). </p>
</div>
<div>
<p>Which is ironic — to contemporary eyes they’re clearly rather different. However, this wasn’t an unusual strategy. What we now know as <a href="http://ift.tt/2nesISn">Akzidenz-Grotesk</a> was one of the first set of fonts marketed as a “type family”. It is actually a collection of individual typefaces, cut across a range of sizes by largely anonymous punch-cutters.</p>
</div>
<div>
<p>    <img alt="Akzidenz-Grotesk Halbfett" src="http://ift.tt/2p4mUY0"></p>
<p>Akzidenz-Grotesk Halbfett, Berthold Schriftprobe Nr. 405, c. 1950.</p>
</div>
<div>
<p>In the printing trade »Akzidenzen« meant occasional printed matter, everyday things like business and greeting cards, flyers, posters, handbills, timetables and forms. To this end Akzidenz-Grotesk was a humble, everyday typeface used for everyday needs.</p>
<p>In his book <i>Die neue Typography</i> from 1928 Jan Tschichold wrote:</p>
</div>
<div>
<div>
<blockquote>
<p>Among all the types that are available, the so-called ‘Grotesque’ is the only one in spiritual accordance with our time.</p>
</blockquote></div>
</div>
<div>
<p>He liked the genuine, original grotesques like Akzidenz-Grotesk. Geometric sans-serifs — like Futura — were too “designed” for his eye.</p>
</div>
<h2>2. Futura</h2>
<div>
<p>Futura was designed by Paul Renner in 1927. According to the <a href="http://ift.tt/2netw9y">Bauer Type Foundry marketing</a>, it was »die Schrift unserer Zeit« — “the Typeface of our Time”. But what was actually going on during this time? In the 1920s change was blowing through the nascent profession of graphic design. Rationality, order and grids had become fashionable. Influential designers and design schools like the Bauhaus fixated on the supposed purity of geometry, specifically the most elemental of forms: the circle, square and triangle.</p>
</div>
<div>
<p>    <img alt="Herbert Bayer Universal Alphabet, from Visible Word" src="http://ift.tt/2p49RG2"></p>
<p>Herbert Bayer’s “Universal Alphabet”. From The Visible Word, 1969.</p>
</div>
<div>
<p>Herbert Bayer made this lettering in the early 1920s. This was a fairly typical approach for the time, and illustrates clearly the problems designers quickly run into when trying to impose hard geometry onto soft letterforms. The result is a charming but clunky set of compromised type, perfectly illustrating the adage:</p>
</div>
<div>
<div>
<blockquote>
<p>A typeface is a beautiful collection of letters, not a collection of beautiful letters.</p>
</blockquote></div>
</div>
<div>
<p>A typeface has to work as a whole, which is why Futura is such a remarkable typeface. For the first time, Renner and the Stempel foundry managed to skilfully combine the appearance of geometry in letterforms. What’s nice about Futura is the method of letterform construction, the small x-height, the generous warm curves and human details like the round tittles and punctuation.³</p>
</div>
<div>
<p>    <img alt="Futura Halbfett &amp; Drieviertelfett." src="http://ift.tt/2nehZaq"></p>
<p>Futura Halbfett &amp; Drieviertelfett,  Futura specimen 1952.</p>
</div>
<div>
<p>However, for such a rational typeface many compromises were made. The sharp points of <i>A M N</i>  have to be blunt in the bolder weights to stop them clogging up. The terminal treatment of <i>c g s</i> is irrationally inconsistent. He also had to bow to the necessary optical corrections in letterforms. It’s been said before but bears repeating: Futura’s <i>O</i> is not a perfect circle.</p>
</div>
<div>
<div>
<blockquote>
<p>The typeface could have been rushed, but Renner and Hartmann were not content until many trial versions had been rejected in the interests of achieving the subtle design features that gave the appearance of true geometric letterforms.</p>
<p>                — Paul Renner: the art of typography </p>
</blockquote></div>
</div>
<div>
<p>The key word is “appearance”. Geometric typefaces are all about the facade of geometry. It’s the same with other famous geometrics in later decades, like ITC Bauhaus and Herb Lubalin’s Avant Garde: Geometry is simply an aesthetic. No matter how hard the type designer tries to rationalise a letterform, it must take human needs into consideration.</p>
</div>
<div>
<p>    <img alt="Calvin Klein Ad" src="http://ift.tt/2p43xyr"></div>
<div>
<p>It’s all style and no substance. The sharpness can be shrill, the geometry professes to be Euclidean but has to be organic: it’s always false. Geometry is merely a style, not a method of construction. To this end, it’s favoured for fashion. It has the aesthetic signals and cues that companies like Calvin Klein exploit. It supposed to have qualities like ‘pure’ and ‘rational’, but these are largely inferred, they’re not necessarily real.</p>
<p>Tschichold knew this instinctively about geometrics and wrote influential polemics about it. And Bayer, despite his attempts at making geometric letters, turned to Grotesks for his commercial <a href="http://ift.tt/2nesjze">design work</a>. These <a href="http://ift.tt/2p4jh4d">bank notes</a> commissioned during a time of German economic hyper-inflation are a perfect example.</p>
</div>
<h2>3. Helvetica</h2>
<div>
<p>In the 1950s Akzidenz-Grotesk enjoyed an enormous second wave of popularity, largely due to the rise of the Swiss “International Style”. It was the preferred typeface among typographers and graphic designers, so much so that all major European type foundries wanted to issue a comparable typeface: Deberny &amp; Peignot with <a href="http://ift.tt/2nesZ7L">Univers</a>, Bauer with <a href="http://ift.tt/2p4inEZ">Folio</a> and Haas with Helvetica.</p>
<p>In 1957 Eduard Hoffman was the director of the Haas type foundry in Switzerland. He enlisted the help of his top sales rep, Max Meidinger to design a new typeface. A new typeface can’t be created from thin air, it has to come from somewhere. Meidinger was a good salesman. He knew his customers and what they were using: Akzidenz-Grotesk.</p>
<p><a href="http://ift.tt/2neBMqc">Helvetica Forever</a> shows Meidinger’s notebooks. Most pages have a comparison between Haas’s developmental version of Helvetica and Akzidenz-Grotesk. During nearly every step of the process they contrasted and compared their version to the original Grotesk: Akzidenz.</p>
</div>
<div>
<p>    <img alt="Helvetica Halbfett" src="http://ift.tt/2p4miBD"></p>
<p>Helvetica Halbfett, c. 1960</p>
</div>
<div>
<p>Since its release Helvetica has become a typographic behemoth, favoured by enormous faceless corporations with top-down governance. It’s everywhere, and it’s boring. It’s extremely hard for a contemporary Neo-Grotesk to break away from these associations and feel fresh and vibrant.</p>
<p>What we took from Helvetica is the concept of related weights and matching details, but more importantly the regularity of its letterforms. A large part of Helvetica’s power comes from the normalisation of the widths of upper and lowercase.</p>
</div>
<h2>Trade Me’s Tone of Voice</h2>
<div>
    Trade Me’s master brand details 6 key phrases defining their tone of voice. Once we had established the typographic values of Akzidenz-Grotesk, Futura and Helvetica we aligned them to Trademe’s values, personality and tone of voice.
</div>
<div>
<p>    <img alt="Story Sans Trade Me Voice: Open &amp; Fun" src="http://ift.tt/2neu1Rf"></div>
<div>
<div>
<blockquote>
<p>We take what we do, and what you do seriously. But we’re never afraid to have a good time doing it. We speak with wit and a healthy dose of humour.</p>
</blockquote></div>
</div>
<div>
<p>There is no fun in Helvetica, or even Futura. Decades of corporate service has sucked the spirit and joy from Helvetica, and the seriousness of faux-geometry renders Futura humourless. Grotesks are serious and hard-working when necessary, but they are not buttoned-up drudges. There is a vital essence to their forms.</p>
</div>
<div>
<p>    <img alt="Story Sans Trade Me Voice: Passionate Advocates" src="http://ift.tt/2p485F0"></div>
<div>
<div>
<blockquote>
<p>We’re an organisation with heart. Our words reflect our passion for our members and the New Zealand community. We speak out for what we believe is right.</p>
</blockquote></div>
</div>
<div>
<p>Helvetica and Futura advocate for top-down corporate governance and fashion respectively. These are not community-driven typefaces. Grotesks were designed and used with heart by the international typographic community.</p>
</div>
<div>
<p>    <img alt="Story Sans Trade Me Voice: Unexpected &amp; Driven" src="http://ift.tt/2nei0v0"></div>
<div>
<div>
<blockquote>
<p>We may be large, but we have the spirit of a rebellious underdog. We convey a sense of restless drive for continual improvement. We are excited for what’s happening on Trade Me.</p>
</blockquote></div>
</div>
<div>
<p>There is nothing rebellious about Neo-Grotesks or Geometrics. Whatever avant-garde spirit they once had has long gone. For good reason, Grotesks still retain their underdog spirit. They’re enormously useful and it’s a breath of fresh air when they’re used at such a high branding level. Virtually every company involved in tech falls into the Neo-Grotesk trap.</p>
</div>
<div>
<p>    <img alt="Story Sans Trade Me Voice: Evolving &amp; Insightful" src="http://ift.tt/2p4fXpZ"></div>
<div>
<div>
<blockquote>
<p>We reflect life in New Zealand. Our language is up-to-date. We share our vision for the future. Then, armed with insight and ambition, we set out to build it.</p>
</blockquote></div>
</div>
<div>
<p>If the New Zealand DIY spirit could be reflected in any typeface style, it would the Grotesk. Normal, useful, hard-working and interesting.</p>
</div>
<div>
<p>    <img alt="Story Sans Trade Me Voice: Straight Up &amp; Inclusive" src="http://ift.tt/2neCrIa"></div>
<div>
<div>
<blockquote>
<p>We don’t bullshit. We front up. We’re transparent, down-to- earth and empathetic. Straight-forward and respectful, we speak in a one-to-one way.</p>
</blockquote></div>
</div>
<div>
<p>The Neo-Grotesk corporate typographic landscape is awash with bullshit. The Geometric typographic fashion world is the opposite of down-to-earth and empathetic. The only straight-forward typeface is a Grotesk.</p>
</div>
<div>
<p>    <img alt="Story Sans Trade Me Voice: Humble &amp; Human" src="http://ift.tt/2p484R8"></div>
<div>
<div>
<blockquote>
<p>We’re a company built by people for people. We acknowledge the hard work of all the people who make Trade Me what it is. Our members are the heroes of Trade Me, and we speak in a way that reflects that.</p>
</blockquote></div>
</div>
<div>
<p>This is the most important underlying aspect of the Grotesk. It pre-dates all the other sans-serif genres, it was made by many hands and used for the most quotidian types of work. It’s unpretentious, hard-working. It’s humble and human.</p>
<p>It is quite clear that Trade Me is a Grotesk.</p>
<p>And that is exactly what they got.</p>
<p>A humble, modern, human <a href="http://ift.tt/2neuOBF">Grotesk</a>.</p>
<p>***</p>
<p><b>1. </b>The Trade Me design team was lead by Roxy Huntington and Duncan Forbes, with enthusiastic help from Kendyl Bird, Alister Coyne, Denny Ford, Matthew Kerr, Mark McIntosh, Sean van Oossanen, Rachel Radford, Gili Sharrock, Zac Sanderson-Harris, Angela Watkins. Story Sans was named by Logan Mudge from the Trade Me Comms team.</p>
<p><b>2.</b> The typefaces the team liked were: <a href="http://ift.tt/2netxu8">Unica77</a>, <a href="http://ift.tt/1f8dfs3">National</a>, <a href="http://ift.tt/138KSQx">Calibre</a>, <a href="http://ift.tt/1OTc7tf">Circular</a>, <a href="http://ift.tt/Jb9zpC">Theinhardt</a>, <a href="http://ift.tt/1mGieWP">Graphik</a>, <a href="http://ift.tt/1Ohg5IL">DIN</a>, <a href="http://ift.tt/2a3G0ql">Avenir</a> and <a href="http://ift.tt/2nel2Q0">Neuzeit Office</a>.</p>
<p><b>3</b>. “Renner’s pride in Futura was evident, and he still maintained that it was a ‘serifless roman’, and not a grotesk.” — pp 196, <a href="http://ift.tt/2p47anM"><i>Paul Renner: the art of typography</i></a>. It’s been a decade since I read this quote and it still spins me out. Such delicious cognitive dissonance.</p>
</div>
<div><a href="http://ift.tt/2oLqffn">http://ift.tt/2oLqffn</a></div>


Story Sans Design Information

Story Sans Design Information

Top Stories