3 Fun Typography Techniques Using Lettering.js

As the flat design trend started to gain more and more popularity, the focus is now shifting from a skeuomorph approach to a minimal heavy typographic approach.

Today I'll show you how you can light up your flat design website by applying some fun techniques to your header’s typography by using Lettering.js, a very useful tool that gives control of typography back to the developers.

Fun Typography Techniques Using Lettering.js

Before you begin, make sure you have jQuery and the latest Lettering.js included in your HTML files.

1. Folded Paper Effect

Folded Paper Effect

The HTML:

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jquery.lettering.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'> 
</head>
<body>
  <div class="container">
    <h1 class="demo1">Fun Typography Techniques</h1>
  </div>
</body>

The CSS:

body, html {
          height: 100%;
          margin: 0;
          -webkit-font-smoothing: antialiased;
          font-weight: 100;
          background: #aadfeb;
          text-align: center;
      }
      h1 {
        margin-top: 155px;
      }
      h1 [class*="word"]{
        margin-right: 10px;
      }
      h1 [class*="word"]:last-child;{
        margin-right: 0;
      }
      .demo1 [class*="char"]{
        font-family: 'Amatic SC', helvetica;
        background: #ffb500;
        padding: 10px;
        font-size: 60px;
        color: #fff;
        display: inline-block;
      }
      .demo1 [class*="char"]:nth-child(odd){
        moz-transform: skewY(-10deg);
        -webkit-transform: skewY(-10deg);
        -o-transform: skewY(-10deg);
        -ms-transform: skewY(-10deg);
        transform: skewY(-10deg);
      }
      .demo1 [class*="char"]:nth-child(even){
        background: #f15b14;
        color: #fff;
        moz-transform: skewY(10deg);
        -webkit-transform: skewY(10deg);
        -o-transform: skewY(10deg);
        -ms-transform: skewY(10deg);
        transform: skewY(10deg);
      }

The JS:

$(window).load(function(){
    $(".demo1").lettering("words").children('span').lettering();
 });

This technique is basically used to create a folded paper effect. With the help of Lettering.js and the nth-child CSS styles, we can easily replicate this effect by simply defining 2 styles, the left side, and the right side of the paper to create a shadow effect giving a little depth to your header's typography. We do not want to give it too much depth with shadows and borders because it will not work well with the Flat UI design you had in place.

2. Party Light Effect

Party Light Effect

The HTML:

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jquery.lettering.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'> 
</head>
<body>
  <div class="container">
    <h1 class="demo2">Fun Typography</h1>
  </div>
</body>

The CSS:

