Web Typography & Layout: Past, Present, and Future

Can typography encourage long-form reading—not just scanning? What are the most exciting areas of cutting-edge experimentation in typographic technology and digital layout, and what new skills will we need to design tomorrow’s web content? Three experts—Mozilla’s Jen Simmons, publication design legend Roger Black, and ALA’s Jeffrey Zeldman—discuss typography and layout on today’s web: where we are now, and where we’re going.









an article from Håkon Lie, like 12 years ago on A List Apart. It was like, You know, we should have webfonts because CSS will support it. What are we doing about this?

Roger: It was a long time. 1997, 20 years; there was a solution for webfonts that the community rejected. It was Microsoft’s EOT file format, which we don’t have to talk about. But in IE4, they supported the @font-face spec in the HTML W3C standard, and it was nice. But we said, “That’s not a standard, it’s not open, we don’t like that. We’d much rather use the Netscape solution,” and then Netscape kind of disappeared, and there was a lot of Arial for many years after that.

Jeffrey: And Jen, you work now at the place that wouldn’t exist without Netscape; the sort-of descendant, the grandchild of Netscape, which is Mozilla with the Firefox browser, which is like three generations, five generations maybe, in terms of rendering engine, from the initial…

Roger: From Urbana-Champaign.

Jeffrey: Mozilla really believes in open source and open fonts and the open web and all that stuff. And I know you’re here as Jen, you’re not here as a Mozilla representative, but still, it must color your perspective to some extent.

Jen: Yeah, well one thing I didn’t know until after I joined Mozilla and really got the opportunity to spend more time looking at the details of CSS and the implementations and comparing one browser to another, and looking at Firefox and seeing what’s missing, what do we need, what CSS should we prioritize… Firefox actually has really great support for fonts and typography. And there’s some details about CSS that we could be using, but it’s not really quite supported in every browser, so people hesitate to use it. Over and over again, I go to check, Have we put this in Firefox? Should I be advocating for this? And most of the time, with everything for typography, it’s like, Oh, we already did that. We did that a couple years ago. We’re waiting for other browsers to catch up at this point.

But I think you’re right, Roger. I think there’s so many tools when it comes to setting the type and making decisions about what font to use, and all the details of how to set it, that it’s gotten really overwhelming. People are a bit at a loss as to, like, what they need to know and how to do a good job.

Roger: Earlier this year, Jeffrey joined forces at Poynter, where I am today, Poynter Institute in St. Petersburg, Poynter Design Challenge. We asked five designers to come up with a better typographical solution or a better publication solution, better website solution for reading and for layout. And, there’s a very, very simple HTML prototype that you can find on the Zeldman.com site, which says, “Hey, let’s just use some of the typographic specifications that we’ve had for a long time—pull quotes, subheads, and nice captions, and a variety of these things.” He wrote up a nice HTML spec, and it’s funny, when we see typesetting on many websites, the homepages might be pretty exciting, but you get to the basic story page, and they’re god-awful. We have the classic news story page, and, you know, text interrupted by all kinds of advertising and other crap, and then a bunch of, you know, kind-of Taboola doodads at the bottom, and other things interrupting, and it’s very hard to read it. It’s like hundreds of years of typesetting history have completely been ignored to try to get a few clicks. And that’s one of, I think, the big challenges in typography. How do we circumvent the business model that’s making these ugly pages?

Jeffrey: But haven’t you also noticed, conversely, that on, let’s say, a few of the bigger papers, like washingtonpost.com, newyorktimes.com, the article pages have been pretty beautiful for a while now, that they use big type, very readable layout…

Roger: Yeah, or Medium.

Jeffrey: Yeah, Medium.

Jen: The Atlantic is a really great one.

Jeffrey: newyorker.com.

Jen: The New Yorker, the Atlantic, and the New York Times, to me, are the three big leaders in creating much more beautiful layouts.

Roger: So why do you think they’re succeeding? Because they have more money, or what?

Jen: I think something happened in the internal politics and probably in their user research, where they were able to say, “Hey, clutter, clutter, ads, ads, horrible, horrible. People don’t want this. Let’s declutter the page. Let’s find a way to get the ads that we need onto the page but do it in such a way that makes both the advertiser happy and the user, the reader, much, much happier,” rather than kind of going off of a bunch of assumptions about what the layout needs to be because of the advertising model.

Jeffrey: Those papers have a business model—

Roger: That’s off of their business model.

Jeffrey: Right, we’re saying the same thing. Yeah, those papers have a business model where it’s partly subscription, so that enabled them to experiment more. I also think they had to. I believe Rich Ziade’s Readability program from a few years ago, which is now pretty much defunct, sadly, but if you use Safari, an early version of it is built into the Safari browser; if you go to the article view, that’s just Readability 1.0.

But I believe that had a huge influence—I mean, it did on me. Like, after I looked at that for a while, I was like, I can’t have this cluttered… I loved my old cluttered layouts and I loved thinking that I was so good that I could make a cluttered layout that didn’t feel cluttered. And all of a sudden I was like, No, this is bullshit. Let’s remove everything inessential. Let’s strip it down as much as we can and make it a good reading experience that makes you sit back. That was the other thing to me. A page at newyorktimes.com, you actually lean back and analyze the news, as opposed to leaning forward and squinting. I think, physically, if you believe there’s a mind-body connection physically, those designers are saying, “Sit back, think about what we’re presenting. Don’t take it as gospel. These are the facts as we understand them. What do you think?”

Jen: Well, and, you know, “We’re going to make some space for you to really think,” like you said here, like, “instead of just tossing so much crap at you that you need to run away almost immediately. So, you’ve got to read, scan, fast, fast, get out of here, because we’re chasing you away.” To be like, “No, no, no, we’re not going to chase you away. We put a lot of time and effort into this.”

Roger: It’s fascinating to watch the acceptance of the idea that people are not reading your publication on desktop, or just at one place. You go to the New York Times, you go to Medium, and you’re sometimes on your phone, and sometimes you might have a tablet, and you might have a desktop, and you might have a huge screen that’s like what I’m looking at you guys on, that’s a 60-inch monitor.

Jeffrey: Like we’re on CNN. But also, don’t forget orbital content, the idea that people aren’t necessarily reading your content on your publication at all. What does that say about our freedom to innovate in layout, if the content that we’re creating is acceptably good enough anywhere? We’ve gone from… Right? That was the threat behind Readability, which for those who don’t remember, it was a device that removed all the cruft—I should have said that earlier. It removed all the junk from a layout so that it was a nice, readable…

Jen: Jeffrey, I think there’s a good chance that people are using those tools a lot, and that we don’t have any statistics on them. Google Analytics doesn’t tell you how many of the people who come to your website click on the reader-mode button. Safari has a reader-mode button, Firefox has a reader-mode button; Firefox has built Pocket directly into the browser, and we’re working on things to figure out how do we give people a better reading experience, especially when they’re going offline, they’re hopping on a train, they’re running around… And the fact that too many websites are crap. I mean, I’ve clicked on links in the past week where I just—I would have liked to have stayed on the website and seen it in their typography and everything, but I literally couldn’t. It was making me physically ill; it was such a crazy, cluttered, scrambled mess.

Jeffrey: Yes, yes, yes. Readability used to provide those stats. I believe Mercury Reader provides those stats. I’m not sure, though.

Jen: Yeah, the funny thing is, you know, people obsess all the time about how many IE6 users do we have, or how many IE10 users do we have, how many IE11… Nobody ever asks how many people aren’t even staying on the web page because our design is so terrible. It could be a really high number and we just don’t know it, because I don’t think that any of our stats tools measure how many people use tools like Readability, or Pocket, or Read It Later, or the reader modes, or the Instapaper… There’s a zillion ways to do it. It could be 40 percent of your audience, and you would have no idea.

Roger: Yeah, and I think that the page-view business model, which is audience-based, the idea that you get as many people looking at the pages as you can… Which is really the old broadcast model, it’s something that when publishers went into the web, they thought, “Okay, here’s our chance… We’re broadcasting, and we can have a huge audience and make it up in advertising.” For some of them, that’s working; for most of them, it isn’t. But it’s distorted the reading experience in a horrible way. And all you had to do is compare most websites, the conventional text page to Kindle…

In the ebook world, the typography, you can complain about the font choices and things like that, but once you’ve set your point size that you like that works on your device, it’s maybe no better than the cheap paperback, but that’s not bad, you could read it, and you know that you’re there to read. I don’t think that—we tried, like at the time at Readability, we were doing TreeSaver, and the business model didn’t support that because it didn’t get page views. The idea of reading a 2,000-word thing all the way through isn’t really treasured on the web. It’s not the important thing. The important thing is just to get to the beginning, to just show up, and then they count you.

Jeffrey: Can typography help overcome that long-ingrained habit of web readers, of, I’m going to read the headline and scan a couple of paragraphs and I consider that I’ve read this piece? Can a good layout actually draw people through the whole experience?

Roger: I think so. I mean, I hope so. What is a good layout? What are your rules of good type layout?

Jeffrey: I think it depends on the job it’s trying to do. Right now, I’m working on an ecommerce site, and I’m trying to apply some of the same principles. I’m still in the rough sketch phase, which is the most fun for me. But soon I’m going to actually have to commit to pixels, and I would like to bring some of the same thinking about classic, big, readable, engaging typography to a site that, by its nature, has to have a lot of stuff happening on the page. It can’t be a simple reader layout, it has to be a lot of stuff for you to browse and make decisions about and click pop-ups and all kinds of stuff. I guess my answer is, “It depends.”

But Jen, you’ve kind of abstracted the layout layer in a way. You’re currently actively engaged in studying layout not almost for its own sake, but what can layout be. Rather than starting with, “Okay, this is a news layout, so let’s do it the news way, this is a hospital page, so let’s make it look like a hospital page,” you’re going, “What can we do with the page?” Who was that great art director, Roger, from advertising in like—well, there were a bunch, but in the ’60s there was the guy, was it [Bob] Gage? They asked him how he stayed inspired, and he said, “I just keep finding new things to do with the page.” I think we have that opportunity on the web and haven’t really been using it.

Jen: Yeah. I mean, you know this, Jeffrey, because you’ve seen me talk at a lot of conferences. New technology has come along much in the same way that, once we finally had fonts and licensing for fonts to be able to use with @font-face, suddenly there was this new era of web typography. Because CSS Grid shipped in March 2017, almost three months ago, we now have tools to do layout in a way that was either completely impossible before, or it was possible, but it was laborious; it was just kind of too hard, or too fiddly, or too fragile to really be worth doing.

And so now with CSS Grid, but also with flexbox, with multicolumn layout, with box-sizing: border-box, we have like this whole bunch of combination of things. I think we really need to move away from using frameworks that we download from some third-party website and just kind of dropping everything into the layout that everybody else is using, and ask this question of What’s the job of the page we’re building? Maybe it’s an article, maybe it’s not. Maybe it’s an interface, maybe it’s a store, maybe it’s something else. How is it that people are trying to use it? It’s design. What are they trying to do? What do our users want? What do they need? What are they struggling with?

How can we use design, how can we use layout to better serve them, and really make an experience that’s the kind of experience that we want, that’s on-brand, or that’s easier or more elegant to use, if that’s the right value for this project or that helps people do the job that they’ve come there to do? And I have a feeling we’re going to see a huge change in layout, that we’re going to look back three years from now, five years from now, and it’s going to be really clear what came before and what came after, and we’re right at the tipping point of this massive change in page layout.

Jeffrey: I agree. I’ve been very inspired by what you’ve been doing and I’ve been following your articles, and your conference appearances, and all that. I also have a little story. One of the things that I do is every other semester I teach at the School of Visual Arts in the MFA Interaction Design program, and this semester I had a student, Ritwik Deshpande, he’s a brilliant guy, he was a journalist in India. He was very interested in music, and particularly in synthesizers, and he was very interested in creative web layouts and found that this whole Readability, Medium, this whole thing that’s been happening, which on one level is very good because it makes newspapers readable, on the other hand was sort of bringing this sameness to everything. He was sort of coming at the same thing Jen’s coming at.

So he, for his project, decided to do a piece on synthesizers, the reason being everyone learns about music synthesizers the same way. They sort of look at these instructional manuals, and there’s no interaction, there’s no dynamic interaction with… Actually, basically he designed something like you might see at a children’s museum in a way, like, this is a sine wave, this is a square wave, here’s what happens when you interact with these things. He used JavaScript and CSS to make these little interactive modules that showed a non-synthesizer player what it was to interact with synthesizers. He meshed that with explanatory text, and he made a custom layout that explained all this.

