Can someone who is well-versed in Witcher lore confirm or deny whether Geralt has albinism? He is listed on the wiki page for characters with albinsim, but seeing as every character with albinism that I know of isnt included, I dont trust the list very much…

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-17T07:36:22+00:00

In this episode of the Smashing Podcast, we’re 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.

Show Notes

Weekly update:

Brand Illustration Systems: Drawing A Strong Visual Identity

Struggling To Get A Handle On Traffic Surges

Building A CSS Layout: Live Stream With Rachel Andrew

Web Design And Development Advent Roundup For 2019

Should Your Portfolio Site Be A PWA?

Variable Fonts

Find Jason on the web at rwt.io

Web Typography News newsletter

Variable Fonts: What web authors need to know

Ellen Lupton’s book Thinking with Type

Erik Spiekermann’s book Stop Stealing Sheep & Find Out how Type Works

Transcript

Drew McLellan: He’s 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’s spoken with organizations like Adobe, Audible, Condé 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’s 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?

Jason Pamental:I’m smashing. Especially after that intro.

Drew: I wanted to talk with you today obviously about web typography because that’s 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’ll be the first to admit I’m 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’ve had usable web fonts on the web for probably about a decade now. Is that right?

Jason:Yeah. Actually, wasn’t it you that started something on Twitter a couple days ago? It was like November 9th in 2009. It’s 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’s 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’d always loved typography when I’d studied it in school, but we couldn’t do anything with it on the web for 15 years. That was pretty amazing.

Drew: 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.

Jason:Yeah, it’s true. Nobody without that experience had to push the pixels uphill in both directions like we did growing up. We’re 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.

Drew: 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’s 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?

Jason: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 “traditional” 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’re using it for body copy, you’re 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.

Jason:So typically, what we’ve done over the years is constrain ourselves to using that very small number of fonts, which is actually not particularly great typography practice. It’s 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’ve 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’s 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.

Jason:So by only storing the differences, you don’t have to store the whole outline. It’s a much more efficient format. While it’s not as small as a single font file, it’s 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’s for really, really complete character sets. Most people could use a subset of that and get it even smaller. I’ve generally been seeing those file sizes around 50 to 100K for a typical Western language website need. That’s not that different from loading… Once you load three or four individual font files, you’re probably loading more data than that. It’s 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.

Drew: So it’s almost like delivering the recipe rather than the meal. Rather than here’s the italic version, here’s the bold version. It’s like, “Here’s the regular version and to make it italic, you would do this, to make it bold, you would do that.” That reduces the file size that goes down over the wire.

Jason:Yeah. Well, in a way, it’s giving you all the ingredients and then you can make any recipe you want. Because you could really go everywhere from… 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’s all kinds of different things that you can do for better typography, better user experience, all the while getting better performance. That’s the gatekeeper.

Drew: So there’s 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?

Jason: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’re 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’re 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’s set at that roughly 16 pixel size or whatever we’re 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.

Jason:But again, it’s 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’m 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.

Drew: One thing I’ve noticed implementing designs as a front end and implementing designs that I’ve 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?

Jason:Absolutely. That’s 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’s little things that you can adjust in the typography. The media query is dropped dead simple. I mean, it’s like two lines of code to add that to your site. Then it’s what you do with that. It’s not necessarily just inverting the colors. Sometimes you need to adjust for contrast, but also tweak the type itself for better legibility.

Drew: So presumably, it’s not just weight that can be varied in a variable font. There are other ways we can change our font as displayed?

Jason:Yeah. It’s completely up to the type designer. I think it’s 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’s 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’s also the ability to have what are called registered axes. There’s 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’ve actually seen ones with a reverse slant as well as a forward slant. That’s totally open. Italic is generally on or off but not necessarily. You can actually have… 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’s kind of an interesting thing.

Jason:But then there’s the ability to have custom axes. The type designer can define whatever custom axes they want to vary. You’ve 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’s all kinds of things that you can do. It’s really up to the imagination of a type designer. I think we’re only scratching the surface as to what could realistically happen with all those things. It’s all accessible through CSS.

