The idea of responsive web design and layout – as it was discussed in the past two years, e.g. by Ethan Marcotte – is to have a set of specifications that adjust to the requirements of a device, resulting in different layouts on different devices.
The idea of responsive typography – as it was discussed in the past months, e.g. by Oliver Reichenstein of iA – is to get the exact same impression of a typeface used for a text regardless of the device it is viewed on. But there is more to typography than just the typeface and the term responsive typography, in my opinion, is used ambiguously here. It should cover all aspects of typography and not just the topic of graded “responsive fonts” for different resolutions.
Typography is defined by typographic parameters. These are what you specify for composition. They all influence readability and they influence each other, meaning you cannot look at them isolated. That is:
– font (style, weight)
– font size
– line length
– line spacing
– word space
– letter spacing, tracking
– alignment, justification, hyphenation
– line breaks, paragraph breaks, make-up
– colour, contrast
If you specify these things and send it to someone at the other end of the world, they can reproduce the exact same column of text. This is the basic idea of typography. But – is the idea of “responsiveness” to ensure the exact same design or to adjust the parameters for optimal output on a specific device? What is optimal typography on a standard TFT screen is not the same as what might be optimal on a phone, even if we ensure the font weight in both versions look the same. The resolution and rendering method is different but also other screen settings like contrast and colour, the format, and the reading distance is different.
Shorter lines can get away with smaller font sizes, smaller word spaces, less line spacing but they need hyphenation for good line breaks e.g. (Please don’t force the lines to be even shorter – use small margins in phone layouts!). Larger formats on the other hand mean larger reading distance. Thus they call for larger font sizes, longer lines, more line spacing, larger margins. Small text sizes require fonts with rather wide proportions, a large x-height and open apertures. Larger fonts can get lighter in weight, more detailed, contrasted, and more tightly spaced.
To cut a long story short – what I want to say is, that there are many more important setscrews that have to be concerted and that determine good typography and optimal readability than just the stroke weight of a typeface. The text column has to look harmonious, with legible letterforms and good spacing, achieved by a rhythmical pattern of black strokes and the white space inbetween, with evenly rendered stems, well attuned word spaces and line spacing.
I would want to choose a typeface and settings that generally ensure this. Possible minor differences in font weight from one device to another don’t matter much to me, as long as the thing in a whole can be read comfortably. But maybe us print designers, who had to deal with different papers, printing methods and dot gains all our lives, have just idly learned to come to terms with it. Colour and the contrast of the screen are much more crucial. All the finetuned optimization are at risk to get screwed up by a user who has his crisp retina display set to full brightness. And that cannot be responded to.
It’s understood that responsive typography is not just about the grades. In plus, the broader term „responsive design“ already covers a lot of macrotypographic issues that you mention (type size, measure, line height…). I’ve been talking about that for years. And it’s also clear that if everything else is wrong, grades alone won’t do. But you underestimate rendering differences if you think that you’ll get away with one grade. We’ve been experimenting with all sorts of screens for months now, and the differences between portrait and landscape HTML on iPad3 alone are mesmerizing.
I’m not saying graded type is bad, just that it is not what makes a typeface a good screen font or solves typographic challenges alone. The difference between darkest and brightest setting of a screen probably equals about two font grades. Now how to query this?
Yes, I can see how you find the type on kottke.org too light on the Retina display, but I would say that the site in general could benefit from a little less light a weight, on all devices, not just Retina.
Talking of responsiveness and adjustment – what I find more interesting are adjustments for size, not resolution, i.e. the design of size-specific variants, aka “optical sizes”, of a typeface. Right, Georgia or Verdana look odd and clumsy in 21 pt, but that is because they were designed to look good in 9 pt. We don’t need to make all type this large to have a readable web. There are also instances where large font sizes actually work against readability, because we aren’t able to focus on as many letters at once as we could in a smaller size. We have to “look” more frequent, have to scroll more, get tired faster. Why not design a series consisting of a rather plain version for small point sizes and one that looks elegant and refined in bigger sizes.
That all being said, I’m totally pro “make what you wish existed”. So make a good typeface, then grade it.
I know all that Indra. I spent years thinking about all this and I spend weeks on making Nitti Light perfect for the one display it is used on (tracking, leading, size, contrast…). Paul was surprised and very happy to see it used the way we defined it.
Now, whether you believe it or not, it makes a massive difference whether you use Nitti light or Nitti regular. Both are perfectly designed, but one is just to bold for the iPad1/2 screen. When I saw our definition of Nitti Light on an iPad3 I felt more than uneasy. We regraded Nitti Light in the weight we felt was right and sent it to Pieter to do it professionally. The difference is massive. I don’t know why you can’t see it or try to play it down. Just look at…
http://flickr.com/#/photos/formforce/6908151222/
…and…
http://flickr.com/#/photos/formforce/6908151088/
…on an iPad3.
It’s just a grade, yet it’s worlds apart. And brightness doesn’t change anything, because the iPad3 also has excellent contrast.
I’ve had this discussion before, and the argument was basically: Ah, just choose a font that works on all screens. This is completely untypically lazy for people that spend their life working on hairthin details; and it’s also completely unnecessary to be so lazy. While having to design a font so I can grade it is a Hercules job for an amateur like me, for you guys interpolating fonts from two weights you already have is super easy. Why argue against something that creates objectively better results when it’s so easy to do?
For some reason the links don’t work… You need to delete the hashtag. Btw: To experience the difference you need to go to the full version of the image and save it on your iPad. And then switch back and forth in the Photos app.
I’ll write a follow up post where I show the rendering differences more clearly. I didn’t have enough time to do this in the launch stress. It’s also extremely hard to show on one and the same screen. You need to have different screens with non optimized and optimized versions to see how well grades work and how beneficial they are to readability.
Yes, I see it. I just don’t find it as important as you do. I never use the two screens side by side at the same time. I only see and read one rendering at a time and while doing so, my eye or rather brain rapidly adjusts to the typographic situation and can cope perfectly. This is not as easy with other aspects or parameter in typography. We notice unevenness in stroke thickness, rhythm, spacing and size much more and continuously. They disturb our reading experience, our eyes keep getting stuck at the one or other odd detail. Typography is all about details. I’m all about details, but the slight difference in stroke weight is just one in the orchestra. And not the lead violin I’m afraid.
I never said that weight is all. To me the importance of macro typographic issues are clear as day. And knowing me fir quite sone tine now you should know that as well. I obsess about type size in respect to reading distance, contrast, line height, all these things, and even remotely suggesting that I limit responsiveness to grading is absurd.
Now I appreciate strong resistance and I certainly have the highest respect for your skills. You see more in the micro typographic dimension than I’ll ever see. And what you see and we can only feel does have a massive impact on the quality of typography. On paper as well as on the screen. But…
But what if I see other things that you can only feel? To my pixel sensitive screen designer’s eye, stroke weight is an important factor as well. Not for legibility (which is something you’re good at), but for readability.
That type appears different on different kinds of paper, at different resolutions or if rendered in different ways is no news to type designers. That OSX renders type darker to avoid that thin lines break away is no news either. Nor is what you are proposing now. Sumner Stone has been offering „Halo“ versions of Magma for some time. It allow to compensate for visual differences in black-on-white vs white-on-black type, serve as optical sizes, maybe even compensate for visual differences based on resolution and/or gamma. Moreover, type designers have increased the number of weights not only for sanserif but for serif families too during the past years, sometimes resulting in a fine grain of weights. Foundries like H&FJ and Typotheque offer 3-4 grades per weight with typefaces intended for newspaper use. The question is whether this feature is needed, and thus worth producing, for each and every typeface. While every typeface is designed for a purpose, not every typeface needs to serve every purpose: not every typeface recommends itself for use as a webfont, or as a newspaper typeface, or as a book typeface.
It is not just a case of interpolating. It might be so with a monospaced face that is intended for an iPad app only, but very few type families have a bold and a regular weight drawn on the same width and even if they do, interpolation almost always require a lot of clean-up. Not to forget about TrueType hinting.
I apologize if you felt irritated by me reiterating what you and other designers already know. The text was not written for you in particular, just as a reminder that typography and how reading works is complex and dependent on many intertwined factors.
You have a point in saying that “print is behavior and digital is control” (or if it was Khoi who said this, I did not look at the slides {I’m on phone}). As I said earlier, it’s probably really just that us print designers don’t regard grades this crucial because you have so enormous variations in production anyway. Not just depending on paper and printing process but on weather/climate, ink, print run and whether the printer keeps standing next to the press while printing, pays attention and adjusts. A font can easily vary between what seems like light and heavy throughout the same piece. So in such a case there is absolutely no point in using grades for anything.
Rendering on a digital device is far more predictable and easier to respond to, yes. However, I still want to get convinced of the actual benefits of serving different grades of fonts. Is it about keeping a design absolutely consistent in look or for readability reasons? I can relate to the latter and see the problem of a typeface getting too light on a high-res screen, especially with bright setting like on kottke.org. (There is almost never a problem with a text style of a font getting heavier, this rather contributes to readability.)
Still, I stand to my lazy point that such a weight is probably too light for screen typography in the first place. In the same way as the Bodoni on white coated stock in Paul Rand’s books. Why not pick a typeface that suits the medium in most of all circumstances?
Indra is right that in some cases, grades are overkill. Sure, typography thrives on details. But it’s impossible to fine-tune every detail in every project. You have to focus on the details that give the most value to the most readers.
For instance, if you’re making a web app for the iPhone / iPad, you should ignore TrueType hinting, because it does nothing for your readers.
I made grades for Equity because by design, it’s a very dark text face. That’s great on an accurate, high-resolution device. But when it hits a rasterizer that adds weight, it goes over the edge — too dark. So the lighter grade keeps it from going over the edge.
Likewise, it’s easy to see why grades would make a difference to iA Writer, which is the UI equivalent of sushi: elegantly few ingredients, served raw, so they have to be exactly right.
As for Oliver’s suggestion that grades are „easy,“ well … that depends on how subtle your appreciation of the problem is. Grades typically require more than „interpolating fonts from two weights you already have.“ As Frode points out, different weights are rarely built on the same widths, whereas grades must be. More pertinently, glyph features usually require nonlinear treatment between grades (i.e., stems may need to lose more weight than serifs).
In the case of iA Writer and Nitti, some of these grade-making problems may have been avoided because Nitti is monospaced (width problem = solved) and there’s no serifs or high contrast.
But I can agree with Oliver that grades — like optical sizes — are sufficiently useful that it’s surprising that we don’t see them available more often. Especially if you wanted your new text face to stand out in a field of thousands and thousands. And thousands.
More broadly, it would be nice to think that type designers are considering feedback like the kind Oliver offers, and addressing the new practical needs that their fonts can fulfill, instead of just making fonts the same way everyone else does. (See also: FROGS, WITH WINGS).
Leaving the debate about “Responsive Typography” aside.
But, I’ve really experienced the iPad3 problem aswell. It becomes extra painful when it’s your own fonts. You designed them in a way you feel comfortable but then it gets too thin in Portrait Mode. Plus I also think the Landscape mode is too heavy, actually, so no Mode renders the fonts the way you designed them.
But, what happens if this buggy behaviour goes away on the next IOS update? Has anyone got any contact with Apple on this?
This is hard-wired in LCD displays. Until someone developes a new „pixel“ that has red, green and blue subpixels in both directions, there will be a difference between landscape and portrait. I mean, landscape mode effectively triples the portrait resolution. Apple can tune the rendering, sure, but it wont be the same.
Seriously: we do not even have a proper responsive (web) layout solution yet. Even the simplest part of resizing images can be very complex or results in having different versions of an image for different display sizes. Other techniques for dealing with »responsive layouts“ involves having a bunch of (different) stylesheets for different sizes and browsers/devices.
IMHO it’s easier (and better) to print a book on a handpress than doing something like »responsive typography« for digital devices from 320x480px mobile phones up to your new LED 3D cinema TV (yeah, we recently did a website that had to look good on a cinema 16:9 TV, too … but also on a 320×480 iPod touch).
Even i like the idea of having something like »responsive typography, i do not think it’s possible. There are so many devices, resolutions, dpi, renderers, browser versions, differences in CSS3 implementations, unicode support, LTR, RTL, monospaced, ligatures support and so on and on and on … no client will pay you for »responsive typography«, since the web is not about reading Tolstoy’s War and Peace online, but about making that column and text smaller so it fit’s a bigger advert to the right.
For me a basic thing of »responsive typography« like automatically assigning line breaks depending on the screen width, is the first indication of something hasn’t todo with layout and typography. Call me old-fashioned, but i want my line size being fixed.
What’s next after responsive typography? Responsive logos/trademarks? Yeah, i know, we do already have this kind of thing offline …
ps: since responsivetypography.com is taken: i registered responsive-layout.com some time ago … anyone? :)