Tag: kranthi

Stop Redesigning And Start Tuning Your Site Instead


  

In my nearly two decades as an information architect, I’ve seen my clients flush away millions upon millions of dollars on worthless, pointless, “fix it once and for all� website redesigns. All types of organizations are guilty: large government agencies, Fortune 500s, not-for-profits and (especially) institutions of higher education.

Worst of all, these offending organizations are prone to repeating the redesign process every few years like spendthrift amnesiacs. Remember what Einstein said about insanity? (It’s this, if you don’t know.) It’s as if they enjoy the sensation of failing spectacularly, publicly and expensively. Sadly, redesigns rarely solve actual problems faced by end users.

I’m frustrated because it really doesn’t have to be this way. Let’s look at why redesigns happen, and some straightforward and inexpensive ways we might avoid them.

The Diagnostic Void

Your users complain about your website’s confounding navigation, stale content, poor usability and other user experience failures. You bring up their gripes with the website’s owners. They listen and decide to take action. Their hearts are in the right place. But the wheels quickly come off.

Most website owners don’t know how to diagnose the problems of a large complex website. It’s just not something they were ever taught to do. So, they’re put in the unfortunate, uncomfortable position of operating like country doctors who’ve suddenly been tasked to save their patients from a virulent new pandemic. It is their responsibility, but they’re simply unprepared.

Sadly, many website owners fill this diagnostic void — or, more typically, allow it to be filled — with whatever solution sounds best. Naturally, many less-than-ethical vendors are glad to dress up their offerings as solutions to anyone with a problem — and a budget. The tools themselves (search engines, CMS’, social apps) are wonderful, but they’re still just tools — very expensive ones, at that — and not solutions to the very specific problems that an organization faces. Without proper diagnostics to guide the configuration of tools, any resulting improvements to the user experience will be almost accidental.

Sometimes design agencies are brought in to fill the diagnostic void. And while not all agencies are evil, a great many follow a business model that depends on getting their teams to bill as many hours as they can and as soon as possible. Diagnostics can slow the work down (which is why clients rarely include a diagnostic phase in their RFPs). So, many agencies move to make a quick, tangible impression (and make their clients happy) by delivering redesigns that are mostly cosmetic.

A pretty face can last only a few years, but by then the agency is long gone. Invariably, the new owner wishes to make their mark by freshening or updating the website’s look. And another agency will be more than happy to oblige. Repeat ad nauseam, and then some.

Oh, and sometimes these redesigns can be pricey. Like $18 million pricey.

See why I’m so grouchy?

Forget the Long Tail: The Short Head Is Where It’s At

Whether you’re a designer, researcher or website owner, I’ve got some good news for you: diagnostics aren’t necessarily difficult or expensive. Better yet, you’ll often find that addressing the problems you’ve diagnosed isn’t that hard.

And the best news? Small simple fixes can accomplish far more than expensive redesigns. The reason? People just care about some stuff more than they care about other stuff. A lot more. Check this out and you’ll see:

This hockey-stick-shaped curve is called a Zipf curve. (It comes from linguistics: Zipf was a linguist who liked to count words… but don’t worry about that.) Here it is in dragon form, displaying the frequency of search queries on a website. The most frequently searched queries (starting on the left) are very, very frequent. They make up the “short head.� As you move to the right (to the esoteric one-off queries in the “long tail�), query frequency drops off. A lot. And it’s a really long tail.

This is absolutely the most important thing in the universe. So, to make sure it’s absolutely clear, let’s make the same point using text:

Query’s rank Cumulative % Query’s frequency Query
1 1.40% 7,218 campus map
14 10.53% 2,464 housing
42 20.18% 1,351 web enroll
98 30.01% 650 computer center
221 40.05% 295 msu union
500 50.02% 124 hotels
7,877 80.00% 7 department of surgery

In this case, tens of thousands of unique queries are being searched for on this university website, but the first one accounts for 1.4% of all search traffic. That’s massive, considering that it’s just one query out of tens of thousands. How many short-head queries would it take to get to 10% of all search traffic? Only 14 — out of tens of thousands. The 42 most frequent queries cover over 20% of the website’s entire search traffic. About a hundred gets us to 30%. And so on.

It’s Zipf’s World; We Just Live in It

This is very good news.

