Blog Category: typography
In my fourth article for 24ways over the years, I wrote about typesetting the right rag.
One of the first little typesetting trips I was taught – in my internship at an advertising agency – all those years ago, was how to make text fit within a given space, but still read well. This involved a dance of hyphenation, letter-spacing, leading and type-size. But a crucial ingredient of this recipe was the soft-return.
Scanning a piece of text I was looking for certain criteria – or violations – that needed a soft-return (or, in Quark XPress, shift-return). Using those violations, I would typeset the right-rag of the piece of text, and then use hyphenation, and what-not, to tease the rag into as smooth a line as possible. All whilst ensuring the content was pleasurable to read. In a perverse kind of way, I always enjoyed this part of the typesetting process.
My article on 24ways is about how we can apply this thinking to the web, where the inherent lack of control on the medium means we have to apply things in a slightly different (read: clumsy) way.
Emma read the article this morning and pretty much summed up the way I feel when I read text sometimes.
Just like a musician listens to music, I view text in a different way to most people. I just forget that I do it most of the time.
I can hardly believe that 24ways has been running since 2005. In the web years, that’s like 72 years ago. It’s a credit to Drew, Brian, Anna, and Owen. It’s not easy running this year in, year out, on a daily publishing schedule for a month. Hours and hours of work go into this, and we should all be thankful for their time and effort. Oh, and let’s not forget Paul, who has given 24ways a lovely redesign this year (you can read more about that on his blog)
UI is visible. Type is visible.
In 1955, Beatrice Warde gave a presentation to the Typographer’s Guild in London (now, the International Society of Typographic Design) which later became an essay titled: ‘The Crystal Goblet, or Printing Should Be Invisible’.
A wonderful piece of writing in which Warde describes the role of typography – or rather the role of the designer - in printing. The general premise is that good typographic design shouldn’t be seen.
When you listen to a song in a language you do not understand, part of your mind actually does fall asleep, leaving your quite separate aesthetic sensibilities to enjoy themselves unimpeded by your reasoning faculties. The fine arts do that; but that is not the purpose of printing. Type well used is invisible as type, just as the perfect talking voice is the unnoticed vehicle for the transmission of words, ideas.
Let’s take that last point. Morgan Freeman has a memorable, wonderful speaking voice. One that adds colour and weight to the words. His words are not just audible, and understandable, but they are rich with personality. His voice adds to the words he speaks.
I disagree with Warde. Type should not always be invisible, it should be appropriate. Sometimes, it’s a typeface’s job to be overt, loud and suggestive, in order to communicate the content in the best way. But, yes, sometimes typography has to melt away into the background. To support the content and the reader. To help them.
On the web, because we’re quite often presented with long-form text (and by that, I mean more than a few paragraphs), we get a little obsessed with body copy. Good typesetting of body copy should be like that of setting a novel; the type should disappear. But, not all typography is body copy, and to consider it in these narrow terms is to do the practice of typographic design a huge disfavour.
Whenever we design with words, we’re designing with type. And words are not always long form paragraphs designed to be very easy on the eye. Sometimes it’s a logotype, a button, a richly designed layout, a data table or form. The application of typographic design is just so broad that to say it all has to be invisible is to imply the goals of typographic design are the same across the board.
Legibility is a baseline requirement for typesetting anything. It’s like edible food. It shouldn’t really be a measure of what is good or not. Just like audibility and comprehension are baseline requirements for speech. There is more flavour in words; spoken or printed. There is more flavour in type, that if applied well, transcends content from being merely legible, to that of being pleasurable. After all, that’s why we have different typefaces: each brings with it characteristics that flavour the words.
In my opinion, there is merit to visible typography because in the hands of a competent typographer, a text can truly sing. Not because they have left their mark out, but because they have worked their art on the words.
I agree which him completely. It’s the difference between something edible and exquisite. The difference between average and better. Which is why all this invisible, reductionist UI approach is starting to grate on me a little because it suggests we have the same goal for all our work; to make it invisible. It’s more complex than that. It’s an over-simplistic measure of success that is put far more eloquently than in this post from Timo Arnall.
Of course, I say all of this under the one big caveat that, in typography, there are no rules. Just good decisions. But, let’s make some decisions shall we? Not make everything invisible because, apparently, that’s the way it should be.
Open letter to W3C CSS Working Group re CSS Grids.
Since I’m knee-deep in grids at the moment – both the book and Gridset – the theory, and thoughts on how it could and should apply on the web, is very much at the front of my mind. Last night I had a reminder on Twitter of the upcoming CSS3 Grid Layout draft. I recalled I wrote about it last year proposing some slight amendments regarding the addition of the module attribute. This would be a big change. It’d be great if it were considered, but I’m not hopeful.
However, that change not withstanding, one thing that really needs to change in this draft is the terminology used. Terminology (with some slight interchangeable differences) that has not really changed for many years in grid and layout design. Why reinvent it? Why define existing terminology to that more suited to spreadsheets and tables?
So, this morning, I emailed the working group to consider these changes. I’m posting this here for those who are not on the working group who may have opinions on this who can get in touch with me. I’d love to hear your thoughts, concerns and questions regarding this draft and how it fits with the established graphic design theory. I am of course on Twitter, or you can email me on this site.
In reference to: http://dev.w3.org/csswg/css3-grid-layout/#core-concepts-of-the-grid
I’m confused as to the need to invent new terminology with regards to grids that have existed for centuries. I’m also a little concerned that the mental model this terminology builds is one more similar to tables and spreadsheets (where these terms could be interchangeable) than to grids and layout.
Specifically on the terminology:
- Grid Lines are known as Gutters.
- Grid Cells are known as Modules (or Units – the term is interchangeable). They represent the smallest building block of the grid.
- Combinations of modules vertically are Columns *if* they run the full height of the grid.
- Combinations of modules horizontally are Rows *if* they run the full width of the grid
- Combinations of modules both vertically and horizontally are Fields.
There’s a lot of great stuff in this draft, but some of the theory of designing grids has been around for centuries. If we could start to align CSS with existing terminology, and existing mental models of how layout is designed, then all the better.
Just a thought…
For more information on this, I wrote a blog post last year that expands on some of this thinking: http://www.markboulton.co.uk/journal/comments/rethinking-css-grids
Thanks for your time and consideration,
The making of FF Tundra | I love typography, the typography and fonts blog
A wonderful story about the creation of FF Tundra on I Love Typography. Such a great insight into the design decisions, and motivations behind them, when crafting a typeface design.
A Richer Canvas
In 1927, Jan Tschichold published his seminal manifesto: Die neue Typographie. As with all manifestos, it’s a work of vision, new ways we should think; a work of unwavering principles on how we should design printed material. Abandonment of serif typefaces aside, one of the guiding principles was pointed out to me by my university lecturer regarding designing the perfect layout:
‘‘Though largely forgotten today, methods and rules upon which it is impossible to improve have been developed for centuries. To produce perfect books these rules have to be brought to life.’
The methods and rules Mr Tschichold is talking about are realised in Canons of Page Construction. Geometric systems that create beautiful text for books. Text that belongs. Text that feel connected to the physical form in a binding manner that should make it invisible. It’s about comfort. Creating a comfortable, invisible reading experience.
Binding content to the book is what all good book designers do. To do this, they use Canons of Page Construction, or other principles to design grid systems that, when populated by content, create that connection. But with all paper-based design, they start with paper. Paper that has edges, ratios that can be repeated. A canvas. And here’s the thing. Creating layouts on the web has to be different because there are no edges. There are no ‘pages’. We’ve made them up.
A richer canvas
If we take that basic desire of creating layout systems: binding content for a comfortable (read: native) experience. On the web, we have to abandon this notion of a page. Let’s look at this practically. To design a layout system for a website we now have to consider:
- Screen resolution ranging from 2560px wide and above, down to 300px wide and less and, quite literally, everything in between.
- Different devices all with potentially different pixel densities.
- Context and usage. We have mobile, tablet, laptop, desktop, TV, fridge, car… etc.
To my mind, it’s becoming increasingly unrealistic to impose a best-fit ‘page’ when the variables are so far-reaching and are only getting more so. This isn’t going to get any simpler anytime soon, folks. It’s my belief that in order to embrace designing native layouts for the web – whatever the device – we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out.
Grid system design should begin with a constraint. Something that is knowable and unchangeable. This constraint is used to build the modules of your grid. In book design, that constraint is defined by the page through subdivision. Book designers take the page, divide it up into a modular grid of spaces. These spaces (called modules) are then combined to create rows and columns. These are then filled with content (images and text). The text feels like it belongs because the columns are related to the physical object: the page.
How should we do it on the web? Remember the goal is connectedness and this feeling of belonging. We do that by defining the constraint from your content. The constraint could be derived from an advertising unit, or from a thumbnail image from tons of legacy content. Whatever it is, start there. Don’t start from an imaginary page.
Ethan’s superb article, talks and upcoming book have given us the tools to make this approach a reality. We can now design effective adaptive layouts that respond to their environment. If these layouts are based on a system that defines its ratios from the content, then there is connectedness on two levels: connectedness to the device, and connectedness to the content. The layout isn’t just 12 columns because that’s what my CSS framework gave me to use.
The time is now
The conditions are right.
With Responsive Design, CSS3 & browsers, we have the tools. Thanks to people like Kristina Halvorson and Relly Annett-Baker and all the other content strategists out there, we’re taking content by the scruff of the neck and we’re able to determine what is knowable much earlier in the design process. Above all, we have the desire and the ability to re-write the rules that have matured over literally centuries of graphic and book design practice.
Embrace the fluidity of the web. Design layouts and systems that can cope to whatever environment they may find themselves in. But the only way we can do any of this is to shed ways of thinking that have been shackles around our necks. They’re holding us back.
Start designing from the content out, rather than the canvas in.
For those who may want a little bit more than this rather high-level blog post, I’ll speaking about this very topic - with plenty of practical application - in my upcoming talk at An Event Apart in Boston in May, and my book which will be out this summer.
Oh, and incidently, the blog post is in response to Chris Shifleft’s call for more blog posts. His Ideas of March post has already prompted many people to blog more than they could ever do through Twitter. I too pledge to blog more in 2011 than I did last year. Promise.
Explorations in Typography
A great looking book by Carolina de Bartolo and Erik Spiekermann out in April 2011:
Explorations in Typography: Mastering the Art of Fine Typesetting (A Visual Textbook for Intermediate to Advanced Typography) is a vast collection of beautiful typesetting examples. Page after page, a brief article by Erik Spiekermann has been set in hundreds of different ways in hundreds of different typefaces, creating an extended visual taxonomy of typesetting that allows you to “learn by looking.”
Interestingly, the site has ‘key features’ of the book listed in the same way you would list features of an electronic product or web app.
Ampersand · The Web Typography Conference
From Typedia: Cure for the Common Webfont, Part 2: Alternatives to Georgia
A great list of alternative webfonts to Georgia.
The Webfont Revolution Is Over, Let the Evolution Begin
From Typographica: With the imminent standardiszation of WOFF – a webfont file format – we’ll be seeing webfonts become just part of a web designer’s toolbox. Won’t that be nice?
New Drop Caps
When I redesigned this blog a little while ago, the drop caps I used were always going to be a placeholder. Following an evening with my Sister-in-law—who happens to be a textile designer/illustrator by training—I commissioned her to produce a complete uppercase alphabet based on Georgia. I’m thrilled that two months later, they’re live on the site. (if you’re reading this on RSS, then pop on to the web to see what you’re missing).
The brief was pretty simple. I wanted illustrative drop caps produced that were aligned to the inspiration for this design; namely Renaissance illustrations and carvings. They ended up being slightly broader in inspiration than that though. They’re hand painted on thick, textured cartridge paper in black ink.
I planned on interviewing Helen (and I still plan on doing that), but I just couldn’t sit on my hands until then. Here’s a few letters that are particular favourites of mine. Interview coming soon…