 Let me get into a kind of an icebreaker question, right? So I know there's possibly more people over here that have not paid for fonts than have paid for fonts, right? So it's almost a designer milestone to get a client to pay for a font. So that's, but that first step towards making them pay is an important one. So can you describe like your first experience of actually making a client shut out money for a font and how you convince them? Yeah, so I actually haven't worked with like, you know, agency, like I worked primarily with agencies in the past. So the clients that we had were kind of large companies. So they were typically not like, you know, the smaller smaller size brands. So there was one that I worked on like years ago, it was a project for I think, home center if I'm not mistaken. So there, you know, the audience, the audience is primarily in India, but also in the UAE, like it's primarily a brand from the Middle East. So there we needed, you know, something that had both Latin characters and Arabic characters, right? So I forget which is the exact family we ended up using. But like I said, that was something that simply we could not find, you know, freely available, you know, a good family that had good weights, good variations in both Latin and Arabic. So, you know, paid fonts were the only way to go there. But I think I mean, if you're just looking at like, like the smaller clients or the smaller brands, I can kind of see, like it is a bit difficult to kind of, you know, fit something like fonts into the budget, especially because I think like, you know, the likes of Google fonts and others have really raised the bar also in terms of what you can get for free now. So like, I remember looking at Google fonts way back, you know, comparing it with Typekit, when I started using Typekit, like, and I was like, I was literally appalled by like the quality of typefaces on Google fonts. But they've come a long way. They have like so many excellent, you know, high quality typefaces. Like the one I've used in this deck is a free one from Google fonts called Inter. So as you can see, like it's really, really an excellent typeface. It has so many weights and stuff. So yeah, it is a challenge. I really can't, you know, say more than that. I think that's a good answer where like a good requirement where like a free font just doesn't cut it and especially with multilingual where you want the families to kind of look together. I think that's a good constraint to kind of make that pitch for a paid font as well. So this is a good time to tell the audience that's listening that use a chat box on this window to post any questions that you want to ask. If you're actually asking from, if you're on the Zoom call right now, you can just request that I unmute you and I see Akshath, I'm going to get to you right now. So you can just raise your hand and unmute yourself and directly ask that question once we kind of order it. So Akshath, would you like to ask your second question? Your first question. All right. All right. Perfect. Thank you, Karl. This was such a great presentation. So I actually had two questions. Hamza, is that okay if I ask two questions? Yeah, go for it. Okay. Karl, my first question was, can you talk a little bit about like, you know, one-on-one about what vertical rhythm is? And so I mean, I have seen the difference vertical rhythm makes when using the right fonts and you do it right. The overall, the readability of the page improves a lot and it looks a lot more cleaner. So that's the first question. And the second question I wanted to understand from you is using set of fonts in web applications and like online systems because that's something that I've not seen a lot. So like on a e-commerce website, for example. So the fact that you talked about, you know, set of fonts are more authoritative, they are more fact-oriented, I completely agree with that. But I've not really seen a lot of designers use that for web apps. I've seen a lot of them, a lot of designers use it for like content websites like journalism, journalism articles or blogs and everything else, but not really for web apps and e-commerce sites. Yeah, so the first question about vertical rhythm. I think it makes a big difference in terms of readability for sure. Like you said, it's a question of using I think your CSS wisely and having like like a good, so you start off with a good body size. You decide what your body size will be, like whether that's 18 or 20. And then you decide what is your line height and then everything else is kind of like a factor or multiple of that, like whether it's your padding or whether it's your spacing between paragraphs, all of that stuff. In fact, I also think, I think Hamza is planning a session around something of this sort in the future. So yeah, maybe that's something we can talk about in detail later or maybe Hamza if you want to jump in. But yes, it definitely makes a big difference vertical rhythm and spacing. There was this attempt I think in the web design community many years ago to actually nail this down very precisely, actually with grid lines and stuff. But what I think we realized was with the onset of the responsive web and wits varying all over the place and images needing to resize, it wasn't really practical to have vertical rhythm nailed down on the way you have it in print. Like in print, it is very, very important to have it. And if you look at like any well-designed book, you can actually see the difference your consistent vertical rhythm makes. But I think because the web, by virtue of it being a fluid medium, accessible on devices of different sizes and display qualities, it's a little bit more difficult is what I would say. Hamza, you want to talk about this before I get to the second thing. Sure, I think we are definitely planning a session where we are looking at how once it's kind of like, this is a great segue, Karlstock is a great segue to that session where once you select those typefaces, how do you kind of like size them? What is a system that you follow to kind of make them production level as well as like use them, like if you're not working, if you're not developing the thing yourself, how do you kind of hand that off to a developer as well. So we will be covering that in a future session for sure. And that's going to be, and Karl, thank you. This has laid a great ground for that. Sorry, no, I think Akshath had a second question. So we will be covering that in a future session for sure. Some sort of echo, I think. Yeah, but I think Akshath had a second question which I can maybe also answer regarding serif faces, and why we don't see them a lot in web apps. I think the reason is also partly, like I actually see them a lot in e-commerce sites, but I think by web apps, you mean more like, you know, products like maybe Google analytics or something, you know, really, you know, like an analytics tool or like a fintech tool or something maybe like that is, I assume what you're asking. I think the reason is that again, by virtue of serifs being the more historical of the two, like serifs are a lot older than sans serifs, sans serifs came around a lot later. So by that virtue itself, most of the great type faces, you know, historically speaking, have always been serifs. So they have this air of authority and, you know, this link to the past and this formalness about them, which make them like a better fit for something like a New York Times or a news site or any, even an e-commerce site, like if you're a brand, you know, you're a brand trying to establish trust with your users, right? Or trust with your customer base. Then yes, like definitely, you know, go for something, you know, with a serif, from a serif family. Yeah, that's what I would say. I'm going to ask one, like one question before jumping again to an audience question, which is, I think unlike like what you had mentioned earlier, which is the history of type is not kind of important or we're going to rush through that. I think it's wonderful that you covered it for a couple of reasons because when, first of all, it was very reminiscent of my graphic designer days where we used to speak about lino cut and things like that, that were physical artifacts to type faces, right? But for web, I think this context is really important because it's kind of gearing everything towards the fact that we want to make more performance and more performance and accessible like interfaces. Like so, I think that the fact that we covered that is a great thing for this, for this exercise. So is that a lived history for you? Like you mentioned something about like having experienced that. So is that a lived history for you? And how does that kind of like help you today? Yeah, so if I had to breeze through that because of, you know, time constraints, but maybe I can just go back to, yeah, all this stuff. Like a lot of these things I actually have done before, not image replacement. So this was, I think, this used to happen like 2010 or maybe even earlier. But definitely I have done Flash. This happened, I think this started happening just as I was entering into, you know, web design, just as I was starting out. So Kufon as well. I actually remember, I think it was font squirrel, if I'm not mistaken, font squirrel is to actually allow you to upload any, any, you know, desktop, you know, face, and they would give you like this font map out of it. And, and then, you know, I remember using all of that stuff. So I think, yeah, in terms of just experiencing all of this, I think it, that personally for me, it gives me a better appreciation of the journey that we've had. And just a better appreciation of where we, where we've arrived at, you know, in terms of, as an industry, that today, you know, we can just use, you know, font base, we can just link, you know, to something like a Google fonts, and it just works. And, you know, with all the steps that I think the W3C is taking, right? You know, with the, there's also, I think a CSS module now called fonts, the CSS has its own fonts module, if I'm not mistaken. So they're taking like, you know, typography very seriously. So the future also, you know, looks, looks very bright. Yeah, if you can go to your website font slide, just back a few. I think what's very interesting, because we are moving to more performance interfaces as well, what's very interesting is that these website fonts or OS saved fonts are kind of making a comeback because of how performant they also are, like, where you're kind of like looking, using a source as if declaration font declaration just so that it and this is mostly like a trend that we're seeing more and more in apps and not so much in content websites where they just declaring a source that if so that the entire app looks like it's part of your OS. And so that the native feel of it looks more like that. So it's really nice that while we started with this, it's kind of making going a full circle and maybe making a interesting comeback at least in that app space. So, Pratik, you have a question. Would you like to just unmute yourself and take it? Hey, Pratik. Hi, Carl. Hi, Hamza. Great talk, Carl. I enjoyed it a lot. And yeah, I have two questions. So you started off with Oliver's article about 95% of web design being typography. And then we went through a lot of slides about selecting the right typeface and the variations possible. So I wanted to get your thoughts on how much of typography, web typography, do you think is about getting the typeface right and how much of it is other aspects like Afshad mentioned, vertical rhythm, things like the legibility of the font sizes, the measure, the colors, contrast and so forth. And the second question was on performance. So one of the legacy methods for using typefaces, which was the flash method, Siffer, you pointed out that it would often cause performance issues. And in the current method of using fonts on the web, do we still run into performance issues? Do you have any thoughts about that or tips for avoiding performance issues? Yeah. So with respect to the first question, I think with respect to typography on the web, you can look at it at two levels. You have something called macro typography and something called micro typography. So the macro typography refers to what you started off with, which is selecting typefaces, body typefaces and display typefaces. I would also argue at least like having a line height and vertical rhythm. But then you have also the other side of it, which is micro typography, which is the other small things like using m dashes, the small things that make a difference like that. So I think it's like an even split, I think. So you have to pay attention to the larger issues of what typeface am I using? Does this resonate with the content that I'm using it for? That is a good fit for the brand. Balancing all that on the one hand with also making sure that you nail down, if there is a character, like if you're writing something in French and there's something with a cellular, actually using a cellular, using a typeface that has those characters or those ornaments. So that's all like micro typography that I was talking about. So I think it's like it's a balancing act between both. And yeah, the second one about performance. Yeah, I think with Siffer it had a big effect on performance. But even with web fonts today, I think there is scope for abuse. You can't really just go wild with web fonts. I mean, typically, depending on how many characters you have and what characters that you're using and how many ways you select, I think on an average, the font kit could come up to something like maybe 200 kb, at least from my experience. But if you abuse it, you can even take it up to 900, 800 kb, which then becomes a problem because then obviously these fonts need to be downloaded before they are rendered. And then you have, like we used to have this thing of flash of unstyled text and flash of invisible text and all that kind of stuff. So I think that's another technical consideration which maybe I also omitted. Keep performance in mind and just use a subset of only the characters that you need. So if you're looking at an English kind of website, choose only the Latin character set. Don't go for extended characters. And use only the weights that you need and the styles that you need. Stick to only that and really keep the font kit as light as possible. That's awesome. And I think this kind of segues into my next question also, where you said that like, let's keep it performing. Let's have multiple weights and multiple styles and this still keep it performing. So limit that choice considerably. So what are your thoughts on variable forms, which is now like the new, the future of typography? And maybe you could also like explain that for people who are not aware of it? Yeah, sure. Yeah, so right at the outset, I just want to say that I don't have experience with variable fonts. I haven't actually tested them out myself. But they are kind of, yeah, they kind of fall somewhere in maybe in this slide. So variable fonts, the technology itself is an update on the open type specification. So it's actually like an update on the open type specification. So what this allows is so typically now you have, like, let's say, inter, right? So you would have inter regular, you would have suppose you want inter regular, you want inter semi board, inter board, right? That's three different fonts, right? So if you if you go and use a service, or you take the font itself, there's a three different, like either OTF files or TTF files, right? With variable fonts, what you have is all three different weights or all three different variants compressed into a single file, right? And it's almost like a matrix, you know, that that that you can send to your browser in a single font file. So the user can can select not just regular semi bold and bold, but he can actually select like a whole different like range of weights. Like so if bold was 400 and semi bold is 600, and sorry, regular is 400 semi bold is 600 and bold is 800. You could even do like something like 750 or 650, right? Because I mean, the mathematics of the vectors are included in that font file. So that basically enables the browser to display any range of weights, any display any range of, you know, even weights, like you can you can combine like a condensed, you know, with with a regular width and an ultra wide width in the same font file, and just, you know, have the browser use that. So in terms of, yeah, go ahead. Do you see yourself using that a lot more in the future? Personally? Yeah, yeah, yeah. Yeah, as soon as I get some time to kind of, you know, set up a playground and you know, try try something out for sure. Yeah. It's definitely something that I think a couple of good sites have already started using it. Yeah, I think when I did my research about it like few years ago, I think maybe like the browser compatibility, you know, may have been an issue. I don't know how many browsers supported it like two years back, but now I think support is a lot better. And it also ties in with the whole, you know, war format. And since, you know, since most browsers like you can see, like, you know, Chrome 5 and Safari 5, like it's quite good in terms of support. So I think today most browsers that support the war format also support variable fonts. And one thing to the listeners as well that that is in the Google fonts, in the Google fonts, like a website, you also most of the fonts are kind of becoming variable now. So you can actually select that filter saying show me variable fonts. And it actually gives you that. So that's a that's possibly a good place to kind of start exploring. And I'm going to there's also Roboto, I think Roboto flex is something on Google fonts, which is already available. So if anyone wants to try it out, you can actually go to Google fonts and look for Roboto flex if I'm not mistaken, it's an actual variable font here. Variable font, okay. Roo had a question and Roo, would you like to ask it yourself? That is, it just says Roo here. Okay, so let me ask it because they have mentioned it here. They say how do you say a certain font has enough glyphs? Okay. So if you if you go to the actual type foundry, they will always like mention, like what is the included glyphs. So if you go to, for example, Google fonts, I think, and you select like, like a Cyrillic type phase or something with Devina green, right, you would see like if you go to the actual font detail page, somewhere on the page, you would always like look at the, they will actually show you every single character and glyph that the font includes. So if it's just a Latin face, all you will see is just capital A to capital Z, small A to small Z numerals and the usual punctuation. But if you have something like a like a font family that supports multiple languages, then you will see like A to Z, small A to small Z, but you will also see all the other characters like a Devina gray, Kerker girl, all of that stuff. So just I say, just go to either the service, you know, the detail, the font detail page on the service or on the foundry side, and you would get a sense of what clips are included. Okay. And she had a follow up, which is what steps could she take to just make sure that the font works for the use case. So if you can give an example of say a use case of New York Times, maybe, and then think of like, what are you looking for that blitz set when we're looking? Oh, I love that. Read the label slide, by the way. It's really cool. Yeah, go on. Yeah. So with the New York Times, I'm assuming like that most of their audience is either US based or most of their audience is English speaking. So for me here, it would be a question of, you know, balancing performance with the glyphs and the characters that I need. So here I think, I mean, if I understand the question correctly, I think here you could probably get away with just a Latin or a Latin extended character set. You wouldn't need, you know, glyphs, like any other glyphs in there. I'm sorry. I don't know if I understood the question correctly. Is that what she was asking? No, she said, thank you. So yeah, I think you answered it perfectly. Yeah, but that's an interesting font, that interesting font name, interesting point that you raised, which is the point about multilingual, right? So New York Times, you said it's mostly Latin. But can you tell us like, say, for example, in India, we're doing a website which has, which is a Latin based thing, but the client or the requirement from the website is that we need it in Hindi as well. So what are some of those steps where you identify this and then after as an afterthought, you need to kind of include this new language, right? What are some of the steps that you can do to your like, to your files and your layout so that when you switch those typefaces, it kind of works? Yeah, I would say that select. So you already have like a Latin face or a Latin family. So if you're now if you're looking for like a Dev Naagvi family to add to that, I would say try to match it, you know, as closely to your Latin face in terms of like, you know, what is the size of the ascenders and descenders, you know, the overall size of the Dev Naagvi face, try to match it as close as possible. Look at the Dev Naagvi face, which, you know, side by side with your Latin face, the heights more or less match the thickness of the, you know, strokes of the characters more or less match, right? And the overall metrics are the same. So I mean, if you look at different fonts, a 1.5 line height on font A might be different from a 1.5 line height on a font B, that even though the line height is the same because of the way the, you know, the typeface designer designs the metrics of the font, one might be roomier than the other, one might be more, you know, compressed than the other. So ideally, you know, you should use a like, I would just use a like a super family for something like that. So a family that has both. But if you've not kind of, you know, not maybe done that research or it was an oversight, then just try to match it as closely as possible. This, I think you mentioned something about home center and using an Arabic typeface for that. And Arabic is typically right to left. How do you kind of manage that when you, when you're creating a layout and you need to find the typeface that works both from left to right in Latin and right to left in Arabic? Like how did you navigate that problem? Yeah, so that I think was kind of a close collaboration between like me, the designer and also the content person, like the person who writes the copy. And it's, it's, it's a, it's down to having a discussion about the same copy or the same heading, like what is it in Arabic? Can be like, if the, if the English heading is like eight words, like in Arabic, is it longer than that? Is it shorter than that? And if there's a, is the big difference between the two, if it's like down to like the English heading fitting on one line, but the Arabic one needing two lines, then I would say like, it's a discussion you need to have with your, with a copy person, maybe, maybe can be reduced that or just designing, you know, your, your header to be flexible to account for both a single line heading or a multi-line heading. Yeah. And just to remind everyone that we have 10 minutes, 10 odd minutes left on our site on, on our webinar right now. So please put your questions in the chat box. I must say that there's a lot of conversation about variable fonts happening in our chat box, as well as some Twitter love for this presentation that has been shared kindly by Xenna for you Carl. So let me go into my next question, which is when, when you, when you present something, and I'm guessing that if you're not creating a website for yourself, the fact that you've chosen a certain display typeface and a certain paragraph typeface is, is still subjective, right? Like, because you're kind of creating it based on certain design principles that you have. But when you, when you pitch it to someone else, how do you make the case for the fact that this is the typefaces you need to go for? And when there is resistance on that end, where, you know, there is no, this doesn't work. Come back. Like, what is your usual process of like pitching a typeface to the person who needs to adopt it? And how do you deal with their feedback? It's, it begins with like, like a formal discovery process in which like, you know, you ask the brand or the customer, like, essentially, what, what is the brand? Like, what does it communicate? You know, what does it stand for? You know, what is the general personality of the brand? And not just typography, but everything, you know, should kind of mirror that or align with that. Right. So if you have like a brand, like something like maybe, yeah, like the New York Times is a good example on one side, but you have something like maybe Airbnb or something very modern, right on the other side. So the characteristics, the general characteristics of the brand differ a lot. If you have something like, you know, Nike, right, versus something like Harley Davidson. So Harley Davidson, like it stands for a whole set of values like freedom and the open road. And Nike is about victory, you know, and perseverance and all those kinds of attributes. So trying to kind of align, not just, you know, typography, but even other things. So I would say that do your research, you know, do a formal discovery, figure out, you know, ask questions if required, you know, definitely ask questions. But I mean, figure out what the brand stands for and then, you know, apply that in terms of, you know, type of selection. Two books I can highly recommend, you know, if anyone is interested in not just web typography, but typography in general. One is the elements of typographic style by Robert Brinkhurst. I have both of them on my bookshelf. I think that's the most important book on typography you can read. And a primer for, you know, someone just getting started would be thinking with type by Ellen Lupton. So I think these two, you know, if you're really interested in, you know, aligning typography with an existing brand, I can highly recommend both these books. That's awesome. And what I was just going to ask you, what are some of those resources? So that's good that you covered that. I found one particular thing super useful, which is a nuances to consider, right? Where you spoke about, and I think that comes through the, like it breaks down the subjectivity a lot. If you can go into the nuances where you had the Black Lives Matter slide, I found that really interesting because sometimes you want to, you, it is very heavily based on like a philosophy or you want to have a hidden story where like the person who is kind of owning the site, which is applying also kind of jumps at it saying, yes, like, you know, because sometimes it does not have to do with how it looks and stuff. Is it the right choice is the question, right? So what are some of the, have you had any experience of doing this activity where you discovered that you went the nuance to it and what is like an example of that? No, honestly, there's like, there's no example. I personally, you know, implemented this way. This is just something that I have kind of, you know, read and researched about. I think it was Robert Bringer's in the book itself. He says that, you know, typography should resonate with the audience. So, I mean, there's just one of those things that, that literally very few people could probably even, you know, notice that for me, like to actually find this out, you'd have to actually go to, you know, either the style sheet or do an inspect element on their site. I mean, to most people, like, you know, people who are not like, you know, typography, you know, typographically inclined. You know, yeah, it's just another society we use. It's just another, you know, display faces used. But I mean, to the one, to the people who actually, you know, dig a little deeper and find out that the face they've used is actually, you know, designed by a, by a black studio, by a black type designer. I think that makes the whole thing make a lot more sense also. Yeah. And do you feel that, I think Sawvik has a question I'm going to get to that. There is, do you feel, this is a controversial question and a subject, but I saw a lot of code in the earlier part of your website, of your presentation, right? So, do you feel designers, how much of CSS or do you feel it's necessary at all that designers who have no exposure to development know this, know anything about code to do good typography? Oh, it's a very, it's a very controversial topic. And I don't know whether I want to, you know, dip my feet into that, into that river. But I can just say, like, from my personal experience, it has been an immense help that I, that I know HTML, you know, no one's saying you need to know, like, react and stuff like that, right? But knowing the basics of HTML, like semantic, good semantic HTML, knowing the, you know, what elements to use, knowing CSS, you know, at least how to apply basic decorations. And, and, and just, you know, being able to do a very basic kind of design in the browser, right? So you have a design in your, you know, render tool in your Photoshop or your Sketch or Figma. And maybe just, you know, just, just knowing enough to at least render something on a page and just test it out in a browser. Because I think what makes a big difference to me. So I won't say whether you should code or, you know, you need to know how to code. I can just say that it has helped me a lot. And I think Hamza, you as well, right? It's been a big help knowing CSS and HTML. Yeah, for sure. And I would encourage actually quite a few people to just look at only your font declaration CSS things for, because it's just nice to know how line height gets described on the web. And it's almost, it's almost very similar to any design software like Sketch or Figma that you might be using. So I think just any of those CSS properties that start with the word font or type would be a good thing to just be aware of so that because even variable fonts is moving to using these properties while declaring fonts as well. So I have, there's a, there's a fun question question from Sovik and I want to add to that question also. His question is, do you mistype it? And if yes, how are you coping with it? That's his question. And my question is thanks for demystifying or comment is thanks for demystifying how Adobe pricing works because ever since Adobe font has come, I don't understand how a subscription is going is supposed to be like God, do I have to pay for one of these apps? And I think, yeah, like it just, I don't need the app, I need the font. So I don't understand how the subscription model works. So thanks for covering that. And I'm going to go back and look at it. But I want you to answer Sovik's question, which is, do you mistype typekit and how are you coping? Yeah, I really, really mistype it. So a little bit of history, like, I think I, I, I became a customer of typekit very, very early on, like, I think, 2000, maybe 15 or something, or maybe even earlier. But like, like, basically, they started off, I remember with, I think $36 a year was where they started off. And then they made it 48, like a few years later. And then the whole, you know, Adobe acquisition came and stuff. But yeah, I really really missed like the OG typekit, which was, you know, an independent, small independent company, and they had Jason Santamaria, creative director, and all these, you know, people that we like to follow on Twitter and read about. So I really, really, you know, miss them. So what I'm currently doing with Adobe fonts is I actually have a subscription to, I think, Adobe in copy, you know, like, like Hansa, you were saying, so that's one of the, that's the cheapest app that they have in their catalog. Yeah. So I think, like I said, in that last slide, it comes to, for me, it comes to around, yeah, it's almost like 4800 a year, if you use Adobe in copy. So that's, I'm just a creative sweet, you know, creative cloud user only for, only for the fonts. So I'm just like using Adobe in copy. So it's like 300 a month or something, 4000 something a year. Okay. But I really, really missed like the old type here. I think that answers this question as well. So I think you've already pointed out the resources about the technical things like the two books that you recommended. Maybe we'll tweet that out also just as a, as the primer, but I wanted to also know other any good web resources that we can kind of point people out to where it might be helpful to kind of like read or look, look up your website on the, look up your fonts on these websites and things like that. Off the top of my head, no. I think there is one called a practical guide to web typography. It's like a microsite. I don't know the exact URL or, you know, offhand. But I think you just Google a practical guide to web typography. I think you can get the website. Got it. I think, yeah, cool. I think it also like, there are many sites also like type in use and this type in use and things like that where these aren't directly like the resources, but they're also helpful to just see if your font that you're considering for a project is being used in a website because it gives a better feel of it. So yeah. Yeah. Type wolf is excellent. If you're looking for just like, you know, web font inspiration type wolf is excellent. I highly recommend that. Yeah, there's also another one I think called elements of typographic style applied to the web. So someone has basically taken the book that I was talking about and actually like, you know, applied it to like the web context. So all the stuff that the book talks about in terms of print, the, you know, the author has applied it to the web. So that's another one you can also Google.