something in the way

a tumblog about design + code
Sep 19

YES NO

Media_httpwwwswissmis_kcgkl

I am a big fan of all things Markus Raetz. The fact that he now made a Typographic Illusion Scultpure makes me swoon.

Jun 28

Identify web fonts with WhatFont

The WhatFont tool is a great way to identify what web fonts are being used right on a page. When the bookmarklet is active, just click on any text to discover its full font stack!

Go to chengyinliu.com/whatfont.html to install the bookmarklet (Firefox 3.6+, Chrome 9+, Safari 4+, Internet Explorer 9) or get the extension for Chrome.

Media_httpfeedsfeedbu_nicyx
Media_httpfeedsfeedbu_gncdw
Mar 7

Google before you Tweet

Media_httpwwwswissmis_mceby

A shame this letterpress print by Joe Newton is sold out.

May 20

2010: Web Fonts Are Here and Ready to Use

Media_httpajaxiancomw_lmhvt

There's an old saying: "It took me ten years to be an overnight success." We've been waiting for web fonts for at least a decade, and 2010 will finally be the year that web fonts go mainstream.

This is in no small part to the work both Typekit and Google have been doing. Today they both announced some very cool things in this area.

First up, Google announced that they are releasing high quality open source fonts in the Google Font Directory. Since these are open source you can even download the original font files yourself at the font code.google.com project.

Media_httpajaxiancomw_vojhe

Next, Google has made it very easy to include these fonts into your page using the new Google Font API. To use a font you simply drop some HTML into your page similar to the following, specifying the font you want to use:

PLAIN TEXT
HTML:
<link href='http://fonts.googleapis.com/css?family=Tangerine'
      rel='stylesheet'
      type='text/css'>

body { font-family: 'Tangerine', serif; }

Doesn't get simpler than that. The new API does alot of things for you behind the scenes:

Google’s serving infrastructure takes care of converting the font into a format compatible with any modern browser (including Internet Explorer 6 and up), sends just the styles and weights you select, and the font files and CSS are tuned and optimized for web serving. For example, cache headers are set to maximize the likelihood that the fonts will be served from the browser’s cache with no need for a network roundtrip, even when the same font is linked from different websites.

These fonts also work well with CSS3 and HTML5 styling, including drop shadows, rotation, etc. In addition, selecting these fonts in your CSS works just the same as for locally installed fonts, facilitating clean separation of content and presentation.

On a related front, Typekit and Google announced a new Web Font Loader that smooths over many of the differences around loading web fonts on a page:

The WebFont Loader puts the developer in control of how web fonts are handled by various browsers. The API fires JavaScript events at certain points, for example when the web font completes downloading. With these events, developers can control how web fonts behave on a site so that they download consistently across all browsers. In addition, developers can set the fallback font's size to more closely match the web font, so content doesn't reflow after loading.

Furthermore, the WebFont Loader is designed to make it easy to switch between different providers of web fonts, including Google, Typekit, and others. The code is modular, and we expect to add modules for other major web font providers in coming weeks.

It's great to see Typekit involved in this; they are a real pioneer in this area and have helped make fonts on the web a reality.

Media_httpajaxiancomw_edqcb

To see all these pieces together navigate over to Smashing Magazine which relaunched their site using these technologies.

Congrats to the Google Web Fonts and Themes team, including Raph Levien, Jeremie Lenfant-Engelmann, Marc Tobias Kunisch, Meslissa Louie, and David Kuettel.

[Disclosure: I work for Google and know the Web Fonts team. However, even if I didn't, I would still be excited about this since I've been waiting for web fonts to happen since the 90s!]

Media_httpfeedsfeedbu_exjcc
Media_httpfeedsfeedbu_fnwfd
Media_httpfeedsfeedbu_ekeyg
Aug 7

The Font-as-Service

By Elliot Jay Stocks

When Johno first asked me to write about Typekit, I jumped at the chance. I’d received a beta invite to try out the service about a week before, but deadlines had got in the way of actually getting round to it. Now I had the perfect excuse to have a proper play, create a test site, and immerse myself in the technology that got the web design community frothing at the mouth when it was announced a couple of months ago.

