Typography is a term where web designers play with text and produce some cool text effects and animations to make the content visually stunning.
Typography basically relies on three things – font, color and size, the perfect combination of all three things results in beautiful and eye catching content.
Though there are web fonts and services like Typekit and Google Fonts are available to create some exceptional typography, we are still lacking the precise control we require over type within web design.
Therefore, we have amassed a wide range of jQuery Typography Plugins which are able to achieve the desired typography and text animation which you want for your web content.
These jQuery plugins are packed with myriad of features and allow us to manipulate the text and produces exceptional result like never before.
Let’s explore the list of 35 jQuery Typography Plugins.
Don’t Miss –
15 Best jQuery Social Share Plugins
50 JavaScript Chart and Graph Libraries
1. SlabText
slabText is a jQuery plugin for producing big, bold & responsive headlines. slabText 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.
Demo & Download
2. jQuery.Mark
jQuery.mark is a jQuery plugin to highlight text with diacritics, synonyms, custom elements, custom class names, separate word search (multiple terms), filter selectors, word boundary and iframe support also compatible with DataTable.
Demo & Download
3. jQuery TextFill
jQuery TextFill is a jQuery plugin resizes text to make it fit into a container. The font size gets as big as possible. search (multiple terms), filter selectors, word boundary and iframe support. Compatible with DataTable.
Demo & Download
4. Readable
Readable is a jQuery plugin to help you create optimally sized paragraphs for maximum readability. It injects styling between the 45th and 75th character of every (p) tag on your page. This gives you a visual reference to tell you if tweaks are needed on your font-size or content width, etc.
Demo & Download
5. NuvuType jQuery Text Animation Plugin
This plugin takes all the text of a selected container and splits it at the white spaces then prints it into the container word by word using customizable animation effects.
Demo & Download
6. FlowType.js
FlowType.JS is a jQuery plugin which can auto-resize the font-size and line-height (according to the width of the element wrapping it) so that our content is displayed just as we prefer. The plugin has options for setting the min/max font-sizes and min/max widths where the resizing will be triggered.
Demo & Download
7. Letter by Letter JS
Letter by Letter JS is a lightweight jQuery plugin to present text letter by letter on a HTML page. This text can appear as if was just being typed, or it can fade in more gently.
Demo & Download
8. Type.js
Type.js adds new type properties to your CSS, giving you the control you need for type on the web. You can write these properties in your CSS and they will work like any other property.
Demo & Download
9. Kerning.js
Kerning.js is a small single script, with no dependencies, that allows you to scale your web typography with real CSS rules automatically. Add it to your page, add some CSS rules, and your text will be instantly beautified.
Demo & Download
10. FitText
FitText is a simple yet very functional jQuery plugin for making sure a text fits into a defined element. It auto-updates the font-size in accordance with the width of an element wrapping it and guarantees a non-broken layout (because of the font size) even if the page is displayed from a mobile or desktop browser.
And, there are some options provided for a fine-tune including the ability to set “level of scaling” and mentioning min-max sizes.
Demo & Download
11. Lettering.js
Lettering.js is a jQuery plugin for radical web typography. Web type is exploding all over the web but CSS currently doesn’t offer complete down-to-the-letter control. Lettering.js solves that: it’s a jQuery plugin to give you that control. Kerning type, editorial design, manageable code, and in general complete control can all be easily done with Lettering.js.
Demo & Download
12. Type Butter
TypeButter allows you to set optical kerning for any font on your website. If you’re longing for beautifully laid out text that today’ browsers just don’t provide, this is the plugin for you.
Demo & Download
13. Flapper
Flapper is a jQuery plugin that replicates the split-flap (or “Solari”) displays that used to be common in train stations and airports, and your dad’s alarm clock in the 70s.
To use, just attach Flapper to any input on your page. Whenever the input’s change event is fired, Flapper will update the display.
Demo & Download
14. Blast.js
Blast.js separates text in order to facilitate typographic manipulation. It has four delimiters built in: character, word, sentence, and element. Alternatively, Blast can match custom regular expressions and phrases.
Blast’s uses include typographic animation, juxtaposition, styling, search, and analysis.
Demo & Download
15. Digital Write jQuery Plugin
jQuery plugin to write characters on a 5X5 matrix with colors, animations and size.Using this plugin, you can create such charecters with animations, color options & size options!
Demo & Download
16. Font.js
Font.js adds a Font object to the collection of predefined objects available to you when doing JS coding for the web. You are probably already familiar with new Image() for loading images through the browser; this object does something similar for fonts.
Demo & Download
17. Arctext.js
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 let’s you do exactly that. 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.
Demo & Download
18. Hatchshow
Hatchshow will automatically add a span to each line of text and scale the font size so each line ends up the same width.
Demo & Download
19. BigText
BigText jQuery plugin takes a single element and sizes the text inside of its child divs to fit the width of the parent element.
Demo & Download
20. Wide Text
WideText is responsive, lightweight solution for animating text for your websites and web applications.
Demo & Download
21. Rainbow Text
A jQuery plugin to create rainbow or gradient text, optionally animated.
Demo & Download
22. fontFlex
fontFlex is a lightweight jQuery plugin for dynamically changing font sizes according to screen / browser width. It is intended to be used with responsive or adaptive CSS layouts.
Demo & Download
23. Textualizer
Textualizer is a cool jQuery plugin that allows you to transition through blurbs of text. When transitioning to a new blurb, any character that is common to the next blurb is kept on the screen, and moved to its new position.
It currently has the following effects: fadeIn, slideLeft, slideTop, and random.
Demo & Download
24. TypeIt
TypeIt is a lightweight, scalable jQuery animated typing plugin that types single or multiple strings for you.
Demo & Download
25. Shorten
A simple jquery plugin that automatically shortens text within an element and add “more” link.
Demo & Download
26. Scalem
Scalem, short for scale elements or slang for scale ’em, is a light-weight responsive text jQuery plugin inspired byFlowType. Use it to “liquify” elements on your website so that they scale relative to the width of their parent element or, optionally, any element you specify (see Options below). Scalem is not just limited to text size—it can be used to scale any CSS style that takes a numeric unit such as px, em, or %.
Demo & Download
27. Splitchar.js
Splitchar is an easy to use jQuery plugin that allows you to style half of a character. Style and design the first, second or both halves of a character.
Demo & Download
28. rerev.js
revrev.js is a mostly pointless jQuery plugin that lets you style your text in some cool ways. like, you can flip the letters horizontally so that they rev-rev-reverse. and there are other things, too… random caps, random spacing, random colors, random heights!
Demo & Download
29. Textiliate.js
Textillate.js is a simple plugin for CSS3 text animations. Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS animations to any text. Simply include textillate.js and it’s dependencies in your project to start creating unique effects.
Demo & Download
30.Lining.js
Lining.js is an easy to use JavaScript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.
Demo & Download
31. Typer
Typer is a jQuery plugin for a slick typing effect. There are some option to customize plugin such as typeSpeed, typerInterval, typeDelay, etc.
Demo & Download
32. Balance Text
Balance Text is a jQuery plugin for implementing balancing of wrapping text in a web page.
Demo & Download
33. Keyboard Delimiter
Keyboard Delimiter is a powerful jQuery plugin that remove the possibility of pressing any key or group of keys in the keyboard. Only is possible if these keys are defined previously by options.
Demo & Download
34. Truncated Text
Truncated Text is a javascript function that you can truncate string with character limit. There is no broken words when truncating text.
Demo & Download
35. funnyText.js
funnyText.js is a jQuery plugin that creates animation for the letters inside a text moving them vertically or horizontally. Ideal for titles and you can configure colors, speed of movement, font size etc..
Demo & Download
Leave a Reply