10 jquery plug-ins that enhance web typography

While web typography technology thrives on a variety of customized font solutions (such as @font-face, Google Fonts), we still lack the precise control and mastery of our design and desktop app development. Fortunately there is a series of powerful jquery plug-ins that help us solve this problem. This article details nearly 10 of the most popular web font layout plug-ins that allow us to polish the font layout and create more super cool effects.

Have to say, the site itself is also full of creativity, full of personality yo:

Lettering.js

Lettering.js is one of the simplest and most popular web layout plug-ins. By splitting up each text and putting each letter in a customized format, the plugin allows you to manipulate the title layout with precision. Use it to carefully adjust your kerning or add a variety of CSS so that each word has a super awesome effect.

Fittext.js

Interactive Web design is easy to use, it allows content based on the user's view of the size of the terminal automatically adjusted. Naturally your Web text shrinks automatically as you view its browser or terminal size, but in some cases it makes the topic and title a little unsightly, especially as text is automatically indented or a new row is created. This is the function of the Fittext.js plug-in, which enables you to resize your title like a response picture, and the word does not appear to run to a new line.

bacon!

That's a cool name, Kiss! The bacon plugin allows your text to flow like a Bezier curve. Processing text around a picture in InDesign is simple. But in Html/css Chinese is arranged according to the Square area. So although can be forced to use HTML can achieve similar results, but with bacon can make you easy and concise use of coordinate parameters to achieve these results!

Typebutter

There are a lot of jquery plug-ins that can help you adjust the kerning, but most require some direct input to control each letter individually. If you want to find some quick and easy solutions, it's better to look at Typebutter. Just give it your layout type and it will automatically overwrite the default value of the browser with some reasonably pleasing spacing. The plugin defaults to support Arial,georgia,helvetica,times and Verdana. You can also modify some places to support other fonts.

Kerning.js

Although the name of this plugin is kerning, this plugin can do more than just control kerning. It can also be used in letters to adjust the size of the body, color, deformation to create a variety of gorgeous effects. And it just controls the CSS without the need to add additional spans and other tags. That's good!

Baseline.js

It's easy to control vertical spacing in web design, just to set the Line-height property. Unfortunately, once a picture is inserted it's not that easy, and this time it needs to be baseline.js. Just one line of JavaScript code baseline.js can adjust your picture area to where you want it. In other words, it allows your content to align with your baseline grid at all times.

Arctext.js

Setting radians on a font is not a daily experience. But in some cases, such as designing an appealing title and redesigning a retro logo, arctext.js is really awesome! The plugin, like its name, can make a different arc by setting the length of the specified radius according to your needs.

Hatchshow

We see that many of the pictorial lines are designed to be one width. Now we can easily achieve this effect through the Hatchshow plugin. It automatically adds one to each line of text and adjusts the font size, so each line will be the same width. It can be a great help in classic and retro design.

Slabtext.js

Just beginning to think Slabtext.js is just another title scaling plugin, but actually it's much more powerful. Slabtext combines the advantages of the Fittext and hatchshow two plug-ins to integrate them into one. This means that you have an interactive title. It can intelligently split branches and scale according to the font size. So once the viewing terminal reaches a certain size, your title will automatically be organized to remain readable, rather than scaled to an unreadable size.

Jqlsotext

Jqlsotext is a fake raster text effect plug-in, but what exactly does this plugin do? In general, this plugin is for you to enlarge the text from one value to another to a different size. This plugin is also good for creating different titles or imitating retro text typesetting designs.

Note : For more wonderful tutorials, please pay attention to the Triple design Tutorials section,