10 JQUERY plug-ins for enhanced WEB font Layout

10 JQUERY plug-ins for enhanced WEB font Layout

Although the Web font layout technology is booming with the support of various customized font solutions (such as @ font-face and Google Fonts, however, we still lack precise control and control in our design and desktop app development. Fortunately, there are a series of powerful jquery plug-ins to help us solve this problem. This article details the nearly 10 most popular Web font layout plug-ins that allow us to polish the font layout and create more cool effects.

I have to say that the website is creative and full of personality :)

Lettering. js

Lettering. js is one of the simplest and most popular online plug-ins. This plug-in allows you to precisely manipulate the title layout by splitting each text and placing each letter in a customized one. Use it to adjust your padding or add various types of CSS, so that each word has a superb effect.

FitText. js

Interactive website design is easy to use. It allows the content to be automatically adjusted based on the size of the user's viewing terminal. Naturally, your web Text automatically shrinks as the browser or terminal size is narrowed, but in some cases it will make the question and title a little ugly, this is especially because the text is automatically indented or a new line is added. This is the function of the FitText. js plug-in. It enables you to resize your title like a response image, and the word will not run into a new line.

Bacon!

Nice name! The Bacon plug-in allows you to arrange your text in the same way as the besell curve. It is easy to process text around images in InDesign. However, in HTML/CSS, the text is arranged according to the area of the square. Therefore, although HTML can be forcibly used to achieve similar results, Bacon allows you to easily and concisely use coordinate parameters to achieve these effects!

TypeButter

There are many Jquery plug-ins that can help you adjust the padding, but most require some direct input to control each letter separately. If you want to find some quick and simple solutions, let's take a look at TypeButter. You only need to assign the layout type to you. It will automatically overwrite the default value of the browser with some pleasant and reasonable spacing. By default, this plug-in supports Arial, Georgia, Helvetica, Times, And Verdana. You can also modify some places to support other fonts.

Kerning. js

Although the plug-in name is Kerning, this plug-in does not only control the padding. It can also adjust its body size, color, and deformation in units of letters to create a variety of beautiful effects. In addition, it only controls CSS and does not need to add other tags, such as extra spans. Good!

Baseline. js

It is easy to control the Vertical spacing in the web design. We only need to set the line-height attribute. Unfortunately, once an image is inserted, it is not that easy. In this case, Baseline. js is required. You only need a line of javascript code Baseline. js to adjust your image region to the desired location. In other words, it allows your content to be aligned with your baseline mesh at all times.

Arctext. js

Setting a radian for a font does not happen every day. But in some cases, for example, designing an attractive title and re-designing a vintage trademark, the plug-in Arctext. js is really awesome! The plug-in is named like this. It can set the specified radius length as needed to make different arcs.

Hatchshow

We can see that each row of many pictorial reports is designed as a width. Now we can easily achieve this through the Hatchshow plug-in. It automatically adds one line of text and adjusts the font size, so each line will have the same width. It can be of great help in both classic and vintage designs.

SlabText. js

At the beginning, I thought slabText. js was just another title scaling plug-in, but in fact it has many powerful functions. SlabText integrates the advantages of FitText and Hatchshow plug-ins. This means you have an interactive title. It intelligently splits rows and scales according to the font size. So once the terminal size reaches a certain level, your title will be automatically reorganized to maintain readability, rather than being scaled to an unreadable size.

JqlsoText

JqlsoText is a plug-in that produces pseudo-same-distance text effects. but what exactly does this plug-in do? In general, this plug-in is used to enlarge the size of your text from one value to another. This plug-in is also suitable for creating different titles or imitating retro-style text typographical designs.

Note: For more exciting tutorials, please follow the help houseDesign tutorialTopic,