However, as I started to experiment with Typekit, I realised that the really interesting thing isn’t the technology itself: it’s what Typekit — and other services in the same vein — mean for the way we experience type on the web. And I’m not talking about it from a user’s perspective, where they get to see the end results of using a variety of typefaces, but from the web designer’s perspective: the way in which we’re going to be using and paying for fonts.

Media_httpilovetypogr_bdeaf

Let’s get some of the nitty-gritty out of the way first: if you’re unfamiliar with Typekit, there are plenty of blog posts out there that will get you up to speed very quickly. A logical place to start would be the official release announcement on the Typekit blog. Done that? Jolly good. Now you can peruse the various opinion pieces: Andy Clarke offers a very thorough walk-through of the service, and Mike Davidson examines (among other things) the question of Typekit’s compatibility reach. Because of these posts (and others, of course), there seems little point in me repeating the content here. However, it’s worth noting some of the details, because it’s in the details that Typekit differs from the other solutions gradually coming out of the woodwork (more on them in a minute). The biggest detail that detractors seem to be focusing on is that its delivery method relies on Javascript; not for the font display, of course, but for the domain authentication. Naysayers point out, therefore, that no font replacement will happen if Javascript is turned off (although it’s debatable how much of a concern this actually is) and it also means that it takes a while for the correct fonts to appear while the Javascript loads; an effect often seen on sites that use sIFR.

There are more drawbacks, too. While testing the service I found it simple but not necessarily straightforward, and although much of this can be attributed to its beta status, there’s an important point to consider when using Typekit: you’re defining your font stack via its online admin interface — not in your own CSS files. For me, this was the moment I really developed my doubts about the service, since that kind of separation feels very unnatural to me and acts as a major disruption to my workflow. And I won’t even go into some of the specificity issues this can arise, except to say that you should ensure the Javascript links appear after your stylesheet links, lest you want to screw up your font stacks completely.

To jump back to Typekit’s positive features, however, one of the most overlooked features is that it offers a fall-back for Internet Explorer by serving up an .eot file. Why this is important is because it simultaneously solves two major problems: the availability of multiple typefaces and an integrated delivery method that copes with cross-browser (in)compatibility. Briefly put, it means @font-face is more readily available on IE than it has ever been before because we designers no longer need to worry about all of the fiddly workarounds. This is great news for everyone.

But what about the Typekit alternatives? There are some to get very excited about. Take Typotheque’s bespoke solution, for instance. The foundry have released their own alternative to Typekit and Andy Clarke has a thorough write up of that, too. One key difference is that the authentication is done via PHP instead of Javascript, which is sure to appease those who’ve criticised Typekit on that point. But let’s not forget that this is a foundry-specific solution, and I agree with Andy that it’s sure to pave the way for other foundries to do the same; it makes a lot of sense (to them) to create their own delivery solutions and maintain control, but it’s possibly not the best solution for web designers who have to jump between a variety of systems and pricing models. Wouldn’t a standardised system be better? Haven’t the last few years of web design practice taught us that unification far outweighs the benefits of proprietary solutions?

Media_httpilovetypogr_paatc

Of course, it takes a while to reach one unified model and firstly there’s the small matter of fighting it out in the web design community’s playground. The most successful model will be the one with the biggest support from the community (and funding), and ideally it’ll be one that supports multiple foundries. So let’s consider Fontdeck: another multi-foundry solution, the development of which the Typekit guys will no doubt be watching with eagle eyes. Little is currently known of this mysterious creature, but the really exciting stuff, in my opinion, is the people behind it. Spearheaded by Jon Tan and Richard Rutter — and behind them the funding and support of Clearleft and OmniTI — it’s hard to imagine how this could go wrong from people who have already done so much for bringing solid typographical learning closer to the web design masses. Unlike Typekit, and similarly to Typotheque’s service, authentication will not be done with Javascript, and the word on the grapevine is that we’ll be able to work with CSS in a way that’s closer to our regular workflow. If this means something like putting a Fontdeck-generated font stack directly into our own stylesheet, then this, for me, will be a very major advantage.

Rumour has it that the Fontdeck team are also considering free support for rare script typefaces, providing a way of getting these lesser-used languages on the web, where currently they are invisible. It’s a noble cause and a great example of why proper typography on the web is more important than just pleasing the tastes of us poncey designers.

Media_httpilovetypogr_etgqo