The reason I had to help him with his thesis was it was like almost everything I’m interested in in one piece, because it was about music and synthesizers, which I used to do, I used to play them; and it’s about web layout, and it’s about, How can I make this interactive learning? So, it was everything—education, writing; when does a page stop being a book-like experience and become something different; how far can you go with that before people become confused and need the reassurance of traditional paragraphs? He’s going to do more with this. It’s not a product.

Also, I loved it because usually when you have people graduating with an MFA in interaction design—I say “usually,” but it’s only been happening for a few years—but usually they’re trying to make a product. And this gentleman, Ritwik, was basically trying to make a learning experience for himself as a graphic designer, as an interaction designer, and as a fan of synthesizer-based music. I just thought, this is great, because it reminded me of the old web: I’m gonna make something cool that doesn’t exist because I’m curious about these things. I miss that. I love our new professionalism, but I do miss that experimentation for its own sake.

Jen: Me, too.

Roger: Yeah, there’s too much just copying the code.

Jeffrey: Yeah, especially when—

Roger: We’ve done that from the beginning.

Jeffrey: Right, but we didn’t have—if I made a two-column layout, I didn’t release it as a platform.

Jen: And a brand. [laughs]

Jeffrey: Right, and that sounds derogatory. But honestly, what people have made with Bootstrap… And it’s so complex. I’m not denigrating that. I’m not comparing it to my stupid two-column layouts from the ’90s. It’s a big deal. I think Rachel Andrew actually talked about, in her 2015 article, in her Christmas publication…

Jen: 24 Ways.

Jeffrey: Thank you. She said, “We told everyone, ‘Hey, web standards allow you to separate this structured content from this ugly—you can make a presentation and you can change it tomorrow, and you don’t have to have… But then as people wanted more and more complex app-like layouts with layers and everything, that was a lie.’” You ended up having to write HTML that was about, you know, divs that were sidebars. You didn’t have to, but if you wanted to do a certain kind of layout, you had to. And it became so complicated that something like Bootstrap’s just like, “Hey, if you’re going to do this anyway, I’ve gone through the trouble of doing it for you and I’ve got all the fallbacks in here, so here you go.” And you can’t really blame the industry for grabbing hold of something like that.

Jen: I feel like looking at the arc of history with layout, the shorter arc, I feel like Bootstrap and other tools like it—Foundation, and there’s others; and long before them there was 960 Grid and YUI I think was the first one, the Yahoo User Interface Library—there are reasons for that, and I think we needed them. I think we got into a situation where we needed to ship work, and we’re still trying to figure out what responsive web design meant, and we’re spending a lot of time reorganizing our entire workflow and our teams and what it meant to be a client or what it meant to have a content team versus a design team versus an engineering team… We had to restructure our whole entire organizations because of responsive web design. So, we had a lot going on, and just reaching for Bootstrap or something similar, it’s a good stopgap, whatever. But I think that era is over, and I think that a lot of companies, a lot of people are going to be like, “What are you talking about, Jen? There’s no way.” But three years from now, you’re going to be like, oh gosh…

Jeffrey: I also think there was an initial period—I mean, Roger, you were an exception. People who were trained designers, who knew what they were doing in terms of graphic design and art direction, who became web design gurus—that was an exception. Mostly it was like philosophy majors and English majors and all kinds of people without a design background. And then we had the period where there were more people like Roger. So, there was like the generation that, say, Jason Santa Maria represents. Somebody who went to art school, went to design school. There’s lots of designers like him; that was like this next wave—

Roger: And knew their history. Jason knows history.

Jeffrey: And knew their history. But now there’s a new generation of designers, I would say, who see themselves as product people, who are product people, and who actually think that layout and all that is some secondary work to be done by their assistants, and I think that might be hurting us in a way. The organizations listened to us and say, “Yes, design is very important! You’re right, we’re going to have an in-house design team!” But they don’t have actual hands-on designers necessarily running those teams. They have product people and marketing people who aren’t designers in a big sense—”big D” designers or whatever the hell that means. You know what I’m trying to say?

Jen: Yeah.

Roger: Yeah.

Jeffrey: There’s fewer people who came up through the craft of actually setting type and all this stuff. And so the juniors are doing that stuff, and they’re the ones, like Roger was saying in the beginning, being overwhelmed by all these typefaces and all these choices and all these tools, and the senior people aren’t bothering their pretty heads about typography and layout. They’re thinking about user retention and onboarding and all this stuff. I would love to see some product people also, or I would love to see more respect for this area, in addition to the respect we’re showing that aspect of design.

Roger: In the last day, I have had a big conversation on Facebook about photography, about the cover of Newsweek, of Rolling Stone, and Esquire, which I thought seemed oddly amateur this issue. It was fascinating to see the way people jumped on that conversation. There was this one guy from Singapore who just commented, “Well, ultimately it has to be in the hands of the readers. The readers will decide.” I think one of the things in all of this conversation about where we’re going with typography or layout on web, or in digital formats, is it forgets a little bit that what we’re trying to do is convey a message that readers and users will understand and enjoy. They’ll accept it, they’ll get something out of it, and they’ll come back. But it’s really this point-to-point communication between writer and reader that is the point of typography.

One of the things that’s happening is that the readers are having more info than they used to have. In the old days, a graphic designer often thought of herself or himself as an artist, thinking the big thoughts. You would stretch the canvas and then do the charcoal or the crayon, and then you’d paint, and then you’d have this wonderful thing that you would allow people to look at. So, it was a very top-down kind of communication. But in graphic design, in magazines or newspapers or advertising, or on the web or in print, it really is trying to get the message across.

And what’s happening—I think responsive, the whole responsive movement taught us an important lesson, that it’s not about that canvas square, it’s not an 8.5 by 11, or 1200-pixel-wide thing that we’re dealing with. We don’t actually know what we’re dealing with. There’s so many damn devices right now, and the media queries don’t always tell us the answers. It knows it’s an iPad, but it doesn’t know which generation it is or… We’re not getting good reporting back on what is actually the density of the screen, or the rendering method. We kind of guess. We sort of say, “Okay, it’s going to be these, and this percentage has to be this way.” But so many publications and advertising that I see, if I look at them on different devices, I can’t read it or it’s too small; or their lines are too wide, which is the oldest web-typography problem—put too many characters on a line so it’s harder to read.

But that’s sort of the current state. I think the most exciting thing about graphic design right now is the connection with the user and the reader. We’re beginning to understand who they are and what they want, and I think that ultimately the machine learning that we’re trying to do on the server side will start informing page layout so that people can read it more easily, with more enjoyment. Not that we’re asking them any questions about it; we’ll just watch what they like and give them more of that, and see what’s working, how the session time is being extended by different kinds of things. The metrics will start talking back to us and start transfiguring the pages. If we allow a variable format, then we can get amazing things. I mean, they can pick their own fonts, they could do their own kinds of colors and layouts if we collaborate with them. And as soon as we do that, as soon as we get the reader on board, then we’re geniuses. Then the design is great. That’s a huge challenge.

Jeffrey: I have mixed feelings about that. I like the idea of customization. I think customization is very important. We’ve always said the web is a conversation. We used to say it before we even had comments. We said, “The web is a conversation,” and then we started having comments on blog posts, if you guys remember blog posts and comments, and then we were like, “Yeah, it really is a conversation.” It was always a conversation design-wise too, because even back to the horrible days of liquid layout, where, “I want my screen this wide, and I’ll take that 10,000 characters per line,” and all that.

But there was always the chance that the user was going to install super-large fonts or override—I mean, I have a plugin in Chrome that lets me override any font on any site and replace it with some horrible thing. I’m having difficulty with, if I’m angry at a website, I can set it in Baby Teeth just for my own pleasure. So, there’s always been that thing, and I think it’s a mix, because you do want to let people—I mean, if someone has a problem with contrast, they need to be able to boost it. There are certain tools in the browser that let people do that, but it’s hard for a designer now, how people are interacting.

If we can make it an all-in-one design solution, like having type size widgets that we create instead of relying on the browser, then we might be able to. But now we’re playing three-dimensional chess with responsive layout, because, you know, what happens when someone makes this type seven times bigger, and, well, we’ve got all these minimum widths and… I guess what I’m saying is design is very hard right now, and although the user has always been in the mix and they’ve always had some power, once we start thinking about that and hoping that we’re going to get good design at the end of it, it becomes even trickier.

Roger: I think it’s like the templates that you’re designing anyway. You realize that you have to have adjustments for the different viewports. So, you know that it’s going to be one column in some places and multiple columns in other places. I think that’s how you deal with the users. You still want to build a road that they can travel on, but you’re deciding what the destination is. So, that means you have to guide that experience as best you can.

I think one of the things that we know is that if a reader feels that they’re a collaborator, that it’s a two-way communication, they remember stuff, they enjoy it much more. So, that’s not really what I’m talking about. I think in responsive design, the design challenge became much harder. We had to think about basic typographical relationships—a headline, a pull quote, a deck, a text, a caption. How do those things relate to each other? And there might be slightly different sizes and widths that we have to deal with, so we would write that into the code. But now what we’re saying is if we can find out what’s working for readers, let’s give them more like that. It’s one of the oldest things on the web, what they used to call collaborative filtering. We need collaborative filtering for design.

Jen: I think one thing that we do know for sure in 2017 that we didn’t know along the way at different points in the evolution of the web is that this medium is not controllable. We don’t know so many things about the conditions in which somebody is going through our website—screen size, font size, how they’re experiencing it. In a way, I feel dumb even saying that, because it’s so obvious and it’s so ingrained in the way that so many people work. And yet you meet web designers every day who don’t think that way at all; they’re designing fixed things in PDF and then they’re holding that thing up to the final result and they’re going, “I wanted 15 pixels and I don’t have 15 pixels. You’re not doing what I’m telling you to do.”

I still feel like the industry is struggling very hard with understanding what this creature is in this multidimensional… You don’t control it, but you do program it. So, you can create sort of a minimum and a maximum, and you can sort of say, under these conditions, this is what I want, and under these other conditions, this is what I want. And I can’t control it and I can’t necessarily predict when those conditions will be in place, but I can say some things and I can set some limits around what that means. And I think that that’s going to even be—with CSS Grid, with fixed websites, we had a fixed size. With fluid, we sort of said, “Oh, it’s going to be completely squishy.” With responsive, it’s like, “Okay, it’s being squished, everything is squishing evenly, or everything is stretching, everything is stretching evenly. We’ve rearranged things a little bit, but basically it’s all squishing and stretching at the same time.”

With CSS Grid, you could easily have some things that squish while this other thing stays fixed, and this other thing squishes while this one was fixed, and this other one’s fixed the whole time… I mean, it’s so much more dynamic in how it behaves in different ways. As I try to teach that layout… I don’t know, I think we’re in a strange time, because on the one hand, the web industry is not leveraging the power of graphic design in the way that we could be. We’re copying each other’s work too much. Too many things look like Medium; too many things look like web design out of 2007. Too many things look like copies of each other. Everybody’s bored, everybody’s talking about this, everybody’s ready to move on.

So, we definitely know that there’s a way in which we can use graphic design unlike we’ve ever seen on the web before—the power of the entire 20th century brought to the web. And simultaneously, the people who know that work the best, the historians, the people who know the history, the people who have been trained, the people who are coming out of schools do not understand the web at all. They think of it as a PDF format, it’s a format for displaying things that they drew in PDFs and that they figured out in PDFs. So, there’s this weird tension. We desperately need to figure out what our medium is in a way that we never have before, but we also need to bring the power of graphic design—and other fields, too. Like, I’ve been looking at a lot of filmmaking and cinematography lately, because I don’t think it’s just about print. It’s about standing between several different design mediums and realizing what our medium is.

Jeffrey: I have to make three quick points based on what you just said, because I’m so excited, my brain is going to explode. First of all, and I want to come back to CSS Grid, but none of my points are about CSS Grid. First of all, I think responsive—the questions about responsive and the fact that we don’t know has led naturally to pattern libraries, atomic design, modular design, whatever you want to call it when people say, “We’re designing systems instead of pages”—we’re still designing pages, ultimately.

Jen: We are.

Jeffrey: But to some extent—like I’m on a project now with a client, and I’m not comping pages yet. I’m just saying, “Here’s the call-to-action module—I think. Here’s how it might look on a wider screen, here’s how it might look on a smaller screen. Maybe it doesn’t change from one screen to the next, it’s just this, let’s call it one unit of width and height.” I’m thinking in terms of building blocks. Ultimately, to make a great page, you have to think of the page, but I do think responsive is leading us in a good direction toward pattern libraries, atomic design modules.

