 Well, my name is Ashish Ray. I am a creative designer at Cat's Themes. And the topic of my presentation is a vertical rhythm and its efficiency in WordPress themes layout and how it may help to create a better typography in our WordPress themes and websites. So at this day and age, internet has become an integral part of our daily life. We are connected to internet by various means, like to find some information or listen to music, watch movies and videos, play online games, and various others. And that's where the website comes along and simplifies our journey during our web surfing. And WordPress has been bridging the gap between the website and its users since the past 19 years by providing themes and plugins for free of cost as well as some paid versions and not to forget a very popular content management system, also known as CMS in short form. So a very basic website consists of images and text, right? Well, I'm not talking about the dynamic aspects or its functionality, but just the basic form, it's like, you know, full of images and text. And if we exclude its images, then we are just left with text, right? So my presentation will cover how to make those basic things look appealing, visually appealing, in multiple cross devices like computers, mobile phones, tablets, and various others. OK, so let's get started. I'll be covering what is a vertical rhythm and what defines a good vertical rhythm. And then I'll also be sharing some idea out of which, you know, where I'll talk about body text, paragraphs, and headings. And I'll also be sharing some tools out of which we can create our vertical rhythm. And then I will come to a conclusion. OK, so what comes to our mind when we think about the term rhythm? Anyone? Music? Yeah, exactly. Even if we search, if we Google the term rhythm, it says a strong, regular, repeated pattern of movement or sound, OK? When we are listening to music, a good rhythm sounds tight and professional, right? While the bad rhythms, things might look awkward, which is why I don't really play drums, OK? As it might sound very much terrifying, so I'm not into that part. Just like any rules, OK? The rhythm does not have to be very much rigid. And just like any rules, it can be abandoned, broken, OK? So we can dive into music theory later. But for now, let's focus on typography. So a vertical rhythm simply means, like you know, when our body text is evenly aligned with our horizontal spaces of our layout, OK? For example, you can see here, this is 2022 theme by WordPress. And you can see how evenly there's a space in between the horizontal lines, right? And for this next example, this is CATS-FSC. I've designed for CATS themes. And you can even see here how evenly there's a, how the spaces are even in between the horizontal lines. And even Dustin Tadlock from WP Travel have coded, like, you know, typography, have made a better reading experience, OK? So a vertical rhythm simply means, like I said, I can know when our body text is evenly aligned with our horizontal spaces of our layout. For example, you can see here on the left, on the left, on our right side, it's bad vertical rhythm. And on the left side, you can see it's a good vertical rhythm, OK? If we just set our base font size and nothing else, like, you know, things might look pretty OK, but by the time it reached the fourth line, it's already in between the line, right? So which gives us a bad example of, which gives us an example of a bad vertical rhythm. But at the same time, if you look at our left side, you can see how the spaces are evenly distributed among the lines. And you can even imagine, like, you know, during your school and college days, like, you know, how we used to write in copy, right? Like, you know, there used to be lines and how, like, you know, the spaces used to be distributed evenly, making it more cohesive and easier to read. So that's what we will be achieving today out of this presentation. So how do we establish a good rhythm? First thing first, we need a proper font size and its line height along with its margin and padding, OK? We need to calculate these three things and put it in our casketing style sheet, also known as a CSS in short form. We have to calculate these three things, OK? So first thing first, what we need is our base font size. And for this example, I have chosen 20 pixels and a baseline height of 1.5 AM is usually right on target. And like, you know, it's according to my experience, OK? So what we need to do is, in our CSS file, we have to set our body font size to 20 pixels and a line height of 1.5 AM and a margin bottom of 1.5 AM in our P tag. In a body tag, we have to set our margins to 0, OK? Out of which we get something like this, like, you know, in our design. We'll get something like this in our design, OK? So we have, this is our base, like, you know, since we have set our base font size, we will calculate our rhythm out of this, OK? So what about headings? As like, you know, headings are usually much larger than our body text, right? So like, you know, if we don't focus on headings, like in our rhythm, we'll be completely out of track, OK? So we do have to include headings as well. So how do we do that? Like, you know, how do we calculate headings? That's where our good friend, a modular scale, will come in hand, OK? Like, you know, this is a very good website. I really used to play around with this website a lot. During my early days, like, you know, you can also check it out yourself. Well, there are other websites as well, like, you know, there are many others you can Google yourself. But for this example, I have chosen a modular scale, OK? And I have also chosen a perfect fourth ratio out of which, from our baseline height of base font size, I got the heading size of 2.369 AM, OK? We do not have to remove all the decimals because, like, you know, computers are very much happy while working with decimals, OK? So our baseline height was 1.5 AM, right? But if we use that in our headings, like, you know, it might be much larger, right? As, like, you know, heading itself is much bigger. So if we use our baseline height, which was 1.5, then, like, you know, things might not look even, OK? So what we need to do here is we have to divide our baseline height, which was 1.5 by our generated heading size, which is 2.369 AM, out of which we get a line height of 0.633 AM. And also we need to set a margin bottom of 0.663 AM in our CSS file. For example, you can see here, OK? So, like, you know, basically what it does is, like, you know, it brings everything back to the rhythm. And, like, you know, this is what we will get out of it, OK? So, like, you know, a little bit of math and tiny bit of effort, like, you know, it can, like, you know, our design, it can really have a huge impact in our design. So coming to our conclusion, like, you know, what we'll have, what we'll get out of this is, like, you know, we will have a better typographic experience. And, like, you know, it will also increase our readability and our overall design will look, like, you know, very much consistent and aesthetically also, like, you know, it will be very much pleasing. And overall, like, you know, our design will be very well balanced and, like, you know, so that's what this particular thing is all about. Well, my name is Ashish Ray. And, like, you know, if you have, you can visit my website. And, like, you know, I usually write about designs and, you know, I usually post about designs and all. And, like, you know, we can, I know, like, you know, things, there are, like, you know, what press is going towards CSS Clams as well. I do write about those as well. But for this presentation, I have only covered very basics, okay? So if you want to reach out to me and then, like, you know, you can simply visit my website. There is my social medias and everything there, okay? So, okay, that's it. So thank you. Okay, any questions? Or, like, you can simply, you know, meet me in person and if there is any questions, okay? All right, thank you.