We’ve looked at font size. You can use pixels to decide on the size of your font, 20px, for instance. You can use 1rem, which gives it the standard font size for the browser, or you can use 2rem for double that and so on.

Another way to determine your font size is to use viewport width. This determines the size based on the width of the screen the user has. This automatically adjusts the font size. We call this a responsive design, when it responds to the size of the screen. You want your site to look great on a cell phone and on a TV. There is more we’ll learn about responsive design. This is useful, but it’s not the key to responsive design. You don’t necessarily want monster-sized words on a TV and microscopic words on a small phone.

Another way to control size is with percentages. I like to give a page width a percentage. I use

body {

width: 90%

}

This gives the sides an automatic margin that automatically adjusts with the size of the page. If I just put in a 50px right and left margin, that might be awkwardly large on a phone.

You can give images a width with a percentage, say 50% for half of the screen. You can put an image next to a paragraph and say that you want the picture to have a width of 30% and the paragraph to have a width of 60%. The margin would be the other 10%. That way you can get the look you want on the page.

I use percentages mostly with widths, but you can use it for other things as well, like margin. I mentioned giving an image a percentage width. You would want to set its height to auto. That way you can keep the proportions of the picture and not stretch it out or anything weird.

You can watch this lesson. Don’t forget to subscribe!