Typography is considered as an indispensable component of every web design. Quite similar to paying attention to multiple aspects like the website’s navigation structure, the sidebar design, tone of site, logo design etc; paying due heed to the website’s typography is something that can’t be ignored for sure. If you’re someone who isn’t familiar with the different techniques of enhancing the typography for your website, then this is a must-read post for you. Here, I’ll be putting forth some solid methods of adding specific typographical effects that can impressively jazz up your website, while keeping its usability in-tact.

Before proceeding ahead, do make a good note of an important point that both, jQuery and CSS would be performing the groundwork and the final implementation of the example covered in this post.

Typography

Getting to know about the HTML structure

Well, the underline structure is basically a div element which includes an anchor. The container that wraps the headline is shown below:

<div id="typo" class="typo">

<a href="#">Typo</a>

</div>

Understanding CSS3 Keyframe animations

CSS3 Keyframe is basically a method which allows you to create impressive animations by incorporating a specific change between individual CSS styles. Moreover, as you animate, you’ll be able to tweak the CSS styles according to your own will. With CSS Keyframe, you’ll be able to create fluid animations which don’t require extensive scripting.

@keyframe rule is the CSS rule whose reference can be conveniently found in a different CSS section. A @rule is followed by multiple rules which include several curly braces. The format for a @rule is shown below:

@keyframes frameEffect{

/* rule sets go here … */

}

Some useful insights on Keyframe Selectors

Keyframe Selectors come with their own set of rules and values. Have a look at how they are defined:

@keyframes frameEffect{

0% { ... }

33% { ... }

66% { ... }

100% { ... }

}

As is visible in the above code snippet, the animation beings at the level 0% and completes at level 100%. The intermediate levels for the animation(in terms of states and appearance) are represented by 33% and 66%.

With each part of the keyframe, you are free to set different values for performing different types of customizations. For example, at time, you might be required to use z-index for stacking up the animation elements.

This is the code snippet that gives a suitable name to your animation:

.typography a span:hover {

animation-name: frameEffect;

}

In the above code, I've added the animation-name property which has a value that is in sync with that of the identifier included within the @keyframe rule. Here, I've set the value to none using JS. Additionally, you need to consider the property values viz: Animation-name which defines the name of animation and keyframe-selector which decides the actual percentage of animation duration.

Adding Styles using Lettering.js

Lettering.js will be used for adding styles to individual letters within the words. It uses simple .char# pattern for checking the text within the CSS, thereby offering a simple way of changing specific pieces of text within the heading.

Finally, let's use an example to understand the implementation of everything that's covered above:

The HTML for this example is shown below:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-5">

<title>Creating Typo Impacts With CSS3 and Jquery?</title>

</head>

<body>

<div id="typography" class="typo">

<a href="#">Typo</a>

</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.lettering.js"></script>

</body>

</html>

And, the CSS for this example is shown below:

.typography {

padding: 19px;

margin: 19px auto;

text-align: center;

font-weight: 678;

text-transform: lowercase;

letter-spacing: 2px;

}

.typography a {

text-align: left;

padding: 22px;

text-decoration: none;

}

.typography a span {

font-size: 107px;

color: #8f8f8f;

opacity: 0.5;

display: inline-block;

text-shadow: 0px 0px 1px #555, 1px 1px 2px rgba(0,0,0,0.9);

-webkit-transition: all 0.7s linear;

-moz-transition: all 0.7s linear;

-o-transition: all 0.7s linear;

-ms-transition: all 0.7s linear;

transition: all 0.7s linear;

}

.typography a span:hover{

color: #000;

-webkit-animation: frameEffect 0.9s linear infinite forwards ;

-moz-animation: frameEffect 0.9s linear infinite forwards ;

-ms-animation: frameEffect 0.9s linear infinite forwards ;

animation: frameEffect 0.9s linear infinite forwards ;

}

@keyframes frameEffect {
0% { transform: scale(1.1); }

25% { transform: scale(1.3); }

50% { transform: scale(1.5); }

75% { transform: scale(1.2); }

100% { transform: scale(1); }

}

@-moz-keyframes frameEffect {

0% { -moz-transform: scale(1.1); }

25% { -moz-transform: scale(1.3); }

50% { -moz-transform: scale(1.5); }

75% { -moz-transform: scale(1.2); }

100% { -moz-transform: scale(1); }

}

@-webkit-keyframes frameEffect {

0% { -webkit-transform: scale(1.1); }

25% { -webkit-transform: scale(1.3); }

50% { -webkit-transform: scale(1.5); }

75% { -webkit-transform: scale(1.2); }

100% { transform: scale(1); }

}

@-ms-keyframes frameEffect {

0% { -ms-transform: scale(1.1); }

25% { -ms-transform: scale(1.3); }

50% { -ms-transform: scale(1.5); }

75% { -ms-transform: scale(1.2); }

100% { -ms-transform: scale(1); }

}

Finally, the JavaScript for this example is covered below:

<script type="text/javascript">

$(function() {

$("#typography a").lettering();

});

</script>

That’s it for now!

Conclusion

Hope the above post would have allowed you to gather a good insight on everything that can be achieved for your website’s typography using simple jQuery and CSS3.

Being a enthusiastic professional in web design industry Jack loves to write various types of technical contents on regular basis. He is responsible to convert psd to html5 and css in general way.