Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 More Than Just Kerning

Kerning.js doesn’t stop with character spacing. In this lesson, you will pick up where we left off in the previous video, as you learn to use the framework to adjust the color, size, and transform properties letter by letter and word by word.

Relevant Links

3.2 More Than Just Kerning

Hello and welcome back. In this lesson, we're going to dive a little deeper into Kerning.js as we talk about some of the other CSS properties that it creates for us. We've already talked about how it creates this letter kern property which allows us to letter by letter, go in and change the spacing or the kerning of our text. But the Kerning.js framework actually does much more than that. It allows us to also go letter by letter or word by word and change the font size or color or transform properties, things like that. And so we're going to explore some of those properties in this lesson. So you'll notice that I've created a couple of new text fields here, I've also changed the background color just for the sake of variety. And you can find the link for this particular code pen in your course notes for this lesson and once you open that up we'll click on fork to create a new copy of it and we'll get started. So, we've already adjusted the Kerning for our first text field. So, we're done with that one but if we look at our HTML, you'll notice we have a couple more, one has a class of crazy. We're going to do some fun stuff with that text and then we have one called repeating and we'll explore some other options with that. So let's jump into our CSS window and let's create a new rule for our second text block there which again has a class of crazy applied to it that will be this middle section of text here. First of all, we can go in and create some basic CSS options here. I want to spread those letters apart a little bit using the letter spacing CSS rule and then I want to jump into a few different kerning CSS properties. To allow us to change the size, color and transformation of the letters in this text field. So the first property I wanna look at is-letter-size and just like the letter current property we can go in letter by letter and adjust the size of each of these letters. So if we wanted to make this c a little bit bigger. We would say maybe 1.2em and that will increase the size of the c if we wanted to keep one at it's default size we could just do 1em or we could just put an underscore there. And that will tell Kerning.js that we don't want to make any changes to the second letter which is the r. Then maybe for the a will bring it down to .75em and then we can just continue on by changing each of these letter sizes individually. Just kind of randomizing them a little bit until we have the same number of entries here as we have characters in the text field. So again with CodePen, we don't always immediately see those transformations in the live update over here. So we need to save our file and then we'll refresh our page and there we go. So now we see each of our letters has been given a different size in the order that we placed these numbers down here in the letter size property. And there's one thing I want to go ahead and address before we get any further, and this is very important. You'll notice when we first refreshed our page, let's right click and reload again, take a close look at the text. You'll notice that when the page first loads for just an instant all of this text was at its original size. And all of the spacing between these letters in the first text field here, they were in their original position before the Kerning was applied. It was just that way for a flash before the JavaScript kicked in and changed the size and spacing of all the text. And this is what is referred to as an FOUC, or a Flash Of Unstyled Content. In order to avoid a flash of an styled content using Kerning.js, all we need to do is to initially set the text fields to invisible. We're gonna set the visibility property of those text fields to hidden. So I'm gonna go into the crazy class and I'm gonna set the visibility to hidden. Now, Kerning.js is going to take care of this for us, so it's not going to stay hidden. As soon as the Kerning.js framework finishes loading, it will set that visibility, of course, after it makes the transformations necessary, it will set that visibility back to where it needs to be. But if we set it to hidden by default, then we won't see that original flash of unsolved content. So if we were to save it that again and then refresh, you'll see that the crazy text was invisible at first. But when it came back into view, we were able to see it at its final size, which is a lot better in my opinion than seeing it at it's original size and then suddenly changing size. So we want to do that for all of our text fields here that are using Kerning.js. So for our main title, we're going to do it there is we'll set visibility to hidden and we've done it for crazy as well. And before we forget, let's go ahead and apply it to the repeating class as well. Also at the visibility there to head and the only difference we're going to see for that one is that it's going to stay hidden. Because we haven't applied any Kerning.js properties to that particular class yet. Okay, so we change the letter sizing for our crazy text, another thing we can do is change the color of our letters. So we could do -letter-color and then we can just go one character at a time and do red yellow green etc. So if we just do the first three, and then Save that and Refresh our page, you'll notice that the first three letters are now colored but we can also do this word by word instead of letter by letter. As for scroll down here to our letter color is we're gonna change that to -word- color and now you'll seeing that the green is being ignored first of all because there are only two words here. So the first word is being set to red, the second one is being set to yellow. Now let’s just change those to colors that will look better with what we're doing here. So we'll do our first word at 037 and our second word at 58e. We'll Save that and then we’ll Refresh our page and then that looks a lot better, it matches with our background color a little bit better than the red and yellow did. And then another thing I want to do is transform these letters one at a time and basically what I'm gonna do is I'm going to apply a bunch of rotation transformations to each of these letters. And that would take too long to write it all out and I want you to have to sit there and watch me type it all out so instead I'm just going to paste it. So we'll come back into this crazy rule here and after our word color I'm going to paste a property called Letter transform. So it's going to transform these letters one at a time. Our first one is going to rotate negative 15 degrees and then our second one positive five degrees then ten the negative five etc etc until all of them have been rotated. So let's try that, let's Save our file and once again Refresh the page and there we go. Now we have each letter individually transformed. So I want to take this idea of transforming our letters and apply it to our repeating class here which is our third text element that we're dealing with. And here let's do a letter transform on it as well, so again, I'm just going to paste a certain value here. So here, we're translating or we're, let's Save our file and Refresh it first so that we can actually see it. So here, we're just moving our letters up and down. We're using the translate why transformation here to move our items down five pixels at a time. And you'll notice that there are little underscores and between these where there are underscores those are just letters that we're not doing anything with. So our first letter we're going to move down five pixels, our second letter we're going to leave it alone, third one moved down, five fourth one leave it alone, etc etc. So we have this repeating pattern, well that's kind of a painful way to do it. If all of them are going to be different as we saw up here with the crazy text then that's one thing. But if you have a repeating pattern Kerning.js actually provides us a much easier way to take care of that. So let's grab this and I'm gonna hit command forward slash to apply a comment to that to comment that out and then we're going to use the same property -letter-transform. But this time after the colon we're going to type in -letter-repeats and then inside parentheses, we're going to create a repeating pattern. So what I wanna do here, is for every even numbered letter, so for every other letter. I want to call on the translateY property, move it down five pixels. So the way we do that, inside the parentheses here we're gonna type even: space, and then we'll type in the translateY property. So translate, capital Y, and then inside parentheses 5px. So now that we've done that. Let's Save our file and Refresh the page. And there we go we get the exact same effect but it takes a lot less time to write it out because we're using this letter repeats. Now we could do more than just one thing here so inside our letter repeats let's make this a little more readable. I'm going to take the very beginning of this word says even I'm going to nudge that down to the next line and then we'll take our closing parenthesis there and nudge it down. And then after this even translateY I can type a comma and go to the next line and do odd: translateY and let's say we wanted this to move up five pixels we'll do -5px. So we could Save that and Refresh the page. And there we go, so it's kind of hard to tell the difference but these odd numbers here were moved up five pixels while the even ones were moved down five pixels. So if we wanted to make this a little more obvious we could to go into our odd items instead of translateY we could just do another rotate. So we could do rotate and let's do (-10deg). And then we'll Save that file and Refresh and there we go. So all of our odd letters are leaning over to the left and all of our even letters are nudged down five pixels. Now we can do this repeat with other properties as well. So we have letter transform letter repeats we could also do -letter-color and then -letter-repeats. So we'll put our opening and closing parentheses here and notice that closing down a couple of lines put a semicolon at the end of that line. And then in between the parentheses here we could point to the odd letters and set the value to BEF, which is a lighter blue color and then we can Save that and Refresh. So as you can see this Kerning.js framework gives us a lot more than just the ability to alter the spacing between letters. It allows us to go letter by letter, or word by word and change the styling accordingly. And if you wanna look at more that the Kerning.js framework can do, you can just go to the Kerning.js website and scroll down a little bit. And you can see more of the different things that you can, or the different transformations, the different styles that you could apply to individual letters and individual words. So thank you for watching, and I'll see you in the next lesson.

Back to the top