Second, I want to make a point about your wonderful comment, Jen, about how some of the experts in typography or experts in traditional publishing don’t understand the web. Wonderful example of this: there was a company I knew, they actually used Roger’s TreeSaver technology a few years back to create a set of publications that, of course, could configure themselves. They did pagination, and ads, and everything a publisher wants, but they were also responsive. No one was calling it that yet because responsive design and TreeSaver came out at the same time.

So, Roger and his colleagues came up with this product using JavaScript to basically paginate and do multipage layouts in any device. And this publishing company formed by experts who’d been at the helm of incredibly great traditional print publications over the years, they used to have their designers mount the layouts on foamcore and walk them in, and they’d look at them as if they were a fixed layout. And I can remember overhearing conversations where these experts said, “Why is there this white space here?” and it was explained, “Well, that’s where the article ended.” “Well, shouldn’t we sell an ad there?” “Well, but it’s not a print publication. That space exists on this device but not another.” “On which device?” “Well, whatever device this happens to represent. This is a hypothetical device.” It was completely different centuries, right?

Roger: It was sad.

Jeffrey: One last point: I think for browser makers, in the old days when we were doing the web standards thing, the browser makers were torn because they had people like Steve Champion from the Web Standards Project saying, “You must properly support CSS1.” And they’d say, “Yes, we hear you, but there’s a lot of detail to that.” And at the same time, we have this other designer, who represents a million customers, who wants colored scrollbars. We would get angry and say, “Screw colored scroll bars. Support CSS1.”

But the truth was the browser maker couldn’t afford to turn on either customer, and I think we’re at a similar inflection point here where the browser makers are excited about CSS Grid, and they’re excited about people pushing boundaries on layouts, but at the same time there’s all kinds of traditional businesses out there that are doing layouts like it’s 2007, and they have to support both. I would imagine it’s very hard to be a browser maker, because if you blow up the 2007 designs—I’m not saying that you have to, I’m not saying there’s causality, but you can’t turn your back on either customer. If you’re a TV show, you have to appeal to democrats and republicans—usually.

Jen: Browser makers are very obsessed with making sure that Google Docs runs fast, or that Facebook renders properly.

Jeffrey: Or that Gmail does what it does.

Jen: Because that’s what a typical person opening up a web browser wants. They want to use Google Docs, Gmail, and Facebook, and if those things are sort of broken, it doesn’t matter if it’s the fault of the people who made the websites, it seems like there’s something wrong with the browser.

Jeffrey: And I do remember a period in the Web Standards Project of us being very hardcore and saying, “Well, it should break. It should break! It’s coded wrong! It doesn’t validate! The div never closed! It should break! That’s the only way you’ll get these guys to do the right thing!” And the browser makers were like, “We can’t do that.” And then later on, “Yeah, of course they can’t do that. They’re a business.” To some extent, I can fall on my sword because I’m a designer thinking about what design should be…

Jen: Well, but also, I think—I mean, of course, there’s a wide range of different people and different companies and different folks who are making websites for different reasons, and all of those concerns are important. It’s not like one is more important than the other. I just know that myself, and probably you, Jeffrey, and a lot of us, we’re like in this little corner over here thinking deeply about design and what it can mean, and what we can give our clients by using design, by using graphic design, by using typography, by using the skills that come from the days of pasteup. People may or may not be into what we’re into, they may or may not want the skills that we have, but there’s definitely a huge audience that does.

And I also think that—you know, I’ve been thinking about the future, because I think there’s business opportunity there. When you get in the front, when you end up being the Boston Globe shipping the first responsive news website rather than shipping the last one ten years later, it gives you a competitive advantage. And not every company is willing or ready to take that kind of leap, but some want to; some want to be in front. Not everybody wants to copy Facebook’s layout. There are people who want to be the next Facebook and do something… Facebook’s layout was original when they came up with it. There’s other folks that want to go ahead and do something new. A lot of people say to me, “But what about usability? You’re talking about creating a whole new mental model for layout. No one’s going to understand how to use it. You’ve got to do things the way we’ve always been doing it because that’s how users are going to know how to use things.”

Jeffrey: “Blue underlined links!”

Jen: Yeah. It’s funny, sometimes when people say that to me, I think, “What do you think I’m advocating for? Do you think I’m advocating for some three-ring circus crazy-town of a layout?” I’m not. I’m advocating for: take the column of text and put it off-centered instead of centered.

Jeffrey: Right. Right.

Jen: Users are not going to be confused! It’s okay if the left margin is twice the width of the right margin. Or your navigation needs to be in a place where it’s expected to be, but it doesn’t have to be exactly the way that it’s been for the last ten years.

Jeffrey: Also, you were talking about film. With the first close-up, people ran in terror. They thought it was a giant severed head, they didn’t understand. And then they did. And when the sea waves were coming toward the camera, it was an ocean shot, they went out on a boat—people ran from the theater like they were going to drown. And then they got it. Today, if you think about the filmmaking we have now and imagine someone from 1910 watching just any modern film, they’d be terrified, they’d be hiding under their seat. Now audiences accept it and go, “That was fake. That was CGI.” People go in suspending their disbelief and yet looking for the CGI, right?

Jen: Yeah, and our users are smart, they’ve been evolving over time, and nothing is static.

Roger: They can find a “go” button, they can find the “okay” button if it’s on the left or right. It’s really annoying, but they can find it.

Jeffrey: Also, our generations are dying out, and, like, my daughter’s generation, they know how to use everything. I get angry, as a designer, I go, “This doesn’t make sense because the user interface was badly thought out.” But my daughter and her friends, they know how to do it. They look at it and go, “Oh yeah…” They can make mental models all day long. They can’t necessarily read, but they can make mental models… Actually, she’s a very good reader, that’s a stupid joke. But she learned this before she learned reading. She was slow to read, but she was using an iPhone at two.

Roger: Bringing up video is interesting, because in the current YouTube-standard world of video, video is its own layer that has nothing to do with anything else. If you want type in video, you put it in the video. You super it, or however you do it in your software that you’re editing the video in. One of the things I’m working on, and I do have a client in Myanmar who suddenly is starting a new publication that is going to be print, web, and video. So, it’s a 24-hour live-streaming news channel that’s over the top, it’s just on the web, and then it’s a print publication in Chinese and Myanmar, or Burmese. And the website has three languages: Burmese, Chinese, and English. How do you do all of that together? With a small staff? Because there’s still not a huge revenue stream, it’s in a small country and in a development stage.

So, we’re looking at ways, how could you separate the type… Because if you’re going to do video on the web, you need supertitles, you need to be able to let people read it if their sound’s off if they’re in a noisy place, or if they’re in their classroom and they want to watch video and not watch their teacher; you have to do it without sound. So, voiceover is not the answer. If you’re doing three languages, you have to have a layer of translation, and supertitles on top of that. So, how do we do that? And it gets very interesting, how do you know what the video is, or that the type is the right color, that they can read it, yada yada yada…

My friends in Holland are feverishly working on how you do responsive variable fonts that actually have server cues on what color, and other treatments—the outlines or shadows—they might, automatically in the font, take on. It’s very interesting stuff. So, I think that there are people willing to—I mean, this is not a first-world product, this is something happening in the developing world, where they really think, “Let’s make it really reassuring and great-looking, but at the same time, let’s forget about what video has been on the web and do something else.” I love that. It’s a big typographic challenge both for the programmers and the people who figure out the algorithms, and the type people, too. What are the fonts that can work in three languages together simultaneously just by flipping a switch?

Jeffrey: I’m really glad you said that, because I think supers in video are something that a lot of us don’t even think about, and should. I’m a web designer. I think about it because I have to, because of accessible video… I know I’m going to piss off either Netflix, Hulu, or Amazon. I don’t remember which. It’s either Netflix, Hulu, or Amazon, I was watching video and I discovered that, speaking of customizable, if you go into the supers, you can set the size, you can make it with a black outline, a white outline, you can make it yellow… My daughter went in and started making it like really crazy, like yellow type with an orange outline. But it’s like old Windows black metal jacket or whatever from Windows 3.1. Users can make stuff ugly as hell if they want to, which is my deal with customization, my concern with it.

But, I mean, there’s an opportunity. Setting type on video is going to be super important, and like with responsive design, some people are watching it on their little phone, some people are blowing it up to their full screen, some people are watching it inside a browser window in Firefox while they’ve got another browser window open doing something else. There’s a lot of complexity. Also, VR. Web VR is an emerging standard, and type for VR just for navigation, not enough people are thinking about it right now. I would love to see… Well, I’m sure the folks at Type Network are thinking about it. It’s type that’s experienced on a curve, and it’s lower res.

Roger: Well, that’s the interesting thing. I don’t think that the kind of customization you’re talking about is going to be done by users for the most part. I think that we’re happy to be able to make the type bigger, but how many people actually do that? 10 percent? I don’t know. It’s not a big number.

Jeffrey: People who need it.

Roger: People who are struggling. But at the same time, if you could find out what it is they like, if you can track their experience… And one of the things Matthew Carter said, “Readability is like 80 percent familiarity.” It’s like the web standards you’re talking about—or web conventions; they’re not really standards. If you go against the conventions, sometimes you lose people. At the same time, you can’t really expect them to fill out a form of their choices of design. But if you hear back from them in the same way we understand what device or what their viewport is, if we could find what they find easier to read, then we can make it more like that. And that’s an algorithmic problem more than it is a user decision.

Jeffrey: It’s almost a cross-site problem, too. Imagine if there were just a typography layer abstracted from your individual site which noticed after a while, “Wow, when this customer went to Type Network they boosted the font size, and then they went to A List Apart and they boosted the font size, and then they went to the New York Times and shrank the font size and changed it… So, what is it that they really seem to need?”

It would have to be really smart. Like, well, maybe they did this because of column width, or maybe they did this because of where they were viewing it or… But a sophisticated machine-learning layer… I mean, we have a primitive example of it now in, for example, I can tell my iPhone that I need a certain minimum type size in software that supports this, and then I use one Twitter client that supports it and my font is bigger. Let’s say I made it a little bit above middle because my eyes aren’t as good as they used to be, so I make it a little bit bigger than normal, and another software device doesn’t do it. But still, that’s the operating system extracting that.

Roger: The user.

Jeffrey: Yeah.

Roger: Well, I think you want the users to be complicit, but you can’t expect they’re going to do it.

Jeffrey: So, imagine a layer that exists… I don’t know where it exists, maybe the same place that—forgive me, I’m going to say AMP. Okay, I’m sorry, I hate AMP. But it exists somewhere, it’s being saved somewhere, or it exists where Google Fonts exists. Or it doesn’t have to be Google, it could be somewhere else. You opt in, it tracks you, and it starts adjusting font size to be better for you based on watching what you do. Would that be a boon for designers? Would that be a boon for users?

Roger: I think it’s inevitable. I think that in the same way that Amazon gives you stuff that you like, or that it thinks that you like—and it’s relatively successful at it—we’re going to see that affecting layout, too. And the typographical layers, also there’s some very interesting things that happen with language. Because, increasingly, your design has to go in multiple languages. The world is getting global and we want to be able to communicate with people who don’t necessarily speak English. So, then what happens? That’s another question of writing the rules so that layout can adapt to Chinese, which is really a functionally different thing. It doesn’t justify the same way; the whole thing is different. It’s these little squares that are very condensed. You can get much more text in Chinese in the same amount of space as you can in English or any Latin language. You know, one wag said, “Forget about icons. We could just all learn Chinese and we could put a Chinese glyph for every single thing that we needed touch on.” And it’s not a bad idea. I mean, we probably all should learn Chinese.

Jeffrey: Jen, in one of her talks, talks about we act as if design ended in the 1950s and 1960s in Switzerland and we’re all doing this one thing, this grid-based Helvetica approach to things. And that’s great, but there’s thousands of years of graphic design history from Asian cultures and Arab cultures and all these other places. It seems to me if you were designing for a Chinese website, that’s a perfect opportunity to not make a Western layout based on the grid, based on Swiss typographic design conventions, but instead actually look to Asian traditional graphic design, which was, after all, built around those languages, and use that on the web.

Roger: Yeah, and they had typesetting before we did.

Jeffrey: Indeed they did.

