3.1 Wrapping Up

Hey, great work you just finished a visual guide to em and rem units. We're just gonna wrap things up by condensing the main things that we've covered in this course into a few really clear dot points that you should be able to take a way with you. Number 1, rem and units get converted into pixel units into the browser,that's the really foundation concept there. Rem units are converted based on the HTML element font size, unit is converted based on the font size of the element those units are used on. Units can potentially be affected by the font size of any parent element via inheritance. Rem and units can both be affected by the font size settings in the browser. And that's through the fact that the HTML element itself inherits its font size in turn from those settings. And then down to our summary of how to use these units. You use rem units when you want your layout to be scalable based on the HTML element font size. Whether that is for the benefit of your users or for the benefit of your development processes. Use units when you specifically want a part of your design to scale based on a font size other than that of the HTML element. For line heights, don't use any unit at all to make sure that your line heights are always accurate to the text they are being used on. Use neither rem nor em, use pixel units when its very important that you have a fixed size non-scalable layer. Or if you prefer working with pixels and you don't find that any of the benefits of scalable units are relevant to the project that you're working on. On the other hand, if you prefer working with pixel units but you want the benefit of scalable units in your project, then use a tool that will convert pixel units in your code into rem or units for you. So that's everything. Hopefully, you've come out of this with a pretty clear picture of and rem units and a good idea of how you wanna use or not use them in your projects. So thanks so much for taking this course, and I'll see you in the next one.