With Clearleft handling the UI of Fontdeck, we know it’ll look great and have a strong focus on usability. With OmniTI handling the security, we know it’ll be as tight as a safe. The company’s track-record in online security is flawless, and with reliable sources claiming that Typekit’s security has already been hacked with relative ease, it’s natural that foundries will be more interested in signing up with a provider that can guarantee the safety of their fonts.

And make no mistake: this is what it really comes down to. A very large part of @font-face’s painfully slow adoption has been down to the font foundries and their concerns over font piracy, and rightfully so. Microsoft’s EOT format in its current state is far from ideal, but because of its potential to offer DRM, it’s the format that foundries have been happy to support, albeit half-heartedly. Now, with services like Typekit and Fontdeck, foundries finally have a reason to embrace type on the web: to open their product to a whole new audience without fear of their typefaces being stolen by anyone adept enough to click ‘view source’. Unfortunately, though, the pricing structure of these new services is still a mystery. With Typekit already in public beta, it’s likely that we’ll find out sooner about its price plans than Fontdeck’s, but right now all we can do is speculate. Undoubtedly the various services will price themselves competitively, but there are so many concerns that go way beyond the service itself: ultimately, with large foundries’ support being such a huge factor in the success of any given service, the price has got to be right for the foundries, not just the service providers or consumers.

And it’s not just a case of deciding on a figure, either. The choices of pricing models are potentially endless. Do you charge the user (that is, the web designer) per typeface? Per family? Do you offer a font purchase with an extended license for web use? Do you charge a subscription for a certain amount of service? Do you charge by the quantity of typefaces needed (5 families for $X a month, 10 families for $X a month, etc.)? Do you offer some for free and reserve some weights (or even glyphs, like ligatures) for paid customers? With the amount of questions that need to be answered and the the amount of question-askers who need to be appeased, I wouldn’t wish that kind of decision making upon anyone!

But, whatever the details of the exact services that end up being offered, one thing will be true: unlike ever before, where previously we had only purchased a font as a closed, finite, singular product, we are now entering the age of the font-as-service: where the font becomes synonymous with web hosting, mobile data plans, and movie rentals. No longer fixed, fonts will be borrowed, subscribed to, removed, expanded upon, and provided on-the-fly.

In his comment on Mike Davidson’s post, Jeff Croft raises the important question about the reliability of the service; not from the view of security I mentioned previously, but from the view of scalability:

When Doug Bowman decides to implement Typekit on Twitter, will Typekit go straight to hell, ruining it for the rest of us? Will we start seeing Typekit-powered sites hanging as we wait for the Javascript bits and font files to load?

With font files being delivered by third-party services, it’s a big concern, and another reason I feel reassured that a company like OmniTI will be looking after the infrastructure behind Fontdeck.

I praised Typekit when it was first released, and although we won’t know what the best solution will be for quite some time, I stand by my original message: it deserves praise because it was one of the first solutions to a long-standing problem; it got out there and said, ‘we can do this,’ when most other people were content to sit there and complain about it. But really this isn’t about what Typekit does, what Fontdeck does, what the various bespoke foundry solutions do, and how each of them does it better or worse than the other. Nor is it about the specifics of formats like .ttf, .otf, or the recently-proposed .webfont (which was summarised very neatly in Johno’s recent post). It’s about how service-based models are finally allowing typography to grow up and take its rightful place on the web.

Are we just hacking away to find a solution that satisfies our demands until a workable standard like .webfont or WebOTF is eventually approved and we can all hold hands and sing songs? Probably, yes. But as Mike Davidson said, “the entire world wide web is a hack.”

Media_httpilovetypogr_iwukg

Elliot Jay Stocks is a designer, illustrator, speaker, & author of Sexy Web Design.
@elliotjaystocks


Media_httpilovetypogr_dbbbd

The Font-as-Service

Media_httpfeedsfeedbu_rwqqh
Media_httpfeedsfeedbu_vimbx
Media_httpfeedsfeedbu_thmzf
Media_httpfeedsfeedbu_ggbxo
Media_httpfeedsfeedbu_junhl
Media_httpfeedsfeedbu_pgaih
Jul 18

Lessons From Swiss Style Graphic Design


 