Jen: It’s interesting, because on the one hand I really want the kind of graphic design industry or whatever, the tradition of 20th-century graphic-design teaching and understanding, to come to the web because I think there’s a lot of power there. But on the other hand, I struggle with it a lot because it’s so incredibly arrogant and tied up in ideas of white supremacy and Western-culture supremacy, and, “This is the right way to do things,” and, “This is the way to do a grid, and this is the way to do typesetting, this is the way to use a font, and this is the way to do everything.” I don’t want to carry those ideas around. I don’t want us to all go, Hey, how should I use a grid? Oh, let me look at these experts, these particular people from this particular culture—

Roger: —from the Bauhaus… [laughs]

Jen: …and listen to them.

So, I’ve been really trying to educate myself around—because, also, I didn’t have a graphic design background, I didn’t have that kind of formal training, so I’ve been teaching myself over the last two years… But to balance out kind of, I don’t know, I have three feet of Western books and one foot of non-Western books; I really want that to balance back out even more. Trying to learn about Arabic design, learn about—like Japanese tradition of line grid, especially in vertical layouts, and all the rules and the details… It’s not like that happens separately. That’s definitely been cross-fertilized with modern ideas and cross-fertilized with the ideas out of the mid-20th century, lining things up and being rigid and having rules, and following the rules. All of this has been going back and forth the whole time.

But I do think it’s important for the web industry, when we are starting out on this new thing, to learn CSS Grid and to think about layout, and to learn entire new techniques for layout, to do so with a global perspective and to not fall into this idea of, “Well, this book I have on the Swiss use of the grid, or this use of the grid, that’s the way we should all do it.” No, that’s a way. It could be cool. There’s ideas we should look at, maybe we want to bring those ideas over, but let’s not get all, you know…

Roger: Typographically, there’s whole different conventions. In addition to reading the other way in Arabic, or the calligraphic tradition in the Indic scripts and in Arabic, and in very old Chinese or Japanese or Korean, you had to connect characters in a different way according to context. Most typesetting systems tried to force that into a Western model, which is not necessarily that successful. Now, in China there’s kind of a different thing going on where the square that all characters fit in, which started I think really when they started movable type, when they made wooden fonts, way before we did—that square made it easier for them. So, they kind of squished letters into that. Then after 700 years, people kind of get used to that, or 800 years, however long it’s been. So, then if you reintroduce Chinese calligraphy into the web, people get confounded. It’s like, “What is this? It’s dripping down the side, I can’t understand it, I can’t read it.”

Whereas in Devanagari, or Bengali, or Tamil, or the other big languages in India, the inability to have good ligatures makes it hard to read. I mean, the first fonts in the Indic world were so unreadable that Indian kids all did texting on their phones in Latin. They transliterated their own language in Latin because they couldn’t read the damn Devanagari. That’s been true in Myanmar, it’s been true in Cambodia, all the way through to the so-called Brahmic culture of lettering, it’s been very hard to adapt to electronic devices. It’s happening now. Google is actually leading the way, in many respects, on that. Google has 50 Devanagari fonts in Google Fonts. It’s kind of amazing. But it’s still setting types as separate glyphs.

With variable fonts, which we might not want to get into, there is an opportunity people like John Hudson have talked about, of using the hyphenation table in HTML to look up how you should connect ligatures in Indic languages. That would be great—and how much more fluid and beautiful we could become. For Westerners… I mean, I can’t speak any of these languages. I watched John Hudson at TYPO Labs Berlin, which you can see on YouTube. It’s an amazing idea of how this can happen. However, you need knowledge like his to be able to understand what it is, what we need to do. I think that’s the global challenge. We’re really moving quickly into a much more complicated world.

Jeffrey: There’s so much, again, to unpack, but I’d like to focus just on variable fonts for a minute, if you don’t mind, since I know you guys are working on them pretty hard. Tell me about that.

Roger: What do you want to know?

Jen: What is it?

Roger: I think the easiest way to understand variable fonts is that it’s several styles of a font, of a typeface family, pushed into one font file. So, you could have bold and light in the same font. Instead of having two or 12 or 15 or a hundred different variations of the weight of a font in different files, in your font menu to select, they could all be in one font. Using CSS, you could say, “Okay, I want a weight that’s 1/20th of that,” and the font will just respond—if the browser is up to it, which I think we’re seeing. All the browsers are making an interface that you can do this. So, the first iteration of variable fonts, so with these variations of weight or width or size, are happening in the kind of development versions of the big browsers right now.

Jeffrey: Are they doing it with fonts and some new CSS? Are they doing it with SVG? How do you control something like that that wasn’t envisioned when they wrote CSS?

Roger: Well, a variable font is a version of OpenType. It’s the next thing. So, the fonts are downloaded on the web just the way all TrueType or OpenType fonts are downloaded. The trick is to then specify how you want the variation to be issued on the page. That takes a little bit of a learning curve, but there are interfaces that people are working on to have slider bars for the three or four different axes that are in the font. Now, Google, Apple, Microsoft, and Adobe have embraced the first three axes of these fonts—weight, width, and size—because if you have one font instead of 15 fonts, the page loads faster. So, there’s an improvement of 30 percent of file size per font. Now, if you’re YouTube, you don’t maybe care too much about that. But for Google at large, the amount of text that’s being downloaded in the world simultaneously is a big thing, it’s a big number.

Jeffrey: Just so I understand: if I were using Adelle Sans and Adelle in a layout, in theory it could be one variable font that contained the right glyphs and serifs…?

Roger: Yeah, you could have serif axes. All of this started, we saw this with Multiple Masters that Adobe did years back.

Jeffrey: Right, ATM, 20 years ago.

Roger: Yeah. Then, right at the same time, there was a kind of untracked project called GX at Apple. If you look at the OS on Macs now, there’s a font called Skia, it was based on Greek inscriptions. It’s a beautiful font, and it is actually a variable font, it was done in TrueType GX. That’s the model of what we’re doing now. When Google heard about what GX had done at Apple 20 years ago, they said, “This could be a real savings on the web!” So, Google was the big impetus to make this happen.

So, they hired our company, Type Network, to make two demo fonts, all on GitHub. If you go to GitHub and look up Amstelvar, or Decovar, or if you go to the Type Network site, you can find these fonts, you can use them now, you can download them from GitHub. There’s a fairly interesting demo going on at the typenetwork.com site. Amstelvar uses these three main axes, and it’s quite exciting. And then Decovar uses lots of others, including the way that terminals and serifs are done on the letters, and decoration inside the stems and stuff. So, it shows you what the potential of variations might be for design, it’s really quite fun. These were both done by David Berlow.

Jen: Well, my understanding is that, for example, if I want to use Goudy right now, if I want to go and get myself a web font, download, and use Goudy on my website, for my body copy—like, okay, cool. Oh, I’ve got some type I want to do in italics? Well, the person who maybe doesn’t know as much about what they’re doing would just say, font-style: italic; and boom, you’re done. But if you really know a lot about typesetting, you’d realize, no, we don’t want to just take the regular font and make it sideways, like slanted. We want to download the italic font because the italic font is more beautiful.

Okay, so now you’ve got two fonts: you’ve got Goudy and you’ve got Goudy Italic. But then are we going to do some bolding? Okay, we’ve got the bold. Do we need the bold italic? Okay, well that would be four. But that’s too much data, so let me just… I’m not going to use bold on my website. Okay, why? Well, ’cause. So, I’ve got Goudy, I’ve got Goudy Bold

But now I want to do my H1 headlines in Goudy, too, but I really shouldn’t just take my font that was made for 14 or 16-point type and make it 36 points, because it’s not really nearly as beautiful as if I get the Goudy Display font. So, I get Goudy Display. But do I need Goudy Display Bold? Or, actually, they have a Black and they have a Light, and they have a… You could end up with…

And this would be, okay, we just have one font, and that one font knows, Hey, when you’re little, be like the little version of the font, and when you’re big, be like the big version of the font. And when you’re italic, the italics are actually computed and hand-coded into the same font and the bold is hand-coded into the same font.

Jeffrey: Is that what we’re looking at, Roger, for the future of something like Decovar?

Roger: Yeah. I think… Italic is the big challenge there. You’re probably going to end up with separate italic fonts. But in the simple italics, like something like Avenir italic, it’s mostly slanted anyway and just has some changes in some of the terminals to kind of make it more italic.

One of the things that Decovar shows is that you can change the x-height, you can slide up and down, or you can make other variations that are fun. And we hear a rumor that Adobe is going to support these fonts for desktop typesetting in the near future, maybe in the third quarter or maybe the fourth quarter of this year. That’s fun. I mean, that’s kind of interesting that they’re doing that. Because right now we’re talking about the web. But on the web we have a lot of SVG files for headings, for kind of static stuff that doesn’t have to be typeset, so there’s branding involved and all of that. And certainly in print it’d be fun to be able to make logos where you can make the text fit exactly in a rectangle that can be the same for different words—“baseball” and “basketball” could be fitted in the same rectangle…

Jeffrey: I want to make responsive logos, for instance, that’s just the graphic, and then above a certain size it’s the mark, and then above a certain size it’s the mark and type; and then the type, maybe there’s two different variants of the type. That’s coming soon; that’s gotta be coming soon.

Roger: Well, that I think is very, very possible. There’s an interesting site called Axis-Praxis, Laurence Penney’s site that you can go to—axis-praxis.org. You need a compliant browser, like the overnight build for Safari. He’s got some fun things like that you can play with right now. And I think you will—instead of using SVG, we could put fonts in there. What I was talking about is the desktop thing for an ad or something, or a publication design, that you want to print it, it’s not just web. So if Adobe gets in, and they’re one of the key members of this consortium that’s pushing this, this whole world could start taking place later this year. It already is happening, and all the browsers are working on it. I think the designer user interface, our interface for designing these things, is still up in the air.

Jeffrey: I think we have to wrap. We’re going to put Axis-Praxis in the show notes, and Type Network in the show notes…

Roger: That’s it?

Jeffrey: No, I could do this all day. You guys are so brilliant. I love chatting with you. It even makes me feel smarter, and there’s so much to learn and so much to play with. I hope that folks will continue to read. We’re going to have labs.jensimmons.com in the show notes, which is where Jen is showing the kinds of layouts that can now be done, for example, in CSS Grid, which we didn’t even get into. I would love to do this again in the future, because there’s so much. But I’m so sorry, my friends, I think we have to wrap things up.

Roger: It was fun.

Jen: Thanks so much for having me.

Jeffrey: Thank you both.

Roger: Thank you very much. Thank you for listening.

Jeffrey: Thank you, thank you.

“>

What can the era of mechanical typesetting teach us about layout and typography for today’s (and tomorrow’s) screens? What comes after the page-view business model? Can typography encourage long-form reading—not just scanning? What are the most exciting areas of cutting edge experimentation in typographic technology and digital layout, and what new skills will we need to design tomorrow’s web content?

What we talk about

  • How layout and typography were connected in the age of metal type, and why they will be again.
  • How to avoid being overwhelmed by all the tools and typefaces that are available today to today’s designers.
  • The history of layout on the web, and what multi-device reading and orbital publishing means to the practice of publication design.
  • Moving away from frameworks; bringing creativity back into layout.
  • Layouts that break the mold (and how to encourage them).
  • Helping the reader feel like a collaborator. The new wave of user customization, and how it impacts our designs.
  • CSS Grid and its portents.
  • Why it’s okay to try new layout ideas (why users won’t become confused).
  • Experimental, responsive variable fonts. Fonts that can work in three languages simultaneously, just by flicking a switch.
  • WebVR and typography.
  • Getting past the pervasive idea that 1950s Swiss layout was the final word in good design.
  • Typographic challenges in Chinese, Japanese, Korean, Bengali, Tamil, and other languages.
  • Variable fonts. What they are, and their potential to deliver more typographic power with less bandwidth.

 

Featuring

Transcript

Jeffrey Zeldman: Hello, welcome to A List Apart Events. I am here with Jen Simmons and Roger Black. My name is Jeffrey Zeldman, and we’re here to talk typography and layout on the web. Good morning, everybody.

Jen Simmons: Good morning.

Roger Black: Good morning.

Jeffrey: Jen, you had a thought about layout and typography and their inseparability, or lack thereof. Do you want to maybe kick things off with that?

Jen: Yeah, well we were just chatting a little bit before we started recording, about typography and layout, and I was thinking again this morning about how I think we—like, the web industry in the last couple years, we’ve really worked on typography and thought a lot about typography in maybe the last five years, figuring out how do you pick good fonts, how do you pair them together, how do you decide what size to make everything, and how do you set up a rhythm or make it look beautiful.

