{"id":74438,"date":"2019-12-18T04:19:19","date_gmt":"2019-12-18T11:19:19","guid":{"rendered":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/"},"modified":"2019-12-18T04:19:19","modified_gmt":"2019-12-18T11:19:19","slug":"smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/","title":{"rendered":"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/12\/smashing-podcast-episode-5\/\"><title>Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?<\/title><\/p>\n<article>\n<header>\n<h1>Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?<\/h1>\n<address>Drew McLellan<\/address>\n<p>                  <time datetime=\"2019-12-17T05:00:00+00:00\">2019-12-17T05:00:00+00:00<\/time><time datetime=\"2019-12-17T05:00:00+00:00\">2019-12-18T11:07:29+00:00<\/time><\/header>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/jason-pamental-200px.jpg?resize=200%2C200&#038;ssl=1\" width=\"200\" height=\"200\" alt=\"Jason Pamental\">In this episode of the Smashing Podcast, we\u2019re talking about variable fonts. What are they, how do they differ from regular fonts, and how can they help in the design and performance of our websites? Drew McLellan talks to a font of knowledge on the matter, Jason Pamental.<\/p>\n<h3>Show Notes<\/h3>\n<p>Weekly update:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2019\/12\/brand-illustration-systems-visual-identity\/\">Brand Illustration Systems: Drawing A Strong Visual Identity<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2019\/12\/struggling-handle-traffic-surges\/\">Struggling To Get A Handle On Traffic Surges<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2019\/12\/building-a-css-layout-live-stream-rachel-andrew\/\">Building A CSS Layout: Live Stream With Rachel Andrew<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2019\/12\/web-design-development-advent-roundup-2019\/\">Web Design And Development Advent Roundup For 2019<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2019\/12\/should-your-portfolio-site-be-pwa\/\">Should Your Portfolio Site Be A PWA?<\/a><\/li>\n<\/ul>\n<p>Variable Fonts<\/p>\n<ul>\n<li>Find Jason on the web at <a href=\"https:\/\/rwt.io\/\">rwt.io<\/a><\/li>\n<li><a href=\"https:\/\/rwt.io\/newsletter\">Web Typography News<\/a> newsletter<\/li>\n<li><a href=\"https:\/\/rwt.io\/typography-tips\/variable-fonts-what-web-authors-need-know\">Variable Fonts: What web authors need to know<\/a><\/li>\n<li>Ellen Lupton\u2019s book <a href=\"http:\/\/thinkingwithtype.com\/\">Thinking with Type<\/a><\/li>\n<li>Erik Spiekermann\u2019s book <a href=\"https:\/\/books.google.co.uk\/books\/about\/Stop_Stealing_Sheep_Find_Out_how_Type_Wo.html?id=wKlKAgAAQBAJ\">Stop Stealing Sheep &#038; Find Out how Type Works<\/a><\/li>\n<\/ul>\n<h3>Transcript<\/h3>\n<p><span>Drew McLellan:<\/span> He\u2019s a design strategist, UX leader, technologist, expert in web typography, and invited expert on the W3C Web Fonts Working Group. He writes, speaks, and works with teams and brand owners on how to set type better on digital platforms. He\u2019s spoken with organizations like Adobe, Audible, Cond\u00e9 Nast, GoDaddy, IBM, and given presentations and workshops and conferences all over the world. His newsletter, Web Typography News, is popular with those wanting latest updates and tips on typography on the web. He\u2019s clearly an expert in web typography. But did you know he represented Sweden at Lawn Croquet in the 1984 Olympic Games? My smashing friends, please welcome Jason Pamental. Hello, Jason. How are you?<\/p>\n<p><span>Jason Pamental:<\/span>I\u2019m smashing. Especially after that intro.<\/p>\n<p><span>Drew:<\/span> I wanted to talk with you today obviously about web typography because that\u2019s really your thing. You are a real expert with web typography. About that in general, but in particular, talk a little bit about variable fonts. I\u2019ll be the first to admit I\u2019m no typography expert. I mean, please consider me as uninformed as anyone listening. You cannot patronize me with any information about typography. I guess we\u2019ve had usable web fonts on the web for probably about a decade now. Is that right?<\/p>\n<p><span>Jason:<\/span>Yeah. Actually, wasn\u2019t it you that started something on Twitter a couple days ago? It was like November 9th in 2009. It\u2019s like 10 year in two days since Typekit launched. I know Font Deck was right in the same time frame. Then Google Fonts and Monotype Service not long after. I had a beta invite that was given to me by my friend, John Cianci, who is actually now still a colleague of my wife\u2019s at the agency where she works to Typekit sometime in 2009. That was a complete reinvention of my interest in the web. I mean, it was nothing short of a revolution for me. I mean, I\u2019d always loved typography when I\u2019d studied it in school, but we couldn\u2019t do anything with it on the web for 15 years. That was pretty amazing.<\/p>\n<p><span>Drew:<\/span> There must be designers working on the web now having had web fonts for 10 years plus potentially. There are designers working on the web now who have never designed a site without the ability to select from a huge range of typefaces.<\/p>\n<p><span>Jason:<\/span>Yeah, it\u2019s true. Nobody without that experience had to push the pixels uphill in both directions like we did growing up. We\u2019re not some cranky old men shaking their fists at the sky. But yeah, it is kind of amazing just with all of the things that have changed on the web, the idea that some people never experienced in any other way is remarkable.<\/p>\n<p><span>Drew:<\/span> By the time we got web fonts, that was a massive shift in how we started to use typography on the web because we could really start to use typography on the web. There were obviously things that we could do with web safe fonts, but we were pretty limited to a very restricted palette. But there\u2019s potentially now another big shift almost as significant perhaps with variable fonts. I mean, what are variable fonts? What do they do for us? Where do we begin?<\/p>\n<p><span>Jason:<\/span>I always try and start with giving people a frame of reference. So when we think about using fonts on the web, the thing we have to remember is that currently with \u201ctraditional\u201d fonts, every font is an individual width, weight, slant, variant of that typeface. For every one we want to use on the web, we have to load a file. For a typical website where you\u2019re using it for body copy, you\u2019re loading, usually, four fonts: the regular, bold, italic, and bold italic. All of those things have to get loaded. Each one of those is a little bit of data that has to be downloaded and processed and rendered.<\/p>\n<p><span>Jason:<\/span>So typically, what we\u2019ve done over the years is constrain ourselves to using that very small number of fonts, which is actually not particularly great typography practice. It\u2019s much more common in graphic design to use a much broader range. You might use eight or 10 different weights and variants of a typeface in a given design. On the web, we\u2019ve been very constrained because of performance. The big difference in a variable font is all of those permutations, those variations are contained in a single file. That format is really efficient because what it\u2019s doing is storing the regular shape of that character and then what are called the deltas of where the points along those curves would move to render it as bold or thin or wide or narrow.<\/p>\n<p><span>Jason:<\/span>So by only storing the differences, you don\u2019t have to store the whole outline. It\u2019s a much more efficient format. While it\u2019s not as small as a single font file, it\u2019s still much smaller than all of the individual ones taken separately. If you look at something like Plex Sans from IBM, all of those separate files might be nearly a megabyte where two variable font files that contain all the widths and weights in the upright in one file, the italics in the other is like 230K. That\u2019s for really, really complete character sets. Most people could use a subset of that and get it even smaller. I\u2019ve generally been seeing those file sizes around 50 to 100K for a typical Western language website need. That\u2019s not that different from loading\u2026 Once you load three or four individual font files, you\u2019re probably loading more data than that. It\u2019s an interesting win for performance, but it also then opens up the whole range of the typeface for us to use on the web through CSS.<\/p>\n<p><span>Drew:<\/span> So it\u2019s almost like delivering the recipe rather than the meal. Rather than here\u2019s the italic version, here\u2019s the bold version. It\u2019s like, \u201cHere\u2019s the regular version and to make it italic, you would do this, to make it bold, you would do that.\u201d That reduces the file size that goes down over the wire.<\/p>\n<p><span>Jason:<\/span>Yeah. Well, in a way, it\u2019s giving you all the ingredients and then you can make any recipe you want. Because you could really go everywhere from\u2026 To go back to the Plex example, from 100 to 700 weight where 700 is sort of the typical bold, 400 would be kind of a normal weight. But then you have much lighter. So you could do really big and really fine line headings or block quotes or different items or like emphasis, and then be able to kind of modulate what you want bold to be at different sizes. There\u2019s all kinds of different things that you can do for better typography, better user experience, all the while getting better performance. That\u2019s the gatekeeper.<\/p>\n<p><span>Drew:<\/span> So there\u2019s almost an infinite number of tweaks of steps between what we would think of today as regular and bold? You actually got the ability to go anywhere along that axis to tweak between the two?<\/p>\n<p><span>Jason:<\/span>Right. What I think is really exciting to me as somebody that studied graphic design and has looked fairly closely at print design for many years, the idea of what bold is really should change based on the size of the text that you\u2019re rendering. So by default, that 400 and 700 for normal and bold is kind of what the web defaults to. But in truth, the only reason you\u2019re calling out bold is you want some emphasis, you want something to stand out. But the heavier the font gets out of small size, the harder it is to read. It kind of fills in the little open spaces. Instead of using 700 for body copy when it\u2019s set at that roughly 16 pixel size or whatever we\u2019re using there, you use maybe 550, 575 where you get enough emphasis but the letter forms are still more open. Then as it gets bigger, you might use a heavier weight.<\/p>\n<p><span>Jason:<\/span>But again, it\u2019s sort of your choice at that point. By modulating that for getting the right level of emphasis, but still maintaining really good legibility, we have so much more flexibility. I\u2019m really hoping that as these become more popular and more widely used, that we can start to teach people to be a little bit more nuanced with the way they use that range and actually get more expressive and also more readable at the same time.<\/p>\n<p><span>Drew:<\/span> One thing I\u2019ve noticed implementing designs as a front end and implementing designs that I\u2019ve been given is that different color contrast combinations and light text on a dark background versus dark text on light background, the weights can look completely different. So presumably, this would help to even out and sort of finesse the visual and the reading experience based on changes like that?<\/p>\n<p><span>Jason:<\/span>Absolutely. That\u2019s one of the things that I usually will showcase in workshops and talks is adding in support for that light mode media query. You can flip that contrast but then you do want to do it in kind of a nuanced way. Depending on the typeface, it can end up looking really heavy or kind of spindly with a serif typeface. Sometimes you want to go a little heavier or a little lighter, but you then also tend to need to space the lettering out when you have it on a dark background or else the letter forms kind of bleed together. There\u2019s little things that you can adjust in the typography. The media query is dropped dead simple. I mean, it\u2019s like two lines of code to add that to your site. Then it\u2019s what you do with that. It\u2019s not necessarily just inverting the colors. Sometimes you need to adjust for contrast, but also tweak the type itself for better legibility.<\/p>\n<p><span>Drew:<\/span> So presumably, it\u2019s not just weight that can be varied in a variable font. There are other ways we can change our font as displayed?<\/p>\n<p><span>Jason:<\/span>Yeah. It\u2019s completely up to the type designer. I think it\u2019s really good to reinforce that this is not a free for all in the browser. The browser can only render what has been enabled in the font. Ultimately, it\u2019s the type designer who says the weight ranges this to this. You might have a width axis. It would get a little bit narrower or a little bit wider, but there\u2019s also the ability to have what are called registered axes. There\u2019s width, weight, slant, italic, and optical size. Those are all sort of core things that are mapped to CSS properties. Slant allows an angle in between one and another, so upright and I\u2019ve actually seen ones with a reverse slant as well as a forward slant. That\u2019s totally open. Italic is generally on or off but not necessarily. You can actually have\u2026 Well, there are type designers that have experimented with changing the letter forms over gradually as you shift from normal to italic, and sort of substituting letters along the way. That\u2019s kind of an interesting thing.<\/p>\n<p><span>Jason:<\/span>But then there\u2019s the ability to have custom axes. The type designer can define whatever custom axes they want to vary. You\u2019ve seen ones that add sort of a gravity spread drippiness and all kinds of fun twisting shapes, or extending serifs, changing the height of the ascenders and descenders. On the lowercase letter forms, changing whether or not they are serifs or not. There\u2019s all kinds of things that you can do. It\u2019s really up to the imagination of a type designer. I think we\u2019re only scratching the surface as to what could realistically happen with all those things. It\u2019s all accessible through CSS.<\/p>\n<p><span>Drew:<\/span> Yeah. All of these properties can be tweaked just through the normal CSS that you\u2019re delivering with the rest of your design. What sort of things can we do in CSS to sort of trigger those changes? Is it just like we would do with a responsive layout where we have media queries to trigger that?<\/p>\n<p><span>Jason:<\/span>There\u2019s all kinds of ways you can do it. There\u2019s a small change that you have to make. I\u2019m assuming that we\u2019ll provide a bunch of links to some stuff that will help people kind of play around with this stuff. I mean, I\u2019ve written a bunch. Hopefully, that will help people out. Then on the use side, the font weight axis is just mapped to font weight. Instead of saying regular bold, you just supply a number. You can change that with media queries. You can change it with JavaScript. You can kind of do it whatever you want with that. I\u2019ve been using a technique called CSS Locks that I learned from Tim Brown to basically use math. CSS custom properties and calculations to scale it from, once you hit a small break point up to a large break point, it kind of smoothly scales the font size and line height.<\/p>\n<p><span>Jason:<\/span>Then you can also use a little bit of JavaScript to do the same thing with their weight if you want to. The weight axis maps to font weight, the CSS property. The width axis in the font will map to font stretch, and that\u2019s just expressed as a percentage. I should note that many type designers are not necessarily thinking through how this is expressed so you might see weight ranges that do weird things like go from 400 to 650. You still have to express it as a percent, but it works. It\u2019s fine. You just need to know what normal is and all the fonts are documented. Then with anything other than those two, currently, there\u2019s a little bit uneven support in the implementation for slant and italic. A lot of those things you sort of need to fall back to using font variation settings and then you can supply several things at once. It\u2019s kind of like font feature settings. It\u2019s sort of a lower level syntax where you can supply a comma separated list of this four letter axis and the value, the next one, the next one.<\/p>\n<p><span>Jason:<\/span>The one thing that people need to keep in mind is that when you use font variation settings, you lose all the semantic understanding of that and you lose the fallback. Font weight and font stretch are universally supported in all the browsers. You should definitely use those attributes. For anything else, you might use font variation settings. But the advantage to using font weight the way you normally would is if the variable font doesn\u2019t load, the browser can still do something with that. Whereas if it doesn\u2019t understand variable fonts, or it doesn\u2019t load, if everything is in font variation settings, then you lose all of the styling information. That\u2019s just a little side note there just in terms of what is supported where. But I should also say that it is supported in all the shipping browsers that you\u2019re likely to encounter in most circumstances. I-11 doesn\u2019t work, but you can deliver static web fonts, and then use ad supports in your CSS to change over to the variable fonts. Then you\u2019ll avoid any duplicate downloads of assets and it works really well. I have that in production on several sites already.<\/p>\n<p><span>Drew:<\/span> I think like many of the sort of more modern web technologies you\u2019re seeing, if there\u2019s a variable font that has been bubbling away quietly for a while, and is only when it sort of finally boils over and we get support in browsers and people like yourself making noise about it and letting everyone know that it\u2019s there. It can almost feel to the standard designer or developer who\u2019s just day-to-day getting on with their job and not tracking all the latest downloads. It can seem like it\u2019s come out of nowhere. But I guess this has been bubbling away for quite\u2026 I mean, you mentioned the two slightly different implementations that we\u2019re now dealing with. There\u2019s a sort of older and a newer standard for implementing?<\/p>\n<p><span>Jason:<\/span>Well, it\u2019s actually not older and newer. They\u2019re both very intentional. I\u2019ll come back to that in a second because it is really worth kind of understanding what the difference is with those. But you\u2019re right. The format was introduced just over three years ago, was in September of 2016. We actually had the first working implementation in the nightly build of Safari three weeks later. It was pretty remarkably quick that we had working browser. Safari was the first one to ship full support for it. I think it was when High Sierra came out. I don\u2019t know, it was like Safari 12 or something like that.<\/p>\n<p><span>Jason:<\/span>But not that long after, we ended up getting support shipped in Firefox, Edge, and Chrome. We\u2019ve actually had browser support for almost two years. But there weren\u2019t a ton of fonts. There\u2019s been this sort of steady evolution. The support for using them on the web has actually been there longer than anywhere else. I mean, technically, this format works on desktop OS as well. So if you have a TTF format, you can install it in your desktop OS on Windows or Mac, and you can use it in any application. You can\u2019t always get to vary the axes the way you might want to play with them kind of infinitely, but there are this notion of named instances embedded in that font file that map it back to what we\u2019re used to.<\/p>\n<p><span>Jason:<\/span>In Keynote, for example, there\u2019s not explicit support for variable fonts, but the format does work if there are things like in Tech Sense, again, condensed, light. You\u2019ll have those normal, regular, regular bold, narrow, etc, all would be available in a drop down menu just like installing the whole family. Then if you\u2019re in Illustrator or Photoshop or now InDesign that just shipped last week or Sketch that shipped a couple weeks ago, they all support variable fonts now, so that you can then access all of the different axes and play with it to your heart\u2019s content. But in the browser, that\u2019s where we\u2019ve had a lot more to work with. Taking a cue from your wife, I have been kind of beating this drum for a while trying to get people to be more aware of it. Then thanks to the work that the Firefox team has done in creating developer tools. With Jen Simmons kind of pushing that along, we have incredible tools to work with on the browser that help us understand what the fonts are capable of.<\/p>\n<p><span>Drew:<\/span> You mentioned type designers and the font capabilities. There are lots of fonts that are available?<\/p>\n<p><span>Jason:<\/span>Well, a lot of people are doing it now. Probably the best and most comprehensive place to go look for them is Nick Sherman\u2019s site, v-fonts.com, v-fonts.com. That\u2019s just a catalog site. It\u2019s rapidly becoming really, really big. There\u2019s more variable fonts coming out all the time now. There\u2019s not a huge number of open source ones, but if you search on GitHub for variable fonts, you actually will find a whole bunch of projects there. But Google has launched a beta of their new API with about a dozen variable fonts available there. There\u2019s more coming from them. They just released Recursive at recursive.design, which is a fantastic new typeface from Stephen Nixon. The Plex variable, one is available, that\u2019s open source. Then there\u2019s tons of commercial ones.<\/p>\n<p><span>Jason:<\/span>The cool thing about that is Monotype has released some pretty big ones. But it\u2019s lots of smaller foundries and individual designers that are just kind of leading the way in experimenting with this format. I think that\u2019s really great for design and great for the web that we\u2019re seeing all of these new designs from new designers or smaller designers that are kind of breaking this new ground. Because I like to see them succeed with this because they\u2019ve really taken the initiative to kind of put some great stuff out there.<\/p>\n<p><span>Drew:<\/span> Are we seeing any updating of existing fonts to be variable fonts to have families replaced by a single variable font? Is that happening at all?<\/p>\n<p><span>Jason:<\/span>It is. The ones that Monotype released are updates to some really classic typefaces. FF Meta was one that I helped them launch by designing the demo for that last year. They\u2019ve got that. Univers, Frutiger, Avenir, I think those are the ones that they\u2019ve released so far, those four. Those are really kind of core classic brand typefaces. They\u2019re working on more. I know they have at least another half dozen or so that are kind of in various stages of production. I know that Dalton Maag which does a ton of custom typeface work for large corporations has several really nice variable fonts. I\u2019ve been doing some work with TypeTogether. They also have several really great typefaces. I know that one\u2026<\/p>\n<p><span>Jason:<\/span>I\u2019ve shown at some of the conferences where I\u2019ve spoken about these things that Adidas has their own too that they\u2019ve been using for all of their brand work in print for almost two years now. Which is really, really remarkable stuff. But also Mark Simonson is working on a variable version of Proxima Nova. That\u2019s kind of a big deal. That\u2019s been one of the best selling web fonts of all time. It\u2019s happening. It\u2019s happening in bits and pieces kind of all up and down the scale. But even something as simple as subscribing to David Jonathan Ross, Font of the Month Club, will get you a variable font almost every month. I mean, he\u2019s been really incredible on the stuff that he\u2019s been putting out. It\u2019s like $72 for the year or something like that. He\u2019s been putting out all kinds of really beautiful stuff.<\/p>\n<p><span>Drew:<\/span> It is quite interesting then, because obviously, with the capabilities of variable fonts, you could create new designs that make use of these. But potentially, there could be sites that are in production where there are variable font versions now available where somebody could go back, revisit that, and replace out multiple font files with a new implementation based on a new variable font version.<\/p>\n<p><span>Jason:<\/span>Yeah, absolutely. That\u2019s some of the questions that I get fairly regularly. Recently, I was looking at a pretty large sports broadcasting website that the development team asked me about that same question. I looked, and sure enough, for two of the typefaces they\u2019re using, there are variable fonts available. A quick bit of research showed us that we could replace four instances of one typeface and three of the other with two variable font files and take over 70% of the file size away in five requests. I mean, it would be a question win from a performance standpoint. For really large scale site, when you look at removing almost 300K of data download across millions of users, that actually adds up to real dollar savings and bandwidth cost. Even from that purely practical standpoint without rewriting any of their CSS, just replacing those fonts, it\u2019s already going to be a significant win for them in performance, in page render time and then in actual bandwidth costs for them.<\/p>\n<p><span>Drew:<\/span> In practical terms, is it as simple as it sounds, just swapping one out for the other?<\/p>\n<p><span>Jason:<\/span>It can be. I think the perfect example of that is something that Google sort of casually let slip at ATypI in September that they have started doing that with Oswald to the tune of 150 million times a day. They made a variable font version of it, and they just started surfing it on websites that were using enough instances where it would yield a significant benefit. They didn\u2019t tell anybody. They didn\u2019t tell the site owners. Nobody had to do a thing. Because it had the right mapping of the weight axis so the defaults would just work. 150 million times a day is a lot of font serving. That\u2019s starting to give them some better insights into what would this landscape look like for them if they could start to switch over the top five web fonts that they serve? I\u2019m assuming Open Sans is probably one of those. I know Lato is probably in there, Roboto.<\/p>\n<p><span>Jason:<\/span>So if you look at those and look at what optimized versions of those might look like, then you can see that there are some very clear reasons why Google would be interested in that. Then if you look on the other side, just the design space and how much truer to a brand voice a company could be if they\u2019re working with the whole range of their own brand typeface rather than having to swap in different ones or be more limited in their palette. So there\u2019s really interesting things to learn and explore on kind of both ends of that spectrum.<\/p>\n<p><span>Drew:<\/span> It sounds like an exciting brave new world of typography and opportunities for doing type in a more sort of sensitive and potentially more creative way on the web than we\u2019ve had been able to do before.<\/p>\n<p><span>Jason:<\/span>Well, that\u2019s certainly what I hope. I think that one of the biggest barriers to adoption with fonts on the web at all stages has been performance. So what happens? How long does it take to load? What does that mean to the render time on the page? We\u2019ve got those issues of that sort of flash of invisible text or unstyled text. Grappling with all those things, really, it comes back to how long does it take everything to get there? How does the browser react to that? There\u2019s lots of things we can do to mitigate some of those issues. But it really comes down to if we have a better font and a better way to serve it, then all of those issues become much less significant. So having that in place, then we get to be way more expressive. We can really try and push the design end of this and try and be a little more creative.<\/p>\n<p><span>Drew:<\/span> Because you\u2019ve written lately sort of expressing the feeling that perhaps the web has drifted into a bit of a trap of designing an article template per site maybe with some variations for a few different types of content. But everyone\u2019s sort of drifting towards this medium.com style of single column of text very readable to my eyes. Nicely typeset. Is that such a bad thing?<\/p>\n<p><span>Jason:<\/span>I don\u2019t think it\u2019s bad. I just think it\u2019s going to get boring. I mean, when Medium came out, that was pretty novel. I mean, I think that one column of\u2026 Like you say, it was pretty nicely typeset copy. It has nice an area. It wasn\u2019t crowded. It wasn\u2019t cramped and sidebars and all this other stuff. There\u2019s always going to be questions of business model and what will support that. That\u2019s why a really beautiful redesign of, I think, it was the Seattle Times that Mike Monteiro for Mule Design did a few years ago. Absolutely gorgeous until it launched. Then they had these massive banners down either side of the column and it just kind of took away all that whitespace. It was a real shame.<\/p>\n<p><span>Jason:<\/span>I understand that companies have to make money. There are ramifications to that. So it would be wonderful to have that be one option. To have that nice clean layout. But it shouldn\u2019t be the only one. We have all these capabilities in CSS that allow us to do really interesting things with margins and layout. I mean, it\u2019s not even just the fact that we have grid now. But the fact that we can do calculations in the browser in CSS allows us to do a lot more interesting stuff. You layer in with that, the ability to be much more expressive with type, then we could start to look at what they do in magazines. Vanity Fair doesn\u2019t have one article template. They have six or seven or eight. If you really look at how they lay those things out, there\u2019s a tremendous amount of variability but it is playing within a system.<\/p>\n<p><span>Jason:<\/span>So when we create a design system for our website, instead of stopping at just one layout, we have a relatively easy way to build some switches into our content management systems. Most of them support a fair amount of flexibility. There\u2019s no reason why we couldn\u2019t give people a choice. I want to use layout one, two, three, four, five, six. That\u2019s going to introduce different margins, different offsets. Maybe introducing the ability to create some columns. There\u2019s lots of different things that we could do that would make for a much more interesting web. I think that type can play a really big part in that.<\/p>\n<p><span>Drew:<\/span> Is type our savior when it comes to adding a bit more personality back to the web?<\/p>\n<p><span>Jason:<\/span>Well, I think it can be. I think we\u2019ve had this long evolution on the web towards better usability. But I think that one of the casualties there is when all we\u2019re ever concerned about is that utilitarian, is it usable approach? That tends to beat out personality. Then when every single website is\u2026 Again, we had web fonts come along and that created a new level of expressiveness that we didn\u2019t have before. Then all of a sudden, we could\u2026 Displays got better. So serifs came back into the mix. We could use those again on the web. These things added some life. Then we\u2019ve kind of optimized back to everybody using one or two San-serifs. It\u2019s Open Sans or it\u2019s Roboto or Oswald or whatever. We\u2019re kind of back to the same thing where there are tons of really good, really readable typefaces. We haven\u2019t really taught this current generation of UX designers who are often the ones driving a lot of this anything about typography. Anything about how expressive it can be, how much it can alter the mood and the tone.<\/p>\n<p><span>Jason:<\/span>So we have a huge number of people that are dictating the design direction of things on the web who have ideas about type that are perhaps not as well-informed as somebody who studied graphic design and those notions of readability. We need to bring those things together. It\u2019s not one or the other. It\u2019s an and. It needs to be.<\/p>\n<p><span>Drew:<\/span> Especially when we talk about personality and about tone and mood. From a business point of view or from what we\u2019re talking about is aspects of a brand. So in making everything look the same, are we losing the ability to communicate a brand to customers?<\/p>\n<p><span>Jason:<\/span>Absolutely. Not to dive into politics, but I think the whole\u2026 One of the major issues that we certainly experienced in the US, and I\u2019m sure it\u2019s not that different from what happened in the UK over the last few years. When all the news is consumed through a single platform, and everything looks the same, there\u2019s no distinction of voice. So it\u2019s something like 75% of adults in the US say that they get a significant portion of their news from Facebook. I mean, let\u2019s set aside just how generally horrifying that is. But given that everything is presented uniformly, there\u2019s no difference between an article from The Guardian, to New York Times, The Wall Street Journal, The Washington Post, and Joe\u2019s right wing news. It\u2019s all presented exactly the same.<\/p>\n<p><span>Jason:<\/span>When we see that logo, that type style, the Guardian is so characteristic. The Wall Street Journal is so characteristic. We recognize instantly when we see it, even just a headline. We know where that came from. Then there\u2019s this automatic association with that brand and that authenticity. When you strip all of that away, you\u2019re left with, \u201cOkay, I\u2019m going to evaluate this on a headline. Then it\u2019s on, who wrote a better headline? That\u2019s not a lot to go on. So I think that we have lost a tremendous amount. If you look at what Apple News Plus is trying to do, there are some efforts on a part of a few companies to try and reintroduce that. Blundell did a really interesting job of that in Europe. They launched in the US, but I\u2019m not really sure they\u2019re ever really that successful. That was a platform that would allow you to subscribe and see content from all these different top level newspapers and publications. It would always be in their own design. So that was really kind of an interesting approach there. It was always preserving the brand voice, that authenticity and that authority that would go along with that news. It really helped provide some cues for you as a reader to kind of evaluate what you\u2019re reading.<\/p>\n<p><span>Jason:<\/span>I think that\u2019s important. I think it\u2019s not something to be taken lightly.<\/p>\n<p><span>Drew:<\/span> Thinking back to RSS readers in days gone past, the same sort of problems we were seeing then where everyone\u2019s content was being just distributed via RSS and appearing in a reader in identical format, identical layout. I think you do lose something of the personality and the voice.<\/p>\n<p><span>Jason:<\/span>Yeah. It\u2019s true. I don\u2019t think that\u2019s an entirely solvable problem. I think if you can imagine an RSS reader with a different typeface for every headline, it would be crazy. There\u2019s a reason why that that doesn\u2019t work that well, but there has to be some middle ground. Type does play a role in that. Then certainly, once you get back to the website, there is that sort of instant recognizability that will help that experience stand apart from seeing it anywhere else.<\/p>\n<p><span>Drew:<\/span> So say I\u2019m a designer. I\u2019m working in a small agency. I\u2019m turning out designs for all sorts of different clients. I look at my work. I think, \u201cThis is all good. This is readable, but it\u2019s got no personality in it.\u201d Where do I start to actually put back some interest, some excitement, and not just lean on this sort of uniform UX driven layout that I\u2019ve sort of conditioned myself to use?<\/p>\n<p><span>Jason:<\/span>Well, I think the thing to do is if you\u2019ve never studied typography, you haven\u2019t necessarily kind of trained your eyes to see what the differences are in one typeface to another. Even when you have studied graphic design, you have to remind yourself of these things all the time. So I think oftentimes that I\u2019ll recommend, and actually, I wrote about this a few weeks ago because I kept getting asked like, \u201cWhere do you start?\u201d I made a list of books that I think are really helpful. So something like Ellen Lupton\u2019s book, Thinking with Type is a fantastic introduction to looking at type and seeing it. Erik Spiekermann\u2019s book, Stop Stealing Sheep is a great one although I think at the moment, it\u2019s out of print. I think that he might be working on another edition but that\u2019s so\u2026 If you find that one, that\u2019s a good one as well.<\/p>\n<p><span>Jason:<\/span>Those will help introduce you to the terminology and understanding what the differences are between the different styles of text. Then once you have that basic introduction, it gives you a better frame of reference when you look at other websites. Getting a sense of like, why does this one feel warmer than that one? What are the combinations of type? What are the characteristics? As a web developer often does or web designer often does, you inspect an element, see what the typeface is that\u2019s being used there, and that can start to help build a palette of ones that you become familiar with. Very often, designers do hone in on a few that they get to know well and they tend to use them on a lot of different projects. That\u2019s not necessarily a bad thing. It\u2019s certainly better now if you\u2019re working with a variable font and you can be that much more varied.<\/p>\n<p><span>Jason:<\/span>So you can decide that on this website, this is what I want to call normal. This is the width that I want to use and the other aspects of it. So even using the same typeface across websites because you have access to the full range of characteristics, it could still look quite different.<\/p>\n<p><span>Drew:<\/span> So I think there\u2019s a lot of reading to be done. I\u2019m sure we\u2019ll add some links to the show notes of all the excellent articles you\u2019ve written up and some references to these books and what have you. Because I think there\u2019s so much to learn. I think we\u2019ve always got to be learning with these things. The learning never ends.<\/p>\n<p><span>Jason:<\/span>It\u2019s true. It is true. That is something that I\u2019ve enjoyed immensely when I started writing this newsletter. Every week when I\u2019m writing it, I\u2019m reading more of the specs. I\u2019m reading more of what other people have discovered and written. There\u2019s tremendously knowledgeable folks out there. Rich Rutter, for instance, from Clearleft, wrote a fantastic book called Web Typography. He was one of the founders of Font Deck, which was one of the very first services to launch. He\u2019s always been kind of the most scholarly of authors about this stuff. I mean, he\u2019s really tremendously thoughtful in the way he puts those things together. But there\u2019s a bunch of people doing really interesting stuff. That has kind of forced me to kind of keep up with what other people are doing all the time, which is really fantastic.<\/p>\n<p><span>Drew:<\/span> Is there anything in particular that you\u2019ve been learning lately?<\/p>\n<p><span>Jason:<\/span>The stuff that I\u2019ve been learning the most is actually the corners of the specs. I think it\u2019s something that\u2026 I mean, again, probably the biggest influence for me on that is probably Rachel [Andrew]. That she\u2019s always talking about like, \u201cWell, if you actually read what\u2019s written here, there\u2019s actually really good stuff to know.\u201d So in reading exactly what the specs are, there\u2019s a tremendous amount of great typographic control that is available to us. Then layering into that different things like mix blend modes and CSS and learning more about different size units and how they interact together and learning how to use and where you can use CSS custom properties. I keep reading little bits more and more and then kind of compare that to what the browsers are doing. It really has been a tremendous experience for me in what I\u2019ve been learning every week. Even having been doing this stuff for 25 years, there\u2019s still like a new gem every time I dig into one of these things.<\/p>\n<p><span>Drew:<\/span> That\u2019s fantastic. Thank you. So if you dear listener would like to hear more from Jason or perhaps hire him to work with you on your web typographic challenges, you can follow him on Twitter where he\u2019s @jpamental, or find his website at rwt.io where you can also find the web typography newsletter to sign up to. So thanks for talking to us today, Jason. Do you have any parting words?<\/p>\n<p><span>Jason:<\/span>Yeah, experiment. I mean, there\u2019s lots of open source stuff to play with. I think once people get this in their hands and get familiar with it, that I think they\u2019ll start to see more and more how much fun they can have with this stuff and how much more expressive they can be. I think I was talking to the design director at The Wall Street Journal actually on Friday. I was then talking to their design team. We were talking about it\u2019s great that you have a design system that standardizes things, but it\u2019s then like any good design where you break that rule. That\u2019s where the exciting things really happen. So we\u2019ve gotten this necessary evolution of like getting really good at the system. Now we\u2019ve got to break it some. That\u2019s when we can get excited again. Break the rules. That\u2019s my best advice, I think.<\/p>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/logo-red-14.png?w=900&#038;ssl=1\" alt=\"Smashing Editorial\"><span>(dm, ra, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\" rel=\"noopener noreferrer\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? Drew McLellan 2019-12-17T05:00:00+00:002019-12-18T11:07:29+00:00 In this episode of the Smashing Podcast, we\u2019re talking about variable fonts. What are they, how do they differ from regular fonts, and how can they help in the design&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":74439,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-74438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? Drew McLellan 2019-12-17T05:00:00+00:002019-12-18T11:07:29+00:00In this episode of the Smashing Podcast, we\u2019re talking about variable fonts. What are they, how do they differ from regular fonts, and how can they help in the design and performance\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? Drew McLellan 2019-12-17T05:00:00+00:002019-12-18T11:07:29+00:00In this episode of the Smashing Podcast, we\u2019re talking about variable fonts. What are they, how do they differ from regular fonts, and how can they help in the design and performance\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-12-18T11:19:19+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-12-18T11:19:19+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? Drew McLellan 2019-12-17T05:00:00+00:002019-12-18T11:07:29+00:00In this episode of the Smashing Podcast, we\u2019re talking about variable fonts. What are they, how do they differ from regular fonts, and how can they help in the design and performance\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\\\/#article\",\"name\":\"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? | Design for Immersive Technologies\",\"headline\":\"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/jason-pamental-200px.jpg?fit=200%2C200&ssl=1\",\"width\":200,\"height\":200},\"datePublished\":\"2019-12-18T04:19:19-07:00\",\"dateModified\":\"2019-12-18T04:19:19-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\\\/#listItem\",\"name\":\"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\\\/#listItem\",\"position\":3,\"name\":\"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\\\/\",\"name\":\"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? | Design for Immersive Technologies\",\"description\":\"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? Drew McLellan 2019-12-17T05:00:00+00:002019-12-18T11:07:29+00:00In this episode of the Smashing Podcast, we\\u2019re talking about variable fonts. What are they, how do they differ from regular fonts, and how can they help in the design and performance\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/jason-pamental-200px.jpg?fit=200%2C200&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\\\/#mainImage\",\"width\":200,\"height\":200},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\\\/#mainImage\"},\"datePublished\":\"2019-12-18T04:19:19-07:00\",\"dateModified\":\"2019-12-18T04:19:19-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? | Design for Immersive Technologies","description":"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? Drew McLellan 2019-12-17T05:00:00+00:002019-12-18T11:07:29+00:00In this episode of the Smashing Podcast, we\u2019re talking about variable fonts. What are they, how do they differ from regular fonts, and how can they help in the design and performance","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/#article","name":"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? | Design for Immersive Technologies","headline":"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/jason-pamental-200px.jpg?fit=200%2C200&ssl=1","width":200,"height":200},"datePublished":"2019-12-18T04:19:19-07:00","dateModified":"2019-12-18T04:19:19-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/#listItem","name":"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/#listItem","position":3,"name":"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/","name":"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? | Design for Immersive Technologies","description":"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? Drew McLellan 2019-12-17T05:00:00+00:002019-12-18T11:07:29+00:00In this episode of the Smashing Podcast, we\u2019re talking about variable fonts. What are they, how do they differ from regular fonts, and how can they help in the design and performance","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/jason-pamental-200px.jpg?fit=200%2C200&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/#mainImage","width":200,"height":200},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/#mainImage"},"datePublished":"2019-12-18T04:19:19-07:00","dateModified":"2019-12-18T04:19:19-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? | Design for Immersive Technologies","og:description":"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? Drew McLellan 2019-12-17T05:00:00+00:002019-12-18T11:07:29+00:00In this episode of the Smashing Podcast, we\u2019re talking about variable fonts. What are they, how do they differ from regular fonts, and how can they help in the design and performance","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/","article:published_time":"2019-12-18T11:19:19+00:00","article:modified_time":"2019-12-18T11:19:19+00:00","twitter:card":"summary","twitter:title":"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? | Design for Immersive Technologies","twitter:description":"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts? Drew McLellan 2019-12-17T05:00:00+00:002019-12-18T11:07:29+00:00In this episode of the Smashing Podcast, we\u2019re talking about variable fonts. What are they, how do they differ from regular fonts, and how can they help in the design and performance"},"aioseo_meta_data":{"post_id":"74438","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 16:12:03","updated":"2026-09-02 18:20:07","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tSmashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Smashing Podcast Episode 5 With Jason Pamental: What Are Variable Fonts?","link":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-5-with-jason-pamental-what-are-variable-fonts\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-jmC","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/jason-pamental-200px.jpg?fit=200%2C200&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/74438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=74438"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/74438\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/74439"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=74438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=74438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=74438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}