Drew: Yeah. All of these properties can be tweaked just through the normal CSS that you’re 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?

Jason:There’s all kinds of ways you can do it. There’s a small change that you have to make. I’m assuming that we’ll provide a bunch of links to some stuff that will help people kind of play around with this stuff. I mean, I’ve 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’ve 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.

Jason: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’s 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’s fine. You just need to know what normal is and all the fonts are documented. Then with anything other than those two, currently, there’s 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’s kind of like font feature settings. It’s 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.

Jason: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’t load, the browser can still do something with that. Whereas if it doesn’t understand variable fonts, or it doesn’t load, if everything is in font variation settings, then you lose all of the styling information. That’s 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’re likely to encounter in most circumstances. I-11 doesn’t 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’ll avoid any duplicate downloads of assets and it works really well. I have that in production on several sites already.

Drew: I think like many of the sort of more modern web technologies you’re seeing, if there’s 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’s there. It can almost feel to the standard designer or developer who’s just day-to-day getting on with their job and not tracking all the latest downloads. It can seem like it’s come out of nowhere. But I guess this has been bubbling away for quite… I mean, you mentioned the two slightly different implementations that we’re now dealing with. There’s a sort of older and a newer standard for implementing?

Jason:Well, it’s actually not older and newer. They’re both very intentional. I’ll come back to that in a second because it is really worth kind of understanding what the difference is with those. But you’re 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’t know, it was like Safari 12 or something like that.

Jason:But not that long after, we ended up getting support shipped in Firefox, Edge, and Chrome. We’ve actually had browser support for almost two years. But there weren’t a ton of fonts. There’s 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’t 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’re used to.

Jason:In Keynote, for example, there’s not explicit support for variable fonts, but the format does work if there are things like in Tech Sense, again, condensed, light. You’ll 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’re 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’s content. But in the browser, that’s where we’ve 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.

Drew: You mentioned type designers and the font capabilities. There are lots of fonts that are available?

Jason:Well, a lot of people are doing it now. Probably the best and most comprehensive place to go look for them is Nick Sherman’s site, v-fonts.com, v-fonts.com. That’s just a catalog site. It’s rapidly becoming really, really big. There’s more variable fonts coming out all the time now. There’s 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’s 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’s open source. Then there’s tons of commercial ones.

Jason:The cool thing about that is Monotype has released some pretty big ones. But it’s lots of smaller foundries and individual designers that are just kind of leading the way in experimenting with this format. I think that’s really great for design and great for the web that we’re 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’ve really taken the initiative to kind of put some great stuff out there.

Drew: 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?

Jason: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’ve got that. Univers, Frutiger, Avenir, I think those are the ones that they’ve released so far, those four. Those are really kind of core classic brand typefaces. They’re 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’ve been doing some work with TypeTogether. They also have several really great typefaces. I know that one…

Jason:I’ve shown at some of the conferences where I’ve spoken about these things that Adidas has their own too that they’ve 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’s kind of a big deal. That’s been one of the best selling web fonts of all time. It’s happening. It’s 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’s been really incredible on the stuff that he’s been putting out. It’s like $72 for the year or something like that. He’s been putting out all kinds of really beautiful stuff.

Drew: 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.

Jason:Yeah, absolutely. That’s 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’re 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’s already going to be a significant win for them in performance, in page render time and then in actual bandwidth costs for them.

Drew: In practical terms, is it as simple as it sounds, just swapping one out for the other?

Jason: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’t tell anybody. They didn’t 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’s 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’m assuming Open Sans is probably one of those. I know Lato is probably in there, Roboto.

Jason: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’re 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’s really interesting things to learn and explore on kind of both ends of that spectrum.

Drew: 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’ve had been able to do before.

Jason:Well, that’s 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’ve 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’s 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.

Drew: Because you’ve 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’s 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?

