Stop using pixels in your CSS! How and why to use REM and EM.

i'm not good with accessibility for the web i'm kind of ashamed to admit it but it's been on my mind for a while so i'm gonna try and do better the other day at work a colleague of mine raised in a devsync meeting how we need to stop using pixels and yeah as you could probably guess it's because they can be quite problematic when it comes to accessibility let me give you an example so as you can see here i've built a simple application using html and css and we'll start here by taking a look at the different font sizes we have in the elements tab here so if i look at the p tag you can see here that this is fixed to a font size of 16 pixels h2 is fixed to a font size of 24 pixels and we can have a look up here we've got a h1 which is fixed to a font size of 32 pixels now if a user was struggling to actually read the text they might be able to use the zoom tool which you can just do command plus to zoom in on chrome and that does make the text bigger but what you see is it's actually making every element bigger and it starts to move things around and looks a bit funny so it's not really ideal when it comes to accessibility every modern browser actually has a way to set the base font size so if we look at the chrome settings here you can see there's a font size section and it's defaulted to medium now if i was to change that i could change it to large very large very small or small so if i was to change the font size to very large you can see that these elements haven't changed at all the list itself has changed and that's because i haven't set a specific font size on the list so the list has inherited its font size from the browser but you can look at h1 and that's still set to 32 pixels it didn't change the other two h2 is the same and the p tag is also the same so you can see here 16 pixels and 24 pixels that hasn't changed so the way around this is instead of using pixels we're going to use rems so i'm going to i'm going to change the font size here to two ramps i'm going to comment this out and that's to 1.5 ram and then the p tag is gonna go to one rim now i'm gonna give that a refresh and you can see by refreshing the very large font size has suddenly kicked in so i'm gonna change that back to medium you can see that that's back to normal i can change it to large it gets a little bit bigger i can change it to very large it gets even bigger so now we actually have a responsive font size so what is actually happening here so the browser is taking the rem value and is actually using the base font size to calculate a pixel value so if i look at the h2 here for example you can see yeah it says font size of 1.5 rem if i go into the computer tab you can see here it's actually returning that font size of 24 pixels which is what we initially had it set up same for the p tag the computed font size for that is 16 pixels but we are seeing a font size here of one rem so if i was to change this again to very large you can see now that the computed value of the p tag is actually 24 pixels so what's actually happened here is that the base font size of the browser has gone from 16 pixels to 24 pixels similarly if we look at the h1 you'll remember we set that at 2 rem the computed value of that is going to be double the base font size so that's now 48 pixels again if you go back down to medium you'll see that the base font size is then 16 pixels and twice that is 32 pixels so that's how rems work and then we'll go back to very large and you can see we have a problem here with this actual box and we'll inspect the elements and we can see here that the height is set to 50 pixels so if i was to swap that out i'm gonna comment in five rems and uncomment that you can now see that the box is also resizing so i go back to medium the box gets a bit smaller go back to large you can see it grows and then very large it's continuing to grow so this doesn't just apply for font sizes it also applies to divs and any other elements that you're sizing now if you've already heard of rems you've probably also heard of ms and you're probably wondering what's the difference both are translated by the browser into pixels and therefore aren't a fixed size we've also learned that with rims the browser will take your rem value and basically multiply it times the base font size of the root element or in our case the browser to get their pixel value ms are very similar however they don't actually use the base font size of the root element or the browser they use the base font size of the element that they are being used in this can get tricky if you nest elements with different font sizes let me show you so i'm going to start by changing the font size of the p tag to 1 em and the h2 tag to 1.5 em now we'll look quickly and we'll give that a refresh and nothing's changed and if i was to change the size of this to very large it works as expected now change that back to medium i have the about section here which is the parent element of this h2 and p2 tag right so if i take a look at the about section and i want to set a font size on that and set that font size to 1.5 rems give this a refresh and you can see now that without touching h1 and h2 they've changed in size so let's look at about section we can see font size is 1.5 ram which computes to 24 pixels that is now the base font size as far as the ems are concerned so h2 is a font size of 1.5 em so that is now 1.5 times the base font size from about section which is 24 pixels and that equates to 36 pixels again the p tag is 1 am so that is now 1 times the size of the base font size which again we saw was 24 pixels so you can see that calculates to 24 pixels so that's how ems work there's a lot we could go into as to why you might use one unit over the other unit but the purpose of this video was to really show you how they both work and also to help you realize how important it is to not use pixels when it comes to accessibility unfortunately i've got a good bit of work ahead of me if i'm going to convert my app away from pixels i hope you've learned something new today if you could help me get this channel off the ground by liking the video and subscribing to the channel that would be really cool happy coding and i'll see you next time

Channel: Ian Lenehan

Views: 54

Keywords: web development, software developer, css, accessibility, a11y, programming, computer programming, javascript

Id: okw-whFWGEo

Length: 6min 39sec (399 seconds)

Published: Thu Sep 16 2021