20+ Popular and Useful Web Page Typography Libraries and Frameworks

    Modern website typography is more and more complex and demands are changed any time.Especially website for mobile is more and more popular, web designer has to deal with all different occasion.choose and control the font,deal with layout, responsive to a user’s screen.Here is a collection of 20 Web Typography Tools, Libraries and Frameworks. All such typography tools can make things easy,So that you can create a better web typography.


TypeRendering

Each browser has their own algorithm to render fonts.Fonts will look heavier on OS X and iOS than on other platforms.Using Type Rendering Mix you can instead decrease the font weight.TypeRendering apply CSS based on your browser.It works like Modernizr.First it will detects your browser's text rasterizer by parsing the user agent string. Then add two classes(tr-coretext tr-aa-subpixel) to the HTML element.


Lettering.js

Lettering.js is a jQuery plugin for radical web typography which give you down-to-the-letter control. It can split words and lines but keeping the text selectable. This could be a very useful effect for really custom type headings. you can wrapping letters,words,lines with lettering.


Typed.js

Typed.js is a library that make text has a typing animation. It won't change the your html content so it's SEO Friendly.You can simulate pausing,backspacing.It's useful for  education and coding website.


React text gradient

The component React text gradient apply the gradient over the text with CSS to your site page.The text won't be changed and still be controlled by CSS as normal. It will detects if webkit-background-clip is available,If it's not supported,

It apply <svg> gradient to the element with a mask instead.


underline.js


UnderlineJS is a javascript library that draw and animate the text underline. It use golden ratio point to place the underline which make it looks beautiful and artistic.At the same time, it solve the ghost pixels problem, make display perfectly.  


Font-To-Width


Font-To-Width is meant for headlines and other short pieces of text.is a javascript library that fit pieces of text snugly within their containers. It chooses best character width and letter- and word-spacing to fit but not scale the font-size.


Typeplate


Typeplate is a "typographic starter kit". It define proper markup to separate styling and markup.It ships along with common typographic markup with extensible styling,like Typographic Scale,Word-Wrap,Drop Capitals,Unicode Ampersands,Figures,Footnotes etc.


Type-scale


TypeScale is an online alive tool to design paragraph typography. It's "what you see is what you get". you can test font,size and scale combination to get visualized effect online.


React Reveal Text


React Reveal Text is a small react library for animating the revealing of text which great for landing pages. each letter gets a intelligent random transition applied to it so that they come into (and out of) view sporadically.It uses  CSS transition animations, which means you can customize and theme like a regular div.


LiningJS


LiningJS is a javascript library apply style on the lines of content elements. So you can control the paragraph complete DOWN-TO-THE-LINE.you can create and control it's line style by javascript or css.


ShareSelectedText.js


Use this small javascript library,user can share selected text on social medias and some other services easily. when user select some text, an menu appears ,then they can share the content to their friends on facebook,twitter etc.


GridLover 


It is another amazing tool for control font size, line height and scale factor sliders to typography.


text-balancer


The purpose of text-balancer is to eliminate typographic widows from your content.What you need to do is adding same elements with the balance-text class. text-balancer will set the width of the dom until spilling onto another line.


FlowType.JS


Using FlowType.JS,you can control the characters number per line over the base font-size thresholds,element size thresholds and ratios. so that you can set your typography perfectly and most legibly.


jQuery.auto-text-rotating


use jQuery.auto-text-rotating,You can change/rotation of text, both single and in a group. It also support 5 animations smooth and can be loaded in AMD mode.There are lots of settings and detailed documentation, you can  customize your linking easily.


Fitty

Fitty is a tiny script that snugly resizes text to fit its parent container. It will monitor element subtree and auto update accordingly when the browser view port changes.The script also support for multiline,works with webfonts.


TypeSettings


TypeSettings is a Sass and Stylus Toolkit that define font scaling properly, modular scale value and vertical rhythm. It uses Ems not REMs or pixels to handles all the math

It has optional default type styles that includes settings for adjusting headlines based on screen width.


baffle.js

baffle.js is a tiny (~1.8kb) javascript library for obfuscating and revealing text in DOM elements.

At first glance, text appears scrambled. An animated sequence then systematically reveals the text string.


Tiff


A type diff tool that visually contrasts the differences between two fonts.

Tiff is a online tool to check out the differences between two fonts. It provide a intuitive visualization for web designer.


Textillate.js


Textillate.js is built on top of the powerful animate.css and lettering.js libraries to provide a ease-to-use plugin for applying CSS3 text animations to any text.It support swing and fadein etc 30 animation effects and 4 type.


For your next project, use these powerful web typography tools, It would create a better amazing website.


date2019-03-24 14:57:11 From:www.jquerypluginhub.com Author:JPH
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *