00:00 Okay, so we've done the typographic styles for the mobile design and we've established that they were pixel perfect. But now let's make the responsive adjustments starting with the SM breakpoint. So I'll zoom in a bit here and if we select the heading tag, let me just bump up the

00:14 user interface zoom level so you can see a bit better. So our font size here is 42 pixels with 48.3 for the line height. We'll assume that this 0.3 is a little imprecision and try to go for something like 48 and that is for the small breakpoint. So in our h1 class which we have

00:32 text 4xl at mobile, at the mobile size, let's target the small breakpoint and we're gonna go with text. Let's see. So we're looking for 42 and 4xl is too small and then 5xl is too big but

00:46 remember we've created this in between 4.5xl and 5.5xl where we've also specified the line height as per the designer's choice. So let's go with that and now as I increase the screen size we should see the jump. Yeah it's right there. You can see the jump to 4.5xl font size and so this

01:04 was explicitly defined here. So we've used that which is made for the small breakpoint heading. Chances are we're going to increase to 5xl and then 5.5xl since the designer has listed the different sizes here. Let's find out. So we're done with the small. Let's check the md which is

01:21 this one. Here the font size is 48 pixels and 48 line height or 1 and so let's target the md breakpoint and go text and let's try 5xl and yep this is exactly what we want 48 pixels with the line height of 1. Nice. Let's make the last one and then check all of them by increasing the

01:39 viewport size. So if I move on to the next one which is the lg breakpoint we have 54 pixels with the line height of 1 and if we check the xl which is the last breakpoint it is also the same size

01:52 54 pixels. So this is our last change at the lg breakpoint. So lg and I believe this is where our 5.5xl custom utility class for the font size will come handy and yep that's the case. Let's increase

02:09 the viewport size and see if we can pick up all the jumps in sizes. So the first one happens right at the start right here from 4xl to 4.5xl and then as we keep going the next one will happen just here at the md breakpoint and there should be one more jump as we reach the large breakpoint

02:30 right there and then it stays all the way like this. Awesome it's working so now we can go and do the same treatment for the paragraph tag. Back to mobile here we start at the text base which is 16 pixels and then if we move to the next one which is the small breakpoint we are moving to

02:48 18 pixels and 28 line height. Let's scroll down to the paragraph and for the small breakpoint let's go with I believe text lg which is exactly the size and line height that we want. If we move

03:01 to the medium breakpoint we are now at 20 and 28. md text xl is that the one? Yep that's the one and then we end up at the lg breakpoint. Is that the lg breakpoint? Yep so here the paragraph is

03:18 still 20 and 28 so it hasn't changed and let's go check the extra latch the last breakpoint and we're still at 20 28. So the two changes that we've made at the small breakpoint and the medium breakpoint is all we need and let's verify the changes. The first jump is right there along with

03:35 the heading and then the next one is right there and we are done with the typography responsive changes.