Styling fonts with jQuery: a tutorial

Recently we had a couple of posts about CSS properties. The first about fonts, then one about borders and lately a post on backgrounds. Sure CSS3 can achieve a whole lot and it is often better for performance of your site to achieve as much as you need with CSS only, but there are a lot of funny jQuery plugins and today I like to show you some examples of these as well.

Here we are creating some tiles with good old sayings (some in dutch with my poor translations) on it using the following four jQuery plugins:

  1. Splitchar.js
  2. Arctext.js
  3. Lettering.js
  4. Textillate.js

These plugins change the displaying of text in some sort or another. Look at the exampes below and enjoy! Note that I created these examples using jsFiddle. So if you are interested, just click the different panels to see how we achieved these effects and edit them yourself if you want. Let me know in the comments if you made something even cooler!

So, off we go with the Splitchar plugin. This plugin as its name says, is able to split characters and you can style the different parts of a character. It works both horizontally and vertically as you can see below in the fiddle.

tegel_splitchar

Then off to the second example which is the Arctext plugin from the folks over at Codrops. These guys definitely create very cool stuff and it is worth taking a look at their playgrounds. Over to my example which is a tile with some text in arcs. I found that the tile was kind of empty so I added a walking dwarf in the middle. Although the saying is in dutch, the animated gif image fits perfectly in my opinion! A quick translation of the saying results in: Although you are faster alone, together you go further!

tegel_arctext

The Lettering plugin as they put it, gives you great control over each character to make it possible to style it just the way you want. It works by putting a span with a specific class around each character. It is probably not the smartest thing to apply this plugin to a massive amount of body copy or your browser may shut down. But for some headlines you can create great font styles with it. With the options available it is possible to apply the styling on a per character base or a per word base. In my example below I chose the per word option. This tile can be translated as follows: It ain’t people who are troublesome, people are just different and that is quite troublesome…

tegel_lettering

Finally here is some more moving stuff. The Textillate plugin depends on the Lettering plugin described above and is able to give your text some animations. You can specify both the incoming and outgoing animation type and it is possible to create some very shiny examples. Here is my version which can be translated as: some people earn but don’t deserve it, others deserve but don’t get it. The fun here is that the word ‘verdienen’ in dutch means earn as well as deserve!

tegel_textillate

So there you go: Four plugins to play around with text. Just one reminder: don’t overdo it in your designs! Do you have any other plugins that you frequently use for this kind of stuff, let me know in the comments below!


Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! Latest post
Sorting table dates in a Vue CLI project

Leave a Reply

Your email address will not be published. Required fields are marked *