Want to improve your website’s search performance? Don’t rip out the search engine and buy a new one! Start by testing and improving the performance of the 100 most frequent queries. Or, if you don’t have the time, just the top 50. Or 10. Or 1 — test out “campus mapâ€� by actually searching for it. Does something useful and relevant come up? No? Why not? Is the content missing or mistitled or mistagged or jargony or broken? Is there some other problem? That, folks, is diagnostics. And when you do that with your website’s short head, your diagnostic efforts will go a very long way.

The news gets better: Zipf is a rule. The search queries for all websites follow a Zipf distribution.

And the news gets even jump-up-and-down-and-scream-your-head-off better: Zipf is true not only for your website’s search queries. Your content works the same way! A small subset of your website’s content does the heavy lifting. Much of the rest has little or no practical value at all. (In fact, I’ve heard a rumor that 90% of Microsoft.com’s content has never, ever been accessed. Not once. But it’s a just a rumor. And you didn’t hear it here.) Bottom line: don’t redesign all of your content — focus on the stuff that people actually need.

You’ll also see a short head when it comes to your website’s features. People need just a few of them; the rest are gravy.

And there’s more. Of all the audience types that your website serves, one or two matter far more than the others. What tasks do those audience types wish to accomplish on your website? A few are short-head tasks; the rest just aren’t that important.

As you can see, the Zipf curve is everywhere. And fortunately, the phenomenon is helpful: you can use it to prioritize your efforts to tweak and tune your website’s content, functionality, searchability, navigation and overall performance.

Your Website Is Not A Democracy

When you examine the short head — of your documents, your users’ tasks, their search behavior and so forth — you’ll know where to find the most important problems to solve. In effect, you can stop boiling the ocean…

Ocean

… and start prioritizing your efforts to diagnose and truly solve your website’s problems.

Now, let’s put these short-head ideas together. Below is a report card for an academic website that starts with the short head of its audience:

In other words, of all the audience types this university website has, the three most important are people who might pay money to the university (applicants,) people who are paying money now (students) and people who will hopefully pay money for the rest of their lives (alumni). How do we know they’re the most important audiences? We could go by user research; for example, the analytics might suggest that these audiences generate more traffic than anyone else. Or perhaps the university’s stakeholders believe that these are the most important ones in their influence and revenue. Or some combination of both. Whatever the case, these three audiences likely swamp all other segments in importance.

Then, we would want to know the short-head tasks and information needs of each audience type. We might interview stakeholders to see what they think (column 2). And we might perform research — user interviews and search analytics, for example — to find out what users say is most important to them (column 3).

Of course, as the good folks at xkcd demonstrate, stakeholders and users don’t always see things the same way:

That’s why talking to both stakeholders and users is important. And once you’ve figured out the short head for each, you’ll need to earn your salary and, through some careful negotiation, combine your takes on each audience type’s needs. That’s what we’ve done in column 4.

Finally, in column 5, we’ve tested each task or need and evaluated how well it works. (Because it’s a university-related example, letter grades seemed appropriate.) You can do this evaluation in an expensive, statistically significant way; but really, enough research is out there to suggest that you don’t need to spend a lot of time and money on such testing. More importantly, these needs and tasks are often fairly narrow and, therefore, easy to test.

So, after testing, we can see what’s not going well. Finding information on “mentoring� is hard for applicants. And current students have a devil of a time when they “look up grades.�

Now we’re done diagnosing the problems and can begin making fixes. We can change the title of the “Paired Guidance Program� page to “Mentoring.� We can create a better landing page for the transcript application. The hard part, diagnostics, is out of the way, and we can now fix and tune our website’s performance as much as our resources allow.

From Project To Process To Payoff

These fixes are typically and wonderfully small and concrete, but because they live in the short head, they make a huge and lovely impact on the user experience — at a fraction of the cost of a typical redesign.

The tuning process itself is quite simple. It’s what we used to arrive at the report card below:

If you repeat this simple process on a regular basis — say, every month or quarter — then you can head off the entropy that causes fresh designs and fresher content to go rotten. Thus, the redesign that your organization has scheduled for two years from now can officially be canceled.

Your website’s owners ought to be happy about all this. And you should be, too: rather than tackling the project of getting your website “rightâ€� — which is impossible — you can now focus on tweaking and tuning it from here on out. So, forget redesigns, and start owning and benefiting from a process of continual improvement.

Special Thanks – Illustrations

