About a year ago I wrote Responsive Workflow article describing my responsive design process. [… Now,] I’m going to open the curtain and explain a new phase which I would today add to my year old workflow drawing. I think it might just be the most important phase in the whole design process. I call it the “Typography Prototyping Phase.”
Whether or not it’s the most important part of the process is a matter of personal opinion, of course, but one thing is certain: typesetting should be recognized as a critical and distinct part of successful responsive design workflows. Viljami gets it.
I tried once to really dig into a site’s analytics as a guide for what breakpoints I should use. Of course, that didn’t work. The numbers I determined based on analytics didn’t line up with the layouts where my content and design weren’t working well together, so I ditched that idea and just started putting breakpoints where the design and content dictated.
Ben goes on to champion the use of chunk-specific media queries, rather than layout-wide “breakpoints”:
By placing our media queries inline, immediately following the smallest styles, we can group styles by the components they impact and not worry about following a specific set of breakpoints.
Universal Typography ¶
Dean Allen for A List Apart, way back in 2001:
Designers will benefit from [approaching] their work now and again as being written rather than assembled.
Later in the article, he recounts a typography class he taught:
To the students, text had been handled as a graphic element, to be shifted within grids, manipulated and filtered like a photo, to be squinted at and scrutinized upon critique but never apparently to be read. “But editors take care of text, we just have to design it” was the response when I’d insist that designers learn about editorial style and usage, which always made me laugh.
Reading design helps you make it to measure.
Elliot Jay Stocks, back in 2011:
For far too long, many of us (and I include myself in this group) have been guilty of focusing on decoration: the colours and the shapes and the textures. We’ve been neglecting the details. And I’m not talking about those pixel-perfect buttons with ever-so-subtle gradients and inline strokes; we can all do that. I’m talking about stripping away all the cruft and getting back to good, solid design principles, like well-formed grids and decent measures and incremental leading and appropriately paired typefaces.
From a Daring Fireball post entitled The Trend Against Skeuomorphic Textures and Effects in User Interface Design, two sentiments that resonated with me:
On retina displays there’s simply no reason not to use any font you want. All fonts render nicely on retina displays.
If you want to see the future of software UI design, look to the history of print design.
And in case you missed it, John was a guest on The Big Web Show last week. He talked about typesetting as an enjoyable mental puzzle, and waxed nostalgic about Quark Express (I loved it, too – Quark is where I learned to typeset).
Since hyphens is an inherited property, it isn’t sufficient to set it for a limited number of elements and assume you’re done. You have to make sure you’ve turned it off for the elements that shouldn’t be hyphenated.
Jon Tan for 24 ways:
Even though there were no actual differences in reading speed and comprehension, the people who read the version with good typography thought that it took less time to read, and were induced into a good mood by doing so. Not only that, but by being in a good mood, people were more capable of completing creative tasks faster.
There was a disconnect between the designer and the developer. The designer created the comp in Photoshop with the text exactly as they wanted it to appear. A developer had then taken these specs and made it look like the comp during development, but something was lost in the translation. CSS does not have the fine control of text that Photoshop does, and each browser displays text a little bit differently.
This is where the Web Font Viewer comes in.
Another tool to help designers and developers see type in real web context, and talk about web typesetting without getting wrapped up in layout. I bet this is super useful for teams and clients.
It’s all going to be type based because anything else will ultimately end up being too complicated to remain device agnostic.
Hard to predict, but one thing’s certain: it’s a great time to double down on graphic design fundamentals like color, texture, and typography.