Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Lettering.js

The Lettering.js library churns through a text field, surrounding each character in span tags. In this lesson, you will use the Lettering.js library to style the individual characters of a heading.

Relevant Links

3.3 Lettering.js

Hello, and welcome back. In this lesson, I'm going to cover a JavaScript library called Lettering.js. And on the surface, it's very similar to what the kerning provides, but it's actually much simpler and much more lightweight. Kerning.js gives us a bunch of new CSS properties that we can use to gain control over every letter in a block of text and it gives us some syntax that makes it really easy to do that. Lettering.js on the other hand is much simpler. All Lettering.js does is it breaks up a block of text letter by letter and just wraps each letter in a span with a certain class. And then you can go into CSS and use the traditional CSS properties to style each letter in that block of text. So it's much, much simpler in that it doesn't provide any extra functionality as far as CSS is concerned. All it really does again is it breaks your text up into a bunch of spans. So you might be wondering why are we covering it if Kerning.js already does that and more. Well first of all, this is much more lightweight. So if you don't need all of the extra functionality of Kerning.js, then Lettering might be a good option for you. But more than that, the reason I want to cover Lettering.js in this course is because I also want to look at a JavaScript library called Textillate.js which is built on the Lettering.js library. So first we're going to look at how Lettering.js works and then in the next lesson, we'll take a look at Textillate which again builds on Lettering, but it allows you to animate one character at a time. And so we'll get to that in a moment, but first we're going to take a look again at Lettering.js. So if we jump over to, we can see the home page of this particular library and a bunch of examples of how it's used. And then there's also a download link for GitHub. So as you can probably imagine, the title on this page uses that Lettering.js framework to style each letter individually. You'll notice not only the color but also the positioning and orientation of those letters have individually been styled. So we can click on the download on GitHub link. That will take us over to their GitHub page, and you can read through the ReadMe there if you want more information or you can just simply download the jQuery.Lettering.js file. So I'm going to jump back over to Lettering.js and I should also point out before we move on that Lettering.js is a jQuery plugin, so you do need to include jQuery before you include Lettering. And with that said, let's jump back over to CodePen. So you can find the URL for the starting pen in your course notes for this particular lesson. Once you open that up, we'll click on Fork to create a new copy and then I'm going to jump into our settings. If we go to the CSS tab, you can see we're using a Google font here and I'm also linking to animate.css which we'll talk about later. The reason I'm linking there is because we'll need it for the Textillate plugin later on, but I went ahead and included it. And then if we jump over to the JavaScript tag, you can see I'm pointing to jQuery and then Lettering.js which there is a CDN in for that out there. And then I'm pointing to the Textillate framework which again, we're not gonna get into just yet. So let's close that, and let's get started. So we have an h1 with a class of main-title, and in order to get this to work, all we need to do is to point to this item in our JavaScript using jQuery and call on the Lettering method which initializes everything. So let's jump in to our JavaScript. And again, if we go back to HTML, that class is main-title. So in jQuery, we're going to point to .main-title. And then after that, we're just gonna type .lettering (); to end our statement. So that get us started and really everything else is done using traditional CSS. So if I were to come over here and and right click and inspect this element, we can see that all of those letters have now been wrapped in spans and you can see that each of those spans has a class name and we can use these class names now to style each individual letter. So we have nine letters in this particular title and they have classes of char1 all the way through char9. And so any time you run this lettering method, it's going to churn through that block of text giving each letter its own span. So it's close to that and let's jump into our CSS and I'm gonna create a rule for our main title and what I wanna do here is somewhat similar to what we did before in Kerning.js. I want to rotate every other letter one direction. So we'll rotate all of our even letters one direction and all of our odd letters a different direction. But this time, we need to do it using traditional CSS. So inside this element with a class of main title, we're going to look at all of the individual characters in there. Remember, they each have a class of char1, char2, etc. So I'm gonna type space and I wanna point to all of those characters, and we could do that one of two ways. We could just do main title_span, but if you wanted to get more specific, we could do something like this where we have [class^=char] and this ^= here simply means that it's going to start with, so we are looking for a class that starts with char. But since we know that there are no other spans inside this heading, it will be a lot easier just to point to span. So since I want to point to, initially I want to point to all of the odd letters, so the first, third, fifth, etc., I'm going to point to :nth-child and then inside parentheses, I'm gonna point to odd. Then we'll put our opening and closing curly brackets for that rule and I want to rotate each of these four degrees. So we're gonna call in the transform property colon space, rotate and then inside parentheses (deg) and once we've done that, we might have to save and refresh. And you'll see that nothing is rotated, none of these transformations took place and the reason for that is these letters are simply in span tags and a span by default isn't inline level element. We need a block or an inline block element if we want to rotate it. So I'm gonna point to those spans, not just the nth child ones, but all of the spans inside main titles. We'll say .main-title. In fact, you know what? In case we decide to to do more of this later with other blocks of text, I'm gonna point to the char classes. So I'm gonna do [class^=] and that ^ is Shift+6, and inside single quotes, I'm gonna put char. So any item that has a class starting with the letters char, we're going to apply this to. So I'm gonna set the display property equal to inline-block and when we do that, now we see that the odd letters 1, 3, 5, etc., are all now leaning to the right a little bit. So now I'm gonna do the same thing with the even numbered letters except we're going to rotate them the other way, negative 4 degrees. And when that reloads, you'll see that the even numbered letters, 2, 4, 6, 8 are all leaning to the left a little bit. Then we can go in and create rules for specific char classes and I'm just gonna to copy some CSS that I've already written and paste it here. And we've basically just given all of our letters different colors. Then if we wanted, we could also go into all of these items with a class of char, etc., and give them all a text shadow. So I'll do text-shadow. I'm gonna do 2 pixels by 2 pixels and we're gonna make it dark grey #333; to end our statement. And there we go, now they all have this dark gray shadow behind it. So again as far as the Lettering.js framework goes, there is really nothing that we have to do except initilize our heading using the lettering method. Aside from that, all the other work that we did was in CSS. But now that we've done this, in the next lesson, we can jump into the Textillate library and that will allow us to build on top of what we've already done by animating these letters in. And so thank you for watching and I'll see you in the next lesson.

Back to the top