Eva-Lotta is a UX Designer and Illustrator based in London, UK where she currently works as an interaction designer at Google. Besides her daytime mission of making the web a more understandable, usable and delightful place, she regularly takes sketchnotes at all sorts of talks and conferences and recently self-published her second book. Eva-Lotta also teaches sketching workshops and is interested in (something she calls) visual improvisation. Exploring the parallels between sketching and improvisation, she experiments with the principles from her theater improvisation practice to inspire visual work.

(al)


© Louis Rosenfeld for Smashing Magazine, 2012.


Responsive Images and Web Standards at the Turning Point

Responsible responsive design demands responsive images—images whose dimensions and file size suit the viewport and bandwidth of the receiving device. As HTML provides no standard element to achieve this purpose, serving responsive images has meant using JavaScript trickery, and accepting that your solution will fail for some users. Then a few months ago, in response to an article here, a W3C Responsive Images Community Group formed—and proposed a simple-to-understand HTML picture element capable of serving responsive images. The group even delivered picture functionality to older browsers via two polyfills: namely, Scott Jehl’s Picturefill and Abban Dunne’s jQuery Picture. The WHATWG has responded by ignoring the community’s work on the picture element, and proposing a more complicated img set element. Which proposed standard is better, and for whom? Which will win? And what can you do to help avert an “us versus them� crisis that could hurt end-users and turn developers off to the standards process? ALA’s own Mat Marquis explains the ins and outs of responsive images and web standards at the turning point.

Zocial Button Set: 72 CSS3 Buttons


  

The idea behind this project was to produce a consistent set of buttons that could be used for the range of social actions frequently taken in Web applications. These actions are often important goals for users, such as connecting third-party accounts or sharing content to third-party platforms, so their appearance has to be attractive and clear.

The standard buttons provided by third parties (such as Facebook, Twitter and SoundCloud) vary in size, style and interactivity. A consistent button set could reduce a lot of that visual noise and inconsistency. Furthermore, having it in CSS format means that changing the text for certain actions would be a breeze for developers, and it also allows administrators of non-English websites to translate labels into their native languages.

The button set was designed from the beginning to require no extra markup, and the elements used are entirely the choice of the (semantically considerate) designer. All buttons are fully scalable and customizable, and they degrade gracefully on older browsers, although the aesthetics in IE 6 and 7 are admittedly inferior to image-based alternatives.

No raster images or sprites were used. Instead, vector icons were inserted using a custom font file, an @font-face rule and pseudo elements. For more information, John Hicks has an informative write-up on this technique.

Download The Button Set For Free

This button set is free to use and extend, personally or commercially. No attribution is required.

Features

  • 100%-vector CSS3 buttons
  • @font-face icons and custom font files
  • 72 services supported
  • Button and icon versions supported
  • Em sizing for full scalability
  • Generic primary and secondary action buttons for consistency
  • Graceful degradation on older browsers

Preview

Screenshots of each set are below. Or view a live demo.

Usage

The button set was designed with simplicity and semantics in mind. No unnecessary or extra markup is required, and button types are called through class names. Call the zocial.css file on your page (make sure the font files and the zocial.css file are in the same directory). Buttons can be displayed with the following markup:

<button class="zocial facebook">Sign in with Facebook</button>

The parent element is agnostic, so you may use <a>, <div> or <button>, but it must contain a child <span> element. [Thanks, Lea!]

To choose buttons from the set, include the appropriate class name for the service, such as .dropbox, .linkedin or .twitter.

Icon versions can be displayed by including an extra .icon class, as follows:

<a class="zocial quora icon">Follow me on Quora</a>

More code samples are available on the Zocial page.

(al)


© Sam Collins for Smashing Magazine, 2012.


Smashing Daily #1: Mobile Device Lab, Browsers and Animated GIFs


  

Editor’s Note: This post is the first in the new Smashing Daily series on Smashing Magazine, where we highlight items to help you stay on the top of what’s going on in the industry. Vasilis van Gemert will carefully pick the most interesting discussions, tools, techniques and articles that were published recently and present them in a nice compact overview. Smashing Daily #2 and Smashing Daily #3 are now published, too.

Vasilis goes through dozens of RSS feeds and hundreds of tweets so that you don’t have to. Do you find the new series interesting? What would you like to have? And what wouldn’t you like to see? Let us know! We’d love to hear your feedback in the comments!