Also known as International Style, the Swiss Style does not simply describe a style of graphic design made in Switzerland. It became famous through the art of very talented Swiss graphic designers, but it emerged in Russia, Germany and Netherlands in the 1920’s. This style in art, architecture and culture became an ‘international’ style after 1950’s and it was produced by artists all around the globe. Despite that, people still refer to it as the Swiss Style or the Swiss Legacy.

This progressive, radical movement in graphic design is not concerned with the graphic design in Switzerland, but rather with the new style that had been proposed, attacked and defended in the 1920s in Switzerland. Keen attention to detail, precision, craft skills, system of education and technical training, a high standard of printing as well as a clear refined and inventive lettering and typoraphy laid out a foundation for a new movement that has been exported worldwide in 1960s to become an international style.

Emerging from the modernist and constructivist ideals, the Swiss Style can be defined as an authentic pursue for simplicity – the beauty in the underlines of a purpose, not beauty as a purpose in itself. The principle “form follows function” became a battle-cry of Modernist architects after the 1930s. As a consequence of this principle, most of the Swiss Style craft is devoted to the minimal elements of style such as typography and content layout rather than on textures and illustrations.

“Perfection is achieved, not when there is nothing left to add, but when there is nothing left to remove.”

Antoine de Saint-Exupéry

Here are some great resources if you want to dive deep into the Swiss Style Graphic Design.

How the Swiss Style Relates to the Web

This style of graphic design was born in the institutional context. The majority of pieces from this movement are in the form of posters, stamps, institutional typographical identity, street signs, etc. In this sense, these artists are leveraging much more than just top-down communication, they’re creating user-friendly interfaces.

As a result of that, Swiss Style artists tend to put their artistic efforts in that the content they are conveying delivers its intended message in a clear, unobtrusive fashion. One can make the point that they were thinking, in a broader sense, about usability long before the web even existed. How can we not learn from these great masters?

Uniformity and geometry

Even a quick study of classic Swiss style works reveals a strong attention of graphic designers to uniform design elements and strong geometric shapes. Graphic artists have experimented with abstract geometric patterns, uncomon color combinations, text manipulations and striking abstract visuals that were used to clearly convey their purpose in a very remarkable way.

Whitespace: Let The Text Breath

Whitespace can never be underrated. It’s a very important element for both visual impact and readability. It feels quite inviting when a web page is laid out in such a fashion that the organization of the page (and the site) is clearly conveyed in a split of a second. It’s also good for business, since people use interfaces that they understand and tend reject the ones they don’t.

A common way that people pursue organization is by having markers that separate the different parts of the site: in web design icons and illustrations are used to separate various types of content. But Swiss style is all about using less, so instead of adding more elements to work with, they prefer to remove as much as possible. This is a great example of the ‘less is more’ principle and of the ‘the content is the interface’ wisdom.

Grid Systems

A grid system is a rigid framework that is supposed to help graphic designers in the meaningful, logical and consistent organization of information on a page. Rudimentary versions of grid systems existed since the medieval times, but a group of graphic designers, mostly inspired in ideas from typographical literature started building a more rigid and coherent system for page layout. The core of these ideas were first presented in the book Grid Systems in Graphic Design by Josef Müller-Brockmann which helped to spread the knowledge about the grids thorough the world.

Nowadays grid systems are an established tool that is often used by print and web designers to create well-structured, balanced designs. There are many resources on the subject, one of them is an article by your own Smashing Magazine: Designing With Grid-Based Approach. You may want to take a closer look at it if you want to learn and find out more about grid-systems.

More than grids, structured information

When we learn from the Swiss Style literature, it’s very easy to embrace the grid system as a purely visual framework. However, upon a further examination we can see that grids are more than just the art of placing elements; there’s a subtle layer of semantic organization of data which, despite not being inherent to the use of the grid, is a big part of the Swiss Style’s essence.

These posters have a very well-defined structure. It definitely feels like tabular data and tabular data is one such case that the disposition of the information extrapolates the realm of graphic layout and starts hinting on the meaning of data and how various chunks of data relate to each other.

The abuse of tables as structural elements was, and still is, very harmful to web accessibility. However, blindly replacing tables for div tags does not help to make code more semantic. List elements are a great solution for collections of similar data, but ULs and OLs do not define any kind of relation between this data.

