Simple solutions to responsive typography

having to maintain a website with multiple break points where font sizes are changing between them all over a whole bunch of different elements can be a little bit of a nightmare but luckily thanks to modern css there's a few different approaches that we can take to making life a lot easier on that front if that sounds like something that could help you out then stick around hello my friend and friends and welcome back to the channel i'm so happy that you're here to join me today and if you are new to my channel my name is kevin and here at my channel i hope you just fall in love with the wonderful world that is css and if not fall in love with it at least be a little bit less frustrated with it today we're going to be looking at some modern css techniques that you can use to maintain the responsive typography on your site and i'm also going to look at a mistake that people often make and why it's so important that you avoid it if that sounds good to you then let's dive right in all right so i've created this simple site right here and you can see that when i pass a certain breakpoint my font sizes are switching h1 shrinking the body size is shrinking everything is adjusting and this is a really common thing to happen because as we have more screen real estate we have people further away from the screen we want to increase the font size and to do that we often have media queries everywhere that are doing it so i have my body that i'm changing then i'm h1 that i'm changing and my block quote that i'm changing and so on and so forth and of course i have them here spread out everywhere but you might also just have one media query that's just has everything that's changing in it in one spot and that's awesome too but one of the reasons this is a little bit annoying is because usually you'll have a design system that you're following and for me my block quote which is this guy down here as well as my lead which is this guy right here are sharing the same font size so you have the 1.5 that's getting changed to a two here and then you have another one over here that's a 1.5 that's getting changed to a two and you might have three four five different elements or components that are sharing something like this and you have to remember to include them all and then if you know you create your media query and you forget one of them and then you know you have to go and make that change after because the you know my leads not changing when it's supposed to even though the other one is or then the design team comes back and they say actually you know what these should all be three instead of a two so you're like oh okay not so bad you find your block quote you change your block quote to a three they're happy with that they go yeah that's great but you forgot the lead and you go i have to go back and change the lead and that sucks you don't want to maintain all of this stuff so what i'm actually going to do is i'm going to delete all my media queries all right so all my media queries that had to do with type are are gone so now you can see i still have my two column layout coming in but everything else the text is all staying the same and what i like to do is i like having my font sizes here so i'm gonna do a font size of excel and we're gonna see why it's excel in a minute a font size of we're going to have a 600 a font size 500 and a font size 400 and if you're wondering about the name the numbering convention i used here and you can see i'm using numbers over here too i base it on the same ideas font weights so the 400 here would be like your base one this is your normal i use it for my body and then i just go up from there or down from there just because i want to keep the same numbering convention that font weights use and i find it easier so here i'm going to say this is one rem this one's going to be a 1.25 rim this one will be a 1.5 ram and for now i'm going to do this one as a 5 ram but we're going to play with the xl a little bit more in a second so i'm going to set that up so on my body here instead of i have my font size so instead of one rem i can say that it's var font size of 400 and let's just copy that actually and then we can come into my block quote my block quote the font size should actually be my var font size 600 as should my lead is also the var font size 600 and i thought i needed a 500 but we'll stick with that and we can see now uh that we've set that all up it's working it's just like it was before but the nice thing with this is you can do one media query right here for maintaining so we can do our min width of 40m just like i had before and then in here i can redefine different things that are in my custom properties and this is something you can't do with a preprocessor variable so this is one of the really nice things with custom properties and what i can say here is this becomes a seven this is i'm going to do a two point oh we'll go two it's big enough difference this one we're not actually using so let's delete that because we don't need it and then this one can be a one point one two five and so now when i pass that line right here you can see that everything is adapting now this is a really simple example so we don't have a lot of repetition but the nice thing with it again is i could change this to a 3 and change this to a 2 because my design has updated or the design team came back to me with something else and because this is being used in those two different spots my lead and my block quote they are both adjusting when i hit that break point and i think this block quote might have been behind my face a little bit there so i apologize for that but we can see that it is adjusting automatically at least you can see the lead switching there and you can play with this codepen if you want as well to see them both changing when we hit that breakpoint of course my h1 i didn't switch that one so the h1 should be my var font size xl and that's the next one we're going to explore so now we should see that shrinking and growing as well and this is the next one i want to explore and this is where we're actually going to look at a bit of a mistake that people make first and then the better solution to it so what i'm going to do is take off this excel from here and again one thing before i jump into it the thing i really like about this is you're maintaining your entire type system all right here at the top of your file which is just so wonderful you don't have to go hunting for anything you don't have to find anything it's so great um but then what we can do here is and this is something i see a lot of people do is say like 10 viewport width and then what happens is the font size is linked in to the viewport width and you get this fluid type and actually because it's big let's make that like 15. um and then you get this nice big font it's adjusting it's completely fluid people love that the fluidness of it and everything but there are concerns with it first of all small screen sizes it can get really small or if you're on like an ultra wide monitor it's just going to be extremely big and actually potentially hiding other things causing some other issues so there's that problem with it plus what people do is once they discover that they start going oh i can do that well why do i need why not just use that everywhere and then they come in and say this is like five viewport width and you hit save and then you get like this or maybe five's a bit big let's try two and then you get like this fluid design system and it's working everywhere and it's wonderful but i mean look how small that's getting its smaller screens your phone it's going to disappear large screens again it can get really big and the other issue with this is you can't zoom in or out on it no i'm in codepen so it's a little funky if i zoom in and out here but i'm going to go to the live view in another tab and you'll see i'm going to zoom in and out and you can see that the text that wasn't set in viewport units is actually adjusting my margins are actually changing a little bit on stuff but the text that was set with viewport units is not changing and imagine if this is too big people are like oh that's too big they want to zoom out and the text doesn't change or they're on a smaller screen they're trying to zoom in because the text is tiny it doesn't change so using viewport units for typography is very much not a good thing as far as accessibility goes but there are solutions to that um the first thing i would suggest is not doing it for smaller text unless you have a nice system because there are ways that you can actually make fluid systems like this but just with the ease of setting up the changes like this within a single media query i don't mind this at all i find it really easy to maintain and then where you do want it i tend to do this on my my big text that's why i did in excel here is use the clamp and what clamp does is it lets you set a minimum so we're going to go with like a 3.5 ram a growth rate so i'm going to do like 12 viewport width plus one rem and we'll look at that in a second too and then over here i'm going to do my like 8 ram or something pretty big and so it means this is the size it wants to be and you can do math inside the clamp so it's 12 viewport width plus one rem and what that allows it to do is that's you're going to see and actually we can make this bigger i guess 12. so what that means is it can shrink and can grow we're taking advantage of that growth factor that we're looking at with the viewport units but it means it will never shrink smaller than 3.5 rem so at small screen sizes you don't risk it getting tiny tiny tiny and you will hit a maximum of one point and it will stop growing at that 12 rem that you have here and i love this so very much i think that's a really nice way to handle really big text where you want it to take up lots of screen real estate at large screen sizes but less at small screen sizes it's just so wonderful and again having everything set up right here for your entire typography system within custom properties just makes so much sense these days and having the rem in here it does allow that if somebody is zooming in and out that it can still actually affect the font size as well so it will zoom a little bit because that one ram as people zoom in and out is being affected so that is responsive type and if responsiveness in general and responsive layouts and all of that is something that you struggle with i put a custom playlist right here for you in some of my own videos that dive into making responsive layouts and dealing with responsiveness in general and with that a really big thank you to zach randy and stuart who are my supporters of awesome over on patreon as well as all my other patrons and of course until next time don't forget to make your coin on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 48,430

Keywords: Kevin Powell, clamp, css, css responsive, css typography, custom properties, front-end, frontend, html, responsive type, responsive typography, tutorial, vw, web typography, responsive web design, responsive website, responsive design, responsive css

Id: wARbgs5Fmuw

Length: 9min 21sec (561 seconds)

Published: Tue Sep 07 2021