A couple of words from Vasilis himself:

Vasilis van Gemert“Years ago I started collecting links, and once a week I would write an email to my colleagues with a small introduction to every link. Later on I decided that more people than just my colleagues might benefit from this collection, so I decided to publish everything on The Daily Nerd.

“Last November, during the Fronteers conference in Amsterdam, Lea Verou convinced me to start writing in English; up until then, I wrote my comments in Dutch. More and more people started following me, and I think that’s a good thing; I believe more talented people than me should know the things I know. By more talented people, I of course mean you, the reader, so you can understand just how excited I was when Vitaly Friedman asked me if I wanted to start publishing the Daily Nerd on Smashing Magazine. So, here we are, the first episode of the Smashing Daily! I hope you like it!”

Smashing Daily #1: Mobile Device Lab, Browsers and Animated GIFs

Your local mobile device lab
Jeremy Keith started an open local mobile device lab in Brighton, and he urges you to do the same in your home town.

Screenshot

Web font performance: Weighing @font-face options and alternatives
An important part of design and UX is performance, so when you decide to use a Web font, you should definitely know what the negative impact that choice might have on your users. Here’s an excellent in-depth article about font performance. Yes, you should definitely read it (and the comments, too, because they’re actually quite good).

Miscellany #7,� Shady Characters
Here’s a short post by Keith Houston, with news and thoughts about unusual characters. A pleasure to read, like everything else on his blog.

Screenshot

TypeStacks: Instant font stacks based on your font
Here’s a nice tool that suggests a font stack based on your chosen font. It knows the fonts served by TypeKit, although it doesn’t seem to know too many Google Fonts. Still, a very handy tool.

Let’s Get Physical (Units)
There are a few occasions when we’d love to use physical units (such as cm and in), but unfortunately these units don’t work as expected in CSS. Boris Smus has written an extensive article about these units, how they should work, why we want them and why they work the way they work.

Screenshot

Cutting the Mustard
The BBC is working on a responsive news website, and it is sharing everything it finds out, which is extremely useful. In this article Tom Maslen explains how the BBC manages browser support. An absolute must read for anybody who is struggling with the growing complexity of browser support. This solution (or something similar) should be implemented everywhere.

H5BP
Here’s an overview of projects related to the HTML5 Boilerplate. Some excellent stuff is in there, but before you start using everything in there, remember the excellent advice of Rachel Andrew: “Stop solving problems you don’t yet have.�

Screenshot

html5shiv and Serving Content From Code Repositories
Never just link to scripts hosted on other domains, because you won’t always get the advantages, such as caching and Gzip. This is explained in detail in this excellent article. Yes, you should definitely read it.

Thinking Async
Loading an external JavaScript file can block the rest of the page from loading, which of course is a major performance and usability problem. The solution is to load scripts asynchronously, and Chris Coyier shows us ways to do that, extensively as always.

Screenshot

Experience Design Is the Future of Mobile Payments
“Holisticâ€� means something like “complete.â€� So, Perry Chan argues that a “completeâ€� user experience is the future of mobile payments. I actually think that right now, in the short run, whatever the future, the things we have right now are just terrible. Anything would less painful (at least here in the Netherlands). (I also think the future of UX on the Web is bigger fonts — much bigger).

Learn CSS selectors interactively
CSS selectors can be pretty hard to understand, especially the difference between nth-child and nth-of-type. There are many tools to visualize the difference, and this is another one by Ben Howdle.

Screenshot

Allen Tan on highlighting and focus,� Readmill Blog
My father always scribbles annotations in the margins of his paper books. He’s probably been doing this for more than 50 years now, and if somehow we could assemble these annotations, it would be an incredibly interesting and useful database. But as it is, it’s pretty useless. Allen Tan writes about this and more in this article on modern digital reading.

Browser Support
If, for whatever reason, you don’t like any of the tools or websites out there that tell you what browsers support what CSS feature, then this tool might be the one you’re looking for. I still prefer When Can I Use… or Mozilla Developer Network Docs, though.

Stamen
Your app needs a map, but you want something other than boring old Google Maps? You could try OpenStreetMap with one of these beautiful map tiles.

Different map styles

Browser Support? Forget It!
What does “browser support” mean exactly? Some think it means pixel perfection for a predefined set of browsers. According to David Bushell, it means something else. This is a good read for people (or clients) who struggle with the ever-expanding browser landscape.