Enter Definition Lists

Definition List (DL) is probably one of the most underestimated HTML elements. It’s a list element such as UL and OL, but it is supposed to present a collection of terms (DT) and descriptions (DD). Its most obvious use case is to represent dictionaries, but its potential goes way beyond that. The W3C Recommendation gives the example of a dialogue where DTs are character names and DDs are the text lines. It could also be used to represent calendars (days and assignments), articles summaries (titles and descriptions) and much more.

Elementary

There is also a direct influence from the constructivism, elementarism and minimalism movements in the Swiss Style artists. Minimal design is about removing the unnecessary and emphasizing the necessary; it’s about a functional and simple use of fundamental elements of style for the purpose of the artists’ objectives.

This principle is one of the core reasons why Swiss Style graphic designers pay so much attention to type. Typeface is one of the most fundamental elements of visual communication that is able to deliver the message in a very precise, clear way. According to the Swiss movement, adding more elements without fully exploring the potential of the fundamental ones can be considered a ‘waste’. As these basic elements, like typography, have so much aesthetic potential, there’s rarely a need for other visual graphics elements.

In many aspects, these ideas touch on the core proposals of the De Stijl movement. The neoplasticism, as proposed by De Stijl artists, is about elementarism and geometry not only as a form of exploring the potential of the fundamental elements, but as a pursuit of beauty and harmony, hinting on a more mystical belief in ‘ideal’ geometric forms.

Drop the Serif (…or rather don’t)

One of the strongest characteristics of the Swiss style typography is the use of sans-serif typefaces such as Akzidenz Grotesk and Neue Haas Grotesk (a.k.a Helvetica). In fact, when Jan Tschichold wrote Die neue Typographie, he ignored any use of non sans-serif typefaces. With this philosophy, graphic designers were aiming at clarity, simplicity and universality. Helvetica, for instance, is a typeface that is famous for its pervasiveness: it is used in corporate identity, street signs, magazines and pretty much everywhere else. The Swiss Style advocates that the typeface does not have to be expressive in itself, it must be an unobtrusive instrument of expression.

“I don’t think that type should be expressive at all. I can write the word ‘dog’ with any typeface and it doesn’t have to look like a dog. But there are people that [think that] when they write ‘dog’ it should bark.”

Massimo Vignelli in the documentaty Helvetica.

This is by no means a rigid rule. When Swiss Style graphic designers advocate the use of sans-serif typefaces, they weren’t paying attention to the historical legacy and experimented with something new. Even Jan Tschichold himself admitted that his book was too rigid. If there’s one single lesson from the Swiss Style it is to love and respect typefaces.

Font-size as a tool for readability, impact and rythm

It’s very common to spot the use of font-size contrast in the works of the Swiss Style.

Different font-sizes not only generate visual impact, but also provide readers with a hint about the hierarchy of the presented data. Huge words are the entry points, the top-level elements in the content’s information architecture and page’s hierarchy. This is a very efficient way of guiding the reader’s eyes through the page, thus working as an interface to the content.

Photography. Yes, photography.

Despite not being particularly famous for it, one important part of the Swiss Style is its remarkable use of photography. Following the modernist ideas in which photography was a much better tool to portray reality than drawings and illustrations, the Neue grafik magazine, a very important Swiss graphic design publication at the time, dedicated a big part of its content to photography and its application in design.

Showcase of Swiss Graphics Design

“de profundis”, oscar wilde

Paul Rand

Penrose Annual 1958

Book Cover
A book cover with an interesting use of geometric forms.

Swiss modern graphic design for the chemical industry

Swiss modern graphic design for the chemical industry

Swiss modern graphic design for the chemical industry

Swiss modern graphic design for the chemical industry

Basic Typography – Ruedi Rüegg/Godi Fröhlich 1972

publicity and graphic design in the chemical industry

Corporate Design International – Wolfgang Schmittel

Karl Gerstner: Review of 5×10 years of graphic design

Karl Gerstner: Review of 5×10 years of graphic design

Publicite 11 1964

Publicite 11 1964

Karl Gerstner: Review of 5×10 years of graphic design

Graphis Annual - 1965/66

Graphis Diagrams ? 1974

Graphis 113 ? 1964

Odermatt & Tissi: Graphic Design

