 I think we are live right now. Okay, so a bunch of people have come in already. Thanks everyone for coming in. I assume some of you have joined this session before. So you may know that we'll wait for a few minutes for other people to join in. David, are you trying to say something? David, you could type out if there's anything you're trying to say to us. No, I'm not. Okay, all right. Cool. So folks who have joined on Zoom, thanks a lot for giving you Saturday morning to us. Give us a few minutes so that more people can join in and then we'll start off. Until then, it's the usual banter. First, I just want to quickly congratulate Hasgeek on turning 10. I see one of the AV team also has the Hasgeek 10 badge on Zoom, which is great. So thanks a lot Hasgeek for hosting content web and for all the other conferences. And probably those are the reasons why I got to meet Hamsa and other wonderful people in the web community. So thanks a lot for that, for the 10 years and hopefully more. Hamsa, have you attended any of the Hasgeek conferences before? No, really, like I haven't yet. I've been going mostly to design conferences all this while, but yeah, I should I've never actually attended a deaf conference yet. Okay, right. So Meta Refresh is used, which hasn't happened in the recent times a lot. Most of the tech stuff has been taken away by the JavaScript thunder. But Meta Refresh used to be my favorite conference by Hasgeek and by far the favorite conference that would happen in India on the web space. And that's something that I definitely miss a lot. Is it happening online? I don't know. I hope it happens. But I guess we'll have to ask these questions to the Hasgeek team whenever they're ready with some answers. But everyone is trying to figure out how to take these things online. So I guess they are also planning these things. Many of the international conferences have suddenly become very accessible now because of things going online, both in terms of the cost. Because even ticket prices have been dropped because the logistics has become simpler. And obviously you don't have to travel in order to be there. But you have to be up at strange hours during the night. I mean workshops are very in the middle of the night. So I know what you mean. Yeah. Which if you're there then you're in their daytime. So you would have adjusted for that time zone. But yeah. So it's 11 o'clock. Let me start the content web conversation. So first of all, hi everyone, everyone who has joined in on Zoom and YouTube or any other live stream mechanism. Thanks for giving your Saturday morning to us. I'm Sovik Airaan Miranj, which is a strategic web design and development studio near Delhi. Along with Hasgeek and other volunteers, I've been running the series called content web, which is basically a series of freewheeling conversations for people who create or maintain content based websites. When I say content based websites, I mean sites that are publishing heavy, typically CMS driven marketing sites, media sites, e-commerce sites and so on. In this space, we want to cover topics from the three important practices that come together for creating these content websites. One is the set of content teams, content strategist copywriters. The other is design. So you could be a UI UX designer, you could be a web designer, graphic designer and so on. And there's obviously developers and you can be a front end developer or a back end developer. So I think all these three pillars come together to create any informational website that's out there. Aside from that, there's also this fourth bucket, which is of the website owners themselves, individuals, businesses or publishers. And topics around web strategy, marketing, analytics, business side of things are also topics we plan to cover. Today we have one of our most popular speakers in content web. Join us again, Hamza Ganesh. Hamza, would you like to introduce yourself one more time just in case there is that one person out of 100 people who don't know you. Hi, I'm Hamza and I'm a web designer, turned web developer and now I just do a lot of UI and UX work and thanks for the kind introduction. So this is my second talk on Hasgeek. I have given a talk on scalable grids before and today I'm going to be speaking about modular types. So I always like talking about things that are between design and development. So I kind of look forward to today's talk. Oh, yeah, definitely looking forward to this because we had planned it about two months back that these are very interesting conversations to have in the design space. But the way you talk today, Hamza, who do you think would benefit the most out of this presentation, designers, developers or any other people? I think, Sovik, you gave me some good advice. You kind of said that what talk would you like to hear or what talk would you have like to hear a few years ago. And I think it's just meant for me a couple of years in the past where you know these concepts of from a graphic design background, especially coming to the web to kind of go with web typography with a purpose and intent to make it more systemic and predictable. So the scope applies for designer and dev teams working together. It applies for designers who come from a background that's different from UI. And I suspect it will also apply to product designers and actual digital designers because such a process, a slightly more traditional graphic design process approach to web typography is not something that is very common. So I hope any designer who's watching this talk benefits from it. Yeah, excellent. Thanks for that. Quick instructions before Hamza starts with her presentation. Hamza will give a presentation which will last around half an hour or 35 minutes, I guess. During the presentation, we'll try to not interrupt her, let her go through the flow and tell us everything she knows about modular typography. Once that is done, we'll open the space for questions. I'll have certain questions at my end. But audience, if you have any questions, feel free to drop in the questions in the chat inside Zoom or in the live chat that happens on YouTube. And someone from the Hasgeek team will forward those questions to us so that we can give it directly to Hamza. If you are on Zoom, then we can also patch you in so that you can have a quick chat with Hamza to have further clarifications as well. So yeah, that's all that I have as instructions. So over to you, Hamza. Let's go for it. All right. So first of all, hi, I'm Hamza. I come from a traditional Photoshop illustrator in design background, then I went into a lot of digital design tools and now I, and then I kind of also write CSS. So my favorite sweet spot is this place between design software and code where I think there are lots of concepts that get lost in translation between these tools. So all my talks kind of try, and my aim is to bridge the gap between these two kind of software. And just similar to that the last time we spoke about grids, which is a very, which kind of has its own interpretation in design software and code. So today we're going to be talking more about typography in that same aspect. Our journey today is going to be a couple of things and it's going to be quite a long journey. But I would definitely encourage you to stay with me during this thing because if you miss out on some of the slides it might be difficult to follow because we're talking with examples and we really need to follow through from the beginning to end. But let's look at what we're going to be covering today. We're looking at what a modular scale is and why we should be considering it for typography. We're also going to look at when during the design process should you start using a modular scale. The third point is exactly step by step. How do you create that modular scale? This is going to be having a couple of more steps which is playing with the tool modular scale.com and how to apply your scale to your project. And then finally a bonus. If we have time this part is prepared but it's mostly to show how when you make your mobile type scale and your desktop type scale, how do you make it fluid so that it kind of like flows with a gradation as you as you go down screen sizes or up screen sizes. Yeah, so let's start. What is modular scale and why you should consider one. So I thought I could address it from the point of view of what are the symptoms of not having one. So if you know if as a designer you've worked on a project and off the top of your head you don't know how many total font sizes your project has. Or you feel like your project currently has slight variations being used by in font size being used by a project so for example you used say Georgia in 21 and 22. If you have those very slight variations it's likely you need a scale. Another, another symptom is that if many font sizes of your projects of your many of your font size I used only by one element. So for example this heading has a 45 pixel font size but it's not shared by any other heading that's another symptom. Another symptom is that a lot of your typography decisions are taken while the project is ongoing, not at the start of the project. That's the other symptom and the last symptom is that if you're a designer and you're not the person developing the website. It's very likely that you rely on tweaking the fonts when the website has been developed. We all do this to a certain degree but if you're kind of relying a lot on that it's possible that this would benefit you a lot. So some type scales that you might already be familiar with before we go into what we what a modular scale for typography is is you have on sketch for example in a design software when you go into any type, any font and you look at the drop down. That is a scale that sketch is suggesting to you to use for your project because these are commonly used type sizes for web design software. Likewise on on the left you see Google slides when you when you select a font and you put your drop down the stops in your font in your typography are very different because Google slides is suggesting that these are the type sizes that will be perfect for Google slides. Right, so essentially a modular scale is a sequence of numbers that relate to one another in a meaningful way, so you can compare it to a foot ruler that we see over here. So, but what's going to happen is you create the scale for your project, it's not a ruler that exists, you're going to create this scale for your project based on either the single or the multiple type faces that your project is using. And once you create that custom scale. Remember that there's no correct way to use the custom scale so you can choose to measure some things and you can choose to not. I'm going to, at the end of the talk tell you exactly how how I, I end up using the custom scale for every project but while we are going to focus more on defining font sizes using the modular scale. I'm going to show you examples at the end of the project how the modular scale translates into not just font size but to spacing line height grids margins etc. And you'll see. So, the advantages of using a modular scale is that you get a vertical rhythm between confidence. So it's your design way more predictable and systemic to developers and future designers suppose you're working in an organization and you're leaving tomorrow. The next designer knows the types of system you're following it also this is this is the point that probably helps me a lot, it saves me a lot of time decision making during the project duration. Once I spend the time making the type scale I am done with most of the decision making, and then it just becomes a process of application. So, the last point is really really valuable one to me. So now, when should you start making your type scale right so there are going to be certain things that you require as prerequisites before you start making your type scale. So one, you need to have identified type phases for your project. And we will go into each one of these points as we go forward, but you need to before you make your type scale and that entire process we're going to be discussing today, you should have identified your type phases for your project. You should have a good sense of the nature of content that the website would hold. We will go into each one of these as we go forward, you should have gathered actual samples of content that's going to come on your website, and you should probably have some bioframes in place. So let's go into each one of these. So when you if I buy you have identified type phases for your project I mean, you can say I want my entire website to be Fira sands, or you can say that I want my website to be a combination of Fira sands and Badoni, or you could be a designer where, where the brand designer has given you type phases and you need to just work with it. Or you can just say I'm going to use system defaults which is very rare but you can you have, you should have basically identified what those type phases are that your project is using. So if you haven't done that yet, Carl's talk on typography is a good is a good reference to kind of see how you can choose the right type phases for your project. The second point is you have a good sense of the nature of content that the website would hold. So you need to know whether the website you're designing for is a news website where there's going to be a lot of dynamic content. A lot of user uploaded content and things like that, or you need to know if I'm designing a brochure website where it's very unlikely that content on a page might change and the websites going to be more or less static. The third kind is a third example is that I'm designing an e-commerce shop for a project that has a lot of technical content. So this is the amount of information you need by when I say nature of content you just need to have a good idea of the context you're designing for. And then you gather samples of actual content. And so this is obviously a no-no where you do not use Lorem Ibsen while setting text because a good type setting is not going to save even like the worst copy. So when you're setting text, you need to actually look at the actual headlines. If it's a news website, look at the actual headlines that they might use and also collect variations of those types of type samples. So if you're looking at a long headline, also look at a short headline so that when you're type setting, you have all of these variations to kind of test on. And the third thing is you have some wireframes in place. In some cases you have like a very bare bones like sketch of low fidelity wireframe, which just kind of gives you a very rough sense of the grid and you've annotated that you have buttons, you have like a heading, etc. Or sometimes you progressed a little bit further on the project and you have slightly higher fidelity wireframes, which is just thrown in the project once, but you're not actually married to the look and feel and everything, but you're just creating a high fidelity mockup for the project. So whichever state the wireframe is, it's okay as long as you know where what some of those elements are because we're going to be using a type scale to test things on these elements as we go further. So for the sake of this exercise and this is a part where it would be really important to follow along because we're going to be using a sample project and start defining and start defining how that modular scale will shape for that particular project. So, so these are our four variables that we just discussed that we prerequisites to the modular scale. So let's just for the sake of this project, say that we have identified Lato from Adobe forms and GT Supertext from really type as the project funds. Now we also know that we're going to be designing for a magazine news site, which has like a lot of dynamic content multiple authors so there might be a lot of a lot of content that is not in our control that's going to be on the website. Let's say we've also collected some sample content sample articles for to test our type in and we've also drawn out the wireframes for say a homepage and one article page and article pages a page where in especially a magazine site or a news website, it is the page for a single article. So if you have those wireframes ready or like have a very general look and feel of what that would look like you're good to go to the next stage. So, now let's look at our step to step by step as to how to create a modular scale for your project. So, the first step is to assign jobs to your typefaces if there are more than one. What we had identified is that we're going to have GT Supertext by really type and Lato by Adobe funds, say that I have chosen this typeface or say that a brand designer has given me these typefaces saying that you know these are the typefaces that our website should be using. Regardless of how it came, these are the two typefaces that we need to work with. So let's the first step would be to start assigning roles to them but how would you do that what do you know about these typefaces. So the first thing that you do is Google, which is the shot for another search engine I know. So Google is, so you first Google the font names and then you say, All right, I'm going to Google GT Supertext font and Lato font and as you go forward you'll start seeing slide, you'll start seeing screenshots of how this text looks. And then you'll start reading about the typeface. So you'll see that you'll see that the GT Supertext font focuses on body copy performance. The text styles are more restrained and focus and is good for long reading. And you'll see that like there are ink traps and a lot of optical corrections to make sure that GT Supertext is used, is available and is legible at smaller type sizes as well. So this is so with just the description and a little bit of Googling you understand that this typeface is going to be good for is going to be good for is going to be a sturdy typeface and it's okay to use it at smaller sizes. While Lato when we look at that we look at the writings in Lato and we see that the designer wants Lato to almost not exist. They wanted to be something that is invisible in the design, but when you're using it in large larger type, it could show a few characteristics. And we also look at the fact that Lato has a lot of glyphs. So the fact that if we the idea of looking at how many glyphs or how many languages that upon support is that tomorrow say the need of the website is that this website needs to be translated to another language. We know that one of these typefaces can do that. So it's good to know that okay this it has multi-lingual support even though the project doesn't need it. So what and so when we assign jobs to the chosen typefaces, we look at Adobe fonts and because of its multi-lingual property because how of how transparent it is, we assign it for body text, and we give it for a lot of like the smaller card meta, the content within the cards, links and buttons, etc. While because we have GT Supertex identified, there might not be these big bold display like features that we use this type for because it's a magazine website. But we could use it, we could pair it with Lato to use it in as a card title to hold Lato in a heavier way, we could use it as page titles, we could use it block code because these are good for continuous reading. So first job would be to assign jobs to your chosen typefaces. The second job that I do is to create my own type specimen. So while you have a project, the typographers website itself giving you a lot of these references. What is really helpful is for these are the search terms I use. I Google the font name and I add type wolf to it because typefaces are a repository of typefaces that are used in the website. Likewise, I Google the same font name with fonts and use. So these two websites, Googling your font name with these two websites would likely give you a lot of references that you could borrow for your website. So this would be a reference for GT Supertex, this would be a reference for Lato. So this helps so that you start kind of creating a good repository of a specimen for both of these typefaces in your mind's eye or as a worksheet itself. How I usually gather these references is I go into each of these websites and I inspect, I right click on Chrome, I click inspect, I go to the computer tab, I press font size and then I get the font size for each of these. So what the purpose of doing this is so that I understand what how this typeface looks in the wild in different settings in different types of line height etc. What I do after this is after inspecting these reference websites, I create like a sheet of references and this really helps me because whenever you're into, whenever you're setting project tab, I don't know if this applies for everyone but I always find the type looking weird when it's on my project and I think it's almost like hearing the sound of your voice where it feels a little alien. It always helps to have a bank of reference websites to kind of go back to and see the way the, see your entire type in another setting from time to time. So it's good to compile these findings and it's also helpful to kind of highlight a few that you see are going to be something that you might, you might apply in your own magazine website. When you see it, you'll get an idea that, yeah, this is a look and feel I'm going for so in from my entire type specimen for GT supertext and highlighted two of these which which are likely something that I would want to consider setting my GT supertext in. So, so now, let's keep that aside for a second and we will come back to this part at the towards the end once you've created our scale. This third part so for the first part was we look at we basically assigned jobs to type faces the second job was we create our own type specimen. The reason for doing these things is so you have a lot of clarity about what is body text what is having text etc. And the reason for compiling all these references is because it will save you down the way and it will also help you visualize the type faces and in like flex your flex your muscles when it comes to thinking about your type faces in a way that outside of how you're going to be designing it. So, the third part is the most important part through to this entire exercise which is setting the body text size. Now, we're going to go into a tool called modules scale further down the project but before that we need a few values on our scale in order to come to take to the tool itself. So let's start with setting the body text size for that. So now with our when we assign jobs to type faces we realize that Lato is the one that's going to be doing all the heavy lifting for body text right. So let's use Lato. Now, I'm going to first start with desktop type setting. So I'm going to use a 1300 pixel canvas because it's it's very randomly chosen but it's also because it that is a very it's a sweet spot for a lot of desktop screen so I'm going to use a 1300 pixel canvas and I'm going to use Lato. So let me just throw in some Lato on this. I'm going to start every time I start with body text always start with the font size of 18 and then I go up and down based on how I wanted it. So, so let's just set the body text to as 18 pixels and just observe a lot of what I'm going to be saying right now is also so that you don't take my word for it and there is a lot of like training the eye that happens as we go forward. So, first let your text cover the canvas right it looks horrible. So, let the line height of this of this type is just be naturally whatever your design software recommends we're going to get rid of that worry. So as we go forward. Let's look at a few spaces that they're going to be correcting right now. The entire when you just put in text in a canvas it's called a measure. So whatever the line length is of the text is going to be it's called a measure so we need to first set the measure of the text. Now, usually they recommend that people recommend that 10 to 12 words is a good sweet spot for the measure so let's keep this as a starting point we've condensed up our measure that it's now set to about 12 words. This is where it helps to have your reference websites, just get a screenshot from it from a place where you like your body copy and things like that and and look at what you're what you've just type set and what you're seeing on the screen and what what you've seen on a reference website. And you'll notice that there are few things you liked about this the fact that it was very legible. It had a little bit more it had a little bit more breathing room, etc. So then you just observe it it might not translate exactly to those values but just observe it and start looking making observations about your text itself so you'll notice that it's too cramped right now. So, you start increasing your body text until it becomes a little bit comfortable. It might not match exactly what you have but you're going for the same look and feel because here you're you're you're looking at a card and you're looking here that content of the page itself. So, you still want to eyeball it but you, you start increasing the font size from 18 to 19 to 20 to 21. And this we've stopped at 22 over here. So just stop it where you're I think it's comfortable. But what happens immediately after that is that the line length becomes too narrow because you increase the font size, and it has become the entire paragraph has become narrow. So you started to breathe a little bit and now we kind of start opening the paragraph from here to here in a way that it kind of it visually sits well. Now the rule of thumb is that around 15 words is a good measure for a line length and but I would say still trust your eye because as you as you look at different websites you sometimes notice that it goes up to 16 to 17 words and it doesn't look wrong. In some places you'll see eight words that it doesn't look wrong. So, in such cases it's great to use this as a soft rule and trust your eye as you adjust the line height and then you kind of set the measure. The measure is very important because it's one of the easiest measurements to set. And once you have your font size and your measure set it's easier to kind of tweak the line height and the paragraph spacing. So, the font size is the measure set the font size is comfortable at 22 pixels. Now let's look at line height. So to start the setting the line height, what what I really enjoy doing and this is an advice from Tim Brown, which who's the author of this book called flexible life type setting. He says when you start setting line height. Use something that is obviously flawed. So again you want to train your eye to start looking at spaces in a in an in in an intuitive manner so you first start with font size is our font size is set to 22. So try putting your line height 22 is going to look obviously flawed. And that's a good place to start because once you once you see it very cramped it's easier to increase space until it looks better. You start increasing the space and you put in you make it 32 and you still feel like maybe, maybe this is going to be a little bit cramped and then you further go go to 36 and you're like okay that that looks fine let it let's hold it over there so it's a lot of visual tweaking there while you can use like a multiple of like you can start with say a golden ratio multiple or anything like that. You want to first try setting these body type faces visually because you are the consumer of this data right like whenever you go into a website you're reading long articles, your eye is already trained to see type in an in a in a way that might be comfortable for the viewer so just trust your eye and make these visual corrections because these these values are just going to inform the scale they are not going to be the final value so let's go further. Now thankfully because we've done the desktop font size and the desktop line height, we have one data point on the scale. The reason I'm kind of graying out the line height data point and not saying that we have two data points on the scale is because the font size is definitely something that we want to use the scale for the line height is something that maybe you use a scale for or no. So what if the scale has 36 grade but we want the scale definitely to have 22 in our scale so we have one data point currently which is 22 and these markings will now inform the scale when we go to the next stage, but we need to first get a second data point which is the mobile desktop mobile body font size so you look at you can use a 360 pixel canvas on mobile and repeat the entire process a 360 pixel canvas ensures that you're seeing the type in a way that many people are going to be seeing it so and this is just for a type setting purpose so you can use a canvas of 360 and start set the body text of 18 again and observe and then what you observe over here is that maybe the typeface is not looking too small like it's fitting about like seven eight words a line. It's not too bad so we keep it at 18 and maybe like keep the font size comfortable at 18 but repeat that same line height so you kind of cram up all your to start with setting the line height you use the same line height value as your font size so if your font size look comfortable comfortable at 18 use your line height also set to 18 and so it's going to be really condensed and obviously flawed and that's when you start working in stops to increase it. So if you want to modify pixels alright line height is set to 23 again a little bit cramped it always helps at this stage to look at different websites and just see websites you regularly read where the type is transparent to you and see how this does in contrast to that. So we're going to go into say line height 26 like about eight pixels more than our phone size it feels a little bit like it's sitting well that's that's good stop there and record those measurements. So now we have two data points for our scale which is the mobile phone size the desktop phone size, and you have two other potential data points for our scale which is a mobile body line height and the desktop body line height. So let's go and get a few more data points before we head to the scale itself. So in order to do the get a couple of more data points, we need to start playing with our second type phase as well. So let's mock up one component that uses both type phase Lato as well as super text right so we already know that we've already mocked up Lato in body text so let's try using super GT GT super text as page titles. So, we've already got a para over here we are comfortable with 22 pixels as phone size 36 pixels is line height, and we just put our second type phase on top of it, with exactly the same specifications and observe. You can see that it's looking too, too small to create any hierarchy with the text, and you need to kind of like, you know that you need it needs a little bit more emphasis. So you increase it by about eight pixels and it feels still like it's lacking a little bit of it's not allowing visual hierarchy to take place. It's still lacking emphasis at 30 so then you increase it even more and then you say, okay, 36 is allowing that body type phase and the heading to have enough contrast with each other enough hierarchy with each other. And this is this is a good place let me just record this data points now on ours on our scale we have a third data point which is the desktop heading font size which is, which is 36 pixels. It also happens to be the desktop body line height but we can now record and say that 36 is an important around 36 is an important marking to have on our scale. Then the next thing would be to repeat the same process for mobile so again, take your paragraph the one that you've set and are happy with, then going to use the use your second type phase in exactly the same specification. Observe what makes it so wrong, and then you'll start making the corrections you probably increase the type phase, and, and then you'll increase it by a few, like say in this case four pixels and then when you increase it by eight pixels you see a little bit more of a rhythm going on where you're seeing a lot of hierarchy between both the heading as well as the type phase. So you've repeated the same process for mobile, you've noticed that that value that the form size looks comfortable at this 26 pixels. So you make that marking on your scale. It's just a coincidence that the mobile heading size and the line height are the same in the body line height but what this confirms is that these used to be if he values for our scale it they could have been there not been there but because we've done a few of these measurements we now know that these are probably important values for us to look out in our scale. Right, so now we have four data points on our scale. Combine that with what we had seen earlier. There was, there were values that we liked when we inspected our, the super GT text we're like all right like it looked really nice and 64 and I can see myself using it. It looked really nice and 32 and it might be an interesting type size to use it in. So, so that's when we go into modular scale.com with these values and, and now let's play around with how the scale kind of can come together. So, let's go. So let me just tell you a little bit about this tool. So modular scale is, is going is a is a suggested scale so we're going to go into a tool called modular scale, where you have basis as well as ratio. And this is a tool that we're going to kind of explore a little bit as we go further and try creating the scale that's going to work for our project based on the data points that we have. So, what are our data points right now we're looking for the following numbers around so we're looking for 1822 2632 3664. That's kind of where what we want to achieve with this scale, and we want the scale to suggest complimentary numbers to this right so yeah. So let's go into the modular scale. Now let's just look at this interface and the scale was made by Tim Brown and Scott Kelly, and it was made for exactly this purpose so that the when you're working on a project and you want a harmonious scale based on a certain proven ratios. We kind of like input a few numbers here and the system generates a scale for us. So let's look at. There are two views here one is a text view and one is a table view. I enjoy the table view more after when I've done a lot of the typesetting process like once I've set all of the body type and things like that. I like going into table view because the text view is not mocking these up in the fonts that I have. So table is enough for me to just get a sense of the numbers that this is going to be using. As a designer EM is foreign to me so I'm going to first change this base to 16 pixel right so I'm going to keep it a 16 pixel so all of these values are coming as pixels. So what are we seeing over here we're seeing that we have kept a 16 piece the pixel base font and so a base font means all of the measurements that are there in the scale are going to be based on this number over here. And the ratio that is being selected is 1.5 so that means each time as the scale grows it's going to grow by 1.5 the multiple is going to be 1.5. So these are called basis and these are called ratios in this tool you can have up to two basis and you can have one ratio. So the reason why you wouldn't do more than that is because you want to don't dilute so the scale stays tight the lesser the number of bases and the lesser the number of ratios. So it's good to have just one base and one ratio but in some cases you might see that you need to introduce a second base in which case go ahead and feel free to do so. So let's look at what happens when what we're looking at here so looking at a scale where we have 16 24 36 54 81 etc these don't match what we want we want yes 36 is there but we don't want 24 we wanted 22 we want 18. So many of the values that we want in our scale are not here so so then we know that okay 16 let's keep 16 and let's try tweaking the ratio. Now a note about the ratios that you're seeing over here from top to bottom if you if you go down from top to bottom the first one that you see is going to create the slightest variation. So it's going to be a 15 by 16 ratio so if you see here if you choose this ratio you'll notice that the stops that this scale creates is very very small. So it's almost by one pixel. So I would say do not use a scale like this because the problem with a scale like this is that it gives you about five six numbers six measures within 20s and you want the scale to actually remove a lot of the decision making for you. So you want to pick something from the center where the distribution of the numbers in the 20s 30s is a little bit even so that you know if you're if you need a slightly bigger typeface in the 30s range you have to pick 36 so it helps you it helps you to narrow the choice if you go into something in the middle. You go towards the end. So let's try the double octave right. If you go towards the end it's actually a multiple of four. So this this type size if you're using just 1664 and 256 as your type sizes, it kind of it would work, but here as you see that the variation between the two are a lot more the lower you go. The best place to stick to is one of these the golden ratio minus six perfect fifth augmented fourth perfect fourth major third. These are some of the good ratios to stick to because it gives you a very even range and let's go into one of these to find out what that range is. So, let's go into say golden ratio right. So once I go into golden ratio 16 has 25. So if if I'm working in a project where I just need one typeface at 16 you need like one variation at like at the 20s mark and you have very few variations and say these three, these four elements would take care of that need. So let's go for like the golden ratio but here what we have identified is a very particular need which is, we need to identify a few of these numbers on the scale which is an 1822 2632 36 and 64. So let's play around with the scale a little bit more. And we'll see all right like this base doesn't work, none of these numbers are what we want. So let's try perfect fourth. We have 21 here 28 here again nothing like what we need over here. And let's try augmented for this is one of my favorite ratios that there is because it gives a very good gradation when you use the 1.1 for one for one scale ratio because it kind of creates a nice harmony. It's not too much and it's not too less. So let's look at what numbers this gives us right at 16 pixels it gives us 22.64, which is a number that we like, we want in our scale. So we have a 22 over here. There's a 32 over here which is again something that we have over here. And then we have 36 and 64 so we go further, we have a 63 which is great. So, this scale is kind of getting this it's allowing us to kind of narrow down on okay maybe 16 could be one base because it's allowing us the numbers we want. What if we add one more base over here, because we still, we still haven't got our 18 pixels we haven't got 26 pixels etc right so we want to see what how we can set that base so one day what I do is I go down, like, I go down like at 15 and I start observing the scale again. So when I see 15 I'm like okay, when I'm at 15 the variation is too less as I said like it's too close over here 21 and 22 are too close to each other. So then we can go to 14. And then we see alright that's again too close where we have 14 pixels 16 pixel 19 pixel again it doesn't give us our 18 that we want. And then we go further and we see. Okay, let's look at the scale so we have 13 which might be something that we could use for meta text metadata and things like that we have a 16 which is useful to have. Then we have an 18 which is similar to our what we need in our typeface so we need 18 2226 so we've got a 22 we've got a 26 we've got a 32 over here 36 and 64 36 and we've got a 64. So then we kind of lock in saying that okay we've got your art modular scale is going to use two basis and one ratio in order to generate the scale. So, a couple of things about these ratios itself, all of these if you notice, as a quote from Tim Brown that I've tasted earlier from the session in during the session. He says that it's a modular scale is string of numbers that have a meaningful connection with each other. And all of these ratios is actually from music. So, there are also like theories of how you can actually play a sound and kind of compose type based on how that type sounds so that's literally what this is going to do so the notes that you have in music is what this kind of corresponds to. So, so these are, so it comes from the ratios are kind of random, but it comes from that place so as a rule what I would do is I would start with say 16 pixel. I would recap I'll start with 16 pixel I would try the different ratios that we have over here. See what it has to offer. I would, if one of the, if one of the things have, if one of the ratios have a very successful output like what we saw when it was 16 and 1.414 start the second base maybe to take care of some of those values that you don't have, and you'll finally have a scale. Now what this does is that, while we know that these are the values that we're going to use right. It gives us this value of 45 it gives us a value of 51. It also gives us more like you can either round these values or use them as it is, but it also gives us more values for like our metadata for our for other smaller places where text might happen right so I think the idea of getting four data points and creating a scale that we need is so that now the system suggests to you the font size that you need right. So now let's go back to so we've created a type scale for the project and this is what it's going to be it's a 16 and 13 base with a ratio of the augmented fourth which is 1.414. So we just crossed the 40 minute mark so I thought I'll give a time check to you. Yes, we are almost done now it's just going to be a scale. Yeah, so yeah, so now from this part now we've come to this part where we've got a modular scale for a project, we've got a lot of values that we can potentially use you can say use a 90 pixel for a large spacing and things like that. So how you use this modular scale is what we're going to be looking at next so I'll give you an example from a project that I recently did. So, as I said, just remember there's no correct way to apply the scale, the scale that we define for font sizes can be used for parallel for line height padding spacing margins and even the grid. So now you will see. So for example when I take my wireframe the idea of how we start using the scaleless once you've created that body text and the title. We kind of keep that away and start looking at smaller components in our composition like a card and start mocking that up with our typefaces as well as the scale, choosing numbers from the scale and start mocking it up. And so you suppose you this now what I'm showing you are examples from a live website and how these kind of these values have translated on to the website so it uses GT for the card. So the font size for this GT comes from the scale and the line height also comes from the scale. It's in in many of the projects that I work on both the font size as well as the line height are derived from the scale. Here in this case even the padding is derived from the scale. So, this is an example of another card from the same website. The font sizes are all derived from the scale so you see how we're using the 613 pixel for slight metadata, the 16 pixel for card content. So, and all the spaces between around are all from the modular scale. This is another example where the font sizes are all rendered by the modular scale. And here it uses the 32 pixel font size which we hadn't mocked up but we had said that this is a desirable font size to have. So, and then we use it for spacing so you use a 45 pixel for spacing for these larger cards. You also use those 63 pixel spacing for the inner parts for the padding for the inner containers and also spacing for within elements and stuff. So similarly we use font sizes, spacing, padding, all of that. So, so this is kind of how I translate how I get few values from my modular scale, create a scale and then translate it to every single measure in my design but you don't necessarily have to do that. You can definitely choose to just do it for font sizes and not use the scale for anything else. So, handing it off, what I like doing while handing it off especially in the world of Figma is kind of creating a specimen with the fonts in use. Here there would be a desktop type sheet, a mobile type sheet, a link to the scale and also in the scale there are sometimes we don't use all the values. So I also like to annotate which values of the scale I'm actually using so that the these also end up translating as spacing like these are small spaces, large spaces, etc. Also like mocking up the links and the buttons in the same typeface. So what happens is in some in a design software you can just inspect it and you can, the developer will be able to get the specification, you can specify letter spacing if needed. And you also link to the modular scale because the modular scale also has plugins for developers if they want choose to plug it into their work. This is a bonus thing and I'll go through this super quick which is how to make your scale fluid. So now when we when we have our desktop font size and mobile font size is always fun to see like when you close the browser window for your text to get like smaller and like larger. So that's what we're going to be discussing very quickly right now. And this is more so how this works and this is from the book flexible type setting, you create a lock where you say that between this range of viewport and this range of viewport. I want my text to go from this font size from like say 22 font size to 18 font size right. So this is kind of what it would be I want to set my lower gate to 500 pixel, my upper gate to 1200 pixel, and I want to create a lock between that. Here this is fixed at 18 pixel right now. This is fixed at 22 pixel. And here I want to make it vary based on where this the viewport is. So this is an example of what that might look like in the flesh where when you close your thing you will see that it's kind of slowly transitioning into the into that size. So you use something called a CSS lock for it. And this is a formula and since this talk is going to be recorded this is going to be there. Even after this talk so I'm not going to spend too much time on it but the formula is kind of here for you to kind of have use one declare a font size that kind of goes fluidly from desktop to mobile based on the viewport. In this case I have set the viewport to be you to set the fluidity to occur between 1200 and 500 pixels. I'm done with my talk but I want to do a special thanks to the designer author speaker and maker of tools down because his book flexible type setting is really valuable for anyone who like the stock and wants to explore more. And thanks for listening. This is what we've covered. We've covered what a modular scale is. When should you you start creating one. How should you create a modular scale for the project with a step by step. Finally playing with the tool modular scale.com showing examples of how to apply your scale and the final bonus thing was making a scale fluid. Okay. This was amazing. Thanks a lot for this fantastic talk. There's already comments coming in which says fantastic talk. So that's that's really great audience. Thanks. If you have any questions that you would like to ask Hamsa. We have the next approximately 20 minutes time 20 25 minutes time to ask questions to Hamsa. If you're on YouTube, please post your questions on the live chat. If you're on zoom, post your question on the usual chat and just have a little bit of patience. I'll slowly get to each of the questions one by one. But I'll start off with a few of mine because I'm moderating. So Hamsa, how many websites does it take to create such a clear structure technique that you just shared with us. How many websites would you have under your belt to get to this level of clarity in process. The process I think I think it was the, I think with this information that gap can be a lot bridged I feel if I had this talk honestly like if I had this talk, when I was starting off I could have saved work and mistakes I think the it was just about polishing the mistakes itself as we go forward. So I think the process was always that was just getting it fine tuned. And honestly, this is everything that there is to know about it like if there's more time there's just like going deeper into different types of spaces and things like that. But it's the I feel you don't need to I can I think you can do it exactly down to the team from your next website itself. Exactly. And, and the thing is that this is 40 minutes or more than that 45 minutes spent on just type scale. You're not even you're not even talking different aspects of design over here. This is just the data points and the measurements and the scale the ratio and the base. That's that's really amazing the depth to which you covered the entire process. But when you just said that you could have avoided some mistakes in the past if you if this technique and all these things were clear to you before. Tell us a story you know of things going wrong when you didn't have this technique so that people can relate to what are the kinds of other than the few symptoms that you pointed out right at the beginning. What are the larger experiences that are or some experiences that you can avoid. Sure. So I think just like you know you take a foot ruler to measure you know when you go older and secondary school you take a foot ruler when you're in primary school you have six inch ruler when you want to measure something in your room you take like a big tape. So the thing is you also end up taking you end up if you have a ruler you don't you don't need to use every single unit on it. So what was probably a thing that a mistake or rather something that I've learned to understand is like you need to take these as as recommendations as guidelines for your for from like as guidelines that come from the space that is being fed by inputs. But it does not have to be the holy grail like I think that is something that I've learned as we go forward because another thing that I've learned a lot is like to trust your eye for a lot of these things because sometimes when you say the measure has to be 15 words or like 10 words. There are different typefaces that kind of create that need that could use different amount of line length you know so I would say the question some of those things that you've been hearing like for me, I love the modular skill because it saves me a lot of time and and now I've got it got into a place where what you've seen over here when I'm doing for a project it takes me kind of a day while I'm working simultaneously on pipe and grid. And I think that's the best investment of time that beginning of the project before any of the screens go because after that it's just being dictated so for me I've understood like I feel like my talk is only going to address half of it. The other half is going to be when you actually use the scale you know and you try using it for your phones and for your use case suppose you want to replicate this entire exercise with say a brochure website with say gill sense and you know and but only try doing that and seeing how you'd use the scale so I would definitely recommend trying it. How much time how much time do you think this saves realistically because I think I feel from my experience that it can save not just designer time but also developer time also the time for going back and forth justifying to the client why is it this size. I think some quantum it can save like that's my experience like almost like 20 to 30% of wasteful time if you if you start off with this discipline. Do you think you would agree with this or do you think it will be different. Now I agree with it although the clients never see the scale they don't know any of this process that goes on but it's usually more from an internal process point of view but we don't have to justify whether the typeface should be because you also have stops in typefaces right so suppose 73 didn't work and they're like it's not happened really where they like make the typeface is a bit bigger but you also have that stop which you can again consult the scale. For exactly what that value is going to be so that's the beauty of it when you're when when a feedback like that comes you don't think of. Oh no like this looks good how can I do it you actually have a stop to try it on and and then prove that it doesn't work you know so I completely agree that it saves a lot of. I think I think the place where it can save client interaction time especially after a website gets done and then our clients stop interacting with the designer who had made the original design and they want to add a component or a page to the site and at that point of time the client would often suggest just may just give us a place where add this element and create a new card for this or we quickly need a banner for us to show and over there they would probably suggest something which would deviate from the type scale and you can then show them back that we want to reuse the same scale that we have across the website. So these packed jobs that clients would suggest at a later time you can orient the clients much faster towards these scales that have been created. For sure. Absolutely and while you were sharing this process you did start off with doing the desktop scale first or at least the desktop type setting first. What are your thoughts on starting with desktop versus starting with mobile. I think in this process especially where we are not going to the scale before collecting both those data points it is kind of immaterial. The reason why this followed this process is because the decision makers for that wireframe that I showed and the examples that I'm showing they were able to take decisions on your desktop. So a lot of the process was done so it's mostly like habit out of habit that I showed the desktop one first in this case but I think in this case it particularly does would not matter because you have to do both solve for both before going further. So there will always be body text size in on desktop as well as mobile so solve for both of those and then go into that data point but a good one thing that I also wanted to point out is that if you notice we had gone into the scale after we did both the body text size as well as the heading size. You can also keep going what I what I didn't show over here was how I go back and forth a lot where I kind of after I create the body type face for desktop and mobile I'll go and I'll just play around with some numbers on the on the scale so that while I'm setting my heading size I have these numbers and and I try these different things so one thing one big aspect that I don't I haven't shown you because of just like the format of the talk and the time is how you kind of keep going up and down while while and creating and try consulting coming back and things like that. Yeah, next up next up we'll have more of these. Okay, so let's take a time spent on talking about type scale. This is, this is a type geekery almost because as I said, just type scale 45 minutes. Oh my God. It was amazing. So let's take this question from Prasanna. So Prasanna ask why is base font size 16 pixel for one M. Can it be any value or rather what is the best way to arrive at pixel value for one M. Okay. So, I think we have to be there a few things over here what is an M what is because so go ahead. Okay, so this, so M. So you have different units in that topography called M and root M. So root M is is also like fondly called them. So here what what route and I use root M and I think I think so big it would be helpful for you to talk from the end point of you as well. I'll speak about root M for sure. So what root M when you're assigning a pixel. So what what what you're essentially trying to do as a designer is give the relative values of your scale to your developer. So what the developer then does is create your scale in, in, in a way that responds to the user browsers user users browser preferences, as well as the users, the user screen size, etc. So now, when you basically what how when you give a font size and Ram, the use usually most browsers default to 16 pixels as their base font size for body text. So one Ram in most browsers is equal to 16 pixels. So, when you're giving the measurements for body text as 18, 18 pixels, your developer will convert it to Ram so that if your user the users looking at your website is kind of like looking at it at without any user preferences set, they will see it exactly that you intend. But the benefit of giving your font size value as Ram is that when the user has said that you know this I want all my type size in my browser to be slightly zoomed in. So I want my type size to be set at 110% or something or 120%. So then your base root font size, like one Ram will no longer be equal to 16 pixels. It'll be equal to say 18 pixel. So and by you giving your measurement in rents, it becomes a multiple of that so it always responds to the user input and this is something that's very important to be done because while we are serving pixel and we want our layers to look and we are going to be a lot for accessibility issues especially it's going to be very helpful for you for while as a designer you're creating stuff in pixels because these units are not there and don't need to be there on design software as developers these units need to be translated to Ram so that it always responds to user units so one Ram is equal to 16 pixels only in most browsers only when there is no preferences set by the user but that could keep changing based on those preferences so I just add I just add to this a little bit. So one of the things that there are plenty of units available in CSS, but let's just for this conversation sticks stick to pixels Ram and M. The when the most outermost container which is the HTML tag that that is there sets the base font size for your entire webpage and as you go into inner containers a body inside body there's a div and then inside say order section and then inside section there's a div then there's a paragraph. One M is always equal is always an inherited value from its parent container. So if your parent container sets the font size as 20 pixel. Any child node that is there one M will become 20 pixel and then if you do 1.1 m it's going to be 20 pixels into 1.1. But the RAM value this which is the root m value will always remain fixed as whatever is the the the font size that is set on the HTML tag or the most base font layer. What this means is if you are five or six layers down as a child container and if you query for one Ram value it will always remain fixed because it's a static value across the page. But if you test for the M value it will keep varying based on what the parent font containers font sizes. So if you always want a predictable type scale to all follow you should probably avoid M's because as soon as you have given a font size of say 20 pixel to a div tag the paragraph inside it you want 22 pixels. You will have to start calculating how much should I multiply 20 pixel width to get 22 in a way in the M's. But if you have a base font size which is set in RAM you can always have the fixed ratio or the fixed type scale that that the the designer has given. So using Ram becomes a preferable mode because you'll always get a consistent pixel value finally translated and what what Hamza just said about the fact that most browsers start with one Ram equal to one M for the outermost container equal to 16 pixels as default. And then user preferences can change the base font size like on iOS and all you have larger fonts I want because for accessibility reasons you're not able to read very small font so you might want to increase it. In that case the base font size might be more and therefore when the implementation is happening for our for from purely an accessibility reason so that people are able to magnify font increase the font size and decrease the font size across the board. Using Ram is a preferred route to go so that the consistent ratio can be maintained across the document essentially. I hope this helps a bit but do go and check out how M's behave and Ram's behave and pixel is but the final implementation is rarely in pixels for accessibility purpose again. Right. Shweta had asked another question. So here's a question. What is an adequate line height for mobile canvas. As you mentioned for desktop it's ideal to have max of 12 to 15 words per line length. So oh line length right. I was seeing a disconnect there so measure. So what is an ideal measure. Okay. So one mobile canvas especially I wouldn't worry about that too much until it looks optically correct. And I think that's why I want to buy it. It's not about being subjective as much as it's about training your eyes. So I would say like look at websites like it's nice that and all of those you know blogs that you read regularly on medium and just see what are those line lengths that are so transparent to you that you didn't even realize that it is. It fits well. So I would say do whatever feels visually right for that aspect especially but one good relevant place to kind of figure this out is when should line length matter right. So when you're kind of opening your browser so usually in the measure that we set for our body text in our previous example. We had set a measure of says I think it was about 640 pixels that that entire container was about 640 pixels. So until until say our browser has enough padding on either side so maybe 720 pixel measure doesn't matter at all because at the end of it when you're closing it body text is going to take the margins that you define on either side. But what I usually do and is in this break point between 500 to 900 around that time where I'm probably using mobile design and I'm not using desktop type phases. I would the measure would become would run a lot like a lot of like words align. So there what I end up doing is including a measure again so that it optically sits well. So I wouldn't worry too much about the measure on mobile unless it looks good and it has margins on either side. But in that 500 to 900 or 1100 wherever you're using your mobile designs until you should check them check the padding on either side of the text because there is there's a potential with using mobile type that will run a lot of lines. Yeah, I would I would add one thing on mobiles because the device is portrait and you don't have much width. If you're using super large fonts and you're not able to fit too many words align the number of line wrapping that word wrapping that will happen at those places you might want to check that ratio a little bit not use too large font sizes. I think that's where sometimes it gets weird just just a line that is fitting one word or two words and things are wrapping very quickly. I get that that can spoil your design. Yeah. Yeah. Okay, so if anyone has any other questions and if you want to add a follow up please put it in your comments and you can also we can patch you in so that you can ask the question to himself. Having said that, let's talk about writing CSS also as well because you started off right at the beginning saying that you're you're at the sweet spot where there is CSS on one side and the design tools on the other side. How important or how significant or how much more empowered can you feel if you have the knowledge of CSS or the backing of the CSS, especially the fluid side of things. At some point, the design tools are going to start failing in order when whenever you have formulas and all and the things are going to turn fluid and that's when CSS becomes significantly more powerful. What are your thoughts on that. And how would you recommend designers to actually go through the CSS options that are available. Yeah, I think they're going to sound like a shameless plug but there might be a workshop happening and we are still planning it around end of Feb where we are looking at what is the essential CSS that every designer should know. And I think, like, like we are planning it with Hasgeek itself so that might be that comes out of this need I don't think every designer needs to know how to code but I think it really helps to know how to set. How type gets set, how REMs, I think REMs are very important to know because then you should be able to test your design at 110 user preference size right, 110% if a user set 110% as a preference, you should be able to be able to simulate that and for that you need to understand what REMs do. So I think there are a lot of such, there are lots of such elements to composition and typography that I think are very important to have as a toolkit but I again don't think you need to know how to code. So I think, yeah, I don't think it's, I think that gap can be bridged with more talks that happen in that intersection. Yeah. Okay, there's a reverse question that has come in from bridge as a developer who wants to work on design. What is a good starting design tool to try out to learn these skills? I really think Figma is really doing a good job these days like especially because it's free for if you're using it personally and it's really good as a software when it comes to even giving handoff to developers. So I have noticed and it also is not mac, it's not operating system agnostic, it is operating system agnostic so I think Figma is definitely something I'd recommend. There is a few things that Sketch is doing better in terms of like where the base of the typeface aligns and being able to calculate distances like that but I would say if you're starting off definitely go for Figma. You can also look at the Figma resources for places that you can start with like they might have like sticker sheets like a few wireframes done so it's always helpful to use that when you're transitioning into design. I have started with like traditional tools like Illustrator InDesign and I think it's also all of this needing the control over type also comes from the fact that I've set baseline bridge on InDesign and you know set type on that with extra correct paragraphs spacing all of those things. So I think it's mostly a yearning for that kind of control to happen even on the web so I think but from the software that I've tried like I really enjoyed Figma. Right, also tell us one thing Hamza, why should someone take the pains of going through this entire process of creating your type scale, can you not just borrow type scale from somewhere and just use it, slap it to your design. What is the advantage of going through this entire process? You know I knew someone last this then I created this screen, this bonus screen so which is why I asked this, okay I asked this but okay cool. But I think it is needed because as you say if as you see the three typefaces which is like Mrs. Eve's Poppin and Roberto, if you look at each of them in 18 pixels that we started setting up our fonts in, you'll notice that all of them look very very different. So the reason why you'll end up with different type scales for different typefaces is because you're basing it on type and that type is very different on different sizes itself. I would also just mention that there is a relation also with the number of basis and ratio you would choose for. Say for example you have Mrs. Eve's, Mr. Eve's here and you're going to be using Mr. Eve's through and through in the project and it's a brochure website. It's likely that you need only one base and one ratio in such a case because you want just a lot of variation so that you have these big bold headings and stuff. Mostly when whenever you have these big bold headings I would definitely say that those can actually be an external value of a single scale itself. When you need to kick in two scales is when you want to in mostly two cases that I have observed one when you want to work with a secondary typeface that is a pairing, which is pairing almost in in the hardworking copy not in like these big bold headlines, like in the example we showed. There is a good case for having two scales, as well as another reason for having two scales is I end up using my scale even for line height so all of the line height is also informed by values in the scale so for that I like using the second base so that there's more of a variation created so that in that 20 pixel from 21 to 20 to 30 I have about only two to three options for me to choose from likewise from 30 to 40 I have two options to choose from so those are some of the things I look out for in a scale. Every project I've used all of these three typefaces in different projects and I've noticed that every project requires different type scale and for me it also extends to all the elements which I, I enjoy that it does but it's not for everyone maybe. Yeah, even the fact that you're saying that having restricted choices when you're taking calls, taking design calls that you're considering that as a good thing, many designers would not consider that to be a good thing that why can I not make it a notch bigger because that's where it looks perfect. And avoid that a jump from 24 straight to 28 I wanted 26 as an example for this specific use case. The way I think that this also requires do you feel this requires a kind of a mind shift change from print or something like that wherein you adopt this because you're working on projects where there are significantly larger number of pages are being built. I think, and I think you also adopted small so that I would say adopted even in better your project is bigger small because the more you practice it and the more familiar you get the more like I started enjoying the scale over the last two years because it gives me like it's like a tool like it's like it's almost like a toy that I end up playing with but for me, making all of the decisions from like I don't want to develop a who's developing coming back and saying but what is the sizes of the small spaces that we use so in the scale I also annotate what are these are large spaces these are small spaces so it extends so much further that you everyone who's working on the project has that slight independence to take some calls themselves you know, and I think that's more empowering than anything but having said that the amount of investment that you need to do up front in a very systematic manner is a lot more than having the ability to make decisions on the fly so but I would say that it's a it's it pays off to do that. And what if after you've done all this work you need to for whatever reason maybe the client wants is have to change the typeface. What how would you deal with that situation what does that mean for this process. This has never happened like because I think I would if it happens that would like because for because I've spent so much time on the scale and everything when such a suggestion comes, I actually very realistically explain to them what that would mean. It's a very subjective need like if it's a very subjective thing that this does not look too good, it's mostly solved at a visual exploration state so there is a usual buy in where I'm saying that these are the typefaces these are the funds you need to license this is how much you need to pay this is how much the body textures, I know from these because once we start with you working on this we're not going to change it. And that becomes a new engagement altogether. How do you, how do you convince a client to sign up for a font without even seeing the pages, how it looks. I think it's always helpful to say as a point of view of selling is always useful to sell the display typeface or something that's doing a lot of heavy lifting so it's mostly to say. I literally make a case for the typeface I say that you know what what this organization needs is this this this and what we where we are looking for this is not on Adobe because Adobe has like very, we want to look at like smaller founders that have very unique like not smaller but like the founders that are creating more unique typefaces and stuff so like village or really and things like that so it would to start making a case for that and and this comes from the graphic design background itself we had to ask people to license fonts quite a lot so it comes from that habit but you can do it with just creating a very general look and feel I also like to offer an alternate like when we are doing licensing if for some reason it is not possible I like to keep in mind an alternate but in some cases where I just believe that they should do it, I just go all out selling that that's what has to be done. And one point that did come out come out in our conversation I just wanted to put it out there that having a good type scale can often save you from adding more number of typefaces which if you if you can discipline yourself to use create these good contrasting type elements through just scale being changed or the sizes being changed in that case you probably introduce fewer different fonts like for example sometimes you pick a font only for meta details or just a very small fine print and then that's another typeface you add and it adds weight to the page and the page slows down. So instead if you would take that entire scale and test out a range beyond what you thought would be used can be really useful as well in keeping to fewer number of typefaces. Yes, for sure. Okay, we are almost at 1230 last chance if there are any questions from people to shoot it shoot that it. Otherwise, Hamza, if you have to do another session with you what should the topic be my last question. The topic should be now what I want to learn more about so that while I'm creating all of this stuff like it would be, it's really nice even working on this presentation because I learned a lot about the ratios in the scale while creating this presentation for the first while, you know, like, and I was able to articulate a lot about my need because of extremely internalized process so I think I would selfishly choose something that I would like to kind of learn about but I feel like maybe variable, I don't know variable type I'm not sure but I don't know what we can cover for a long time on variable type but yeah I think something like it would be something that I want to explore. Yes, that's okay I'm sorry to put you in the spot but Hamza in case you want your thinking of topics you want to explore more, please visit has geek.com slash content web. That is where you can go in and put in a proposal or even give a suggestion for a talk so that we can find other speakers for the content web channel. And obviously this goes for everyone out there who is joining in. If you go to the website has geek.com slash content web in the proposal section given your ideas about any other topics you will want to listen to from Hamza from anyone else if you want to suggest a speaker do that as well. It will help us create a lineup for the coming year for the Saturday conversations. And having said that I think that is going to be a wrap for us. Thanks once again to has geek was the organization which has recently turned 10 thanks a lot for giving us the space and all the audience members who have joined in, asked your questions and and and given us your Saturday morning. And thank you Hamza that was an amazing presentation. Likewise, thank you so much so we can I enjoyed the Q&A so thank you everyone plus Anna Bridge, everyone for asking your questions and yeah I enjoyed this it feels like chatting in your office so it's really fun. Absolutely. Thanks a lot. Okay, bye everyone have a good weekend and have a good Christmas New Year and and good holiday season and have a good break Hamza. Yes, thank you. Take care happy holidays. Bye bye.