The id Attribute Got More classy in HTML5
One of the easy ways to get a somewhat unique ID is by using the UNIX epoch time, which generates a string like 1336984564. The problem is that in HTML, an ID had to begin with a letter. Mathias Bynens tells us if this is still the case in HTML5.

Some examples of valid ids

Autofill City and State From Zip Code With Ziptastic
Filling out forms is a pain in the butt, especially on devices without a traditional keyboard. You should be asking users for as little information as possible. If there were a way to make things easier, you should probably do it. For instance, you could prefill parts of an address when the user enters their ZIP code. Chris Coyier shows us what a flow like that could look like.

CSS Layout Gets Smarter With calc()
A thing we needed desperately before being able to use box-sizing: border-box was the ability to mix different CSS units. There are still some use cases for this, though, and luckily more and more browsers are supporting the calc() property. Here’s how it works.

Last Click

The Origin of the <blink> Tag
Here’s the true story behind the blink tag by the guy who came up with the idea, Louis J. Montulli II. A nice anecdote on early browser history.

mr. div
Of course, you could use a simple Web technology like canvas or WebGL to generate beautiful animations, but why do it the easy way when you could use the ever-amazing animated GIF? Here’s a great Tumblr blog to follow if you’re looking for some random fantastic 4-D inspiration.

What Do You Think?

Do you like this new series? What would you like to see in it? Please provide some feedback, and let us know what you think!

(al) (vf) (il)


© Smashing Editorial for Smashing Magazine, 2012.


The Font Wars: A Story On Rivalry Between Type Foundries


  

I had thought terms like “intellectual property� and “intellectual theft� were of fairly recent provenance, so my eye was caught by the latter’s use in a headline of a 1930 edition of the US trade journal The American Printer.

The article it headed proved to be equally intriguing, a response by the president of American Type Founders (ATF) to a June 1929 article in the German journal Gebrauchsgraphik by the designer Rudolf Koch, calling the ATF a “highway robber of German intellectual property.� At issue was a typeface marketed by the ATF earlier in 1929 called Rivoli.

Koch and the German type foundry Klingspor asserted that Rivoli was no more than a copy of Koch’s 1922 design of Koch Antiqua, also later known as Locarno and released in the US as Eve. Klingspor had already taken legal action for piracy against the Viennese foundry Karl Brendler und Sohne for its lookalike Radio Antiqua but with no success.

Part of the sample of Wyss’ script offered by the ATF to back its claim that Koch Antiqua was not its designer’s intellectual property
Part of the sample of Wyss’ script offered by the ATF to back its claim that Koch Antiqua was not its designer’s intellectual property. Neither of the two styles of “g� resemble Koch’s, however, to take just one example.

Koch Antiqua, and uppercase letters of the italic.
Koch Antiqua, and uppercase letters of the italic.

Klingspor lost that case, the ATF argued, because far from Koch Antiqua being Koch’s or German intellectual property, both it and the Austrian face were based on the Lombardic penmanship of the Swiss calligrapher Urbanus Wyss, in particular from his 1549 book Libellus Valde Doctus. Klingspor could not claim theft of a design that was not its to begin with.

Whatever the truth of this, the most striking part of the ATF’s broadside was its free admission that the similarity between Rivoli and Koch Antiqua/Eve, far from being accidental, was quite deliberate, Rivoli having been created and released both as a spoiler for the popular Eve and as a “reprisal� face. Klingspor was partially owned by Stempel, whose 1925 catalogue contained what the ATF claimed were “confessedly� fourteen type series of US origin, including what they deemed pirated versions of their own designs.

ATF’s comparison of the faces that accompanied its article.
The ATF’s comparison of the faces that accompanied its article, but not the truth, says David Pankow. What was purported to be Wyss’ script was, in fact, Brendler and Sohne’s Radio Antiqua, printed heavily on soft paper.

The ATF-Koch-Stempel face-off was part of a savage turf war fought by a company to defend its commercial position, with—arguably, only a decade after a World War—some national antagonism thrown in. (For the full story, see David Pankow’s “A Face by Any Other Name Is Still My Face: A Tale of Type Piracyâ€� in Printing History New York, 1998, page 37.) The ATF remained relatively conservative in its designs, whereas on its own doorstep the New York-based Continental Typefounders’ Association was importing type in which was enshrined the latest European stylistic developments. The acerbity of the language on both sides was unrestrained, and it was exacerbated by the ATF’s suspicions that Continental was involved, too, stoking the fires of the argument.

