30 Best jQuery Typography Plugins
In this article we have amassed a list of Best jQuery Typography Plugins for developers that will help you to create beautiful and elegant text effects for your websites and make them mesmerizing and visually stunning. So, without much further ado lets check out these jQuery Typography Plugins.
Textillate.js is a simple plugin for CSS3 text animations. Textillate.js combines some awesome libraries to provide an ease-to-use plugin for applying CSS3 animations to any text. Simply include textillate.js and it’s dependencies in your project to start creating unique effects.
2. Fitter Happier Text
3. Slab Text
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 headl
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.
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.
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.
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.
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.
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.
10. Type Butter
Bacon is a jQuery plugin that allows you to wrap text around a bezier curve or a line. It’s easier than you might think. You’ll need a block element containing text only that has its height and width set, as well as jQuery, bacon.jquery.js and bacon.jquery.css included in your site.
With typeface.js you can embed custom fonts in your web pages so you don’t have to render text to images, Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.
A super-simple bookmarklet for designers that finally puts you back in control of your website’s typography. Add the bookmarklet to your browser and activate it while at your page. Then just click and drag to adjust your kerning, line-height, letter placement and more to your heart’s content! When you’re done, copy the generated CSS and use it in your own stylesheet, right there alongside Lettering.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.
15. Font to Width
Font-To-Width is a script for fitting pieces of text snugly into a defined space by utilizing different fonts available in large type families. Rather than changing the font size, it will simply select a different weight or width in the same family to fill the available space.
18. Type Rendering Mix
19. jqISO Text
jqISo plug-in is used for creating an arching effect wherein the letters of the targeted text element will increase in size as you approach the center & after that it will slowly taper off as you move on to the last character.
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.
22. Big Text
A jQuery plugin that jumbles up the colours of your text headers, and can also animate them. Choose a colour range for the colours to be jumbled amongst, and set params for whether the shuffle is based on brightness or saturation hue.
24. Wide Text
25. Curved Text
This simple JS library detects whether a particular font is presently installed in the user’s computer. If the script finds the desired font, it will render the corresponding webpage. If not, it falls back to the default font you’ve specified in your website’s stylesheet.
27. Responsive Measure
Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text.
28. Type Butter
29. Funny Text.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…