The rem unit is used to define fonts in relative terms rather than with an absolute size in pixels. But did you know that this unit is useful for layouts as well as typography?
In this video tutorial from my CSS Layout course, you’ll learn why there’s a huge benefit to using rem units for layouts.
The Benefits of Rem-Based Layouts
In the CSS Layout course, all of our layout specifications are done using the rem unit. As we mentioned in more detail in the typography course, a rem unit is a multiple of the root font size for your page.
The rem unit is useful not just typography but also for your layout, and I’m going to show you why you should use rem units when you’re setting up your layout.
Let’s start with a look at the sample page we’re working on:
If I then change the font size in the browser, you can see that the font size increases on the page:
Now if I keep increasing the font size and I refresh, now you can see that the whole layout has adapted to take account of the larger font size.
Everything is still readable, and that’s possible because by using rem units to set up our entire layout, we ensure that everything is flexible depending on the root font size of our document, which comes from the browser settings.
In the same sense, if I decrease our font size back to a really small size and refresh once again, you can see the whole layout has shrunk down once again.
So by using these rem units, we make sure that when a user changes the font size, not only does the text itself change to suit, but so too does the entire layout.
Watch the Full Course
In the full course, Start Here: Learn CSS Layout, you’ll put what you’ve learned in this video into practice by creating a variety of layouts using rem units. You’ll learn everything you need to know to create the most common types of layouts in web design. We’ll cover sizing, alignment, spacing, and best practices for creating responsive CSS.
If you’re just getting started and want to master CSS, check out Learn CSS: The Complete Guide.
Or you could experiment with more courses from our “Start Here” series for web design beginners:
- Start Here: Learn HTML Basics
- Start Here: Learn CSS Typography
- Start Here: Learn CSS Colors and Backgrounds
{excerpt}
Read More