The Web is ubiquitous and it’s our job to design for what we know, not what we prefer. As far as we’re concerned there are devices with varying viewport sizes and connectivity. They have different input methods, [plus] each device has a unique subset of web standards it supports and many other features that give us a mere fragment of a clue towards user context.
David goes on to suggest the solution:
Design and build for an entirely fluid viewport (don’t forget height). Allow content to dictate design breakpoints.
Makes sense to me.
The Society of Typographic Aficionados:
The award recognizes a person 25 years of age or younger who shows both achievement and future promise in the field of typography. The purpose of the award is to act as a catalyst in the career of a young person who does not yet have broad exposure in the profession.
The first step in my grid design was to choose an appropriate typeface.
The problem that I see here is that responsive designers have often been making the assumption that wider screens also means taller screens. And we adjust our layouts accordingly.
Laura Kalbag for 24 ways:
A design system allows you to focus separately on the components that make up the system, disconnecting the look and feel from the layout. This helps prevent us getting stuck in the rut of the Apple breakpoints […] of mobile, tablet and desktop.
Typography is the easiest way to set the visual tone of the design across all viewport widths.
If you believe that design is important, if you want to provide a great experience across platforms, if you want to provide the ideal experience for whatever platform or device you are creating an experience for, you need a clean, well-structured base of content to work from.
Type Set Match epilogue ¶
Thank you to all who participated in October’s three Type Set Match events. Combined, the matches saw 55 rebounds, many accompanied by explanations about why specific typefaces were used. All participants carried an attitude of openness and willingness to learn more about typography, and the resulting discussions will continue to bear fruit.
The text used in these matches came from the third issue of Contents Magazine. Designers should pay attention to this publication for many reasons, one of which is that in many cases our influence should go where content goes; as evidenced by these Type Set Match events alone, typesetting can affect the tone and meaning of words. Graphic design is valuable.
I’m happy that so many participants chose, as I did, to compose their volleys with Typecast. Now that Typecast is in public beta, everyone can sign up to compare and combine typefaces, test rendering, and sketch with HTML and CSS — all in the browser.
Dribbble was a wonderful host for our matches. This service continues to foster meaningful connections among designers, a community of camaraderie, and a fun experience from start to finish. Several Type Set Match participants had never used Dribbble before, and were thrilled to try it.
That’s all folks. I enjoyed coordinating these three Type Set Match events, and watching such talented people do, and share, their work and reasoning. Type Set Match has all the potential I thought it would, and more, and I have ideas about how it can be even better. Maybe I’ll do it again some time.
Chris Armstrong for A List Apart:
Designing from the content out means finding a constant in your content – be it the ideal measure of a paragraph or the dimensions of an ad unit – and building your grid out from there to fill the space available.
People sometimes ask me why Modular Scale has an important number field. That’s why. Font size is also a fine constant (and my choice) for building grids.
Fluid layouts are often compared to water, but water isn’t always fluid.
Some solid (heh) analogies here, and Chris backs them up with examples. I like how he uses dashed borders to indicate elements that are in a flexible state, and the finished example in which components flex and respond individually (for instance, body text set in ems scales until it reaches a comfortable maximum size, at which point it is sized with rems and effectively capped).
Follow Chris @Armstrong on Twitter.
Type Set Match ¶
Today I started a little project called Type Set Match. Far less ambitious, organized, and sophisticated than Coudal Partners’ Layer Tennis, but in the same vein of create-and-critique-stuff-on-Fridays, players (any Dribbble users who wish to participate) all typeset the same text and share their work.
It’s a fun exercise, a chance to discover designers, a chance to learn something about typography through both practice and critique, a good way to try typefaces that you haven’t tried or don’t always get to use, and a great excuse to read something smart (reading the excerpted article in full often makes your typography more resonant with the words).
- First match: http://drbl.in/fupD
- Second match: http://drbl.in/fxWG
- Third match: http://drbl.in/fBSM
- Thanks for playing! Epilogue.
How to play
- Copy text from the first volley of each match
- Typeset the text however you like — as an image, in HTML/CSS, heck, print it out and take a photo
- Rebound the first volley on Dribbble* and talk about your choices
- “Like” any shots you like, and talk about why you like them
* If you don’t have a Dribbble account, that’s okay. Typeset something and show it to me. I’ll see what I can do to get you a Dribbble invite.
For a limited time
I will initiate three Type Set Match events, one each on October 5 (today), October 12, and October 19. If folks enjoy it, then we’ll see what happens. In any case, it’ll be a fun experiment for me. I’ve wanted to try something like this for a long time.
Special thanks to Josh Brewer, Sean McBride, and Mandy Brown, who entertained my early ideas about what Type Set Match could be. My chats with these folks are consistently awesome, and I may revisit those specific ideas in the future.
I’ve been saying this for years (if not decades) and eventually it’s going to be true: it won’t make any difference whether type is on paper or screens.
The web isn’t a new medium, it’s the evolution of all media.