Changing the layout's width

- Then next thing we're gonna talk about is the general layout of the page. Now at the moment, we have that general layout of the page in these red lines, but we can kinda work out that the whole page itself when we have it as a frame, was this. But we actually want our content to live within these red areas, our layout grid. So remember from earlier, when we had this comment from Andre, that maybe there should be slightly different, so now is the time where we start to work this stuff out. What should it actually look like? Well for Andre, these gaps between the columns were a little bit too small, so what I'm gonna do is, is just tweak these and basically reset them.

So, I want the gutter to be a little bit wider, just a little bit too wide on the page, so I'm gonna make my width a little bit smaller, some nice 64. Again, my eight column grid, so again there's a bit more space between things. It's kind of the same width as before, but now what I can do is, is work out the entire width here. Now, I could just then go and change my whole designs, but instead what I'm gonna do is just quickly work this out using a rectangle. So just press the R, just a kinda quick select for here, for the rectangle shape.

And I'm just gonna go to the top and draw how big this rectangle should be; how big is my page, how wide? So my page right now is 1220, oh sorry, 1120. So what I'm gonna do next is make my whole page this width. So, what I'm gonna go and do is in my style, I have my body. My body is the basic content container for the whole page itself. So a little bit like the frame would be in Figma, we're gonna do the same thing.

So the width of this page isn't 620, it's actually a lot more, it's 1120. So I'm gonna change this, 1120. So what this will do right now, is it will make this obviously a little wider. What we need to do next is kinda add some space at the top as well, because if you remember from Figma, we'll get rid of this rectangle, this header from the top of the page. If you press option, is 80, and if you look at the bottom of the page, this is also some like 48, so we're gonna add this in as well.

So the top at the moment, is what? Well the top of the moment again is clockwise, top right, bottom left, is just 40. We're gonna increase this to 80. The bottom is 40, gonna increase this to 48. At the moment, it says auto on the right and left, auto and auto, and basically what this means, is this centers the page dependent on the width. So if I just zoom in and out, notice how this changes. I've got quite, I'm zoomed in quite a lot just to make this easier to read, yours might be in the middle, we can actually change the width of this page to see what is going on.

Now, this is fine for desktop view, later on we'll talk about the mobile view a little bit more, so let's not worry too much about this just yet. The main thing that we wanna focus on next is the typography. At the moment, we haven't got the right type face across the whole page. At the moment, our whole page is in Arial, there's nothing overwriting this, but what we want to do on the final version of this, is use the correct typography. So how do we import the fonts?