The Evolution of the International Typographic Style: From Print to Web

The popularity of generated content and social media is transforming the web. No longer does a site need a flashy intro or exciting graphics to entice a user to dig deeper, search engines and smart architecture bring the user right to what they are seeking, and when they find that… they want to appreciate it for what it is. Usability, readability and find-ability are in style, while hefty load times, blinking graphics, and cluttered pages are out. The best example is the decline of users flocking to MySpace, seeking structure, order and clarity they are now looking to make less visually complex social media hubs their home.

This focus on content is similar to the shift in design that happened after World War II known as the International Typographic Style (or Swiss Style) Movement. The Swiss movement grew out of the Bauhaus and New Typography Movements, which were grounded in functional typography, clear communication, and geometric designs. The Chief characteristics of the international typographic style are designs that include minimal graphics and a focus on typography, sans-serif Typefaces, black and white photography, and grid based layouts. Pioneers of the Swiss style were Max Huber, Emil Ruder, Josef Müller-Brockman, and Armin Hofman. What really helped facilitate the success of this movement was the Swiss governments support of it, adopting it as the look and feel for Switzerland.

Over time the Swiss Style has been used in publications, on posters, and in signage, but I have noticed it is beginning to evolve and become popular online. This evolution has been happening for some time now in the design community but is quickly being spread to social media sites, and the Online News Industry. What has spawned this Swiss revival? I am sure there are lots of factors, but I personally think it may be in part to the renewed interest in typography that has happened since the release of the film Helvetica by Gary Hustwit. Helvetica was one of the premiere typefaces created during the Swiss movement (along with Akzidenz-Grotesk); it’s name is derived from Confoederatio Helvetica the latin name for Switzerland. The film traces the history of the typeface and interviews famous designers who all can relate to Helvetica. It helps to trace the origins of todays design back to the International Typographic Style, and makes typography cool.

While very few sites stay strict to all of the defining qualities of The international typographic style, many are heavily influenced by the overall look, and stay true to many of the features. I put together some comparisons and examples and were amazed by the similarities.

Minimal Graphics and Focus on Typography
Neue Grafik Magazine published 1958-1965
IA Japan is a “Strategic Design Agency” based in Japan.

Sans-serif Typefaces
One in a series of posters Josef Müller-Brockman designed for the Zurich Opera House. He was interested in the patterns in typography mimicking the rhythm in music.5ThirtyOne is a blog by Derek Punsalan is a Designer in Seattle.Black and White Photography Publication from the Hochschule für Gestaltung Ulm
Design by Anthony Froshaug
(photo courtesy of Mason Wells)Jon Tan is a Designer in Bristol, UK
Grid Layout
Knoll Poster by Muller-BrockmanEvening Tweed is a graphic Design Collective in the UK

There are 3 specific types of sites that are leading the charge in the resurgence of the Swiss style online, however I am going to save that for another post. A topic I am totally fascinated with, I can assure you there is more to come!

11 Comments

The Web Going To International Typographic Style? It’s About Really Clean Design….

I have this love affair with Helvetica (note, I said Helvetica, not that bastard child, Arial) and other really clean type styles. It’s one of the reason I’m kind of futzing with this site on a semi-regular basis — I’m trying to…

Great post! I’ve definitely noticed the trend toward cleaner layout and type. Seems to partly be a backlash in response to all the pretty (but useless) pictures that used to be the meat of every site. The web is still so limited in regards to typography, which can be frustrating. That was one fun thing about print design – I could use any font in the world without worrying about a big fat static graphic, a weighty Flash file, sIFR, or ruining accessibility!

I certainly hope your observations are accurate and a we’ll see more influence of the Swiss/International style online.

Admittedly, I love the aesthetic; to my eye, it is the apex of geometry, ratio, and balance—all synergistically working together.

Beyond its aesthetic style, the reason it works so well is that rational functionalism is at its essence. Hierarchy, grids, clean typography…everything works to streamline the transmission of information…and to do so beautifully.