body, html {
          height: 100%;
          margin: 0;
          -webkit-font-smoothing: antialiased;
          font-weight: 100;
          background: #9fd9e6;
          text-align: center;
      }
      h1 {
        margin-top: 235px;
      }
      h1 [class*="word"]{
        margin-right: 10px;
      }
      h1 [class*="word"]:last-child;{
        margin-right: 0;
      }
      .demo2 [class*="char"]{
        margin-right: 5px;
        line-height: 100%;
        font-family: helvetica;
        color: white;
        font-weight: bold;
        border-radius: 50px;
        text-align: center;
        display: inline-block;
        padding: 10px 15px;
        text-transform: uppercase;
      }
      .demo2 [class*="char"]:nth-child(3n+1) {
        background: #ed4a02;
      }
      .demo2 [class*="char"]:nth-child(3n+2) {
        background: #93ca31;
      }
      .demo2 [class*="char"]:nth-child(3n+3) {
        background: #feb300;
      }
      .demo2:hover [class*="char"]:nth-child(3n+1){
        -webkit-animation: color-1 1s infinite;
        -moz-animation: color-1 1s infinite;
        -o-animation: color-1 1s infinite;
        animation: color-1 1s infinite;
      }
      .demo2:hover [class*="char"]:nth-child(3n+2){
        -webkit-animation: color-2 1s infinite;
        -moz-animation: color-2 1s infinite;
        -o-animation: color-2 1s infinite;
        animation: color-2 1s infinite;
      }
      .demo2:hover [class*="char"]:nth-child(3n+3){
        -webkit-animation: color-3 1s infinite;
        -moz-animation: color-3 1s infinite;
        -o-animation: color-3 1s infinite;
        animation: color-3 1s infinite;
      }
      @-webkit-keyframes color-1 {
        0% { background: #ed4a02; }
        33% { background: #93ca31; }
        66% { background: #feb300; }
        100% { background: #ed4a02;}
      }
      @-moz-keyframes color-1 {
        0% { background: #ed4a02; }
        33% { background: #93ca31; }
        66% { background: #feb300; }
        100% { background: #ed4a02;}
      }
      @-webkit-keyframes color-2 {
        0% { background: #93ca31; }
        33% { background: #feb300; }
        66% { background: #ed4a02;}
        100% { background: #93ca31;}
      }
      @-moz-keyframes color-2 {
        0% { background: #93ca31; }
        33% { background: #feb300; }
        66% { background: #ed4a02;}
        100% { background: #93ca31;}
      }
      @-webkit-keyframes color-3 {
        0% { background: #feb300; }
        33% { background: #ed4a02; }
        66% { background: #93ca31;}
        100% { background: #feb300;}
      }
      @-moz-keyframes color-3 {
        0% { background: #feb300; }
        33% { background: #ed4a02; }
        66% { background: #93ca31;}
        100% { background: #feb300;}
      }

The JS:

$(window).load(function(){
        $(".demo2").lettering("words").children('span').lettering();
      });

This technique will add a fun colorful looking effect to your header’s typography. The colors will flicker when you hover the text. Again, with the powerful nth-child CSS styles, I’ve defined a repeated pattern of colors consisting of orange, green and yellow respectively. The concept of nth-child is simple. Here’s the explanation of why I used nth-child(3n+1), nth-child(3n+2), and nth-child(3n+3).

For nth-child(3n+1):

  • (3x0) + 1 = 1 = First character
  • (3x1) + 1 = 4 = Fourth character
  • (3x2) + 1 = 7 = Seventh character
  • (3x3) + 1 = 10 = Tenth character and so on..

Same goes for nth-child(3n+2):

  • (3x0) + 2 = 2 = Second character
  • (3x1) + 2 = 5 = Fifth character
  • (3x2) + 2 = 8 = Eighth character
  • (3x3) + 2 = 11 = Eleventh character and so on..

And nth-child(3n+3):

  • (3x0) + 3 = 3 = Third character
  • (3x1) + 3 = 6 = Sixth character
  • (3x2) + 3 = 9 = Ninth character
  • (3x3) + 3 = 12 = Twelfth character and so on..

So basically the orange will be applied to the first of every 3 collection of letters. (first, fourth, seventh etc.), green and yellow will be applied to the second and third of every 3 collection of letters respectively. Now you get a colorful typography without having to define a color for each letter.

I've also added an animation when the users hover over the header to create a flickering party light effect.

3. Beautiful Poster-like Typography

Poster-Like Typography

The HTML:

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jquery.lettering.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'> 
</head>
<body>
    <div class="container">
      <h1 class="demo3">
        This tutorial<br>
        is Awesome<br>
        than other<br>
        = Tutorial =<br>
        Am I Right?<br>
        And this<br>
        can go on<br>
        forever<br>
        = &amp; =<br>
        ever<br>
        The End
      </h1>
    </div>
  </body>

The CSS:

body, html {
          height: 100%;
          margin: 0;
          -webkit-font-smoothing: antialiased;
          font-weight: 100;
          background: #00bccb;
          text-align: center;
          padding: 50px;
      }
      h1 {
        margin-bottom: 35px;
      }
      h1 [class*="word"]{
        margin-right: 10px;
      }
      h1 [class*="word"]:last-child;{
        margin-right: 0;
      }
      .demo3 {
        width: 350px;
        margin: 10px auto;
      }
      .demo3 [class*="line"]{
        line-height: 100%;
        font-family: "open sans";
        color: #fff;
        line-height: 180%;
        display: block;
      }
      .demo3 [class*="line"]:nth-child(5n+1){
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: -2px;
        line-height: 140%;
        font-size: 49px;
      }
      .demo3 [class*="line"]:nth-child(5n+2){
        font-size: 23px;
        font-weight: 100;
        text-transform: uppercase;
        letter-spacing: 12px;
        word-spacing: 30px;
        border-top: 2px solid white;
        border-bottom: 2px solid white;
      }
      .demo3 [class*="line"]:nth-child(5n+3){
        line-height: 100%;
        font-size: 70px;
        font-style: italic;
        font-family: serif;
        font-weight: 400;
        margin-bottom: 7px;
      }
      .demo3 [class*="line"]:nth-child(5n+4){
        line-height: 100%;
        margin-bottom: 15px;
        font-weight: bold;
        font-size: 68px;
        letter-spacing: -3px;
      }
      .demo3 [class*="line"]:nth-child(5n+5){
        font-size: 23px;
        font-weight: 100;
        line-height: 190%;
        text-transform: uppercase;
        letter-spacing: 6px;
        word-spacing: 10px;
        border-top: 2px solid white;
        border-bottom: 2px solid white;
        box-shadow: 0 2px 0 #00bccb, 0 4px 0 #fff, 0 -2px 0 #00bccb, 0 -4px 0 #fff;
      }
      .demo3 [class*="line"]:last-child{
        margin: 25px 0;
        letter-spacing: 0px;
        border: none;
        box-shadow: none;
        border-radius: 70px;
        background: #FFF;
        color: #00bccb;
        display: inline-block;
        padding: 45px 17px;
        font-size: 19px;
      }

The JS:

$(window).load(function(){
        $(".demo3").lettering("lines");
      });

Now the last technique I would like to introduce is a technique used to create a dynamic beautiful poster-like typography for your website that you can use without editing the styles every time you add new text.

With the power of nth-child, each line of words will have its own style that is distinguished enough to create a clear separation between each line. No matter how many lines you add, the styles will be continuously applied to each line in a pattern so you don’t have to worry about the styles at all when adding new text.

Conclusion

As you can see, flat user interface design is here to stay and with that comes the opportunity for us developers and designers to play and experiment more with typography on the web. I hope you guys like these techniques. If you have any questions, or suggestions, please let me know down in the comments below.