Jason:I don’t think it’s bad. I just think it’s going to get boring. I mean, when Medium came out, that was pretty novel. I mean, I think that one column of… Like you say, it was pretty nicely typeset copy. It has nice an area. It wasn’t crowded. It wasn’t cramped and sidebars and all this other stuff. There’s always going to be questions of business model and what will support that. That’s 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.

Jason: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’t 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’s 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’t have one article template. They have six or seven or eight. If you really look at how they lay those things out, there’s a tremendous amount of variability but it is playing within a system.

Jason: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’s no reason why we couldn’t give people a choice. I want to use layout one, two, three, four, five, six. That’s going to introduce different margins, different offsets. Maybe introducing the ability to create some columns. There’s 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.

Drew: Is type our savior when it comes to adding a bit more personality back to the web?

Jason:Well, I think it can be. I think we’ve had this long evolution on the web towards better usability. But I think that one of the casualties there is when all we’re ever concerned about is that utilitarian, is it usable approach? That tends to beat out personality. Then when every single website is… Again, we had web fonts come along and that created a new level of expressiveness that we didn’t have before. Then all of a sudden, we could… 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’ve kind of optimized back to everybody using one or two San-serifs. It’s Open Sans or it’s Roboto or Oswald or whatever. We’re kind of back to the same thing where there are tons of really good, really readable typefaces. We haven’t 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.

Jason: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’s not one or the other. It’s an and. It needs to be.

Drew: Especially when we talk about personality and about tone and mood. From a business point of view or from what we’re 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?

Jason:Absolutely. Not to dive into politics, but I think the whole… One of the major issues that we certainly experienced in the US, and I’m sure it’s 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’s no distinction of voice. So it’s something like 75% of adults in the US say that they get a significant portion of their news from Facebook. I mean, let’s set aside just how generally horrifying that is. But given that everything is presented uniformly, there’s no difference between an article from The Guardian, to New York Times, The Wall Street Journal, The Washington Post, and Joe’s right wing news. It’s all presented exactly the same.

Jason: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’s this automatic association with that brand and that authenticity. When you strip all of that away, you’re left with, “Okay, I’m going to evaluate this on a headline. Then it’s on, who wrote a better headline? That’s 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’m not really sure they’re 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’re reading.

Jason:I think that’s important. I think it’s not something to be taken lightly.

Drew: Thinking back to RSS readers in days gone past, the same sort of problems we were seeing then where everyone’s 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.

Jason:Yeah. It’s true. I don’t think that’s 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’s a reason why that that doesn’t 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.

Drew: So say I’m a designer. I’m working in a small agency. I’m turning out designs for all sorts of different clients. I look at my work. I think, “This is all good. This is readable, but it’s got no personality in it.” 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’ve sort of conditioned myself to use?

Jason:Well, I think the thing to do is if you’ve never studied typography, you haven’t 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’ll recommend, and actually, I wrote about this a few weeks ago because I kept getting asked like, “Where do you start?” I made a list of books that I think are really helpful. So something like Ellen Lupton’s book, Thinking with Type is a fantastic introduction to looking at type and seeing it. Erik Spiekermann’s book, Stop Stealing Sheep is a great one although I think at the moment, it’s out of print. I think that he might be working on another edition but that’s so… If you find that one, that’s a good one as well.

Jason: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’s 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’s not necessarily a bad thing. It’s certainly better now if you’re working with a variable font and you can be that much more varied.

Jason: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.

Drew: So I think there’s a lot of reading to be done. I’m sure we’ll add some links to the show notes of all the excellent articles you’ve written up and some references to these books and what have you. Because I think there’s so much to learn. I think we’ve always got to be learning with these things. The learning never ends.

Jason:It’s true. It is true. That is something that I’ve enjoyed immensely when I started writing this newsletter. Every week when I’m writing it, I’m reading more of the specs. I’m reading more of what other people have discovered and written. There’s 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’s always been kind of the most scholarly of authors about this stuff. I mean, he’s really tremendously thoughtful in the way he puts those things together. But there’s 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.