But in all of those conversations—on the web especially, but even sometimes if you’re thinking about InDesign—talking about typography or reading typography books, it’s all about the typefaces and the details of the type. But if you think back to setting metal type, or you think especially back to the era when the Linotype machine dominated and type came from this crazy contraption where there’s this giant keyboard and molten lead being squirted into these pieces of machinery that were moving and clacking and making all this noise, and on the other end would come out this line of type, this literal metal line of type… Layout, the actual layout, and the typography, were completely connected, they were the same thing.

I first thought of this because I was invited to speak at a typography conference and I kind of felt a little bit like, But what do I know about typography? I know about it as a person who sets type as a designer, but I’m no expert on typography. Then I was like, No, but typography and layout, now we think of it as two things, but we used to always think of it as one. It used to just be one thing.

Roger: Well in that era also, there was somebody in the middle, a typesetter or a compositor who actually, in the old days, knew something. When I worked for the New York Times in the ’80s, they still had these ex-Linotype operators doing pasteup, which was a little humiliating for them, but they actually knew what type was. In the era of kind of industrial specialization, we had a situation where those skills were put into the printing department or in the composing room, or at the printers, and the editors forgot how to do that stuff. If you go further back, you had Benjamin Franklin setting his own type. That was a different hands-on kind of typography, and we’re sort of back to that now.

Jeffrey: That’s really interesting. You’re right. I’m a publisher, it’s one of the things I do, but I started as a person writing and setting type on the web, to the extent that I could do that. It’s funny, I remember in advertising, too, we had that same— I started advertising in the late ’80s/early ’90s, and we had a guy, he would come in and buy us drinks basically, and we would spec type by looking at a specimen book and taking a guess, and he would come set it, and then we would cut apart his pasteup with a razor blade… Jen, do you remember this, too? Were you working during this period?

Jen: Yeah—

Roger: She’s not that old. [laughs]

Jen: No, I was trained in pasteup. I started in pasteup.

Jeffrey: This is amazing—

Roger: And you had a limited number of fonts, because it was whatever that typesetter had, or whatever your publication had. A graphic designer’s role might be to add more leading or see if there was another point size they could use. But often in a newspaper or a magazine, you were severely limited in the choices, there really weren’t a lot of fonts. One of the things that I think bewilders current designers is the proliferation of fonts. There are tens of thousands of fonts, many of them free at Google, or you move up a step and you go to Typekit and you spend just a little bit of money, but you have a ridiculous amount of options. That’s confusing for folks.

Jeffrey: Roger, you’ve been an art director for decades, but you also are cofounder and co-owner of a type company. In fact, you’re one of the reasons we moved to webfonts. I mean, I remember when this started as an article from Håkon Lie, like 12 years ago on A List Apart. It was like, You know, we should have webfonts because CSS will support it. What are we doing about this?

Roger: It was a long time. 1997, 20 years; there was a solution for webfonts that the community rejected. It was Microsoft’s EOT file format, which we don’t have to talk about. But in IE4, they supported the @font-face spec in the HTML W3C standard, and it was nice. But we said, “That’s not a standard, it’s not open, we don’t like that. We’d much rather use the Netscape solution,” and then Netscape kind of disappeared, and there was a lot of Arial for many years after that.

Jeffrey: And Jen, you work now at the place that wouldn’t exist without Netscape; the sort-of descendant, the grandchild of Netscape, which is Mozilla with the Firefox browser, which is like three generations, five generations maybe, in terms of rendering engine, from the initial…

Roger: From Urbana-Champaign.

Jeffrey: Mozilla really believes in open source and open fonts and the open web and all that stuff. And I know you’re here as Jen, you’re not here as a Mozilla representative, but still, it must color your perspective to some extent.

Jen: Yeah, well one thing I didn’t know until after I joined Mozilla and really got the opportunity to spend more time looking at the details of CSS and the implementations and comparing one browser to another, and looking at Firefox and seeing what’s missing, what do we need, what CSS should we prioritize… Firefox actually has really great support for fonts and typography. And there’s some details about CSS that we could be using, but it’s not really quite supported in every browser, so people hesitate to use it. Over and over again, I go to check, Have we put this in Firefox? Should I be advocating for this? And most of the time, with everything for typography, it’s like, Oh, we already did that. We did that a couple years ago. We’re waiting for other browsers to catch up at this point.

But I think you’re right, Roger. I think there’s so many tools when it comes to setting the type and making decisions about what font to use, and all the details of how to set it, that it’s gotten really overwhelming. People are a bit at a loss as to, like, what they need to know and how to do a good job.

Roger: Earlier this year, Jeffrey joined forces at Poynter, where I am today, Poynter Institute in St. Petersburg, Poynter Design Challenge. We asked five designers to come up with a better typographical solution or a better publication solution, better website solution for reading and for layout. And, there’s a very, very simple HTML prototype that you can find on the Zeldman.com site, which says, “Hey, let’s just use some of the typographic specifications that we’ve had for a long time—pull quotes, subheads, and nice captions, and a variety of these things.” He wrote up a nice HTML spec, and it’s funny, when we see typesetting on many websites, the homepages might be pretty exciting, but you get to the basic story page, and they’re god-awful. We have the classic news story page, and, you know, text interrupted by all kinds of advertising and other crap, and then a bunch of, you know, kind-of Taboola doodads at the bottom, and other things interrupting, and it’s very hard to read it. It’s like hundreds of years of typesetting history have completely been ignored to try to get a few clicks. And that’s one of, I think, the big challenges in typography. How do we circumvent the business model that’s making these ugly pages?

Jeffrey: But haven’t you also noticed, conversely, that on, let’s say, a few of the bigger papers, like washingtonpost.com, newyorktimes.com, the article pages have been pretty beautiful for a while now, that they use big type, very readable layout…

Roger: Yeah, or Medium.

Jeffrey: Yeah, Medium.

Jen: The Atlantic is a really great one.

Jeffrey: newyorker.com.

Jen: The New Yorker, the Atlantic, and the New York Times, to me, are the three big leaders in creating much more beautiful layouts.

Roger: So why do you think they’re succeeding? Because they have more money, or what?

Jen: I think something happened in the internal politics and probably in their user research, where they were able to say, “Hey, clutter, clutter, ads, ads, horrible, horrible. People don’t want this. Let’s declutter the page. Let’s find a way to get the ads that we need onto the page but do it in such a way that makes both the advertiser happy and the user, the reader, much, much happier,” rather than kind of going off of a bunch of assumptions about what the layout needs to be because of the advertising model.

Jeffrey: Those papers have a business model—

Roger: That’s off of their business model.

Jeffrey: Right, we’re saying the same thing. Yeah, those papers have a business model where it’s partly subscription, so that enabled them to experiment more. I also think they had to. I believe Rich Ziade’s Readability program from a few years ago, which is now pretty much defunct, sadly, but if you use Safari, an early version of it is built into the Safari browser; if you go to the article view, that’s just Readability 1.0.

But I believe that had a huge influence—I mean, it did on me. Like, after I looked at that for a while, I was like, I can’t have this cluttered… I loved my old cluttered layouts and I loved thinking that I was so good that I could make a cluttered layout that didn’t feel cluttered. And all of a sudden I was like, No, this is bullshit. Let’s remove everything inessential. Let’s strip it down as much as we can and make it a good reading experience that makes you sit back. That was the other thing to me. A page at newyorktimes.com, you actually lean back and analyze the news, as opposed to leaning forward and squinting. I think, physically, if you believe there’s a mind-body connection physically, those designers are saying, “Sit back, think about what we’re presenting. Don’t take it as gospel. These are the facts as we understand them. What do you think?”

Jen: Well, and, you know, “We’re going to make some space for you to really think,” like you said here, like, “instead of just tossing so much crap at you that you need to run away almost immediately. So, you’ve got to read, scan, fast, fast, get out of here, because we’re chasing you away.” To be like, “No, no, no, we’re not going to chase you away. We put a lot of time and effort into this.”

Roger: It’s fascinating to watch the acceptance of the idea that people are not reading your publication on desktop, or just at one place. You go to the New York Times, you go to Medium, and you’re sometimes on your phone, and sometimes you might have a tablet, and you might have a desktop, and you might have a huge screen that’s like what I’m looking at you guys on, that’s a 60-inch monitor.

Jeffrey: Like we’re on CNN. But also, don’t forget orbital content, the idea that people aren’t necessarily reading your content on your publication at all. What does that say about our freedom to innovate in layout, if the content that we’re creating is acceptably good enough anywhere? We’ve gone from… Right? That was the threat behind Readability, which for those who don’t remember, it was a device that removed all the cruft—I should have said that earlier. It removed all the junk from a layout so that it was a nice, readable…

Jen: Jeffrey, I think there’s a good chance that people are using those tools a lot, and that we don’t have any statistics on them. Google Analytics doesn’t tell you how many of the people who come to your website click on the reader-mode button. Safari has a reader-mode button, Firefox has a reader-mode button; Firefox has built Pocket directly into the browser, and we’re working on things to figure out how do we give people a better reading experience, especially when they’re going offline, they’re hopping on a train, they’re running around… And the fact that too many websites are crap. I mean, I’ve clicked on links in the past week where I just—I would have liked to have stayed on the website and seen it in their typography and everything, but I literally couldn’t. It was making me physically ill; it was such a crazy, cluttered, scrambled mess.

Jeffrey: Yes, yes, yes. Readability used to provide those stats. I believe Mercury Reader provides those stats. I’m not sure, though.

Jen: Yeah, the funny thing is, you know, people obsess all the time about how many IE6 users do we have, or how many IE10 users do we have, how many IE11… Nobody ever asks how many people aren’t even staying on the web page because our design is so terrible. It could be a really high number and we just don’t know it, because I don’t think that any of our stats tools measure how many people use tools like Readability, or Pocket, or Read It Later, or the reader modes, or the Instapaper… There’s a zillion ways to do it. It could be 40 percent of your audience, and you would have no idea.

Roger: Yeah, and I think that the page-view business model, which is audience-based, the idea that you get as many people looking at the pages as you can… Which is really the old broadcast model, it’s something that when publishers went into the web, they thought, “Okay, here’s our chance… We’re broadcasting, and we can have a huge audience and make it up in advertising.” For some of them, that’s working; for most of them, it isn’t. But it’s distorted the reading experience in a horrible way. And all you had to do is compare most websites, the conventional text page to Kindle…

In the ebook world, the typography, you can complain about the font choices and things like that, but once you’ve set your point size that you like that works on your device, it’s maybe no better than the cheap paperback, but that’s not bad, you could read it, and you know that you’re there to read. I don’t think that—we tried, like at the time at Readability, we were doing TreeSaver, and the business model didn’t support that because it didn’t get page views. The idea of reading a 2,000-word thing all the way through isn’t really treasured on the web. It’s not the important thing. The important thing is just to get to the beginning, to just show up, and then they count you.

Jeffrey: Can typography help overcome that long-ingrained habit of web readers, of, I’m going to read the headline and scan a couple of paragraphs and I consider that I’ve read this piece? Can a good layout actually draw people through the whole experience?

Roger: I think so. I mean, I hope so. What is a good layout? What are your rules of good type layout?

Jeffrey: I think it depends on the job it’s trying to do. Right now, I’m working on an ecommerce site, and I’m trying to apply some of the same principles. I’m still in the rough sketch phase, which is the most fun for me. But soon I’m going to actually have to commit to pixels, and I would like to bring some of the same thinking about classic, big, readable, engaging typography to a site that, by its nature, has to have a lot of stuff happening on the page. It can’t be a simple reader layout, it has to be a lot of stuff for you to browse and make decisions about and click pop-ups and all kinds of stuff. I guess my answer is, “It depends.”

But Jen, you’ve kind of abstracted the layout layer in a way. You’re currently actively engaged in studying layout not almost for its own sake, but what can layout be. Rather than starting with, “Okay, this is a news layout, so let’s do it the news way, this is a hospital page, so let’s make it look like a hospital page,” you’re going, “What can we do with the page?” Who was that great art director, Roger, from advertising in like—well, there were a bunch, but in the ’60s there was the guy, was it [Bob] Gage? They asked him how he stayed inspired, and he said, “I just keep finding new things to do with the page.” I think we have that opportunity on the web and haven’t really been using it.

Jen: Yeah. I mean, you know this, Jeffrey, because you’ve seen me talk at a lot of conferences. New technology has come along much in the same way that, once we finally had fonts and licensing for fonts to be able to use with @font-face, suddenly there was this new era of web typography. Because CSS Grid shipped in March 2017, almost three months ago, we now have tools to do layout in a way that was either completely impossible before, or it was possible, but it was laborious; it was just kind of too hard, or too fiddly, or too fragile to really be worth doing.

And so now with CSS Grid, but also with flexbox, with multicolumn layout, with box-sizing: border-box, we have like this whole bunch of combination of things. I think we really need to move away from using frameworks that we download from some third-party website and just kind of dropping everything into the layout that everybody else is using, and ask this question of What’s the job of the page we’re building? Maybe it’s an article, maybe it’s not. Maybe it’s an interface, maybe it’s a store, maybe it’s something else. How is it that people are trying to use it? It’s design. What are they trying to do? What do our users want? What do they need? What are they struggling with?

How can we use design, how can we use layout to better serve them, and really make an experience that’s the kind of experience that we want, that’s on-brand, or that’s easier or more elegant to use, if that’s the right value for this project or that helps people do the job that they’ve come there to do? And I have a feeling we’re going to see a huge change in layout, that we’re going to look back three years from now, five years from now, and it’s going to be really clear what came before and what came after, and we’re right at the tipping point of this massive change in page layout.

Jeffrey: I agree. I’ve been very inspired by what you’ve been doing and I’ve been following your articles, and your conference appearances, and all that. I also have a little story. One of the things that I do is every other semester I teach at the School of Visual Arts in the MFA Interaction Design program, and this semester I had a student, Ritwik Deshpande, he’s a brilliant guy, he was a journalist in India. He was very interested in music, and particularly in synthesizers, and he was very interested in creative web layouts and found that this whole Readability, Medium, this whole thing that’s been happening, which on one level is very good because it makes newspapers readable, on the other hand was sort of bringing this sameness to everything. He was sort of coming at the same thing Jen’s coming at.

So he, for his project, decided to do a piece on synthesizers, the reason being everyone learns about music synthesizers the same way. They sort of look at these instructional manuals, and there’s no interaction, there’s no dynamic interaction with… Actually, basically he designed something like you might see at a children’s museum in a way, like, this is a sine wave, this is a square wave, here’s what happens when you interact with these things. He used JavaScript and CSS to make these little interactive modules that showed a non-synthesizer player what it was to interact with synthesizers. He meshed that with explanatory text, and he made a custom layout that explained all this.

The reason I had to help him with his thesis was it was like almost everything I’m interested in in one piece, because it was about music and synthesizers, which I used to do, I used to play them; and it’s about web layout, and it’s about, How can I make this interactive learning? So, it was everything—education, writing; when does a page stop being a book-like experience and become something different; how far can you go with that before people become confused and need the reassurance of traditional paragraphs? He’s going to do more with this. It’s not a product.

Also, I loved it because usually when you have people graduating with an MFA in interaction design—I say “usually,” but it’s only been happening for a few years—but usually they’re trying to make a product. And this gentleman, Ritwik, was basically trying to make a learning experience for himself as a graphic designer, as an interaction designer, and as a fan of synthesizer-based music. I just thought, this is great, because it reminded me of the old web: I’m gonna make something cool that doesn’t exist because I’m curious about these things. I miss that. I love our new professionalism, but I do miss that experimentation for its own sake.

Jen: Me, too.

Roger: Yeah, there’s too much just copying the code.

Jeffrey: Yeah, especially when—

Roger: We’ve done that from the beginning.

Jeffrey: Right, but we didn’t have—if I made a two-column layout, I didn’t release it as a platform.

Jen: And a brand. [laughs]

Jeffrey: Right, and that sounds derogatory. But honestly, what people have made with Bootstrap… And it’s so complex. I’m not denigrating that. I’m not comparing it to my stupid two-column layouts from the ’90s. It’s a big deal. I think Rachel Andrew actually talked about, in her 2015 article, in her Christmas publication…

Jen: 24 Ways.

Jeffrey: Thank you. She said, “We told everyone, ‘Hey, web standards allow you to separate this structured content from this ugly—you can make a presentation and you can change it tomorrow, and you don’t have to have… But then as people wanted more and more complex app-like layouts with layers and everything, that was a lie.’” You ended up having to write HTML that was about, you know, divs that were sidebars. You didn’t have to, but if you wanted to do a certain kind of layout, you had to. And it became so complicated that something like Bootstrap’s just like, “Hey, if you’re going to do this anyway, I’ve gone through the trouble of doing it for you and I’ve got all the fallbacks in here, so here you go.” And you can’t really blame the industry for grabbing hold of something like that.

Jen: I feel like looking at the arc of history with layout, the shorter arc, I feel like Bootstrap and other tools like it—Foundation, and there’s others; and long before them there was 960 Grid and YUI I think was the first one, the Yahoo User Interface Library—there are reasons for that, and I think we needed them. I think we got into a situation where we needed to ship work, and we’re still trying to figure out what responsive web design meant, and we’re spending a lot of time reorganizing our entire workflow and our teams and what it meant to be a client or what it meant to have a content team versus a design team versus an engineering team… We had to restructure our whole entire organizations because of responsive web design. So, we had a lot going on, and just reaching for Bootstrap or something similar, it’s a good stopgap, whatever. But I think that era is over, and I think that a lot of companies, a lot of people are going to be like, “What are you talking about, Jen? There’s no way.” But three years from now, you’re going to be like, oh gosh…

Jeffrey: I also think there was an initial period—I mean, Roger, you were an exception. People who were trained designers, who knew what they were doing in terms of graphic design and art direction, who became web design gurus—that was an exception. Mostly it was like philosophy majors and English majors and all kinds of people without a design background. And then we had the period where there were more people like Roger. So, there was like the generation that, say, Jason Santa Maria represents. Somebody who went to art school, went to design school. There’s lots of designers like him; that was like this next wave—

Roger: And knew their history. Jason knows history.

Jeffrey: And knew their history. But now there’s a new generation of designers, I would say, who see themselves as product people, who are product people, and who actually think that layout and all that is some secondary work to be done by their assistants, and I think that might be hurting us in a way. The organizations listened to us and say, “Yes, design is very important! You’re right, we’re going to have an in-house design team!” But they don’t have actual hands-on designers necessarily running those teams. They have product people and marketing people who aren’t designers in a big sense—”big D” designers or whatever the hell that means. You know what I’m trying to say?

Jen: Yeah.

Roger: Yeah.

Jeffrey: There’s fewer people who came up through the craft of actually setting type and all this stuff. And so the juniors are doing that stuff, and they’re the ones, like Roger was saying in the beginning, being overwhelmed by all these typefaces and all these choices and all these tools, and the senior people aren’t bothering their pretty heads about typography and layout. They’re thinking about user retention and onboarding and all this stuff. I would love to see some product people also, or I would love to see more respect for this area, in addition to the respect we’re showing that aspect of design.

Roger: In the last day, I have had a big conversation on Facebook about photography, about the cover of Newsweek, of Rolling Stone, and Esquire, which I thought seemed oddly amateur this issue. It was fascinating to see the way people jumped on that conversation. There was this one guy from Singapore who just commented, “Well, ultimately it has to be in the hands of the readers. The readers will decide.” I think one of the things in all of this conversation about where we’re going with typography or layout on web, or in digital formats, is it forgets a little bit that what we’re trying to do is convey a message that readers and users will understand and enjoy. They’ll accept it, they’ll get something out of it, and they’ll come back. But it’s really this point-to-point communication between writer and reader that is the point of typography.

One of the things that’s happening is that the readers are having more info than they used to have. In the old days, a graphic designer often thought of herself or himself as an artist, thinking the big thoughts. You would stretch the canvas and then do the charcoal or the crayon, and then you’d paint, and then you’d have this wonderful thing that you would allow people to look at. So, it was a very top-down kind of communication. But in graphic design, in magazines or newspapers or advertising, or on the web or in print, it really is trying to get the message across.

And what’s happening—I think responsive, the whole responsive movement taught us an important lesson, that it’s not about that canvas square, it’s not an 8.5 by 11, or 1200-pixel-wide thing that we’re dealing with. We don’t actually know what we’re dealing with. There’s so many damn devices right now, and the media queries don’t always tell us the answers. It knows it’s an iPad, but it doesn’t know which generation it is or… We’re not getting good reporting back on what is actually the density of the screen, or the rendering method. We kind of guess. We sort of say, “Okay, it’s going to be these, and this percentage has to be this way.” But so many publications and advertising that I see, if I look at them on different devices, I can’t read it or it’s too small; or their lines are too wide, which is the oldest web-typography problem—put too many characters on a line so it’s harder to read.

But that’s sort of the current state. I think the most exciting thing about graphic design right now is the connection with the user and the reader. We’re beginning to understand who they are and what they want, and I think that ultimately the machine learning that we’re trying to do on the server side will start informing page layout so that people can read it more easily, with more enjoyment. Not that we’re asking them any questions about it; we’ll just watch what they like and give them more of that, and see what’s working, how the session time is being extended by different kinds of things. The metrics will start talking back to us and start transfiguring the pages. If we allow a variable format, then we can get amazing things. I mean, they can pick their own fonts, they could do their own kinds of colors and layouts if we collaborate with them. And as soon as we do that, as soon as we get the reader on board, then we’re geniuses. Then the design is great. That’s a huge challenge.

Jeffrey: I have mixed feelings about that. I like the idea of customization. I think customization is very important. We’ve always said the web is a conversation. We used to say it before we even had comments. We said, “The web is a conversation,” and then we started having comments on blog posts, if you guys remember blog posts and comments, and then we were like, “Yeah, it really is a conversation.” It was always a conversation design-wise too, because even back to the horrible days of liquid layout, where, “I want my screen this wide, and I’ll take that 10,000 characters per line,” and all that.

But there was always the chance that the user was going to install super-large fonts or override—I mean, I have a plugin in Chrome that lets me override any font on any site and replace it with some horrible thing. I’m having difficulty with, if I’m angry at a website, I can set it in Baby Teeth just for my own pleasure. So, there’s always been that thing, and I think it’s a mix, because you do want to let people—I mean, if someone has a problem with contrast, they need to be able to boost it. There are certain tools in the browser that let people do that, but it’s hard for a designer now, how people are interacting.

If we can make it an all-in-one design solution, like having type size widgets that we create instead of relying on the browser, then we might be able to. But now we’re playing three-dimensional chess with responsive layout, because, you know, what happens when someone makes this type seven times bigger, and, well, we’ve got all these minimum widths and… I guess what I’m saying is design is very hard right now, and although the user has always been in the mix and they’ve always had some power, once we start thinking about that and hoping that we’re going to get good design at the end of it, it becomes even trickier.

Roger: I think it’s like the templates that you’re designing anyway. You realize that you have to have adjustments for the different viewports. So, you know that it’s going to be one column in some places and multiple columns in other places. I think that’s how you deal with the users. You still want to build a road that they can travel on, but you’re deciding what the destination is. So, that means you have to guide that experience as best you can.

I think one of the things that we know is that if a reader feels that they’re a collaborator, that it’s a two-way communication, they remember stuff, they enjoy it much more. So, that’s not really what I’m talking about. I think in responsive design, the design challenge became much harder. We had to think about basic typographical relationships—a headline, a pull quote, a deck, a text, a caption. How do those things relate to each other? And there might be slightly different sizes and widths that we have to deal with, so we would write that into the code. But now what we’re saying is if we can find out what’s working for readers, let’s give them more like that. It’s one of the oldest things on the web, what they used to call collaborative filtering. We need collaborative filtering for design.

Jen: I think one thing that we do know for sure in 2017 that we didn’t know along the way at different points in the evolution of the web is that this medium is not controllable. We don’t know so many things about the conditions in which somebody is going through our website—screen size, font size, how they’re experiencing it. In a way, I feel dumb even saying that, because it’s so obvious and it’s so ingrained in the way that so many people work. And yet you meet web designers every day who don’t think that way at all; they’re designing fixed things in PDF and then they’re holding that thing up to the final result and they’re going, “I wanted 15 pixels and I don’t have 15 pixels. You’re not doing what I’m telling you to do.”

I still feel like the industry is struggling very hard with understanding what this creature is in this multidimensional… You don’t control it, but you do program it. So, you can create sort of a minimum and a maximum, and you can sort of say, under these conditions, this is what I want, and under these other conditions, this is what I want. And I can’t control it and I can’t necessarily predict when those conditions will be in place, but I can say some things and I can set some limits around what that means. And I think that that’s going to even be—with CSS Grid, with fixed websites, we had a fixed size. With fluid, we sort of said, “Oh, it’s going to be completely squishy.” With responsive, it’s like, “Okay, it’s being squished, everything is squishing evenly, or everything is stretching, everything is stretching evenly. We’ve rearranged things a little bit, but basically it’s all squishing and stretching at the same time.”

With CSS Grid, you could easily have some things that squish while this other thing stays fixed, and this other thing squishes while this one was fixed, and this other one’s fixed the whole time… I mean, it’s so much more dynamic in how it behaves in different ways. As I try to teach that layout… I don’t know, I think we’re in a strange time, because on the one hand, the web industry is not leveraging the power of graphic design in the way that we could be. We’re copying each other’s work too much. Too many things look like Medium; too many things look like web design out of 2007. Too many things look like copies of each other. Everybody’s bored, everybody’s talking about this, everybody’s ready to move on.

So, we definitely know that there’s a way in which we can use graphic design unlike we’ve ever seen on the web before—the power of the entire 20th century brought to the web. And simultaneously, the people who know that work the best, the historians, the people who know the history, the people who have been trained, the people who are coming out of schools do not understand the web at all. They think of it as a PDF format, it’s a format for displaying things that they drew in PDFs and that they figured out in PDFs. So, there’s this weird tension. We desperately need to figure out what our medium is in a way that we never have before, but we also need to bring the power of graphic design—and other fields, too. Like, I’ve been looking at a lot of filmmaking and cinematography lately, because I don’t think it’s just about print. It’s about standing between several different design mediums and realizing what our medium is.

Jeffrey: I have to make three quick points based on what you just said, because I’m so excited, my brain is going to explode. First of all, and I want to come back to CSS Grid, but none of my points are about CSS Grid. First of all, I think responsive—the questions about responsive and the fact that we don’t know has led naturally to pattern libraries, atomic design, modular design, whatever you want to call it when people say, “We’re designing systems instead of pages”—we’re still designing pages, ultimately.

Jen: We are.

Jeffrey: But to some extent—like I’m on a project now with a client, and I’m not comping pages yet. I’m just saying, “Here’s the call-to-action module—I think. Here’s how it might look on a wider screen, here’s how it might look on a smaller screen. Maybe it doesn’t change from one screen to the next, it’s just this, let’s call it one unit of width and height.” I’m thinking in terms of building blocks. Ultimately, to make a great page, you have to think of the page, but I do think responsive is leading us in a good direction toward pattern libraries, atomic design modules.

Second, I want to make a point about your wonderful comment, Jen, about how some of the experts in typography or experts in traditional publishing don’t understand the web. Wonderful example of this: there was a company I knew, they actually used Roger’s TreeSaver technology a few years back to create a set of publications that, of course, could configure themselves. They did pagination, and ads, and everything a publisher wants, but they were also responsive. No one was calling it that yet because responsive design and TreeSaver came out at the same time.

So, Roger and his colleagues came up with this product using JavaScript to basically paginate and do multipage layouts in any device. And this publishing company formed by experts who’d been at the helm of incredibly great traditional print publications over the years, they used to have their designers mount the layouts on foamcore and walk them in, and they’d look at them as if they were a fixed layout. And I can remember overhearing conversations where these experts said, “Why is there this white space here?” and it was explained, “Well, that’s where the article ended.” “Well, shouldn’t we sell an ad there?” “Well, but it’s not a print publication. That space exists on this device but not another.” “On which device?” “Well, whatever device this happens to represent. This is a hypothetical device.” It was completely different centuries, right?

Roger: It was sad.

Jeffrey: One last point: I think for browser makers, in the old days when we were doing the web standards thing, the browser makers were torn because they had people like Steve Champion from the Web Standards Project saying, “You must properly support CSS1.” And they’d say, “Yes, we hear you, but there’s a lot of detail to that.” And at the same time, we have this other designer, who represents a million customers, who wants colored scrollbars. We would get angry and say, “Screw colored scroll bars. Support CSS1.”

But the truth was the browser maker couldn’t afford to turn on either customer, and I think we’re at a similar inflection point here where the browser makers are excited about CSS Grid, and they’re excited about people pushing boundaries on layouts, but at the same time there’s all kinds of traditional businesses out there that are doing layouts like it’s 2007, and they have to support both. I would imagine it’s very hard to be a browser maker, because if you blow up the 2007 designs—I’m not saying that you have to, I’m not saying there’s causality, but you can’t turn your back on either customer. If you’re a TV show, you have to appeal to democrats and republicans—usually.

Jen: Browser makers are very obsessed with making sure that Google Docs runs fast, or that Facebook renders properly.

Jeffrey: Or that Gmail does what it does.

Jen: Because that’s what a typical person opening up a web browser wants. They want to use Google Docs, Gmail, and Facebook, and if those things are sort of broken, it doesn’t matter if it’s the fault of the people who made the websites, it seems like there’s something wrong with the browser.

Jeffrey: And I do remember a period in the Web Standards Project of us being very hardcore and saying, “Well, it should break. It should break! It’s coded wrong! It doesn’t validate! The div never closed! It should break! That’s the only way you’ll get these guys to do the right thing!” And the browser makers were like, “We can’t do that.” And then later on, “Yeah, of course they can’t do that. They’re a business.” To some extent, I can fall on my sword because I’m a designer thinking about what design should be…

Jen: Well, but also, I think—I mean, of course, there’s a wide range of different people and different companies and different folks who are making websites for different reasons, and all of those concerns are important. It’s not like one is more important than the other. I just know that myself, and probably you, Jeffrey, and a lot of us, we’re like in this little corner over here thinking deeply about design and what it can mean, and what we can give our clients by using design, by using graphic design, by using typography, by using the skills that come from the days of pasteup. People may or may not be into what we’re into, they may or may not want the skills that we have, but there’s definitely a huge audience that does.

And I also think that—you know, I’ve been thinking about the future, because I think there’s business opportunity there. When you get in the front, when you end up being the Boston Globe shipping the first responsive news website rather than shipping the last one ten years later, it gives you a competitive advantage. And not every company is willing or ready to take that kind of leap, but some want to; some want to be in front. Not everybody wants to copy Facebook’s layout. There are people who want to be the next Facebook and do something… Facebook’s layout was original when they came up with it. There’s other folks that want to go ahead and do something new. A lot of people say to me, “But what about usability? You’re talking about creating a whole new mental model for layout. No one’s going to understand how to use it. You’ve got to do things the way we’ve always been doing it because that’s how users are going to know how to use things.”

Jeffrey: “Blue underlined links!”

Jen: Yeah. It’s funny, sometimes when people say that to me, I think, “What do you think I’m advocating for? Do you think I’m advocating for some three-ring circus crazy-town of a layout?” I’m not. I’m advocating for: take the column of text and put it off-centered instead of centered.

Jeffrey: Right. Right.

Jen: Users are not going to be confused! It’s okay if the left margin is twice the width of the right margin. Or your navigation needs to be in a place where it’s expected to be, but it doesn’t have to be exactly the way that it’s been for the last ten years.

Jeffrey: Also, you were talking about film. With the first close-up, people ran in terror. They thought it was a giant severed head, they didn’t understand. And then they did. And when the sea waves were coming toward the camera, it was an ocean shot, they went out on a boat—people ran from the theater like they were going to drown. And then they got it. Today, if you think about the filmmaking we have now and imagine someone from 1910 watching just any modern film, they’d be terrified, they’d be hiding under their seat. Now audiences accept it and go, “That was fake. That was CGI.” People go in suspending their disbelief and yet looking for the CGI, right?

Jen: Yeah, and our users are smart, they’ve been evolving over time, and nothing is static.

Roger: They can find a “go” button, they can find the “okay” button if it’s on the left or right. It’s really annoying, but they can find it.

Jeffrey: Also, our generations are dying out, and, like, my daughter’s generation, they know how to use everything. I get angry, as a designer, I go, “This doesn’t make sense because the user interface was badly thought out.” But my daughter and her friends, they know how to do it. They look at it and go, “Oh yeah…” They can make mental models all day long. They can’t necessarily read, but they can make mental models… Actually, she’s a very good reader, that’s a stupid joke. But she learned this before she learned reading. She was slow to read, but she was using an iPhone at two.

Roger: Bringing up video is interesting, because in the current YouTube-standard world of video, video is its own layer that has nothing to do with anything else. If you want type in video, you put it in the video. You super it, or however you do it in your software that you’re editing the video in. One of the things I’m working on, and I do have a client in Myanmar who suddenly is starting a new publication that is going to be print, web, and video. So, it’s a 24-hour live-streaming news channel that’s over the top, it’s just on the web, and then it’s a print publication in Chinese and Myanmar, or Burmese. And the website has three languages: Burmese, Chinese, and English. How do you do all of that together? With a small staff? Because there’s still not a huge revenue stream, it’s in a small country and in a development stage.

So, we’re looking at ways, how could you separate the type… Because if you’re going to do video on the web, you need supertitles, you need to be able to let people read it if their sound’s off if they’re in a noisy place, or if they’re in their classroom and they want to watch video and not watch their teacher; you have to do it without sound. So, voiceover is not the answer. If you’re doing three languages, you have to have a layer of translation, and supertitles on top of that. So, how do we do that? And it gets very interesting, how do you know what the video is, or that the type is the right color, that they can read it, yada yada yada…

My friends in Holland are feverishly working on how you do responsive variable fonts that actually have server cues on what color, and other treatments—the outlines or shadows—they might, automatically in the font, take on. It’s very interesting stuff. So, I think that there are people willing to—I mean, this is not a first-world product, this is something happening in the developing world, where they really think, “Let’s make it really reassuring and great-looking, but at the same time, let’s forget about what video has been on the web and do something else.” I love that. It’s a big typographic challenge both for the programmers and the people who figure out the algorithms, and the type people, too. What are the fonts that can work in three languages together simultaneously just by flipping a switch?

Jeffrey: I’m really glad you said that, because I think supers in video are something that a lot of us don’t even think about, and should. I’m a web designer. I think about it because I have to, because of accessible video… I know I’m going to piss off either Netflix, Hulu, or Amazon. I don’t remember which. It’s either Netflix, Hulu, or Amazon, I was watching video and I discovered that, speaking of customizable, if you go into the supers, you can set the size, you can make it with a black outline, a white outline, you can make it yellow… My daughter went in and started making it like really crazy, like yellow type with an orange outline. But it’s like old Windows black metal jacket or whatever from Windows 3.1. Users can make stuff ugly as hell if they want to, which is my deal with customization, my concern with it.

But, I mean, there’s an opportunity. Setting type on video is going to be super important, and like with responsive design, some people are watching it on their little phone, some people are blowing it up to their full screen, some people are watching it inside a browser window in Firefox while they’ve got another browser window open doing something else. There’s a lot of complexity. Also, VR. Web VR is an emerging standard, and type for VR just for navigation, not enough people are thinking about it right now. I would love to see… Well, I’m sure the folks at Type Network are thinking about it. It’s type that’s experienced on a curve, and it’s lower res.

Roger: Well, that’s the interesting thing. I don’t think that the kind of customization you’re talking about is going to be done by users for the most part. I think that we’re happy to be able to make the type bigger, but how many people actually do that? 10 percent? I don’t know. It’s not a big number.

Jeffrey: People who need it.

Roger: People who are struggling. But at the same time, if you could find out what it is they like, if you can track their experience… And one of the things Matthew Carter said, “Readability is like 80 percent familiarity.” It’s like the web standards you’re talking about—or web conventions; they’re not really standards. If you go against the conventions, sometimes you lose people. At the same time, you can’t really expect them to fill out a form of their choices of design. But if you hear back from them in the same way we understand what device or what their viewport is, if we could find what they find easier to read, then we can make it more like that. And that’s an algorithmic problem more than it is a user decision.

Jeffrey: It’s almost a cross-site problem, too. Imagine if there were just a typography layer abstracted from your individual site which noticed after a while, “Wow, when this customer went to Type Network they boosted the font size, and then they went to A List Apart and they boosted the font size, and then they went to the New York Times and shrank the font size and changed it… So, what is it that they really seem to need?”

It would have to be really smart. Like, well, maybe they did this because of column width, or maybe they did this because of where they were viewing it or… But a sophisticated machine-learning layer… I mean, we have a primitive example of it now in, for example, I can tell my iPhone that I need a certain minimum type size in software that supports this, and then I use one Twitter client that supports it and my font is bigger. Let’s say I made it a little bit above middle because my eyes aren’t as good as they used to be, so I make it a little bit bigger than normal, and another software device doesn’t do it. But still, that’s the operating system extracting that.

Roger: The user.

Jeffrey: Yeah.

Roger: Well, I think you want the users to be complicit, but you can’t expect they’re going to do it.

