 Welcome to another episode of GUI challenges where I build interfaces my way. And then I challenge you to do your way. Because of our creative minds combined, we'll find multiple ways to solve these interfaces and expand the diversity of our skills. And in today's GUI challenge, we're building some adaptive typography that changes based on the user's contrast preferences. If they want more contrast will make the font weight bolder. If they want less contrast, we can thin it out a little bit. So it's not always about color, this, you know, preference for contrast, it can mean more than that. And today, we're exploring how it changes font weight. Well, let's get into building this, shall we? First, you might be wondering, what's the support for this weird media query I've never heard of? Well, it turns out it's awesome. So here's the app media per first contrast. We've got support in Chrome since before the hundreds, which also means it's an edge. We've got it in Safari since 14 Firefox all I mean, it's looking pretty good. The only thing that you might not see or you might run into is maybe the operating system doesn't provide a flag to change the contrast preferences. But in a lot of them, it is there. And macOS, you can find it in iOS, you can find it. And you can find it almost everywhere where someone can change the contrast. Usually, it's only to change it to more. So they want a higher contrast value. But there are scenarios where it'll let you slide it down to less. And someone can articulate that well, you know, want a less contrasting interface. And usually this is color. But today, we're doing more than that. So let's just get right into building it. Here's our demo or demo currently does not change as we change the values of someone's preference. So if someone came to the page, they just be getting the regular old stuff. Well, let's do the easy way first. There's an easy path and there's a harder path. The easy path is, well, first we can say the font weight is normal. And that's not going to do anything. But that's just kind of nice to say it's just like by default, the font weight is whatever is normal. And you can probably even skip that. But now we're going to use some nesting. So look, I'm writing a media query right inside of this body selector. And I'm going to say prefers contrast more. And since all I'm going to be doing is changing a property here, I can just write the new property font weight equals bolder or bold one of the two, we're going to choose bold. So I'm going to hit save, pop over here and go to more. And there it is, we now have a bold font. So someone with a high contrast preference is getting what they need. We can copy this and put it right below and say, well, if they want less, you know, let's even change it to less, less, less, less. And then we're going to go to lighter or light, lighter, light, lighter. Nice. So there we go. We've got ourselves and kind of easily adaptive set of font weights here just using the regular old named values that are in here. And these will play into whatever, you know, font that you've loaded and stuff like that. But that's just the basics. And I wanted to show you how to take this next level so you can get more control. And you can also do a very interesting pretty niche adjustment to the font so that when it switches to from light to dark mode, so here, let's go from light to dark mode. Look at very closely at the way that your eye perceives the weight that's showing up here, like the thinness and the thickness. And when I switch to dark, it's very subtle. But do you see how the light text, even though they're the same font weight, same font size and everything, the light text looks a little bit bolder. It's almost more vibrant. It has, well, maybe perceptually more contrast. Let's go back to light. See how look at the V. It's quite thin. And when we go to dark, it's still quite thin, but it looks like it gained just a little bit of something that's totally this illusion. So what we're going to do in the advanced one is we're going to kind of counter balance that using variable fonts and tapping into the different axes that they have a variable through the font variation settings. So let's do the more difficult mode. So I'll save that file. I'm going to comment out basic and comment in variable. So here's our variable one. So you can see our font family just changed because we've loaded Roboto Flex. I put it up on copen. Now, the reason that I have it up on copen is this particular variable font has all of the axes in it, which means it's quite a large font. And it's nice for this demo. But if you're trying to deliver this font in a performant way, it'd be a good idea to just pull in the weights that you intend to use. And you'll see what weights we use here as we demo this out. So anyway, just a kind of hot tip. You can trim a lot of the weight off of a font by just selecting certain things, even if it's a variable font. Google fonts can do this to their API. It's really cool. So as we dig into this, let's start setting up some custom properties. I'm going to be doing some custom property flipping in this one instead of the other one where we just kind of used the values. And that's because I just think it reads nicer as we're changing things. So our base weight 400, which is kind of the same thing as normal was in our base grade. And this is what we're going to use to sort of counterbalance that light and dark value that was coming in. All right. So then we can go use these font variation settings. We'll say WGHT. And if you're wondering like where some of these names like WGHT comes from, some of them are quite standard across variable fonts, but they might not be. So you might need to use an explorer that kind of looks into the font and tells you what axes it has available, what settings that you can change. And so we're going to say in here, we're going to say base weight. And there's our first one and our second one will separate with a comma is grad. And notice this one is required. It's in all caps. These are just the font has this is the API. And this is how you call the function. I suppose you could call it. And here we're going to say base grade. I'm also going to new line this so we don't wrap. Oh, I should have done a comma here. All right. Looks good. All right. So now that we've got that set up on this is also looking let's just format that a little bit better. Sure. And you know what might as well, we have our basics here. And you can see as I hit save, we've changed to the base weight of 400 and a base grade of zero. So that's kind of nice that we saw that feedback. And we're also in less. When we go to no emulation, make sure that we're going to get that one done first, which is what we have. Well, here, let's switch to high contrast, more contrast and work that one out. So again, we're going to say at media prefers contrast more. And inside of here, we're just going to change the base weight base weight to 700. And boom, there is our base weight 700 results. So let's go to less copy this pasted in here. And for less, I don't think we're quite going to go down to 100. Let's do 200. Although look, that looks quite. Oh, we're going to change this to less. Ah, that's more like it. So now we're getting a nice thinner phone. We could let's try 100. That's really not that bad. I just find that 100 you've got to reserve that for really special occasions, large typography because otherwise yeah, the contrast is just solo. So let's go back to 200. Excellent. OK, so we've done the contrast preference for less and more. We go less more. Let's double check our work. Excellent looking good. And let's go to no emulation and switch to light mode and dark mode and work on that sort of perceptual contrast gain that was there. And so we're going to set a new media query for media prefers color scheme. We're going to say if they're in a dark preference, we're going to set that base grade to negative 25. We're going to reduce the sort of weight on this and it's super duper subtle. Let's even go like minus 125 just so we can kind of see a little bit more results. And it's not even that perceivable. But as we switch from light to dark, we should be seeing less of a change here. And I think I did see let's let's try minus 50. So go to light and go to dark. Nice. That one looks very similar. Really, really subtle stuff. And so now we have a set up here for adaptive typography based on user preference. And that's essentially the whole gooey challenge today. We went through a basic implementation that didn't use a variable font. And when the user prefers more contrast, we made the font weight bold when they wanted less, we made it lighter, you can go much more deeper into this and set, you know, specific values for your paragraph text and your header text. But this just shows the capability and a nice introduction. And this one here loads in a variable font that has a couple of axes that we want to use one of them is weight, one of them is grade. And we adjust the different weights for more or less, they get a thicker font or they get a thinner font. And we counterbalance some of the preferences that our eyes have for white text on a background, it's kind of taking away the glow or the neon type of effect that can come from a really stark light text on a dark background, kind of making it look like it's growing a little bit, you know, or like has a glow. So anyway, we use base grade to take that down. And that is the end of this gooey challenge. I hope you find this user preference typography featured challenge really interesting. And I'll see you on the next one.