Type design is a business that has long been bedevilled by piracy and plagiarism (conscious or not), licensing issues and scant or no legal protection for intellectual property. Some of the problems stem from the nature of the craft itself. Although, in theory, the number of ways you can position the points of, say, the capital “A� are myriad, the demands of legibility, style and fashion radically reduce the options, and alphabet designs all use the same raw material.

As designer Dave Farey described himself, facetiously but with an undercurrent of truth, “Nothing I have done is original. It’s all based on the 26 letters of the alphabet and the Arabic numerals.� Add to this the revivals and redrawings of classic faces, and the similarities are unavoidable. Type design is an art that is constantly echoing and alluding. Most people who work in the graphic arts are, in a big part of their design psyche, fans. We were probably inspired to get started in the first place by seeing other people’s work that we absolutely love. It’s unavoidable that some of that DNA will crop up or be used consciously in our own work. In the case of type revivals, you can at least credit your source in the type’s name; as designer Nick Shinn says on Typophile, “plagiarism means copying without recognition of the source.�

In today’s digital environment, do any of the attitudes and practices that marked the ATF quarrel persist? I asked Phil Garnham of London’s Fontsmith if he regards other font companies as rivals:

“I think there is definitely a healthy and friendly rivalry between today’s independent digital foundries. Over the past few years, as designers have become more aware of the power of type in branding, particularly the possibilities of bespoke type and with the boom in type design education at Reading University and Type Media at the Hague, fresh competition is popping up on a monthly basis, which is a great thing for type design. It keeps us all on our toes and looking for new possibilities within our beloved alphabets.”

And spoilers? Phil feels the tactic might still be out there, but for his own part, like musicians who consciously don’t listen to other people’s music when writing and recording, he tries not to look too much at other work: “I think that it keeps me detached from other people’s ideas, and allows me to pursue mine, free from any subconscious involvement.�

But even then, you can find that what you’ve done looks like something else. “Arguably, I think there are many designers tripping up in this way, even with the best intentions. I’ve been in this awkward position myself. You have to explore new proportions and alternative letterforms so you can bring something new to the market.�

Horatio: Square leg: Horatio with its restyled ‘R’ in the Letraset catalogue, available in three weights.
Square leg: Horatio with its restyled “R� in the Letraset catalogue, available in three weights.

How close have people steered consciously? Dave Farey recalls from his time working for Letraset that among a selection of faces presented to the committee for inclusion in the dry transfer giant’s range was Harry, a design owned by the Visual Graphics Corporation (VGC). The committee loved it, but unfortunately permission hadn’t yet been obtained, and VGC refused. So Letraset produced Horatio. “I think the only thing we changed was the leg of the uppercase R,� Dave recalls, adding candidly, “Ours was worse.�

Heldustry: From the 1983 Compugraphic Type catalogue.
Heldustry, from the 1983 Compugraphic Type catalogue.

Clues could even be gleaned from the font names—or not. Customers requesting Helvetica from photosetting companies of the 1980s that used the Compugraphic type library might have been told, “We don’t have Helvetica, but we do have Heldustry,â€� which looked… well, similar. The catalogue that digital company Bitstream produced at the start of the 1990s was helpful to customers unable to find familiar names: its Staccato 222, for instance, was the “Bitstream version of Mistralâ€�; “Lapidary 333 was the Bitstream version of Perpetuaâ€�; Venetian 301 the “Bitstream version of Centaur.â€�

Staccato: From the Bitstream catalogue, early 1990s.
Staccato, from the Bitstream catalogue, early 1990s.

Some More Face-Offs

Memphis and Stymie

Memphis seen here in extra bold weight, and Stymie Bold. Memphis was designed by Emil Weiss.
Memphis, seen here in extra bold weight, and Stymie Bold. Memphis was designed by Emil Weiss.

1931 saw ATF squaring off with Stempel again, countering its Memphis slab serif with Stymie, the name being golf lingo for blocking your opponent’s line of play. ATF’s prolific Morris Fuller Benton based Stymie on his own Rockwell Antique, which was itself basically a repackaging of Litho Antique, whose owner (the Inland Type Foundry) had been taken over by ATF. According to Patricia Cost in her book The Bentons, Monotype then copied Rockwell Antique and called it, confusingly, Stymie Bold.

