Typography plays an important role in most aspects of design where a message needs to be delivered. This is also true for webdesign with special typography where converting visitors effectively into leads and customers is business critical. It is possible to add great looking typography to headlines, buttons etc. using images but it is not as good as using markup. This is partly because of the problems related to maintaining text on images but certainly also because text on images isn’t visible to search engines. This means ranking well in e.g. Google may be harder if all the fancy looking text blocks you add to your site are created in tools like Photoshop.
Good news is that modern web standards like HTML5 and CSS3 is starting to make it easier for web designers to impress clients and at the same time follow best practice with regards to how websites are implemented. Unfortunately HTML5 is not a fully supported standard and some of the new features will not render in old browsers. However even though the HTML5 standard is not expected to be fully ratified until early 2014 and CSS3 is still in active development both are widely used already. A good example for this is adding styles like e.g. shadows to text and using media queries to make web layouts responsive. I’m personally impressed with the number of professional responsive WordPress themes already available and the number of download… this is an indication of the huge amount of websites already implementing the modern standards.
When it comes to web typography there are many options available in CSS3, but it is sometimes a lot easier to make awesome effects with a little help from typography and text effects jQuery plugins. I’m going to share some of the the plugins I believe every web designers should be aware of.
[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);echo $filestr;[/exec]
Check out these Web Typography jQuery Plugins
Lettering.js
Lettering.js is a jQuery plugin that makes it possible to target individual letters or words with CSS selectors and yes it is damn simple, but at the same time very cool. Basically lettering.js take the element (example)
<h2 id="letter-text">Letter</h2>
and transform it into
<h2 id="letter-text">
<span class="char1">L</span>
<span class="char2">e</span>
<span class="char3">t</span>
<span class="char4">t</span>
<span class="char5">e</span>
<span class="char6">r</span>
</h2>
The code needed to do this will look like this:
<script>
$(document).ready(function() {
$("#baloon-text").lettering();
});
</script>
Arctext.js
I think Codrops have created some of the best tutorials on web design and they also released a cool jQuery plugin to add curved path text effects. While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that helps us do this a lot easier. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius. Check the amazing demos!
slabText
SlabText is for creating responsive headlines. Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text. Many, many more examples can be viewed further down the page.
FitText
FitText is a jQuery plugin developed by Paravel (company that also created Lettering.js). With FitText you can make font-sizes flexible and it is very useful for large headlines. Basically it is a jQuery plugin for inflating web type and therefore you can use this plugin for your fluid or responsive layouts to achieve scalable headlines filling the width of a parent element.
$("#responsive_headline").fitText(1.2); // Turn the compressor up (text shrinks more aggressively)
$("#responsive_headline").fitText(0.8); // Turn the compressor down (text shrinks less aggressively)
FitText allows you to specify two optional pixel values: minFontSize and maxFontSize. This is useful to create responsive text but still preserve the hierarchy.
$("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })
jQuery Glow
As the name implies, this simple jQuery plugin gives you the ability to make your text glow when you hover over them. Though a similar effect can be done with CSS3 aside from the fact that many users still do not use CSS3-capable web browsers, using JavaScript allows you to bind the glow effect based on events outside of hover, trigger, focus, etc. that CSS can’t listen to.
BigText
I simply love the effect BigText can produce! BigText jQuery plugin takes a single element and sizes the text inside of its child <div>s to fit the width of the parent element. Gives the text that lovely vertical alignment often seen in ads and print typography. Check out the demo generator and get started fast by grabbing the source code right away!
jqIsoText
With this plugin we’re changing size of letters in text. It starts from one font size and increment or decrement to other font size. On that way we’re getting something similar to isometric projection. That can be done for whole block of text or for every word in some text.
Textgrad : a jQuery text gradient plugin
This simple, yet effective jQuery plugin adds gradient effects to text on web pages. It contains four functions you can apply to your text: spanize, unspanize, textgrad and textscan.
Textualizer
With textualizer you can add various effects to text as it appears on and disappears from the page. Textualizer currently has the following effects: fadeIn, slideLeft, slideTop, and random.
jQuery Grab Bag – Text Effects Plugin
This plugin offers a wide array of text effects, they include Scrambled Writer, Unscramble, Rot-13 and a Typewriter effect.
Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.
nice collection dude, thanks, i will use one