TM Typografische Monatsblätter - 1968

TM Typografische Monatsblätter - 1968

1960’s Advertising - Magazine Ad - Film special (Italy)
1969 Magazine Advertisement. “Film Special: bimestrale sui problemi della comunicazione audiovisia”. Advertising Office: Studio S & F Cappellato. Milano, Italy

Film + Design by Peter Von Arx

Publicite 12

Publicite 12

Publicite 12

Publicite 12

abc verlag_publicity and graphic design in the chemical industry (82/91)

FFFFOUND! | Swiss Graphic Design

FFFFOUND! | but does it float

Graphis Diagrams

Corporate Diversity – Swiss Graphic Design and Advertising by Geigy 1940-1970

Graphis 115 ? 1964

Graphis Diagrams –– 1974

Graphis 121 –– 1965

Graphis Annual - 1965/66

Archigraphia

Graphis Packaging 3

Graphis Annual - 1965/66

Graphis International – Wim Crouwel interview

TM SGM 2/1962

Graphis Diagrams –– 1974

Graphis Diagrams 1

International Graphic Design

Waldi by Otl Aicher

otl aicher visual communication - munich olympics - münchen olympia 1972

otl aicher - nein

Otl Aicher ERCO Pictograms

1972 Munich Olympics

Erscheinungsbild Flughafen München

Participation Medal - Back

1972 Munich Olympics

Meal Voucher

Graphis Annual - 1965/66

Graphis 113 –– 1964

graphis Posters 86

Graphic Design in Swiss Industry / Schweizer Industrie Grafik

Swiss Sports Posters

Swiss New Graphic Design

Swiss New Graphic Design 41

Swiss Graphic Design

International Typographic Style 7

Swiss Graphic Design

The ABCs of Bauhaus

Bauhaus advertising

wallpaper bauhaus

American Graphic Design

History Swiss Graphic Design, Wohnbedarf

20_carto

typo-sample-y

Graphic Design in Swiss Industry / Schweizer Industrie Grafik

Swiss Sports Posters

Graphic Design in Swiss Industry / Schweizer Industrie Grafik

Penrose Annual 1964

Schiff nach Europa –– Markus Kutter/Karl Gerstner 1957

Publicity and Graphic Design in the Chemical Industry / Chemie Werbung Und Grafik

Schiff nach Europa –– Markus Kutter/Karl Gerstner 1957

graphis Posters 86

Graphis 124 –– 1966

Graphis 92 –– 1960

Graphis 113 –– 1964

Graphis Diagrams –– 1974

Graphis Diagrams 1

Graphis Diagrams 1

Graphis Diagrams 1

FFFFOUND! | swissmiss

Masters

Theo Ballmer

Theo Ballmer is best known for his posters, but he also worked as a photographer, lettering designer, teacher and typographer. He demonstrated talent from a very early age when he studied at the Zürich Kunstgewerbeschule, where he had Ernst Keller as one of his professors. Like many other Swiss Graphic designers Ballmer went to the Bauhaus, but only after he was already an established designer.

Max Bill

Max Bill was an architect, painter, typographer, industrial and graphic designer. He studied at the Bauhaus until late 1920’s when he moved to Zurich where he became a teacher and prime member of the Allianz group of graphic designers.

Adrian Frutiger

Adrian Frutiger is the master typeface designer behind the Univers, Frutiger and Avenir typefaces, just to mention a few. He studied calligraphy at the Zürich Kunstgewerbeschule, which along with his interest in sculpture helped shape his style as a typeface designer.

In the early 1970’s he designed the Paris Metro signature with a variation of Univers, he was then asked to design the ‘way-finding signature’ for Paris Charles de Gaulle International Airport. His work on that resulted in the Frutiger typeface.

Karl Gerstner

Painter, graphic designer and typographer, Karl Gerstner is as important for his design as for his ideas about design as a process. He developed ideas of a flexible grid with computational systems in mind. He also developed the notion of ‘integral’ typography: where the message and its form are inseparable and interdependent, the idea being inseparable from typography.

Armin Hofmann

Armin Hofmann taught and worked as a director at the Basel school of Design. Basel was a small city of about 250.000 inhabitants that became very important for the development of the Swiss modernism, most due to the direction of Hofmann of his predecessor Emil Ruder.