Janco and Banco

The Typefaces Banco and Janco
Rather than stealing the design, Excoffon exercised squatter’s rights in the territory… with style (above). The names were nearly identical—probably no coincidence.

French type legend Roger Excoffon’s employers, Fonderie Olive, was such rivals with Parisian foundry Deberny and Peignot that Excoffon examined with a magnifying glass a picture of its designer Marcel Janco at work on his new self-named type. “Then I rapidly made some sketches for a few letters in a commercial type, not identical, but of the same family… The rest is a success story. Banco was used throughout the world… It’s the most shameful thing I ever did in my career.� (You’ll find this story in Roger Excoffon et la Fonderie Olive, by Sandra Chamaret, Julien Gineste and Sébastien Morlighem, Ypsilon Editeur, Paris, 2010.)

Starling Burgess vs. Stanley Morison

A comparison of Starling Burgess’ design (Lanston no.54) and Stanley Morison and Victor Lardent’s work on Times.
A comparison of Starling Burgess’ design (Lanston no.54) and Stanley Morison and Victor Lardent’s work on Times, as it appeared in “Printing History 31/32� (1994).

According to a 1994 article by Mike Parker that appeared in Printing History, Times New Roman was an extremely close reproduction of a typeface designed years earlier by genius boat and car designer and maverick Starling Burgess, which lay unpaid for and abandoned at Lanston Monotype until the design of the new face for The Times newspaper became problematic. Although Morison had a reputation among some for being a slippery operator, the story as presented seems hard to credit: Font Bureau offers a Mike Parker design called Starling.

Futura and Twentieth Century

Twentieth Century (above), Lanston Monotype’s response to Futura (below).
Close but no cigar: Twentieth Century (above), and Lanston Monotype’s response to Futura (below).

Buffalo, New York-based foundry P22 has in its Lanston Type Company collection Twentieth Century, “Monotype’s answer to Futura.� It describes Sol Hess’ redrawing as “close�; as an attractive optional extra, it has included digital recreations of some of Paul Renner’s original experimental characters for Futura.

Comic Sans and Chalkboard

Comic and Chalkboard.
Comic and Chalkboard: both ideal for warning notices.

Apple’s OS X doesn’t supply you with the world’s favorite, Comic Sans, but you do get Chalkboard, which inhabits pretty much the same terrain.

Helvetica and Arial

Arial and Helvetica.
Hard to fully love perhaps, but Arial has certainly been well used, if only because it is the default setting.

Arial, designed in 1982 by Robin Nicholas and Patricia Saunders, seems to attract its share of ill will in “font hate� blogs these days on the grounds of it being Microsoft’s Helvetica lookalike.

Does It Really Matter?

For the user, does any of this matter? If you like a font and it fits your purpose, then its provenance is irrelevant. And if it’s a new or recent design, then it comes with little or no back story. In terms of design rationale, investigating the background of your choice is always useful. Who designed it? When and for whom—for a particular project or for a company? If for a project, would those associations jar with how you’re planning to use it now, and does that matter? If it was originally designed for Monotype, is the font you’re planning to buy from Monotype or from another foundry? What does Monotype offer as its version, and how does it compare? Stempel Garamond versus Simoncini Garamond, or Garamont?

Koch Rivoli.
Koch Rivoli: channelling the spirit of Rudolf Koch and Willard T. Sniffin.

And how has history served those original battling typefaces? Sebastian Carter in Twentieth Century Type Designers describes Koch Antiqua as “one of the most successful advertising faces of the inter-war period, still often used to suggest the vanishing luxury of ocean liners.� Although some of that usage might have been in reality Rivoli, Koch’s reputation as a type designer endures.

As does the name Rivoli, although its creator or draughtsman, the magnificently named Willard T. Sniffin, is less remembered. But UrbanFonts.com for one offers as a free font Koch Rivoli (a pairing of names that would have the German designer spinning in his grave), an uppercase-only design that takes inspiration from the thick-thin double stroke of Koch’s italic uppercase—and Rivoli’s.

Note: A big thank you to our fabulous Typography editor, Alexander Charchar, for preparing this article.


© Simon Loxley for Smashing Magazine, 2012.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress