S2:E1
[00:00:00] Todd Libby: Welcome to season two of the Front End Nerdery Podcast, a podcast about front end development and design. I'm your host Todd Libby. Today my guest is Jason Pamental, and you may know Jason from his work with typography and variable fonts and collies Tristan and Tillie, that he always refers to, and his fantastic conference talks, Jason, how are you today?
[00:00:31] Jason Pamental: I am doing very well; Todd and I am super excited to be here.
[00:00:40] Todd: Well, thank you for, thank you for spending time with me this morning. So, could you tell the listeners a little bit more about yourself?
[00:00:47] Jason: Yeah, sure. Well, you've covered some of the most important stuff, which is primarily about Tristan and Tillie. I don't want to dwell on it, but I just do want to acknowledge that sadly we did lose Tristan last summer. Which made me really sad, but, but what I think is really kind of wonderful, I mean he, we, he was 13. He had a wonderful long life and he saw me through many, many ups and downs of, of things. Jobs and just emotional stuff, a pandemic and, and he stuck around long enough for it to, to make sure I did well with my interviews and got my current job, which was very good of him to do.
And he is someone that has connected me with so many people like you all over the world. I will get people asking me how are things with Tristan? How's Turner reservoir? Which is where I walk with, with the pups every morning. And, and I think that's a little piece of community that I just, I treasure just the other day, got a nice little comment from Sean Rashid out in Seattle and met him at AEA, just a wonderful guy.
And just having that little acknowledgement over this morning photo, is it just, I love that that's just a little piece of community that is just such a gem. But anyway, I, so I walk dogs a lot. I post them on Instagram. I know that we'll have the link in the show notes.
[00:02:30] Todd: Yes, yes
[00:02:30] Jason: That's, that's probably my, my most regularly, active social media, which actually started, oh, I'm getting sidetracked already, but, yeah, so I do a lot of stuff with fonts.
I've been working on the web for, over 25 years and started studying graphic design and, and was my job on campus was making the school's first website and I've just kinda been involved in design and tech ever since. Ride a bike a lot, love road cycling, just got a gravel bike, so trying some less, less pavement focused stuff, which is, which is fun.
I've not really ever spent much time with that before. Used to live out in your neck of the woods when I was racing. My aunt lives in Phoenix, and I spent a couple of years out there when I was still racing. Love it out there. It's a beautiful spot. And now I work at Chewy. I'm the principal designer on, on their design systems team.
So, I, I, I kind of lead our efforts there with our design system and then spend a lot of time working with other teams from brand to engineering to other parts of the product. Just kind of working with their designers, helping them understand what we're doing with, with the design system, how to make it part of what they're doing, how to make our system work better for them.
And kind of spend time thinking about what does Chewy look like and, you know, one to five years, you know, what are, what are we gonna, what are we going to do with this? Where do we go? So, it's, it's still pretty new. I've, I’ve only been there since, since late September. And so, I'm still, still kind of figuring it out, but, but I love the team.
I, I love what I get to do every day. And we're all doing this stuff to make, make the lives of pet parents and their, and their pals better, which is awesome.
[00:04:31] Todd: Yes, that's awesome. So, let's dive right into the questions I have for you. And I kind of
[00:04:39] Jason: Wait.
[00:04:39] Todd: Yup
[00:04:41] Jason: I need to say something to you,
[00:04:43] Todd: Okay
[00:04:43] Jason: Mister. Because some of your listeners might not know about it, but I heard a little tidbit that you just got accepted as an invited expert to the W3C.
[00:04:54] Todd: I did
[00:04:43] Jason: Congratulations, my friend. That is
[00:04:56] Todd: Thank you
[00:04:56] Jason: huge.
[00:04:57] Todd: Thank you
[00:04:57] Jason: The web community is better off for what you have been doing.
[00:05:01] Todd: Well, I appreciate it.
[00:05:01] Jason: And I'm so excited that you’re, you're part of the gang at W3C now. It's awesome.
[00:05:07] Todd: Thank you
[00:05:07] Jason: I've, I’ve been fortunate enough to be a part of that too, and that is
[00:05:11] Todd: Yes
[00:05:11] Jason: such a rewarding thing. So, you're going to love it.
[00:05:14] Todd: Well, thank you. I appreciate that. It was something I just had on my bucket list, and I went for it and lo and behold I got approved. So yeah, it, it’s exciting. And I can't wait. I'm doing actually some stuff right now, as a matter of fact with a lot of great people as you well know, you know.
[00:05:39] Jason: Yeah.
[00:05:41] Todd: So, yeah, so. My first question I usually ask everybody is how did you get started in your web development design journey?
[00:05:49] Jason: Well, as I, as I alluded to it a minute ago, I was in college and, this was in, I guess it was like 1994 when I started school. And I got a job on campus in the publishing services office.
My dad was a professor at Rhode Island college at the time. And so, his friend Charlie down the hall had this, this office that provided graphic services to, design course catalog covers and, flyers and, you know, all kinds of different things. And, and when I started, he said, so the school, the school needs a website.
We need to figure this out and make it. And so, like, there was no, well, there was an unofficial school website that had been put together by some students in the computer center. Literally with a Pentium 486, they had pulled out of a dumpster, and they had put to, you know, put something in the, and so we had a, a, we had a Power Mac 8500 and that was sitting on the desk next to me.
And I had to just start poking around online and viewing source and, and teach myself how to write HTML and, and design something. And, and so that's what we, what we did. You know, it was probably a dozen pages, you know, they had to present it to the president of the, of the college and, and then it went live.
And so as soon as I, as soon as I finished figuring that out, I like to say as if you could spell HTML at that point, you could get work building websites, basically, as soon as anybody heard you could make one, then they would start asking you about it. And that really, it just took off from there. So, I really ended up supporting myself through college, doing freelance work, most of which was web design related.
Although there was, I was studying graphic design, so there was like identities and business cards and, you know, other stuff that tended to go along with it. But, you know, it started with local, local businesses and local internet service providers that wanted to connect people with, you know, their clients with, with designers and kind of went from there.
[00:08:19] Todd: So, yeah, I, I, I think we all know that, that one computer that we had, whether, you know, found in a dumpster or, you know, like in my case, my, my, my mother bought us a, I think it was a 2, it was either 286 or 386 PC back in the day, you know, the big, huge, a hundred pound monitors, CRT monitors.
[00:08:49] Jason: Yep
[00:08:52] Todd: So, yeah. Yeah, that’s great. So, let's dive right into why I have you on today because variable fonts. Ever since I saw your conference talk at AEA, and then I'll talk about, hopefully we can get to it in a little bit, down at DJR Fest.
[00:09:12] Jason: Right, yep.
[00:09:16] Todd: What is so for the people that may not know, what are variable fonts?
[00:09:22] Jason: Sure. So variable fonts, is, it, is an it's an evolution of the open type specification.
And so, to back up a second, if you've ever had to install fonts on your computer, you might have gotten a, you know, a folder on your desktop that somebody sent to you or you loaded from a, from a disk, if you're, if you're that old.
[00:09:48] Todd: Yes
[00:09:48] Jason: And, and in that folder, there are a bunch of individual files, and each file represents a specific instance of that typeface.
So bold, light, medium italic, bold italic, what each, each one of those variations of that typeface is a font, so that it's like, it's its own file. It's its own like collection of that stuff. And, and so that was maybe fine on the desktop, where it's, it's not a big deal to have a bunch of these things installed.
It's a pain, especially if you're a graphic designer and you're like trying to manage like hundreds or thousands of fonts. But, but on the web, the bigger implication is that if you want to have some great typography and really have a nice sort of dynamic range in widths and weights and variants of a typeface that you're using in your design or multiple typefaces, then you have to load a file for every single one of those.
And so, you very quickly go from being wonderful and expressive to creating a huge performance bottleneck. Because font files, you know, might be, you know, they might be 10 or 15 K, or they might be 50. And if you're loading a whole bunch of them, then those are assets that all need to load before your CSS will look the way it should.
Because if you're referencing those, those files, you have optimized your CSS for the metrics of those fonts. And then when it loads and the web font finally gets there, then everything reflows because the fallback font that it's rendering in like Ariel or Helvetica or Georgia or Times or whatever, it's, it's not going to have the same metrics and spacing.
So, things are not going to stay in the same place. Now there's ways around that we can talk about, but that's, that's still a problem that you see often. And so, what ends up happening? And this is something that I, it just, this is probably one of my biggest pet peeves about things that I read on the web, as you will be told that good typography is only using three fonts or something like that.
And that my friends is not true. That is maybe good for your front end performance. And, and it should, in some ways to help the user experience because things show up correctly faster, but that's not great typography. You look at magazine covers from rolling stone or anybody else and you talk to the designers that design them, you know, someone like Robert Black, Roger Black, is, you know, he has used like 10 or 15 or 20 or more individual fonts on one magazine cover design, and it looks amazing.
So that's, those things have nothing to do with one another. It's like you could do great typography with one font, or you could do great typography with 30. We have to stop conflating performance and, and, and good work. So, variable, now back to your question, I am wandering a bit, I apologize, but that's the background.
Variable fonts is a, an evolution of the font format that allows you to put the entire design space in a single file. So, all the weights, if you have a width access, all of the width, all the combinations of those things, all in a single file or sometimes two, if they split the upright and italic, because often times it's just a little bit simpler, to produce the font and then also for us to reference it in the browser.
Now, this came out in five years ago, just over five years ago in September, in 2016, this was introduced in a partnership between among many others. But the, the people on stage at ATypl in Warsaw, Poland, and in September of 2016 were from Microsoft, Google, Apple, and Adobe.
And then there were a bunch of other people behind it, but that was a pretty big signal that this was a new thing. And I, I was, I was sitting in the audience at the time. I was over there to teach a workshop and, I, my jaw was on the floor. I just looked at that and I said, this is going to change everything on the web.
And, for me it did instantly. And, and three weeks later, an engineer from Apple had sent me a link to a beta, you know, a nightly build of, Safari that supported variable fonts. And I showed them onstage at FITC’s Web Unleashed. And, and that may have been the first time it was shown outside that initial, initial launch.
And it was awesome. And, and it has been my sort of fascination and focus ever since, because while an individual variable font file is certainly larger than one static instance of a font, it might be the same size is three or four, but you have the full family an infinite number of variations and the what's so amazing about these things is that through CSS, we can target any point in those axes.
So, it's not just getting eight fonts in one, it's getting a million fonts in one, because you can tailor and target this stuff so much more granularly. So, our regular text and bold body copy doesn't have to default to the full, bold weight, which is often a little clumsy at a small size. So instead of bold, 700, you could equate it to 600 or 625 or, or something you can kind of fine tune those, those weights to get just what's right for your site.
And then you can modify things from there and, and you can animate things so he could get really interesting interface, animations that you could add to it. And you can tailor your typography for better, better readability in dark mode when you switched the contrast to dark background and light text it often helps to lighten the weight of the text a little bit.
So, it doesn't kind of fatten up visually Robin Rendle wrote a great article for on CSS-Tricks about that with a really great in-depth look at that. I would encourage people to check that out so, so I spent a lot of time working with browser vendors working with folks in the W3C working with foundries, I worked with a lot of different types of designers to test things out written about 50 issues of a web typography newsletter focused on different aspects of website biography, a lot of variable font stuff.
And I've basically been covering that in my conference talks for the last five years, every single one of them, because I just think that as designers, we can be so much more expressive and, and then the performance implications of doing that right are massive. You really can you, you can really make some pretty big inroads in your front-end performance by having fewer assets to load caching them efficiently, and then really relying on that to, to drive so much of the user interface. I think they're amazing.
[00:17:34] Todd: So don't I, cause right after I saw your talk at An Event Apart, I went out and I threw them right into my site and I don't even, I, I, to be honest, I have tried about, I don't know, 14 different variable fonts on my website and I finally settled on recently, as a matter of fact Work Sans now that it's a variable font. So, speaking of, of certain kinds of fonts, I think I know one of these fonts for the question I'm about to ask, but what are some of your favorite variable fonts?
[00:18:28] Jason: So, I have, I have different favorites for different reasons.
[00:18:35] Todd: Okay
[00:18:28] Jason: So you know, I, I think and I said, that's tough, but I'm I have been kind of in love with Roslindale from David Jonathan Ross, since it came out in his font of the month club and I've been using it in my talks and, and in my website, since the, and the, and, and, and what I love about the variable version of that is with the optical size access, I can use it for text and it's a beautiful text type face, but then if I crank up the size and the optical size access on it, and I can explain that a little bit in a minute, then the headlines can look like, just feel totally different.
So that, that I just absolutely love the, the quirkiness, you know, it's just, it's, it’s a little different but if you've it is very much, that style of typeface is, is pretty popular these days. So
[00:19:46] Todd: Yeah
[00:19:46] Jason: I'm starting to try and like look for, you know, what are some different things to, to play around with? I, I used recursive quite a bit in, on the variablefonts.io site that I worked on for the Google fonts team a couple of years ago.
That was really fun because it's got a, a bunch of different axes and can go from a Sans Serif to a Serif and, and get all kinds of funky characteristics to it. You can go to a monotype with it like a monospace type face with it and use it for code. I mean, it's, it's great. Steven Nixon from Arrow Type did a beautiful job with that for Google. They were the ones who commissioned it.
Proxima Vara is definitely one that I'm, I'm just, I'm so fond of in part, because I feel like I, I got to play a part in it coming into being. I met Mark Simonson, the designer of Proxima Nova at, at type conferences over the years. And I kept asking him, would you, do it?
And he was like, ah, I dunno, maybe. And, and, and then I, I kept asking him, and then finally, he, I, this was like maybe the week before An Event Apart, it was in the fall, maybe it was Orlando a, a few years. I think that might've been it. Like literally like two or three days before I left for the event, he sends me an email and he sent, he attaches a beta of a variable version of Proxima Nova and, and gave me permission to put it in my talk.
[00:21:30] Todd: Wow
[00:21:30] Jason: And, and that was probably one of the most active tweets, like ever, was that getting announced in the talk and just seeing that, just kind of blow up because Proxima Nova has been one of the top three or four most popular web fonts, as long as there have been web fonts. And so, to see a variable version of it that had width, weight and slant.
What, it was amazing. It's beautiful. And, and so every time I got up on stage, I, and, and showed this, I would end up encouraging people to send Mark messages about it and say, we want to buy this. You really should do this for real. Cause that, that's what every type designer goes through. I mean, it's a lot of work to turn a family of, of fonts into a variable font.
They want to know that it's going to be worthwhile. And, and so I did my best to demonstrate those and market for it. And, and, and every once in a while, we would be talking and it's like, oh, it's your fault that I keep getting all of these messages? Like, yeah. Yeah. Cause I want you to know
[00:22:38] Todd: Yeah
[00:22:38] Jason: we want to do this. And, and so we would just periodically talk about it and then eventually, he hit upon the idea of making it's basically, it's a new typeface. He calls it Proxima Vara, but it is the variable version of Proxima Nova. It's its own thing it's and it's incredibly reasonably priced and it's got this tremendous width, weight and slant capabilities. Well, it's, it's italics where you can set the angle.
So, if you want only two degrees, you can do it. If you want 12 degrees, you can do it. And, and then at some point in the middle, it will switch the glyphs over to the traditional italic forms of the letters. And, and it's got tremendous language support. You know, it's been around forever. He's an incredibly talented and thorough and detailed type designer.
[00:23:30] Todd: Yeah
[00:23:30] Jason: So, you can just use this thing for anything. So that, that was pretty awesome But, and then Fraunces is definitely one that I've been playing around with a lot lately. I've been using it in my, my talks for the past year, year and a half, because that one has this wonderfully like slightly seventies quirkiness to it that I, I love on it.
If you if you've noticed the typography that Mailchimp has been using for the past year or two that it's kind of in that vein
[00:24:06] Todd: Okay
[00:24:06] Jason: so like this like great seventies display typography kind of feel to it and, and that's, I, I, I just I love being able to dial that stuff in you know, so like at larger sizes you might like dial up the quirk and then in other cases you can kind of reel it in and be a little bit more subtle.
[00:24:28] Todd: So now I talked about it a little bit on Twitter, about variables once and how awesome they are. And, and then I get questions like, oh, where do I learn how to do this? You know, so, it's where do people learn how to you know, go about using and implementing variable fonts on their projects?
[00:24:52] Jason: There's, there, there are now a few really good sources.
So, I mentioned variablefonts.io is a site that I worked on a couple of years ago for the Google fonts team. And, and that, that, so that I, I did, a, a, a, as a fairly in depth coverage of designing with them, how to work with the axes and then also implementing them and, and ways that you can do that either self-hosting or using something like Google fonts.
So, so those that's one place but Google also just launched and I, I don't have the link handy, but I just got a note from, from Dave Crossland who runs Google fonts that they actually have just launched a Google typography section on their site that has a bunch of stuff that like borrows a little bit from some of the things that I covered.
But, but it's all written by Elliot Jay Stocks who is just a wonderful typographer and designer. And he's one of the first people that I ever saw speak. So, it's always been just a huge influence on me so it's awesome to know that that has a whole section on working with variable fonts and then I, I wrote I have not written an issue in over a year, but I did, for a while I was writing a web typography newsletter.
And so if you go to my site, rwt.io/typography-tips that's the archive of, of all of the, the issues we'll make sure to get a link out to that, but, but that's something that I was sending out via email, and then I archived them all on my website and each one covers an aspect of web typography.
And so, I've spent a lot of time with responsive typography on their different typography techniques. And then it also covered variable fonts, quite a bit in implementation and also just design ideas and, you know, things that you can do with them.
[00:27:04] Todd: Yeah. What are some cases on the web that you've seen great, or, you know, phenomenal for lack of a better term use of an, a variable fonts?
[00:27:20] Jason: There are some, there are more of them starting to show up if you know where to look, but I sort of answer this in a couple of, I mean, I'll, I'll, I’ll pat myself on the back a little bit because there's two projects that I've worked on that I think are significant in terms of what they are and in the audience that they sort of put variable fonts in front of.
And the first one was working on the web platform for the state of Georgia. The chief digital officer in Georgia, Nikhil Deshpande reached out to me a few years ago to see if I would be interested in working with them on this. They were working on a new web platform based in Drupal that was actually how he got to know me.
He saw some of my talks at Drupal cons over the years and they had IDEO working on design. They had Lullabot working on content strategy and the Drupal development, and they wanted to know if I'd be interested in working with them to look at the typography. He really wanted to use variable fonts. He wanted to use all of like, kind of the latest ideas in, in creating the best possible digital platform for the people of Georgia.
And, and so that was a, a project I worked on, on and off for a couple of years. And, and so I got a chance, the chance to completely redesign their typography. We used Source Serif as the main typeface and, and in the variable version with fallbacks, for static fonts, for IE11 and, and other older browsers.
Worth noting every shipping browser has supported variable fonts for three to four years. So, in terms of like it being safety as IE11 won't work with them, but it's actually pretty easy to provide support with static web fonts. So, so that's public service announcement there.
But that platform in Georgia rolled out and you know, four or 5 million people every month are, are accessing 80 plus agency websites, all driven by this, I, I think pretty beautiful, responsive typography that Lullabot implemented with the, the work that I helped them with. And, and so that was, I think at the time, the largest implementation of variable fonts anywhere. That has since changed. I've worked on a platform for the State of Rhode Island, which does not have nearly as many citizens as Georgia.
But that one has gone live and I'm really proud of that one but also what a lot of people don't realize is Google has started serving variable versions of many of their top typefaces because they realized a massive savings in bandwidth. So, for any sites that were using off weights, they started to swap in variable version of those fonts.
And nobody knew, nobody asked for it. They didn't have to. It the CSS just works, Google was able to just slip the variable fonts in there and, and have things just work. So, when I was working on the Web Almanac last year in 2020, the data that we had showed that almost 11% of the web fonts being served on the web were variable last year up from less than 1% the year before.
[00:30:58] Todd: Oh, wow. Yeah.
[00:31:00] Jason: So, 2021 data I don't have, but, but it's only gone up from there. So, you know, I think it, it is the most wonderful proof of the soundness of the technology that, you know, at this point, probably 15% or more of all web fonts being served are variable. And nobody had to do a thing. They didn't have to lift a finger.
It just worked. And now that's, that's great. It helps overcome performance concerns. It's not great in that we're still not teaching people how to use them. And that, and that's still, that's still tricky. Application support for like desktop apps is still less than wonderful, Sketch supports them. We're still waiting for Figma to support them.
I, I can't imagine that it's going to be very far in the future. I'm certain it's not going to be very far in the future. They have to. So, I'm very curious. Marcin Wichary at on, on the Figma team, on the design team there is a brilliant typographer and I'm quite sure that he will be coming up with some fantastic ideas in the interface to work with them, which is going to be really key in helping them get adopted.
[00:32:22] Todd: And you mentioned, the State of Rhode Island. You did, you worked on the design system for the State of Rhode Island. Can you go into that a little bit?
[00:32:30] Jason: Yeah. Oh, I'd love to. This is really I mean, as I said, I love my new job, but I think that the project that I worked on in around may be the most significant thing I've worked on in my life.
[00:32:46] Todd: Okay
[00:32:46] Jason: I'm, I'm totally serious about that.
[00:32:49] Todd: Yeah
[00:32:49] Jason: I love living in Rhode Island. It's a great state it's a wonderful place, wonderful people I just I've really I've really come to love it here and, and the chance to work on a project so, so this project I think we figured out that the first emails that my friend Tom Viall at NIC Rhode Island and I exchanged we're back in like maybe 2015 or 2016 about the idea of doing a Drupal based web platform for the State of Rhode Island.
And it, it took a few years of pitching this idea to them, for the state to finally decide to put it out to RFP. And they had the funding to create this new platform and the, I, you know, at the time and you know, still for the ones that haven't been ported over the websites were still static HTML and CSS.
They're being maintained in Dreamweaver by people in the individual agencies. Like today, this is still
[00:33:54] Todd: Yeah
[00:33:54] Jason: happening and, and it just kills me. It just, it makes me so sad that that I built my first CMS in 1997. For a newspaper here in Rhode Island. And yet we know we are here today and people in the state have been really hurt by this lack of availability of, of content and good information.
[00:34:23] Todd: Yeah
[00:34:23] Jason: And so, so when this finally came about, we I was working with NIC Rhode Island, which was a comp it's a subsidiary of a large company that has contracts. And like, I dunno, 25 to 30 different states to provide e-government applications, payment processing stuff, renewing my fishing license or whatever, like paying my taxes all goes through applications that they built.
But the content side of things, they sort of had to support. But now we have the chance to design an entirely new platform. And so, I got to be the lead on that in almost every sense, really in doing the research in leading the stakeholder interviews and hiring the development team. So, I hired the wonderful folks at Oomph here in Providence to, to work on the project with us.
I got to architect the whole thing. It was, it was amazing, just an incredible journey. And so, I spent almost two years working on that to leading up to when we were able to start the project it was slated to be signed. The contract was slated to be signed on March 10th, 2020, and March 9th was when the lockdown was announced in Rhode Island, and everything ground to a halt.
[00:35:48] Todd: Yeah
[00:35:48] Jason: And so, we thought the project was just gone. I had no idea what I was going to do cause I, this was the one thing that I had going on for a project at the time cause I was still working for myself and that was a little terrifying, but as we kept going back and forth over the next like couple of months, what I came up with was, well, you know, they have all of this COVID relief funding that's starting to go out to the states.
We don't have a dedicated COVID resource website in the state, and this was something, it was, it was really difficult to sit by and watch the Department of Health's website crash for most of that first week, because there were so many people looking for information on this and they got that stabilized.
So, I mean, it's a really great bunch of people on that team, but, but the, the fact remained that they had a section on the Department of Health website. They didn't have a dedicated resource. And so, I said, made the suggestion, like why don't we shift focus of this platform to launch a COVID site and anything related to COVID first, will that help us with access to funding?
And it did. And, and so it, it brought the project back to life. And so, starting in the first week in June, we started doing our research and, and started working on the architecture. We first started building a prototype in August. We started the design system in September, and we launched the COVID resource site the second week of December 2020.
So, it moved along incredibly rapidly, but what I'm most proud of is that we, we created the design system. It incorporates everything I've ever talked about in responsive typography in the scale and using variable fonts in light mode support in user customization, you can set the font size, the line height and the word spacing in to suit your needs as a viewer, as a, as a user of that website.
And every single site in the network gets all of that. So, all the work we did with accessibility creating multiple color themes for the agencies to use, to all the content construction components, all the accessibility work was, was built in all of the user customization was built in all of the features, support, translation, everything rolled out first on that site.
And by the time I kind of rolled off in September of this year. So, over the course of the following nine months, we'd launched another 25 or so websites. I think it's up to close to 30 now including, you know, the Governor and Lieutenant Governor, but all the Human Services websites. So, all of this websites that are dedicated to supporting children in foster care, parent support, human services, people with disabilities. The offices that support them the DMV, the taxation office, like all of these websites that are accessed by so many people are all now have a really good system.
It's easy for them to update, you know, it's all browser based. It's based in Drupal. So, the editing tools are fantastic and it's they can deploy a new site in minutes.
[00:39:23] Todd: Wow
[00:39:23] Jason: And, and so all of these things like they, they will get 70 plus sites migrated over the next year. And, and I I'm just so, so proud of that being present and available now to the people of Rhode Island and just to have been able to be a part of that is awesome.
[00:39:41] Todd: Yeah. It's got a great name too, I heard.
[00:39:43] Jason: I called it quahog. So, for those who are not into obscure crustacean names, a quahog is the, it's the state mollusk in Rhode Island. It's a very large clam. So, picture like three to four inches across and they're, they're often, they're often used to like chop them up and make chowder and stuff like that. But, but the quahog is, is a big deal in Rhode Island. So, I thought that was a pretty emblematic of, of our state and, and that way it is, it is the basis of our economy.
It's the, it's the basis of some of the best food that you can get here. So, everything about that just seemed right.
[00:40:37] Todd: So, I’m going to shift over to a couple of, well, one particular project that you have and that's your web-based book project over at mobydick.wales and that's W A L E S for those keeping score.
[00:40:59] Jason: My, my apologies to the Welsh, but it was a pun that I couldn’t resist.
[00:41:06] Todd: Could you tell us about that?
[00:41:09] Jason: Sure, so there was there was I, I, I'm not gonna remember the quote. I used to have it in my talks but there's a wonderful type designer and educator named Nina Stössinger who is partners with Tobias Frere-Jones and Frere-Jones type.
And she had tweeted something a few years ago about well, the takeaway that I had was sometimes design is about reducing friction between you and an idea, but sometimes you need to add friction. You need to, you, you, you need to slow people down. You need to create some tension that will add focus.
And, and that really struck me in thinking about all of the work and everything that I had been doing up to that point in focusing on web typography was really focused on reducing friction. So, making it a better reading experience easier to easier to experience, easier to take in, increasing the speed with which you could get, the information that you needed, which is what reading typography is all about.
And that's great. But that doesn't make something that stops you in your tracks and well, I mean, it does for some folks, but, but for most people, the stuff that like, like makes you stop and look at that billboard again, or pick up that magazine cover is often the stuff that increases friction that, that creates this interplay between the letter forms and the rest of the composition that sometimes might be harder to read.
And, and that is one of the really powerful things about great typography. And, and so what that got me thinking about was how can we think about typography on the web in a more graphic design-like way, but at both ends of the spectrum. And, and so a lot of my conference talks still kind of focused on increasingly the editorial side.
How could we do more, especially with variable fonts to do more dynamic type setting on the web and, and that still is something that really is interesting to me. But the other side of that is how could we make the best possible reading experience? And I've always been a little bit frustrated by eBook readers.
I love them, and I love the note-taking in them and the highlighting and the portability, you know, I traveled you know, until last year I traveled a lot for conferences every year
[00:43:57] Todd: Yeah
[00:43:57] Jason: so, I'd be on the plane all the time and I loved having the iPad so I could read and have any number of books with me when I went and, and that was great.
But the typography in them was not, not always so great. And through all of the work that I'd been doing, I'd found all of these ways to finesse the reading typography. And so, I wanted to put all of that together and I had been itching to play around with this idea that I had for how to make a more paged like experience.
And that was kicked along a little bit further by an article that Rachel Andrew posted about it, it was about fragmentation, but for me it was really about looking at CSS columns and how content would be fragmented or not appropriately by web browsers and the different levels of support that were there.
And, and so that got me finally, like making this experiment with my friend, John Berry, with a book and thinking about, could we use CSS columns with each column being a hundred viewport width units wide. And then cap the height at, you know, maybe 80 viewport height units and let it go sideways and CSS scroll snapping was becoming supported.
[00:45:24] Todd: Yep
[00:45:25] Jason: And so, I started to dig into how I could make use of those things together so that you could have this smooth scrolling or swiping experience to read content without having to go and break everything into separate chunks. So same HTML page, but I wanted to be able to kind of do this and just see one page of content at a time and amazingly enough, it worked.
And, and so, and it worked, I was able to get everything, but the scroll snapping working in all of the browsers at the time, this was a couple of years ago and then at some point I kind of drifted away from it a little bit and I came back. You know, a few months later and all of a sudden, the scroll snapping was working everywhere.
It had like rolled out in all the browsers and, you know, thank you, progressive enhancement. It just started working. And, and so that, that kind of kicked us into gear while I was working on my newsletter, I decided that all right, this is, this is the time for me to actually turn this into a project. And I had I had borrowed a copy of Moby Dick from my friend, Bill Herron here, here in Rhode Island and it was this like 1930 something edition illustrated by Rockwell Kent.
And it was absolutely beautiful, and the text is now no longer covered by copyright. So, I thought, okay, if I'm going to make a book, let's make a real classic so I found the text of Moby Dick available in HTML format.
I grabbed that and I cleaned it up some and, and, and worked on making a page template in Eleventy. Thank you, Zach Leatherman and, and, and had the cleanest possible page of HTML, just really nice, cleaned up, markup all the, you know, you know, fixing all of the em dashes and quotation marks and everything, just to get all of that stuff looking correct.
And then and then started working on this experiment as scanning some in some of the photos and adding those in there. And, and so the project was, how can I bring everything about making a great reading experience into this one experience to read this book. And, and so the, at first, I started off with picking some typefaces and Literata Three was just coming out from Type Together which is beautiful text type face with a great variable access and optical size.
And, and there there's awesome. I love working with them, but, but that typeface is a really beautiful one. And so, I decided that here's what I'm going to try. I'm going to put everything I possibly can, every trick in the book to have great responsive typography that will scale well from small screen to large and everything that I add to it needs to, it needs to build this experience.
And then I just started chronicling that in my newsletter as well. So, starting off with adding the type of, you know, basically the markup, adding a typography, it's now it's a website of, you know, 137 pages, you know, one page for each chapter. And I put in all the things that I could think about using Clamp for scaling the typography, Font Face Observer to manage the font loading so that the loading experience is good.
We get content on screen quickly. The you know, the, the vital scores are good. And, and then I added in this switch in the UI. You just on user settings, say, I want to enable the swipe UI, and it doesn't matter what device you're on. It will just add a class. And adding that class will trigger a reflow of everything instead of scrolling top to bottom it scrolls sideways.
And the one thing that I had to do with JavaScript there beyond the class switching, was to look at the width of the resulting page and create 100 viewport width unit divs at the bottom. So, I could scroll snap to the edge of each div cause you can't scroll snap to the edge of a column, but the text won’t do anything to that.
It's just CSS columns, auto populating, as many screens wide as it needs to. And it's instant and it is responsive, and it works on every device that you try it on, and it creates this really cool little swiping
[00:49:57] Todd: Yeah
[00:49:58] Jason: experience. And so, you know, check it works and, and that was really exciting to me. So now added in Nathan Fords Widow Adjust, JavaScript.
So that it will adjust the padding on the right side of every paragraph to ensure that you have a minim number of characters on the last slide of each paragraph. I added in a little bit so that in Safari where it supported it will rebalance the line breaks on paragraphs so that it doesn't leave one line at the bottom of one column or the top of the other.
You know, I've just tried to add in every single one of these little things to just focus on the reading experience and the, the thing that I haven't pushed yet to the public part of it yet that I'm still working on is the ability to then bookmark a location in, in the text. So just using enumeration and a counter I can add paragraph numbering in the margin.
And so that you can see on any chapter on chapter 37, paragraph 14 is going to be the same place in that text on any device, on any screen size. And so, if you can bookmark that as you scroll by and build this a little bit, bit of bookmarks, you can also share it.
And so as, whenever you come back, you can go to your last bookmark location or you can send somebody that say, I [inaudible] going to want you to show you this passage in this book go check it out. And, and it all works. And so, I, I, I think that the little things that I wanted to do with this to improve that reading experience and make it more portable are all kind of coming together.
And the last little bit of it that I did I did make work on a little project that I did to typeset, Martin Luther King Jr's letter from Birmingham jail, which you can go read that letter from jail.com that is also a progressive web app. So, you can, it will automatically cache the whole thing for offline reading.
And then you can also just add it to your home screen and read it offline whenever you want. So that's going to be the last step in this is to then also make that whole book cacheable and available offline. I haven't tried it yet, so I mean, it's a lot of content, but it's just text. So, I don't think it's going to, and, and I know some black and white images, but, but that's so I, you know, I think that the answer that I've found so far is, is that yes, it really works.
You can create a really book like experience that I think provides a better reading experience than what you can get from an eBook reader right now, with better and more refined typography, with initial capitals, hanging punctuation, really nice responsive typography that looks good on every device and scales really well.
And it's fast. It's you know, it's an easy experience and I'm really pleased with it. So, I, I mean, I'm really hopeful that what I love to have happen with this is, is to really wrap this stuff up and put a bow on it. And then, and then see what a publisher does with that, to see what other people who want to put texts out there.
And if I'm going to do another book on typography, that's how I would want to publish it because I want to be able to embed code pens in it. I want to, you know, or like, you know, code examples and, and videos and more kinds of content in there and have it all. Really work. And I think that would be awesome.
But, but that's really, I, I just, I don't want that to travel further. So that's why all this stuff is, is in public, on GitHub I've been writing in detailing it in, in conference talks and, and in my newsletter, because I'd really just love to see better reading experiences on digital devices.
[00:54:12] Todd: Yeah, so I got two more questions before I get to my little round of three at the end. So real quick, you are the principal designer now at Chewy. Congratulations.
[00:54:25] Jason: Thank you.
[00:54:25] Todd: Can you tell me, tell us a little bit about that?
[00:54:29] Jason: Sure. And so, for those who are not familiar Chewy is a pretty, it's a pretty big company. But they, they are one of the largest providers of pet food, medication, toys and accessories for pet parents. And they're only in the U.S. right now, I can only imagine that, you know, expanding beyond that is, is in the future. I sure hope so, anyway. But it's, it's really big, which is awesome, but it also has lots of things that we can do.
So, there's, there's the main website there's apps. They actually just announced a couple of days ago, publicly that they're in a partnership with Trupanion to offer pet insurance. So, we've got these different kinds of products. It's not just an e-commerce site, but now we also have like pet pharmacy that there's this platform called practice hub that veterinary clinics can use to, to write prescriptions.
There's all kinds of really neat things about it. So, my role is as principal designer on the design systems team is to help kind of guide where we're going with chirp our design system and, and help with the rollout of that, which is sort of in progress right now across all the different parts of the application. Work really closely with Mark Sadecki who's our accessibility guru, he leads the accessibility program which is awesome that they have it
[00:56:12] Todd: Yeah
[00:56:13] Jason: and that they take it so seriously. He's in every design review that I'm in, he's in every engineering meeting that I sit in. It's awesome. I mean, like everybody works with him, which is, is wonderful. And, and we also have PetMD, which is a fantastic site that has all of this vet written and vet reviewed articles on pet health of all different kinds.
So that's another area where I'm helping with the redesign of that and, and helping them leverage our design system. And, and the thing that's enabling that is actually something that I was really learning about more formally we used, we used design tokens in the design system, in Rhode Island, but in a in, not in as intentional a way as, as I think would be good.
I mean, we, we worked in PatternLab to create the design system. We add like one XD mock-up and then we went straight into working in PatternLab to, to do the design of that whole platform. And that was very then intimately tied into what was driving the CSS and the, the whole theme of that platform.
Here we’ve got, you know, teams of, you know, there's somewhere between 50 and a 100 designers throughout the organization who are working in in Figma. And then we've got our design systems, engineering team that's building things into components for Vue and React and, and other platforms. And, and then you've got all the engineering teams on the individual parts of the product.
And so, we needed something really intentional and really scalable and, and so, you know, if anybody has been working in design systems, you know who Jina Anne is, and if you don't you got to go find out.
[00:58:07] Todd: Yes
[00:58:08] Jason: And, and so she's sort of the go-to and I know that she's working on you know develop, helping a group develop specs for, for design tokens.
I knew that this was really something we needed to focus in on. And so, I just, I dove in and we're, we're now working on a rolling out design tokens in our design system for color theming. So set the, the stage for being able to light and dark mode and, and, and other things we're working with a plugin called Figma Tokens by a, a guy that works at GitHub.
And, and that's been awesome. It's like we can store all the tokens in JASON, we're working on the ability to pull those directly into what we're doing to develop to generate all the CSS custom properties to use and code. And everybody is working with the same styles in, in Figma. So, we're just in the process of rolling that out and I'm working on typography libraries next and then spacing.
And so, we'd be able to turn those libraries on and off separately to get the right combination of, of, of, of theme streams for different parts of the product. Internal, you know enterprise stuff may use one combination, the pet insurance might use another. We can change the color theme. We can change the typography.
And, and that's another area in, you know, looking at the typography and, and the typefaces that are in use that were that's another one of the things that I'm spending some time on.
[00:59:50] Todd: Sounds exciting. So, my last question, and on my little sheet here, it says, you first had published, or my first publishing byline was in 1986 in Dragon Magazine.
Now I was an avid Dragon Magazine reader. And I was like, wow. Because I was like, that's, that's pretty, that's pretty awesome for you said what, eighth grade?
[01:00:17] Jason: Yup. Issue 124. You can find it online.
[01:00:26] Todd: I’ll have to check that out.
[01:00:17] Jason: Yep, yep, yes, I, so, all right. So, for those who may end up on video, here's the Moby Dick book that was sitting right up here.
Jason holds up a Moby Dick book
It's absolutely gorgeous. I found it a one on eBay. I had to have that and there it is. Dragon magazine issue 124.
Jason holds up Dragon Magazine issue 124
Let's see how quickly I can come up with that. Oh yeah. I had it bookmarked.
Jason holds up Dragon Magazine showing the page his article is on called A Shot in the Arm
There we go. So, I'll hold this up so everybody can see.
[01:00:56] Todd: There it is
[01:00:56] Jason: It's probably not in focus, but it's there A Shot in the Arm.
[01:01:00] Todd: Oh, that's awesome.
[01:01:02] Jason: We had so much fun with that.
[01:01:04] Todd: Yeah
[01:01:05] Jason: I, it's always one of those things my, my kids, they make fun of me. One for having played Dungeons and Dragons, but two for being nerdy enough to actually have written something for a Dungeons and Dragons magazine.
[01:01:17] Todd: Yeah
[01:01:17] Jason: And I don't know why I have not included that in my bio at web conferences before I feel like that actually would get any more street cred with this crew.
[01:01:24] Todd: I, I, I think
[01:01:24] Jason: then I think many things I could say.
[01:01:27] Todd: Yeah, I think you have to throw that in now. Well, down, coming down to time here, I want to get to these three questions before we have to go. So, my first question is what about the web these days excites you and keeps you excited in what you do?
[01:01:49] Jason: It’s the whole last hour, what do you mean? What I know I will I can sum it up more generally. And, and something that has been true really from the very first days of being involved in the web is, and this has become a lot more controversial lately, but you can view source and, and that, that simplicity of being able to look directly at what made this thing work.
It was that, and then really early on finding some stuff that was written by some, you know, obscure guy nobody's ever heard of Eric Meyer writing about CSS when it became a thing.
[01:02:36] Todd: Yeah
[01:02:36] Jason: And, and, and so, you know, that community of, of people and how much they share and being able to be a part and do the same is, is incredible.
It's, it's wonderful I love the fact that I don't know what I'm going to be working on tomorrow or next month or next year, that has been a constancy for 25 plus years working on the web. And, and I don't really want that to change. It keeps me fresh. It keeps me learning new things
[01:03:07] Todd: Yeah
[01:03:07] Jason: you know, getting into the design system stuff, I, you know, I, I know, I know whose books to go grab. So, I, you know, I, I grabbed a copy of Yesenia Perez-Cruz Expressive Design Systems
[01:03:21] Todd: Yep
[01:03:22] Jason: And, and started reading that and really within a few pages, I was like, I, our whole team needs to read this and, and so I talked about it with one of my colleagues and we're like, well, let's just, let's do a book club.
And, and I've done that before. I've done it at other agencies and used to do one with a friend of mine for, for years and all remote. So, we're like, well, let's do it. And so, we, we ordered the books for our team the folks at A Book Apart were awesome. They treated us really nicely with that. And, and then it ended up opening it up because we had other people start to ask us about, you know, what were we talking about with this thing?
So, we've got over a dozen other designers from other teams that have asked to join our little book club. So in January we'll have our first one and so it's just, it's, it’s that learning it's like making just like, that's the one thing that I could instill in others all the time is to just learn something every day, read one article, you know, look at one blog post, you, you know, read a book regularly.
And, and that's, I, I, I love that because then, and then when you share it and then when you do it with somebody else, then then you're all learning even more. And, and so that's, that's just always been fantastic. I'm really excited that there was such an interest on the part of the team to do that.
So, thank you Yesenia for just writing, an incredibly wonderful book that I know is going to help our team grow considerably. So that's, that's the kind of stuff that, that really excites me every day working on the web.
[01:05:05] Todd: I, I, I agree in the learn, learn, learning part, I myself am reading a book and it's, you can't really see it. It's, yeah, with my blurry background.
*Todd holds up the Designing For Touch book
[01:05:16] Jason: Oh, Designing For Touch? That’s a good one.
[01:05:18] Todd: Yes, Designing For Touch from Josh Clark our, our friend, Josh Clark. And it's a really good book I'm in to the second chapter now. And I'm actually, I've read it before, but I have, now that I’ve completed for now, my library of A Book Apart books, I'm rereading through them all. And yeah, that's, that’s the one I’m on.
[01:05:41] Jason: That's great. You know, I have to, I have to share that there's a, a wonderful little bit of crossover with Josh and, and Jen Robbins and my, my friend Coryndon Luxmoore. So Coryndon is the, the head of the, the pet life team at, at Chewy so that's the design team that manages like things for the pet insurance, the pharmacy stuff, and like all the pet profiles on, on Chewy.
But Coryndon and I have been friends for years and years and years, and he started with Jen Robbins, the PVDUX meetup, and the really one of the very first times that I went there I met Josh. Josh was living in Providence at the time. And I, I, I had known Jen mainly as much through her husband, Jeff Robbins, who at the time was the CEO of Lullabot bought the Drupal development company.
And so that was how I knew him from the Drupal world. Jen has, you know, it was probably one of the longest standing web authors for O'Reilly. And, and the three of them were so encouraging in getting me to submit my first conference talk. Really were a big part of what motivated me to do it and, and really kind of set me on this path.
And so, I have a huge debt of thanks to, to Josh and Coryndon, Jen for that. Jen then later introduced me to her editor and that's how I got to write a book, Responsive Typography for O'Reilly.
[01:07:19] Todd: Yep
[01:07:21] Jason: But, and, and now I'm finally getting a chance to work with Coryndon and at, at Chewy he's the one that kind of recruited me and pointed me towards, towards this posting and how I ended up in that job. So, some of my favorite people on the web right there,
[01:07:39] Todd: So, let's see the second question.
[01:07:44] Jason: I'm not helping you get through these things very quickly. I know
[01:07:48] Todd: Oh no, that's quite all right. Believe me I have a W3C meeting in a little while, but I know I don't mind missing the first few minutes of it. So, if there were one thing that you could change about the web that we know today, what would that be?
[01:08:10] Jason: Oh gosh well, I'm, I’m going to stay on brand and just, I want to see, I want to see more support in browsers for the specs that are already written. I mean, yes, we want to see new things, but there are so many aspects of typography that have been spec’d out. Things like hyphenation, really good hyphenation. There's a bunch of other things, but they, they, they're not as interesting problems to solve so they don't get solved and they just end up kind of languishing or the be supported in only one browser.
So, I, I would, text is the foundation of the web. Everything on almost every website that you will look at is going to be dependent upon text in some way. And it would be really nice if we could support great typography top to bottom all the way around and a lot of much of it is spec’d. It's just not put into, into practice in the browsers themselves.
So that would be something I'd love to see. There's plenty of other things I'd love to have, you know, the whole question of whether or not CSS is important. Like I'd love us to stop arguing about that
[01:09:39] Todd: Yeah
[01:09:40] Jason: but I just, I want, I want great typography. I want great reading
[01:09:43] Todd: Yep
[01:09:44] Jason: because that's, that's the thing that and, and for, for heaven sake, stop centering text everywhere.
[01:09:51] Todd: Yes. Yes. That is something that, you know, besides the typography aspect of it, it's also an accessibility issue. So, the last question is your favorite part of front end development or design that you really like to nerd out over. And I think I might know the answer to this one, but I'm going to let you, I'll let you go ahead and, and answer that.
I think it might be typography, but I'm not sure.
[01:10:24] Jason: It might be. I can't, I can't even, I can't even come up with like a good fake on it. I just know. I love what I love is it is so tied to front-end performance, to accessibility, to design to the publishing process. I mean, all of the, you know, I love that is the perfect intersection.
I've always been fascinated by how things work and, and, and that's, it's so tied to how things look. It is that perfect little nexus. So that's yeah. It's, it's typography and the implementation of it on the web. That's my jam.
[01:11:16] Todd: Yeah. Yeah. I guess stay on brand too. Come on now. So, I'd like to close the podcast out with my guests, letting the listeners know what they currently have going on and where people can find you. So, Jason, you have the floor?
[01:11:26] Jason: Thank you, sir. Well, you, I know that we're going to post a bunch of links. So, if you want a daily dose of, of morning, quiet with me and Tillie, when we go on our dog walks, that's Instagram.
If you want to learn about web typography, take a look at the archive of tips and, and I promise I'm going to get back to writing more, but, but there's a lot for people to learn from there. And I, I really hope it inspires people to dig a little deeper into typography and, and how to implement things.
You know, just, just take one thing, you know, look at your add font face declarations, look at font loading, look at your line length and line height combinations. And, and there's, there's, there's stuff about all of those things there, and, and there's always resources and books and articles and stuff to, to follow up with too.
And gosh, I, I know, I know there will be conferences again, at some point, I don't know when or where. I do have one invite now for a conference in September of next year an international one that I don't think has been announced yet. So, I guess I won't say any more about that and I want to keep my fingers crossed that it actually happens, but, but I know we'll be back to that and I, I, I know I'll be back to visiting my Event Apart friends and Smashing friends and Beyond Tellerrand friends. So, I'm really looking forward to getting back out, to meeting more people and sharing more stuff but @JPamental, J P A M E N T A L on basically any platform you can think of, whether it's GitHub, CodePen, Twitter, Instagram, LinkedIn all the same. And I, I love nothing more than hearing from people that got something from something I put out there.
And it made a difference for them and if you need help if you have a question about something, I, I love answering stuff like that. And, and the more you let me answer it out loud for other people to learn too so much the better. And if you are interested in working on some really awesome stuff, some great design system works and great product design work we always have openings at Chewy.com and you should check that out and come work with me there.
[01:13:57] Todd: Awesome. Jason, thank you so much for spending time with us today and you know, sharing your morning with us I really appreciate it. It has been absolutely terrific catching up with you.
[01:14:12] Jason: Likewise, my friend.
[01:14:15] Todd: So
[01:14:15] Jason: And for those who don't know, I mean, we met, we met through An Event Apart.
[01:14:20] Todd: We did.
[01:14:20] Jason: And, and, you know, fast forward a few years and you're an invited expert in the W3C. You've got this great podcast interviewing all kinds of awesome people who I know are your friends and supporters too. That's another thing that's just awesome about this. You've got an awesome job doing front end and accessibility stuff, and I'm just I'm proud to know you, my friend.
[01:14:44] Todd: Thank you, the feeling is mutual and, at some point hopefully, if I'm back east, we can get together and have another cup of coffee.
[01:14:55] Jason: That'd be great. I love that.
[01:14:59] Todd: Yeah. All right thank you listeners for tuning into the Front End Nerdery Podcast. I'll be back next time with a new guest new conversation about front end design development and other topics.
If you would please rate this podcast on your podcast device of choice, like, subscribe and watch on the Front End Nerdery YouTube channel. Links to transcripts and show notes are there. I'm Todd Libby, and this has been the Front End Nerdery Podcast. Thank you. And we'll see you next time.