Ernst Keller

Ernst Keller was a professor at the Zürich Kunstgewerbeschule from 1918 to 1956 where many of his pupils went on to become influential graphic designers, for what he’s consider one of the fathers of the Swiss school of graphics

Herbert Matter

Matter was a pioneer in the use of photomontage, which with its talented use of type earned him great international acclamation. After working for the Swiss National Tourist Office and Swiss resorts he moved to the United States in 1936 and started teaching Photography at Yale University in 1952.

Jan Tschichold

Jan Tschichold became a leading advocate of modernist design after visiting the Wiemar Bauhaus exhibition in 1923. His most famous work is the book Die neue Typographie which organised most of the modernist design principles. He went to England in 1947 were he was wired to Penguin Books and directed the creation of the famous Penguin Composition Rules. He is the designer of the Sabon typeface.

Josef Müller-Brockmann

Müller-Brockmann studied at the Zürich Kunstgewerbeschule and years later returned as a professor, succeeding Ernst Keller. He opened his own studio specialised in graphic design and photography where he produced the famous concert posters for the Tonhalle in Zurich. In 1966 he was appointed European design consultant to IBM.

Cases

Subtraction.com

subtraction.com is the personal web site of Koi Vinh, the Design Director at NYTimes.com. Vinh is famous for his advocacy of the use of grid systems and is often quoted as an authority on the subject.

Apart from the simplicity and the obvious use of a grid, Subtraction employs a very well defined structure that makes it very intuitive to understand the content that’s presented and how we can interact with it.

V+Lourenco

vlourenco.com is the home site and portfolio of a Brazilian interactive designer Vitor Lourenço. Amongst many other interesting works, Vitor was in charge of the latest redesign of Twitter.

Vitor’s site stands on the edge of simplicity: if there were less elements it would be too hard to navigate, but if there was more it wouldn’t be as beautiful as it is. The beautiful Helvetica Neue Light gets all the whitespace it deserves and the minimal content is organized simply by contrast and color.

Design Judge

designjudge.co.uk is the online portfolio of Matt Judge, a London based designer.

This site employs many of the lessons from the Swiss Style: beautiful typography along with the strong background colors, a hint of a grid structure and a nice use of a font size.

Kingston University - Out There

kingston.ac.uk/outthere is the site of the Faculty of Art, Design & Architecture of the Kingston University in London.

The great visual impact of this site are the big photographs that stand from the background. Along with that, there’s only typography.

WilsonMiner.com

wilsonminer.com is the home of Wilson Miner, designer and co-founder at EveryBlock.com. Miner worked on the first major redesign of apple.com and designed the identity (and the admin interface) of the Django web framework.

This site’s post page has a very interesting use of typography - it mixes big bold Helveticas with greyish Palatino, sometimes on the same text line. The contrast looks very beautiful and shows that there are use cases for both serif and sans-serif typefaces. Along with that, there’s a significant amount of whitespace that greatly leverages readability.

Please compare this design with Dustin Curtis’s minimal design that also makes use of beautiful typography and spacing.

Further Resources

Here are some interesting resources on some of the core subjects of this article:

About the author

Diogo Terror is a web developer that loves Ruby, Typography and Macs, specially when they come altogether (and they often do). He also likes to post random thoughts on Twitter whenever they occur (and they often do).


© Diogo Terror for Smashing Magazine, 2009. | Permalink | 83 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , , ,

Jan 21

Nothing is Original

This is the fifth rule of Jim Jarmusch, an independent film director, his golden rules:

Nothing is original. Steal from anywhere that resonates with inspiration or fuels your imagination. Devour old films, new films, music, books, paintings, photographs, poems, dreams, random conversations, architecture, bridges, street signs, trees, clouds, bodies of water, light and shadows. Select only things to steal from that speak directly to your soul. If you do this, your work (and theft) will be authentic. Authenticity is invaluable; originality is nonexistent. And don’t bother concealing your thievery—celebrate it if you feel like it. In any case, always remember what Jean-Luc Godard said: “It’s not where you take things from—it’s where you take them to.”

Media_httpwwwtodayand_bdcqp

found at swissmiss

Media_httpfeeds2feedb_uegcc

Get Updates

Tags

Archive

2012 (6)
2011 (11)