 Yeah, hi. My name is Carl. I'm a product designer. Actually, my discipline is product design, but the content web is something that I've been fascinated with, like since I since I got into web design and the topic for today as well as something which I am very, very passionate about. So so I'm assuming you can see my screen. And you can hear me loud and clear. So welcome, everyone. Welcome again to this session on web typography. So I have a lot to kind of cover today. And I've kind of, you know, going to really limit myself to 25 minutes I really don't want to, you know, stretch it beyond that. So, there's a lot of stuff as you can see that that I'll try to cover, but I really, I really want to spend time, mostly on sections three and four, which is I think the reason why, you know, most of you have joined today. I'm thinking about type a selection, and also the whole issue of licensing and deploying fonts, right on the web, which which is something I think we don't really speak about too much. So let's spend more time on those two sections I'm going to kind of breeze through the first two. But I think, you know, it's kind of important that we talk about them because in a topic like this, it's always good to start with why. We can discuss about fonts and why this session. What is so special about typography on the web. Many of you may have probably read this seminal article from Oliver Eikonstein. It was written many years ago in which he says, you know, 95% of the information on the internet is written language 95% right. The article was kind of written many years ago. So you could you could probably say that well we have you know flicker and we have Instagram and YouTube, right. So does this still hold water, you know, is it still 95%. I would kind of agree and say yes, maybe not 95% maybe lesser, but definitely in the context of the content web, which is the space that we are talking about here. Right. So the content that is e-commerce sites and content heavy websites, marketing sites, you know, blogs, news sites within this particular space, I think definitely 95% of it of design is typography. And if you look at the actual, you know, the purpose of typography, you know, he says in the same article Oliver writes, we have one duty as designers and that is to convey what the site is trying to say like convey information and writing. And if you're not doing that, you know, with your fancy fonts or whatever you, you know, you plan to do. You know, your site or you know your blog is without purpose. Right. So we just have one duty. And the second thing I would say is that since, you know, 95% of the web is typography. Then we need to take it a bit more seriously. Right. And a lot of brands, I think, almost all the brands today, the big ones have kind of understood that typography is in essence, a core extension of your brand's visual identity. Right. I mean, if you think about it, there are just so few vectors on which, you know, you can differentiate your brand from another brand, you know, you have color, you have typography. You have, you have to some extent, you have white space and layout and margins and padding and that, and that sort of stuff. And maybe I would say also like, you know, your aesthetic, you know, your aesthetic largesies like your style of illustration, or, you know, the way that you treat photography and stuff like that. But just a handful of vectors and typography is one of the most important ones. So the big tech companies realized this, I think many years ago, Google in 2015 announced that they were working on their own typeface family internal one. They started off as Roboto, I think now it's they call it products. It's used everywhere all across, you know, their whole ecosystem, same with Apple, Apple started with San Francisco. And now they have New York, which is their Serif display face, again used all over the place. And it was just a matter of time before, you know, all the other guys jumped in that Netflix and Airbnb and all the rest. And Netflix uses Netflix, which is their own custom face, you know, everywhere from the billboards and Times Square, you know, to, you know, your consoles that you actually watch Netflix on at home. Same with Airbnb. I don't know how many of you remember this particular one? Hamza, maybe you do. This was a microsite called Lost World's Fez, again, Trump 2010. So the story here is that Typekit at that time was one of the leading, you know, players for typography. They commissioned this website as their way of saying like, you know, look, we have these hundreds and thousands of typefaces, you know, see what we can do with it. And I think they commissioned Jason Santamaria for this particular page. But essentially, you know, they were saying, 10 years ago, you know, this is what we could do. This is like literally 10 years old and if you look at the site, all of that text there is actually selectable, which was a big deal, you know, given 10 years ago, the kind of spotty support that we had for web fonts in terms of browsers. So what I'm trying to say is that imagine if we could do this, you know, 10 years ago with web fonts, imagine like the possibilities we have today, the possibilities open to any brand. But it wasn't always like that. The kind of widespread adoption that we have today, it wasn't always the case. It was very different sometime back. And I'm really kind of, you know, going to breeze through this part because, you know, all the designers, you know, starting with web design today, you guys don't have to really bother about any of this stuff, because today you just use font face and everything just works. Anyone remembers the time of website font stacks. It was absurd to think about this, you know, I can only use the fonts that ship with my OS. Oh my God, you know, so if you if you're on Windows, you had Georgia, you had Times New Roman, and, you know, a few others, if you were in Mac OS, you had, you know, Helvetica and just a few others. Nothing else. That's all you could use. But then, you know, being designers, we started kind of, you know, getting antsy about it and he said what else can we do and someone said let's use images. So we started image replacement. So that was a thing for some time but then, you know, with that, we quickly realized again that updating the site is so tedious. I need to go back into Photoshop, you know, typeset the text there create a slice update myself. It is a real pain. So how could we automate that someone said, let's use flabs. So, which kind of solve it to some extent. But now it brought in a lot more problems because now you needed both flash and JavaScript right as if JavaScript was not enough. And I needed flash to. And obviously it had, you know, adverse effects on performance. I think the main reason this particular method didn't take off was because the foundries and the designers could never sort out the licensing issue so you know people was sharing these SWF files all over the place. They were just being freely downloaded and and everyone was just like totally misusing it. So this never really took off. So all these methods I'm sharing, you know, I've actually used at some point of time. I'm sure so we can others use them. I'm so maybe you have to. This was I think the last one before we got to web fonts. This was like people saying, you know, let's check the flash. Just use JavaScript. And so we had these font maps or if you look at this year, you have something called, you know, a font map. So people you should take fonts generate, you know, for font maps out of them as JavaScript objects, and then render that on a canvas element. So again, a lot of complex processing you couldn't use it for a lot of text. And the licensing was still kind of a bit, you know, sketchy. So long story short, it has taken us as an industry 10 long years to transition from what we started off with web safe funds to where we are today web funds, 10 long years. And today it's just this literally anyone, you know, any designer can just go to something like a Google fonts, you know, copy paste that code from there, you know, just make a font family declaration in your CSS, you know, font family XYZ and it just works. Right, it's selectable it's copyable. You don't need JavaScript anymore it's it's fully accessible. And we kind of have, you know, consensus in terms of licensing. You know, the found reason and stuff have got, you know, have got licensing covered now. So this is the way forward that so we talk about licensing in the last section. In terms of formats. We have many that we used to use before. So, if you remember font phase declarations like even from four or five years ago we had to actually serve all of these four different variants, depending on what, you know, devices are users had. TTF and TTF are like the desktop versions desktop font formats. You know Internet Explorer being Internet Explorer they said no we need our own format so that's your key for you. Then you had SVG which was for mobile users so I'm not going to you know get into details with all of this again. If at all you know any of you are interested we could maybe cover this during Q&A. But today you know it's safe to say that we have web open font format. And that's the that's the path forward the W3C and the other kind of governing bodies have more or less agreed that this is what everyone should use and the browser support is very, very good for these two as well. So today you just basically need to use, you know, one of these two. So, now that we've kind of got a little context about, you know what these fonts are, and we have these hundreds and thousands of fonts available at our disposal. So how do we actually go about using them how do we select them, you know how do we go about with type setting. They have been books written about the subject. And I really don't want to, you know, get into details here. I'm going to try to keep it like broad at a high level, and keep it to the context of the content. So I'd say from my experience, keep it simple and just start off with a body face and a display face. Simple body face display face. So what is a body face and a display face you might ask. So it's kind of simple so these are some examples of body faces right so what are body faces, any typeface which is meant to be used it's designed in such a way that it works really well at small sizes is a body face. Okay how small 18 pixels and lower 20 pixels and lower right for the internet something or something in that range 80 to 20 anything below that is a body face. So here you have three of my favorites, you know, from different boundaries. So you might you might ask you know what makes what make these good body faces, they have certain characteristics that you can look out for. Again, I don't want to you know I can geek about this for like an hour, but I have to restrain myself in the interest of time. But a few things to look out for when you're when you're trying to identify a body face. The first thing you can see is here you can see the lowercase a so there's something called X height. How tall are your lowercase letters compared to your ascenders so L isn't ascender it has an ascender here. You can see the a is over 50% as tall as you know the L. So that means it has a large X height, any typeface that has a large X height is good, you know, at small sizes. That means if you make, you know this particular font at 14 pixels or 16 pixels. It's going to be legible it's going to be readable. You have something called apertures if you can see here. There is a wide gap between the, you know, between the endings of the E, which means again if you make the E very small, it will be discernible as an E and it's not like some other alphabet. So that's an example of wide apertures you have something called counters. If they're small, you know it's not readable at small sizes you need something like this, a large O, you know very round, almost geometric kind of O, which works well at small sizes. So here I just taken Kohinoor as an example of a non-latin face, this is a Dev Nagri face, there is something called stroke contrast, okay. Does the thickness of the stroke vary as you go over the letter. So as you see here, it's kind of very, very uniform. So this is an example of an unmodulated face, there is no kind of difference in thickness. So any face with low contrast works well at small sizes. You'll see what some of these things mean when I show you display faces and how different they are. So keep in mind all the things that I just said, and kind of compare it with this. You saw Elena from process type, you know, large X height and low contrast, this is an example of high contrast. So this is play fair display, I mean, the name itself says it's a display face. So if you look at the E here, the horizontal bar on the E is razor thin, you know, compared to the rest here, it's like super thick, right. If you look at the horizontal bar on the F, compare that with how meaty and how kind of, you know, almost like a bulb the same for all the, all the rest of the, of the other bits, there is like such a contrast between certain strokes. So imagine if you, if you, if you type set a whole paragraph of this at 14 pixels or 16 pixels using play fair display, you'll almost kind of see waves on your paragraph, you know, because it's like big stroke, thin stroke, big stroke, thin stroke, you know, you can almost see like waves. And it's kind of very distracting, right, and it doesn't really read well. So, you know, any typeface with, you know, high stroke contrast is not a good choice for small sizes, it's only to be used at large sizes like 48 pixels 64 pixels, you know, large sizes. These are, these are not display faces, they are meant to be used only at large sizes. Similarly, for the E, look at this gap here. It's super thin, you know, if you compare it to this E from Tisa and look at the E from Avangar. If you make this E like 14 pixels, it will look like an O with a dash through it, you know, it won't even look like an E. Similarly here, you know, at small sizes, this, this will read Uber instead of copper, because again the sea, the aperture of the sea will almost kind of touch at like 14 pixels 12 pixels. And of course it goes without saying no like brush script or display face of this nature should ever be used for body text, it's only meant to be used at display sizes. So the moment you see like any sort of decorative typeface, like, like a script face or a brush face, or a black letter typeface, it's, you know, you only use that at large sizes, never at small sizes. So you don't have to remember all of this stuff, you know, you don't have to be a type geek to understand and apply all of these things you don't have to remember what is an aperture, you know, what is stroke width. If you're confused about a particular face, you can, you know, most likely head to the website. So if you're if you're taking something from Google fonts, just head over to Google fonts, you know, and read a bit about the typeface. The foundry and the designer or the designer will always have at least a small description talking about what is the intended usage of this face. So they will, they will most majority of the times they stated very clearly. Okay, so if you look at some of these here. So these are just random typefaces I took from my fonts. So if you look at us, it says humanist open counters. So when you when you read terms like that, you know, humanist open counters low contrast, you know, at once it's a body face. That means it works well at small sizes. Right. But in some other cases, the designer or the foundry may explicitly say display face. Right. So Gilroy explicitly says suited for graphic design and any display use Very rarely, you have typefaces that work well at large sizes and at small sizes. So signal is one in which they say, you know, charismatic typeface or headlines, but it also has an X height and open counters. Right. So this is kind of like an exception. But I mean we can talk about this, you know, in detail, probably later. But most of the times majority of the times it will be very clear what it's used for. I'm going to move on to the next bit. So display versus body is like the basic question that you can start off with, but there are other things that you can consider when you are selecting a typefaces. Right. Starting with the nature of your side content itself. Right. Let's say you're designing a site for something like the New York Times. Okay, where in which your content is authoritative right they have a reputation as being authoritative, they present facts. And it's a new site so you know it is concerned with things that happened in the past. And these three attributes are closely associated with set of faces, which is why you see the New York Times uses mostly set of faces on their website. So contrast that with something like Daring Fireball. So this is one of the leading tech blogs. You know, they focus mostly around Apple news, one of the leading tech blogs. So it is run by one person, John Grubber. So his writing style is a lot more informal, you know, it's, it's a lot more opinion pieces. And that's the subject matter itself is modern right it's it's Apple it's tech stuff, which makes a sunset if a better choice for a site like that. So do you have like two different sites, you know, using two different types of typefaces, depending on the subject matter, other considerations. Do I just need Latin characters, or do I need something else do I need to agree. Do I need Arabic characters. So a lot of times that might determine what typeface you end up choosing. Right. So even if you're, if you're using something free, like, like from Google funds, right, it's still affects your decision. Like weights and variants is another thing. Right. You'll be surprised to see how many free funds actually shipped with only like one bull face, or maybe one italic face, right, which is okay for like, you know, if you're using it for something casual. But if you're if you're doing something like editorial work or you're really, you know, you really need like a full range of weights like you need a hairline and extra thin, you know, or a semi bold or a black and an ultra and those kind of weights. You know, looking for a paid typeface is what I would say. Right. So availability of weights and variants also sometimes, you know, makes is something to consider. And of course, if you need fancy stuff like authentic small caps, or you need, you know, swash swashes, right, or you need legatures, authentic legatures. So all these are open type features which again, a lot of funds you'll be surprised that a lot of funds don't actually have these a lot of web funds. Okay. The desktop variants may have them but you know the web funds, they might just strip it out from the web funds. Other other small nuances to consider. Okay, so these are like super, you know, nuanced but worth mentioning. If you're designing a site for a particular philosophy or a cause. Okay, so out of curiosity, I just went to black lives matter, you know, some weeks back just curious to see what typeface they use and who designed it. Third, it is not a black designer. It's a white dude. But I'm just saying that if I designed, you know, website for something like this, you know, the least I would do is at least research, you know, typeface designers or type foundries, you know, started by, you know, black designers. Like Darden Studio is a very famous example. They've created typefaces used by, you know, I think President Obama and his campaigns. So, you know, I'd maybe use something like that, at least. If you're creating a website like maybe talking about like feminine poets, you know, or something of that sort, at least select, you know, a typeface designed by a woman. If you're creating something solely for an Indian audience, right, at least consider using a typeface designed by an Indian designer, at least by an Indian foundry. And I think it is doing an excellent job here. So it is, I think, based out of Ahmedabad. If I'm not mistaken, but they have like a big collection of very, very high quality typefaces in Dev Nagri, Tamil, Malayalam, all of these, you know, Indian scripts. So first, the last nuance that you might want to consider is of course cost and the licensing model. So, I mean, I totally understand this is not technically a nuance sometimes cost trumps all the other factors, right, especially if you're working on a site for a client and you know they really don't have the budget to pay for funds, then this this kind of consideration may trump all the others. So let's segue to the last, you know, section of what I wanted to talk about which is licensing and deploying weapons. So how do you actually go about with this. So given the whole history of weapons, and the long path that we've taken that I just talked about. So today we've kind of arrived at two camps with respect to licensing and deploying. On the one hand, you have the self hosted model, which is basically the foundry saying, you know, here you go, here are your funds. You know, you have to deploy them yourself, right, we just give you the funds. And on the other side, you have the managed model, which is the Google funds and the Adobe funds, which basically they handle the whole, you know, licensing aspect of it and the deployment. Both are handled, you know, in a managed model. So I'll talk about this in a bit detail a bit later. But I kind of just want to show you where you could go about, you know, getting some of these from. So in the first bucket, like the self hosted, you know, bucket. If you're looking for funds to buy and host yourself. You just head out directly to the foundry website, like most of the good foundries today sell websites on their own stores. So you sell funds on their own, on their own stores. So if you look at like claim type foundry or type together, you know, itf dalton mark, all of them have their own stores, you can just go there and purchase the web funds directly from them. Or you could go to marketplaces like my fonts or font shop or fonts.com. So here you have typefaces in a retail phases from hundreds of foundries in one place so they make it a lot more convenient for you. But in either case, you still have to deploy them yourself. Okay, they just give you the funds. If you contrast that with the managed model that I was that I just was talking about earlier. So here you essentially pay a recurring cost. And that cost covers both the licensing aspect of it and the hosting aspect of it. Okay, so something like Google fonts, which is free, but you know some of these other ones are paid. So Adobe fonts is the one that I personally use for my own sites and all my hobby projects. So here is one I discovered very recently. Heffler has, you know, bad typography, and then there are a few others. So and in either way, whether you go with the self hosted, you know, model or you go with the managed model. Or the other marketplace will always give you a chance to actually try out your typeface. Okay, that's something I recommend very, very highly, especially if you're putting down money or your client is putting down money for a typeface or for a web font. Make sure that you actually try it out. So this is, I think, font shop, they have a very nice UI for letting you test out, you know, your web fonts. So here you can see you can try out different weights, different variants, different sizes. You can change your alignment, you can change your line height, thickness. So you can really test and see, does this work at body sizes? Does this work at display sizes? That is a good fit for my site. You know, before you, you know, put down money for it. That's something I highly recommend. So don't look at, you know, just the renders that you see on the, on the Foundry websites, you know, those are not created, you know, on the web, those are created in design tools. So actually test it out. And I just want to end with one last slide with practical kind of costing. So again, this is taken from my own experience using some of these fonts. I found this one typeface called Soleil from type together, which I actually found they sell on three different, you know, places with three different models, right, all the three that we just talked about type together actually sells, you know, this family on three different places. So I just considered two weights, the book and the board weight. And this would probably give you a sense of how much to expect in terms of costing, right, if you're looking at paid fonts. So, you know, type together sells Soleil on their own website under a perpetual model. Okay, so what does that mean. It means that you can pay 7000 Indian rupees one time. They give you a perpetual license to Soleil, which means it's yours to keep forever, but you are limited to 10,000 visitors a month on your website. So that's it 7000 rupees one time, but you're but you're limited to 10,000 visitors a month. So the moment your site, you know, consistently exceeds like you know 12,000 or 15,000, you have to go back to them and and renegotiate, you know, a license with them. The same two weights, book and board of Soleil type together sell on my fonts under a pay as you go model. So that's a bit different. So how does that work pay as you go is literally you pay 6800 on my fonts, but they don't care how much traffic your site gets here you pay for 250,000 page views in total. Okay, so the difference is here you're paying for 10,000 views a month here you're paying for 250,000 in total. So the pay as you go model is actually better for low traffic sites on new sites. Okay, so consider you're doing a brand new website for a client like it's a new domain name it's a new website, you have no idea of how much traffic you're going to get. The pay as you go model. Okay, so the first month you may get like 5000 page views, second month 10,000 third month 15,000. It will still take you many months to hit 250,000. By that time, you will have a sense of what is the average traffic that my website gets. And then you can probably go in for a perpetual license which makes more sense, you know, in the long run. Okay, the perpetual one is built for steady traffic sites in which you have a good idea of what is my average traffic every month. Compared to these two you have the subscription model, which is what the one I use currently with the Doby fonts. So the good part of this is that you don't just get so laybook and board you get 1000s of other typefaces as part of a library, like literally 1000s more. Okay, again, do not care about your page views, it's unmetered. But the only thing is that it's a recurring cost. So I pay something like 4800 every year. You can also pay it on a monthly basis. But I mean it's good for personal sites, it's good for hobbyists like I'm always tinkering with, you know, the web funds and my projects and on my sites. So it makes a lot more sense for me. But this is a recurring cost. So I mean, I'll just leave it at that. You are probably the best judge of, you know, what your particular project gets in terms of traffic, you know, and other requirements, but these are just the three models, you know, models that you can use. And this is how they kind of, you know, differ in terms of cost. So depending on your traffic depending on what you're using it for, you know, you can make a decision.