Jeffrey: So, imagine a layer that exists… I don’t know where it exists, maybe the same place that—forgive me, I’m going to say AMP. Okay, I’m sorry, I hate AMP. But it exists somewhere, it’s being saved somewhere, or it exists where Google Fonts exists. Or it doesn’t have to be Google, it could be somewhere else. You opt in, it tracks you, and it starts adjusting font size to be better for you based on watching what you do. Would that be a boon for designers? Would that be a boon for users?

Roger: I think it’s inevitable. I think that in the same way that Amazon gives you stuff that you like, or that it thinks that you like—and it’s relatively successful at it—we’re going to see that affecting layout, too. And the typographical layers, also there’s some very interesting things that happen with language. Because, increasingly, your design has to go in multiple languages. The world is getting global and we want to be able to communicate with people who don’t necessarily speak English. So, then what happens? That’s another question of writing the rules so that layout can adapt to Chinese, which is really a functionally different thing. It doesn’t justify the same way; the whole thing is different. It’s these little squares that are very condensed. You can get much more text in Chinese in the same amount of space as you can in English or any Latin language. You know, one wag said, “Forget about icons. We could just all learn Chinese and we could put a Chinese glyph for every single thing that we needed touch on.” And it’s not a bad idea. I mean, we probably all should learn Chinese.

Jeffrey: Jen, in one of her talks, talks about we act as if design ended in the 1950s and 1960s in Switzerland and we’re all doing this one thing, this grid-based Helvetica approach to things. And that’s great, but there’s thousands of years of graphic design history from Asian cultures and Arab cultures and all these other places. It seems to me if you were designing for a Chinese website, that’s a perfect opportunity to not make a Western layout based on the grid, based on Swiss typographic design conventions, but instead actually look to Asian traditional graphic design, which was, after all, built around those languages, and use that on the web.

Roger: Yeah, and they had typesetting before we did.

Jeffrey: Indeed they did.

Jen: It’s interesting, because on the one hand I really want the kind of graphic design industry or whatever, the tradition of 20th-century graphic-design teaching and understanding, to come to the web because I think there’s a lot of power there. But on the other hand, I struggle with it a lot because it’s so incredibly arrogant and tied up in ideas of white supremacy and Western-culture supremacy, and, “This is the right way to do things,” and, “This is the way to do a grid, and this is the way to do typesetting, this is the way to use a font, and this is the way to do everything.” I don’t want to carry those ideas around. I don’t want us to all go, Hey, how should I use a grid? Oh, let me look at these experts, these particular people from this particular culture—

Roger: —from the Bauhaus… [laughs]

Jen: …and listen to them.

So, I’ve been really trying to educate myself around—because, also, I didn’t have a graphic design background, I didn’t have that kind of formal training, so I’ve been teaching myself over the last two years… But to balance out kind of, I don’t know, I have three feet of Western books and one foot of non-Western books; I really want that to balance back out even more. Trying to learn about Arabic design, learn about—like Japanese tradition of line grid, especially in vertical layouts, and all the rules and the details… It’s not like that happens separately. That’s definitely been cross-fertilized with modern ideas and cross-fertilized with the ideas out of the mid-20th century, lining things up and being rigid and having rules, and following the rules. All of this has been going back and forth the whole time.

But I do think it’s important for the web industry, when we are starting out on this new thing, to learn CSS Grid and to think about layout, and to learn entire new techniques for layout, to do so with a global perspective and to not fall into this idea of, “Well, this book I have on the Swiss use of the grid, or this use of the grid, that’s the way we should all do it.” No, that’s a way. It could be cool. There’s ideas we should look at, maybe we want to bring those ideas over, but let’s not get all, you know…

Roger: Typographically, there’s whole different conventions. In addition to reading the other way in Arabic, or the calligraphic tradition in the Indic scripts and in Arabic, and in very old Chinese or Japanese or Korean, you had to connect characters in a different way according to context. Most typesetting systems tried to force that into a Western model, which is not necessarily that successful. Now, in China there’s kind of a different thing going on where the square that all characters fit in, which started I think really when they started movable type, when they made wooden fonts, way before we did—that square made it easier for them. So, they kind of squished letters into that. Then after 700 years, people kind of get used to that, or 800 years, however long it’s been. So, then if you reintroduce Chinese calligraphy into the web, people get confounded. It’s like, “What is this? It’s dripping down the side, I can’t understand it, I can’t read it.”

Whereas in Devanagari, or Bengali, or Tamil, or the other big languages in India, the inability to have good ligatures makes it hard to read. I mean, the first fonts in the Indic world were so unreadable that Indian kids all did texting on their phones in Latin. They transliterated their own language in Latin because they couldn’t read the damn Devanagari. That’s been true in Myanmar, it’s been true in Cambodia, all the way through to the so-called Brahmic culture of lettering, it’s been very hard to adapt to electronic devices. It’s happening now. Google is actually leading the way, in many respects, on that. Google has 50 Devanagari fonts in Google Fonts. It’s kind of amazing. But it’s still setting types as separate glyphs.

With variable fonts, which we might not want to get into, there is an opportunity people like John Hudson have talked about, of using the hyphenation table in HTML to look up how you should connect ligatures in Indic languages. That would be great—and how much more fluid and beautiful we could become. For Westerners… I mean, I can’t speak any of these languages. I watched John Hudson at TYPO Labs Berlin, which you can see on YouTube. It’s an amazing idea of how this can happen. However, you need knowledge like his to be able to understand what it is, what we need to do. I think that’s the global challenge. We’re really moving quickly into a much more complicated world.

Jeffrey: There’s so much, again, to unpack, but I’d like to focus just on variable fonts for a minute, if you don’t mind, since I know you guys are working on them pretty hard. Tell me about that.

Roger: What do you want to know?

Jen: What is it?

Roger: I think the easiest way to understand variable fonts is that it’s several styles of a font, of a typeface family, pushed into one font file. So, you could have bold and light in the same font. Instead of having two or 12 or 15 or a hundred different variations of the weight of a font in different files, in your font menu to select, they could all be in one font. Using CSS, you could say, “Okay, I want a weight that’s 1/20th of that,” and the font will just respond—if the browser is up to it, which I think we’re seeing. All the browsers are making an interface that you can do this. So, the first iteration of variable fonts, so with these variations of weight or width or size, are happening in the kind of development versions of the big browsers right now.

Jeffrey: Are they doing it with fonts and some new CSS? Are they doing it with SVG? How do you control something like that that wasn’t envisioned when they wrote CSS?

Roger: Well, a variable font is a version of OpenType. It’s the next thing. So, the fonts are downloaded on the web just the way all TrueType or OpenType fonts are downloaded. The trick is to then specify how you want the variation to be issued on the page. That takes a little bit of a learning curve, but there are interfaces that people are working on to have slider bars for the three or four different axes that are in the font. Now, Google, Apple, Microsoft, and Adobe have embraced the first three axes of these fonts—weight, width, and size—because if you have one font instead of 15 fonts, the page loads faster. So, there’s an improvement of 30 percent of file size per font. Now, if you’re YouTube, you don’t maybe care too much about that. But for Google at large, the amount of text that’s being downloaded in the world simultaneously is a big thing, it’s a big number.

Jeffrey: Just so I understand: if I were using Adelle Sans and Adelle in a layout, in theory it could be one variable font that contained the right glyphs and serifs…?

Roger: Yeah, you could have serif axes. All of this started, we saw this with Multiple Masters that Adobe did years back.

Jeffrey: Right, ATM, 20 years ago.

Roger: Yeah. Then, right at the same time, there was a kind of untracked project called GX at Apple. If you look at the OS on Macs now, there’s a font called Skia, it was based on Greek inscriptions. It’s a beautiful font, and it is actually a variable font, it was done in TrueType GX. That’s the model of what we’re doing now. When Google heard about what GX had done at Apple 20 years ago, they said, “This could be a real savings on the web!” So, Google was the big impetus to make this happen.

So, they hired our company, Type Network, to make two demo fonts, all on GitHub. If you go to GitHub and look up Amstelvar, or Decovar, or if you go to the Type Network site, you can find these fonts, you can use them now, you can download them from GitHub. There’s a fairly interesting demo going on at the typenetwork.com site. Amstelvar uses these three main axes, and it’s quite exciting. And then Decovar uses lots of others, including the way that terminals and serifs are done on the letters, and decoration inside the stems and stuff. So, it shows you what the potential of variations might be for design, it’s really quite fun. These were both done by David Berlow.

Jen: Well, my understanding is that, for example, if I want to use Goudy right now, if I want to go and get myself a web font, download, and use Goudy on my website, for my body copy—like, okay, cool. Oh, I’ve got some type I want to do in italics? Well, the person who maybe doesn’t know as much about what they’re doing would just say, font-style: italic; and boom, you’re done. But if you really know a lot about typesetting, you’d realize, no, we don’t want to just take the regular font and make it sideways, like slanted. We want to download the italic font because the italic font is more beautiful.

Okay, so now you’ve got two fonts: you’ve got Goudy and you’ve got Goudy Italic. But then are we going to do some bolding? Okay, we’ve got the bold. Do we need the bold italic? Okay, well that would be four. But that’s too much data, so let me just… I’m not going to use bold on my website. Okay, why? Well, ’cause. So, I’ve got Goudy, I’ve got Goudy Bold

But now I want to do my H1 headlines in Goudy, too, but I really shouldn’t just take my font that was made for 14 or 16-point type and make it 36 points, because it’s not really nearly as beautiful as if I get the Goudy Display font. So, I get Goudy Display. But do I need Goudy Display Bold? Or, actually, they have a Black and they have a Light, and they have a… You could end up with…

And this would be, okay, we just have one font, and that one font knows, Hey, when you’re little, be like the little version of the font, and when you’re big, be like the big version of the font. And when you’re italic, the italics are actually computed and hand-coded into the same font and the bold is hand-coded into the same font.

Jeffrey: Is that what we’re looking at, Roger, for the future of something like Decovar?

Roger: Yeah. I think… Italic is the big challenge there. You’re probably going to end up with separate italic fonts. But in the simple italics, like something like Avenir italic, it’s mostly slanted anyway and just has some changes in some of the terminals to kind of make it more italic.

One of the things that Decovar shows is that you can change the x-height, you can slide up and down, or you can make other variations that are fun. And we hear a rumor that Adobe is going to support these fonts for desktop typesetting in the near future, maybe in the third quarter or maybe the fourth quarter of this year. That’s fun. I mean, that’s kind of interesting that they’re doing that. Because right now we’re talking about the web. But on the web we have a lot of SVG files for headings, for kind of static stuff that doesn’t have to be typeset, so there’s branding involved and all of that. And certainly in print it’d be fun to be able to make logos where you can make the text fit exactly in a rectangle that can be the same for different words—“baseball” and “basketball” could be fitted in the same rectangle…

Jeffrey: I want to make responsive logos, for instance, that’s just the graphic, and then above a certain size it’s the mark, and then above a certain size it’s the mark and type; and then the type, maybe there’s two different variants of the type. That’s coming soon; that’s gotta be coming soon.

Roger: Well, that I think is very, very possible. There’s an interesting site called Axis-Praxis, Laurence Penney’s site that you can go to—axis-praxis.org. You need a compliant browser, like the overnight build for Safari. He’s got some fun things like that you can play with right now. And I think you will—instead of using SVG, we could put fonts in there. What I was talking about is the desktop thing for an ad or something, or a publication design, that you want to print it, it’s not just web. So if Adobe gets in, and they’re one of the key members of this consortium that’s pushing this, this whole world could start taking place later this year. It already is happening, and all the browsers are working on it. I think the designer user interface, our interface for designing these things, is still up in the air.

Jeffrey: I think we have to wrap. We’re going to put Axis-Praxis in the show notes, and Type Network in the show notes…

Roger: That’s it?

Jeffrey: No, I could do this all day. You guys are so brilliant. I love chatting with you. It even makes me feel smarter, and there’s so much to learn and so much to play with. I hope that folks will continue to read. We’re going to have labs.jensimmons.com in the show notes, which is where Jen is showing the kinds of layouts that can now be done, for example, in CSS Grid, which we didn’t even get into. I would love to do this again in the future, because there’s so much. But I’m so sorry, my friends, I think we have to wrap things up.

Roger: It was fun.

Jen: Thanks so much for having me.

Jeffrey: Thank you both.

Roger: Thank you very much. Thank you for listening.

Jeffrey: Thank you, thank you.

from Sidebar https://sidebar.io/out?url=https%3A%2F%2Falistapart.com%2Fevent%2Fweb-typography-layout-past-present-future