For so many websites, they either have poorly organized/hard to access information or distracting “bells & whistles” which detract from communicating (background soundtracks are one of my pet peeves!).

So, if Swiss/International design sees some popularity online, I certainly hope that it is because designers recognize it for it’s superiority in organizing info…and not just a surface-level “aesthetic du jour.”

If anyone is interested in more info/eye candy on this topic, I can’t recommend highly enough the book “Swiss Graphic Design: The Origins and Growth of an International Style, 1920-1965″ by Richard Hollis (isbn 978-0300106763).

When I was going to school, my teachers (who abhorred computers) taught us about comps, rubilith, mechanicals and gouche as a medium for mock ups—I think I might be dating myself here. They also taught us The International Style or Swiss Style. The ‘Text as Image’ principle. I can’t tell you how glad I am that there is a revival of sorts in the web medium but it has been around very early on by places like designersrepublic from the UK.

I’ve been heavily influenced by some of the beautifully composed posters of the 60s and 70s and I think Americans are aligning themselves with europe’s lead. The implied directive is clean design (I hope some of the largest e-commerce sites could take this approach). But then again, we as designers and visual aestheticians would be inclined to see the beauty of order and hierarchy in its most fundamental. Would the public at large appreciate this? Or even care? How many clients have you encountered that wanted blinky, flashy design with a ton of images? A lot. Speaking of lot, what about Otl Aicher? Would you consider his style under the same heading as Mueller-Brockmann?

Great post Samantha, it’s good to know others responding to the seemingly unknown great and rich history in typographic design of the International Style. I’m sure the film brought more focus and hopefully tuned some of the younger folk into it.

You might possibly have bothered to cite my blog posting on the topic from *five* years ago.

— July 14, 2008

Samantha

@Joe, I would have been happy to cite your post if I had used it as a reference. You are more than welcome to post a link in a comment if you feel it would add to the conversation.

@Hernan I am not as familiar with Olt Aicher’s work, but his work is stunning. The International Style was also very popular in Germany. I am also a big fan of Deutsches Institut für Normung, and honestly really should brush up on the history on how the two relate, differentiate. Maybe a future blog post? If you have any insight feel free to post it here.

— July 14, 2008

Aaron

This is an interesting post about the intersection between design and technology. While designers have personal, aesthetic reasons for adhering to a grid, when it comes to the web, the nature of programming plays a huge role in layout.

Clean, semantic mark-up has become the standard for web designers for a variety of reasons, and being based on the box model lends itself to grid based layout. What is interesting to me here is how much technology dictates the parameters of design on the web.

The fact that web designers utilize other visual qualities of ITS is a testament to its’ power and longevity, but I disagree that the recent Helvetica documentary is a predominant factor in the resurgence of ITS, at least when it comes to web design.

— July 14, 2008

Samantha

@Aaorn Thanks for your input! I would agree that there are tons of advantages of using the grid where programming plays a huge roll. Especially with many designers using CSS frameworks, grids make build-out a lot quicker.

I would not, however say that the film Helvetica is a predominant factor in this revival online. I have personally noticed a renewed interest in the ITS amongst all designers since the movie ‘s release. There has definitely been more chatter amongst the overall design community, and particularly more in the web design community online since it’s debut screening at SXSW 2 years ago. I feel like the talk has picked up, but the actual use of ITS has far more factors, one predominant one being the grids contribution to easier build-out.

Great article and references! I recently heavily incorporated some of the logical thinking and hierarchical advantages of grid systems into my site, Thinking for a Living (http://thinkingforaliving.org/). For me, it was the best way to combine organized data and clean code into a flexible framework that allowed for a wide variety of content. I suppose it’s a natural given the medium of the web.

One Trackback/Pingback

The Web Going To International Typographic Style? It’s About Really Clean Design….

I have this love affair with Helvetica (note, I said Helvetica, not that bastard child, Arial) and other really clean type styles. It’s one of the reason I’m kind of futzing with this site on a semi-regular basis — I’m trying to…