Drew: Is there anything in particular that you’ve been learning lately?

Jason:The stuff that I’ve been learning the most is actually the corners of the specs. I think it’s something that… I mean, again, probably the biggest influence for me on that is probably Rachel [Andrew]. That she’s always talking about like, “Well, if you actually read what’s written here, there’s actually really good stuff to know.” So in reading exactly what the specs are, there’s 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’ve been learning every week. Even having been doing this stuff for 25 years, there’s still like a new gem every time I dig into one of these things.

Drew: That’s 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’s @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?

Jason:Yeah, experiment. I mean, there’s 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’ll 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’s great that you have a design system that standardizes things, but it’s then like any good design where you break that rule. That’s where the exciting things really happen. So we’ve gotten this necessary evolution of like getting really good at the system. Now we’ve got to break it some. That’s when we can get excited again. Break the rules. That’s my best advice, I think.

(dm, ra, il)

7 Things You Need To Know About SEO 2019 Today

SEO is about growing naturally, and also to develop a good effective, organic online marketing program, it's important to not just look at SEO, but content material marketing and social media, as well. Search engine marketing (SEO) could be the process of impacting the online visibility of the particular website or a web web page in a web search motor 's unpaid results—often known since "natural", " organic ", or even "earned" results. Seo (SEO) is a procedure of improving positions in natural (non-paid) search results searching motors. Some other SEO ranking factors include: obtainable URLs, domain age (older is usually usually better), page speed, cellular friendliness, business information, and specialized SEO. Your own search engine optimization strategy can end up being divided into two different classes: on-page SEO and off-page SEARCH ENGINE OPTIMIZATION. When you familiarize yourself with this neighborhood, you will inevitably stumble your own way onto the websites associated with SEO Gurus” selling courses that will teach you SEO for hundreds of dollars. Expert SEO writers can also make use of modifiers and keyword variations in order to further optimize the content. Within a lot associated with cases, this happens as the consequence of non-ethical SEO particularly buying and selling links which usually could get you up the particular Google ‘adder' quickly. Content is definitely key but content alone is definitely no longer king; content, framework, and relevance will drive efficiency of content and digital marketing and advertising, and SEO is part yet not full parcel. Ultimate WordPress SEARCH ENGINE OPTIMIZATION Guide for Beginners (Step simply by Step) — 28% of web sites on the internet use Wp. SEO is usually abused as a blanket term intended for digital marketing. Ranking elements can be divided into on-page SEO factors (including technical SEO) and link building or off-page SEO factors. Take the 10 pillar subjects you came up with within Step one and create the web page for each one particular which outlines the topic with a high level - making use of the long-tail keywords you emerged plan for each cluster within Step 2. A pillar web page on SEO, for instance, may describe SEO in brief areas that introduce keyword research, picture optimization, SEO strategy, and additional subtopics as they are discovered. On our blog all of us chronicle current trends in on the web marketing and SEO and current interesting studies, statistics and developments. Increased site usability - Within an effort to make your own site easier to navigate with regard to the search engines, SEO concurrently helps to make your internet site more navigable for users simply because well. You are capable to host your video upon YouTube for that foundational SEO greatest practices, but link and high light the embedded video on your own own website. Image SEO is actually a crucial part of SEARCH ENGINE OPTIMIZATION different types of websites. Max DesMarais is definitely an SEO and PPC Specialist for Vital, some sort of Digital Marketing & PPC organization that specializes in PPC administration services. But this also has an incredible roundabout benefit to your bottom range: boosting your search engine marketing (SEO). It may be the circumstance (and I surmise this) how the introduction of a certain SEARCH ENGINE OPTIMIZATION technique initially artificially raised your own rankings for the pages within a way that Google's methods tend not to approve of, and as soon as that is actually spread out all through your site, traffic starts in order to deteriorate or is slammed inside a future algorithm update. If your business does not have SEARCH ENGINE OPTIMIZATION Internet marketing strategies, she or even he will need help through SEO experts. One of the particular most commonly asked questions, White colored hat SEO in layman's vocabulary is applying the right methods along with a legal strategy to boost your ranking plus increase your popularity. To help the client's future-proof their businesses plus maximize online Return on Investment decision (ROI), we have individuals the global partners to develop a good SEO methodology that aligns along with Google's recommended best practices. Off-page SEO will assist make your website most well-known and visible on the internet, so you can get even more traffic and users for your own website and product. You might be the proprietor of a growing and growing business, the webmaster of the dozen sites, the SEO professional inside a Web agency or the DIY SEO ninja passionate regarding the mechanics of Search: this particular guide is meant for a person. On their business blog, Demand Wave also offers a great article about 2016's tops trends in B2B electronic marketing and SEO. Why don't explore some roles that interpersonal media plays in SEO. You will craft your own SEO strategy around the key phrases that will lead customers in order to your most profitable products. Google for example, states that will the no follow link become taken literally as well because the link will not become followed at all however within reports done for SEO reasons it shows some conflict in order to this. For blog websites the greatest SEO practice would be in order to set the title of your own post in a heading1 label. Search engines is the gatekeeper to enormous amounts of traffic and prospects - search engine optimization (SEO) opens the doors. Mainly because long as they are gained naturally, inbound links are most likely the most dependable authority contractors in the world of SEARCH ENGINE OPTIMIZATION. All of us call this new methodology AdaptiveSEO so that as its title suggests, it is made in order to adapt to the evolving plus sometimes unexpected changes in research algorithms. Several get confused in this region of SEO article writing suggestions for either they in place too little or maybe the particular wrong kind of keywords, or even they mention the keyword method too much which is occasionally called keyword over stuffing. Social SEARCH ENGINE OPTIMIZATION isn't a separate branch associated with SEO and it won't quickly be replacing traditional SEO, yet social signals are becoming significantly incorporated into search engine methods. Perhaps the particular most important aspect of research engine optimization is how a person can actually leverage SEO in order to assist drive more relevant visitors, leads, and sales for your own business. Just browse through the various types of our SEO blog site to find those important on-page ranking factors. According to him, key phrases have already lost their significance and in 2019 this tendency would only get stronger. Seo (SEO) is definitely the most efficient way in order to drive traffic to your internet site. An SEO on the web marketing strategy is a extensive plan to get more individuals to your website through lookup engines. A few search optimizers try to key Google by using aggressive strategies that go beyond the fundamental SEO techniques. Subscribe to the particular Single Grain blog now with regard to the latest content on SEARCH ENGINE OPTIMIZATION, PPC, paid social, and the particular future of internet marketing. SEO can furthermore stand for search engine optimizer. Like the rest of the particular digital landscape, SEO marketing is usually continuously evolving. Search Engine Book — Read information right after Moz's guide to solidify knowing regarding it of the basic elements of SEO. If a person do not have the period or have insufficient training upon web design or SEO, Appear for web design experts plus hire a professional SEO services agency to keep your web site and your good reputation in any other case you business may depend upon it. I ended with the website number 1, 228, 570, 060. This particular generates SEO anchor text, which usually helps you in improving your own search engine rankings. SEARCH ENGINE OPTIMIZATION marketing is about the keyword choice that will attract a excellent deal of unique visitors in order to your website. Maybe you have question what will be the brand-new changes and updates that all of us can experience in SEO back links sphere in 2019? A Cisco research found that by 2019, eighty percent of all consumer Web traffic will be from Web video traffic. If might spent time online recently, you might have probably browse the term "SEO, inches or "Search Engine Optimization. Also companies considering about getting Search engine optimisation services should go through these types of magazines to familiarize themselves making use of the latest trends within the particular SEO and web-based marketing sector to allow them to evaluate the assistance offered for all of them from the selected SEO companies. Mobile SEARCH ENGINE OPTIMIZATION in 2018 will probably be all regarding Progressive Web Apps (PWAs). The term SEARCH ENGINE OPTIMIZATION also describes the making internet pages easier for internet lookup engine indexing software, known since "crawlers, " to find, check out, and index your internet site. I feel that technical SEARCH ENGINE OPTIMIZATION mistakes that affect crawl spending budget - and also pollute Search engines with non-SEO-friendly content such since social landing pages, WordPress press archives, offer pages and cloned e-commerce product pages - will certainly have a far more detrimental effect upon sites moving forward. Effective SEO lets you enhance your web​site to exhibit up within search engines. Many of us will get into how in order to pick the best keywords regarding your business later in this particular SEO guide, but it best you to know how in order to use them, as they are usually referenced throughout this section. Despite the fact that meta descriptions are not a new ranking factor for search machines, they do hold value regarding your website and are portion of your SEO presence. Let us speak a bit as to exactly what SEO is before we enter the SEO article writing recommendations for people who may become new or do not very understand it. SEO stands regarding Seo. forty five. Use Google Analytics to calculate social SEO factors like the particular number of owned and beneficial results. The common SEO issue for e-commerce sites is that product evaluation functionality tends to rely upon AJAX, iframes, or subdomains, which usually make it very hard, or even even impossible, for search motors to suit product reviews with item pages. Local SEARCH ENGINE OPTIMIZATION is an effective way in order to market your business online. Intended for more on Squarespace's SEO-friendly features plus how to use them, check out Increasing your site's visibility in order to search engines. For Ecommerce websites, SEO agencies can see which usually paths users take in purchase to complete a sale, most the way down to which usually keyword they used to research for you prior to buying. Continue to increase your SEARCH ENGINE OPTIMIZATION to construct business and drive traffic plus rank for more terms. SEO refers in order to the process of gaining a good impressive rank in search motor listings. Organic SEO is definitely also less costly long-term while you establish search credibility, as very long as you maintain it along with the consistent creation of high quality content and social media utilization. Within the 6th section of our SEO for rookies guide, we will discuss hyperlink building - one of the particular most important aspects of research engine optimization. Search engine optimization can furthermore be known as SEO plus it is defined as the technique or procedure for customizing the website within an efficient and efficient way in purchase to make a good existence on major search engines. It looks generally used in SEO as the general definition for the method that the mathematical detection associated with synonyms, and how certain phrases are related to others inside a piece of text, is used to the indexing of websites by search engines like search engines. So if you would end up being to write 5% for every keyword then your word SEARCH ENGINE OPTIMIZATION and Article will be within the content 75 times every. Like any good SEO company before concentrating on the details will do a proper hyperlink edit and fix all the particular error pages. Taking the hard work to comprehend even the essentials of SEO can help your own site gain higher click-through prices, engagement, and of course, search positions. Kent Lewis, President and Founder of the particular Portland based performance firm, Anvil, predicts that both Amazon lookup Blog9T and voice search will become trends in 2019. MarketingVox warns towards getting tied to a "link farm" whose bad SEO behavior could bring you down. Your web web pages must earn that high rank with high-quality content and best-practice SEO. Content is the 2nd major SEO ranking factor, plus is just as important since links. Previously known because WordPress SEO by Yoast, Yoast SEO is one of the particular most quintessential WordPress plugins whenever it comes to search motor optimization. While SEOs need in order to understand it is not just about rankings, UX specialists require to admit that user encounter kicks in even before making use of the website. You will find on-site and off site SEO techniques that you may use to higher your lookup engine ranking. Over the particular last 20 years SocialSEO provides grown to be the biggest full digital marketing firm within the state of Colorado, offering Social Media, Pay Per Click on and SEO in Denver, Co Springs, Boulder and across the particular State. Lastly, Amazon will dominate ecommerce queries in 2018 via Alexa voice, touch, along with other innovative interfaces, leaving many e-commerce SEOs in order to focus in on the content-side of their marketing. If you could use something like 20 times more chances for internet traffic, three times better benefits than social, and returns upon investment that will only boost over time, SEO must become a priority. Since artificial intelligence search motor optimization is in its preliminary stage, the impact of synthetic intelligence in marketing is heading to be felt in 2019 and 2020. So nearby businesses have to put unique effort into maximizing their SEARCH ENGINE OPTIMIZATION efforts for local visibility, which usually means doing things like enhancing their Google Places pages. All these types of steps are used by the particular company to provide the greatest search engine optimization services in order to its clients in Thailand, below the Thailand SEO concept. Keyword phrases, although it is not being as important to be able to SEO ranking as they when were, still play a significant part. •Social Mass media Optimization - SEO services make use of various means of social press optimization for clients. Lots of people are usually now asking, How will AI and Voice Search impact SEO”? Therefore, cheer up and tools up to policy for SEO- the particular organic top-ranking practice. SEARCH ENGINE OPTIMIZATION (search engine optimization) places your own website within the natural outcomes section of search engines. SEO is specifically important for businesses because it guarantees they're answering their audience's greatest questions on search engines, whilst driving traffic to their items and services. Regarding marketers who were brought upward in the ‘traditional SEO marketplace, ' 2018 is really the time to adapt or perish. White hat SEO includes most the SEO practices we've spoken about so far which have got a long term approach in order to site optimization and focus upon the user experience and exactly what people need. Cost effectiveness - SEO is usually one of the most cost effective marketing strategies because it focuses on users who are actively searching for your products and solutions online. The reality is that you can obtain top Search engine ranking roles spending a little bit associated with money and working on the particular project yourself or paying the professional Seo services thousands associated with dollars to get your Web site on the first page. Although black hat SEARCH ENGINE OPTIMIZATION methods may boost a cyberspace search engine page rank within the short term, these strategies could also get the web site banned from the search motors altogether. According in order to research and advisory firm Forrester, programmatic marketing is expected in order to account for 50% of most advertising by 2019. Right now there are a few fundamentals that will can help boost the technique, but SEO, or seo, is usually hardly ever considered. While employing the services of a great SEO agency can get a person good marketing copy for the particular website and an effective make use of of the related keywords, getting a brilliantly designed website will certainly help a lot when this comes to attracting people plus even the search engines in order to your website. You are able to get into important SEO-related data like the particular page title, description, and key phrases for every page or a person can have the system instantly populate this data depending upon a document name or additional fields. SEO has become broadly adopted as an online marketing and advertising strategy due to the effectiveness. Creating high-quality content along with SEO in your mind through the beginning boosts search presence. In contrast, dark hat SEO is about attempting to take shortcuts and sport search engines. You may also use Google Analytics in order to find SEO keywords for content material optimization. Keyword research is the particular process SEOs value to discover what search queries consumers get into into a search engine regarding a given topic. Within today's rapidly shifting world, SEARCH ENGINE OPTIMIZATION techniques can change on the dime—and the worst part is usually that you might not actually know it. Hacks that can have won you a front-page result as recently as 2016 are not only obsolete today, but they may even harm your website's rankings. Because her business, web traffic, plus customer base grow, Sue may require some outside support with regard to keeping her SEO on observe so she can certainly still sell the particular best shoes on the prevent. Whilst links continue to be essential and it's incredibly difficult in order to rank well without links through other websites, content and on-page SEO has become increasingly essential. For businesses searching to raise their search ranks, what this means is that will a comprehensive social media technique could be in order - within addition to all of the particular usual SEO tactics. Because of protocol changes and the trend in order to more local searches, it actually is no longer an massive cost to implement good SEARCH ENGINE OPTIMIZATION. Whether you're killing it along with SEO, or struggling to split the very first page, a good SEO audit may help give your own rankings a shot within the particular arm. According to web marketing experts, the impact associated with AI and Voice Browse SEARCH ENGINE OPTIMIZATION can be expected in 2019 after that. Gowns it. If you'd like in order to speak to us about a good SEO campaign, or even multilingual SEO marketing and keyword analysis then get in touch associated with just start a live conversation if we're around. Moreover, Google will keep on to elevate the importance associated with usability and technical SEO aspects, for example site security, page rate, mobile friendliness, and navigability. As a consultant, he or she has helped many different businesses—including, Lonely Planet, Zillow, Tower Information, and literally countless medium plus small businesses—with SEO and online-marketing advice. The much better you get at SEO, the particular more traffic - and even more leads - you're likely in order to attract over time. To find out there more read our 2019 developments in SEO marketing report. Are voice searches plus it's expected that by 2019, 67 million voice-assisted devices is definitely going to be in make use of in the U. S. These types of kinds of changes and provide on your website shouldn't become a problem logistically — the particular overall practice among the greatest web companies nowadays is making sure that websites are flexible sufficient, especially for SEO purposes. Whether you are usually a marketer, webmaster or organization owner, it is very significant invest in voice SEO search engine optimization to reap benefits in 2019. We said earlier that cultural media isn't a direct SEARCH ENGINE OPTIMIZATION ranking factor, so you're most likely This Story Behind SEO 2019 Will Haunt You Forever! wondering why we're even talking about it. The particular effects of Black hat SEARCH ENGINE OPTIMIZATION are temporary, it shouldn't take the particular search engine long before this spots these illegal strategies plus then penalizes you; the research engine may spam your hyperlinks and if you continue making use of these malpractices the search motor will altogether block your web site and links. Algorithmic chasers, technical SEOs, plus Google Doodle followers should develop their technical skills to concentrate on emerging voice search systems and AI applications. Single Grain is a electronic marketing agency in order in order to companies like Uber, Amazon plus Salesforce grow their revenues on the internet using SEO and paid marketing. There is definitely no magic wand in your own hands to regulate or manage your competitors' strategies or administration, Google analytics update, or user's behavior communicate business but a person can manage your SEO. In this particular new environment, the digital internet marketer who views SEO in the broader context will definitely come out there ahead of the competition within 2018 and beyond. Good SEO textbooks explain in detail how greatest to use keywords and just how to structure your entire site to attract the attention associated with search engine spiders and associated with human visitors, and a posting such as this cannot perform the topic justice. While businesses begin on an SEO advertising marketing campaign, they should realize that a good entire marketing campaign can drop flat on its face in case a business is unable in order to reach the masses, that will be, their target audience. If your own pages were designed to obtain the most out of Search engines, with commonly known and today outdated SEO techniques chances are usually Google has identified this plus is throttling your rankings within some way. Several business people find keeping upward with the "moving target" associated with SEO distracts them from every day priorities more than they actually imagined, so it's good in order to appear closely at what can make sense for every business. The app process for the SocialSEO Electronic Marketing and SEO Scholarship is definitely done 100% electronically and needs these list of materials. SEO companies are able to track almost every aspect of their technique, like increases in rankings, visitors and conversions. The strategies which were the simplest (reciprocal links or directory submissions) perform not work anymore, therefore the particular SEOs spend a lot associated with time trying different approaches. The particular Moz Pro is another collection of Tools that check the particular important factors related to your own website's search ranking. Selection of key phrases or phrases plays an essential component in an SEO campaign considering that it saves you the photos in the dark. In 2019 the particular digital marketing companies can anticipate a lot of voice queries, and by 2020, about 50 percent of the searches will end up being either voice searches or image-based searches. Read our Mobile SEO 2019 Checklist before you decide in order to implement. This first element of optimizing images is usually including your keywords in the particular image file name (seo_guide. jpg). The inevitable modifications that will occur in SEARCH ENGINE OPTIMIZATION in the near future are usually abolition of keywords stuffing plus spam backlinks, real-time personalized customer support by online marketers, improvement within the quality of visual content material as a result of development of video SEO, optimization associated with websites with conversational keywords plus generating massive quantity of current data. SEARCH ENGINE OPTIMIZATION remains one of the lengthy term marketing strategies that function best for companies that are usually looking to improve their on the internet visibility.