October 26th, 2007
Content AND Presentation
In a couple of weeks, I’ll be heading off to the Web 2.0 Expo in Berlin to talk about the role of typography in the Web 2.0. I don’t mind telling you I’ve had a hell of a job researching this one. I feel the topic is standing alone in a track dedicated to a variety of topics related to user experience and implementation. I started off thinking that I couldn’t do this. Designers who are looking to work with social networking applications or rich media applications, are rightly concerned with social connectivity, a ‘web a data’, and other such blue-sky thinking.
This is a brave new world and surely it’s no place for a stuffy old practice such as typography.
Not just fonts
Most people, not just designers, think of the practice of typographic design as choosing and manipulating typefaces. For sure, that is part of typography, but it doesn’t begin and end there. Ellen Lupton says in her book ’Thinking with Type‘, ‘Typography is how language looks’.
Where does typography fit in
Rich Rutter and I gave a presentation on typography at SXSW earlier this year. As part of the closing comments, we discussed how typography should be everybody’s concern. From editors and web producers, to designers and developers, good typography should be everyones concern. Maybe that’s a little idealistic and my guess is that most of the blame for typographic design not begin considered is down to process.
In Jesse James Garrett’s great book ’Elements of User Experience‘, Jesse outlines the five planes of user experience: Strategy, Scope, Structure, Skeleton and Surface. If you haven’t already read this book, you should go and get a copy right now, settle down with a good cuppa and work your way through it. It is a book that has changed how people work. And that is good thing. Mostly.
I may be wrong in how I’ve interpreted this, and by no means do I wish to discredit Jesse’s work, but I feel that the methodology that is described, along with the technical movement of separating content from presentation, is having a detrimental effect on typographic design and art direction. I’ll tell you why.
Typography is the look and shape of language
Good typographic design tells a story. It works at a micro level such as typesetting, and typeface selection etc. But it also works at a macro level. Macro level typography is about layout, rhythm and whitespace. But it’s also about content and the story the designer is trying to tell through the type. This point brings me back to Jesse’s five planes.
The top-most plane is Visual Design. In the book, Jesse discusses typography as font selection (in relation to branding mostly). Sure, elements of typographic design belong in this plane. However, I feel typography spans these planes. In fact, typography goes all the way down the second plane; Scope. Pigeon-holing typography in the surface plane is implying that typography is a visual practice. It’s not, completely. Typographic design is information design. As Emil Ruder once said:
Typography has one plain duty before it and that is to convey information in writing.
Information has to be shaped to create entry points and exit points. It has to be broken up, moved up and down a hierarchical scale in order to be perceived in the correct way. It’s a designers job to really get to grips with the content and this is where designing with type for the web gets really difficult.
Art Direction doesn’t happen on the web
Jeffrey Zeldman and Khoi Vinh are amongst a group of designers who have bemoaned the absence of art direction on the web. Khoi sums up my feelings exactly:
At this stage in the development of Web design, we have become, I think, engrossed thoroughly by the practical difficulty (and the legitimate challenges) of achieving aesthetically rewarding user interfaces. As a result, our focus has become trained almost exclusively on designing platforms, on investing our innovation efforts within the infrastructure of our design solutions — in navigation conventions, mnemonic devices, user inputs, system feedback, etc. And we’ve given up, at least for now, on the opportunity to innovate within the presentation, the shaping of visual constructions specific to a given piece of content.
It’s the last four words that interest me. As we’ve moved towards a model of separating content from presentation (both technical and in process), the designer has lost the relationship that they should have with the content. Designers working in the ‘Surface’ plane make the content legible and on-brand, but we aren’t telling stories with it. How can we when we don’t know what that content is?
Dogma
I’ve worked with some agencies over the past year who see the separation of design to a surface layer as a given. It’s sad, but the amount of times I’ve been asked to design a ‘theme’ is on the increase. On one hand, that is a triumph for things like Web Standards, but on the other, design, and typography is being left as the icing on the cake. And that brings me back to web 2.0.
Typography has an important place in the web at the moment. Social interaction, and how to design for it, it a hot design topic in Berlin (and my guess is it will be in SXSW). But don’t forget that the medium of social interaction is language, and the way language is shaped and looks is typographic design. Web 2.0 is all about typographic design.
You’ve re-opened a can of worms for me, Mark, and I’m glad you did. I started to writea comment with my thoughts on these matters, but it quickly started to take the shape of an article, so I’ll be posting it on my own site very soon. Apparently I need a good kick in the pants to do any writing these days, so thanks for that!
Good luck with the talk in Berlin; I really wish I could be there for it.
One of the divers of this separation is that a lot of content is coming out of a database, and the designer doesn’t really know what the content might be. We’ve “abstracted up” to where we might know something of the “type” of content, of the “style” of content, but nothing more. And we can always be surprised when something unexpected shows up that is outside of our design vision.
When I designed Handmeon.com, I took the metaphor of an “illustrated book,” hoping that readable type, with vertical rhythm and generous room for photos would encourage and promote thoughtful writing. It’s much too early to tell on this project (barely out of alpha), but the initial results are promising. First take a look at the site, then review the RSS feed (auto-discovery link) to see the content independent of the presentation.
This idea of looking at the RSS feed as a way to evaluate the implicit design goals of a project may be a useful way of measuring success (over a fairly long time horizon).
I definitely agree that typography needs to be addressed throughout the web development process.
I am a developer by day, and designer in my spare time. I have recently completed a course in typography and have become extremely excited about what can be achieved visually with good typographic decisions.
I am usually handed a design that needs to be turned into a website template. Often times only the surface is scratched with these two page Photoshop mockups as far as typography goes.
Luckily for the designers I work with I have begun to get an understanding of typography and try my best to stay true to their vision (by asking questions and filling in where I can). I know that this isn’t commonplace in the world of web developers, but hopefully one day it will be.
It is crucial to include developers in the process, otherwise projects like Smartypants and Typogrify would never have come to pass.
Do you think that this problem is due to the increase in demand for content management systems as hinted at in Michael J’s comment?
If a client wishes to be able to add/edit/delete content at the click of a button, then you, as the designer, will never have total ownership (creative) of the real design. You can merely guide and suggest, or take ownership to tidy-up after the client has made changes to get it back to the beginning state or idea that you originally intended.
I think that in any design work compromises will always be made to meet myriad of requirements; cost (being the ultimate), time, technology and many others.
The great thing about the web is that it can be quickly changed at little cost and that is why it has been so successful. Imagine blogging on a flyer campaign! Your typography would be beautiful, I’m sure, but your bank manager wouldn’t give a shit!
I certainly see where you’re coming from. For years I’ve been preaching the gospel of Form follows Function follows Content.
And still people keep designing templates for database content, filling them with lorem ipsum. Doing balancing acts with fake content, to make everything picture perfect.
Most content doesn’t change that often, that you actually can do good editorial design with it. CMS has become yet another acronym to hide behind.
These days I show my clients abriefmessage.com, hoping that soon the web will flourish with designed content instead of nicely framed content.
good copy is a start, after you as a designer have the power to present that copy in the best possible way. Though good copy is rather an exception than the rule. It is not only typograpy , but can be both imagery and typography. It is about semiotics.
Kurt: I certainly do think it’s a sympom of the designer not knowing what the content is. Wether this is the fault of process, the medium, or content management systems, I’m not sure.
HansI meant to put a grab of abriefmessage.com in here as it goes some way towards what I’m talking about. You’re right, there is a big difference between designed content instead of nicely framed content.
Good copy is as important as structuring and emphasing that copy that leads to better comprehension of the contectual message, connotations and the denoted message. Obvious!!
Is the conecptual separation of content and design really the cause of the “icing on the cake”-issue? In my experience, things become problematic when Garrett’s formal description of the “planes of user experience” get rolled out as a linear project flow (which happens way too often).
When visual design is the last station on the project-conveyor-belt, a “theme” or “skin” is probably the only thing that’s left to do.
Formal separation of content and design or no, the way to go seems to be to get the visual designers involved with the information architects from the start — and maybe allow a coder in the room for good measure.
in the olden days of paper, the job of the typographer
was to use the presentation to elucidate the content…
indeed, like background music in a film, the job was to
communicate the structure implicitly, subconsciously…
which means that one can also understand the structure
of the content by careful examination of its typography.
i encounter this all the time when looking at image-sets
of books that’ve been scanned, and laugh at the people
who consider content and presentation as dual entities,
just because that is a model they now wish to impose…
you can think of love and sex separately if you want, too,
but you miss a lot of the point when you do it that way…
–bowerbird
Interesting conclusions!
Excellent post. On a related point, I’ve been bemoaning the stripping-down of content even further as we peer into web content through feed readers. I use Google reader every day and I’ve lost all sight of what (if anything) a site is trying to convey beyond the raw content. It’s all the same font with the same breakdown. I wrote at length about it here:
http://www.basement.org/2007/10/if_the_web_is_tv_then_rss_is_r.html
Art Direction doesn’t happen on the web ! Business Week: Jeffrey Zeldman: King of Web Standards http://www.webstandards.org/2007/08/07/business-week-jeffrey-zeldman-king-of-web-standards/
Well absolutely interesting this theory as much as difficult to apply to a normal website…
Well I think it is a problem apply a different style to different type of contents in a site … for the question Micheal J say in his comment (I mean content generated from a DB) and also because would be horrible apply a different style on different page of same website…
I think it is much better than navigator can choose style of the site … and adapt it to his way to see this website (I mean … change color, font or template of the site)
Hey hey,
Hope you don’t mind if I jump in on the discussion mate, I have a question!
What do you suggest we can do to change things for the better, when it comes to pushing for typographical consideration throughout the design of a project?
Sometimes the structure of a project might prevent all the efforts in the world, regardless of how we might want to improve the situation.
In large organisations I guess this would involve introducing a specialist into the mix, but I’m not sure how to achieve the same benefit in a smaller team.
Do we try to cross-train everyone?
Without trying to delve into too much history (well, maybe I am..). This, to me, resembles the debate over the different design influences of the past half century.
Whilst modernist designers (particularly regarding the Swiss/International ‘style’ of design) will ultimately look to convey the message in the most effective manner possible, others will argue that the attractiveness of the design is what will attract the reader, and from there they would have already been enticed to read the content.
wolfgang Weingart once argued that the relatively high stimulus of some of his designs made up for there illegibility. Whilst Weingart’s work is somewhat different to the web
, I see this as a tactic still employed on the web.
Personally, I agree with you wholeheartedly, and would love to see more typographic discipline on the web, but sadly I feel it is some time away yet, especially with the popularity of content management systems (and ‘themes’) making the task even harder.
Great post though.
Kev