Typography is major factor in how readable and legible the content on web pages is, which is why paying attention to it during the web design process should be a priority. In this post we compiled a list of Javascript and CSS libraries that will help you to establish a beautiful and user friendly type design for web and mobile.

Ztext

Easy to implement, 3D typography for the web. Works with every font.

Lining.js

An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.

Typography.js

It provides a vastly simpler way to define and explore typography designs. You provide configuration to the Typography.js JS api and it uses its Typography engine to generate CSS for block and inline elements. It makes it easy to create designs that are unique, personal, and custom to your project.

Fitty

Scales up or down text so it fits perfectly to its parent container. Ideal for flexible and responsive websites.

Splitting

It is a JavaScript microlibrary with a collection of small built-in plugins designed to split an element in a variety of ways, such as words, characters, child nodes, and more! The Splitting library does not handle any animation, but it gives you the elements and tools needed to create animations & transitions with JavaScript animation libraries or only CSS!.

Blotter

When applying effects to text on the web, designers have traditionally been constrained to those provided by CSS. In the majority of cases this is entirely suitable – text is text right? Yet still, there exist numerous examples of designers combining CSS properties or gifs and images to create effects that evoke something more playful. Precisely here, Blotter exists to provide an alternative.

Readable

Readable is a small jQuery plugin to help you make your paragraphs, well, more readable. 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.

Font Face Observer

It gives you control over web font loading using a simple promise based interface. It doesn’t matter where your fonts come from: host them yourself, or use a web font service such as Google Fonts, Typekit, Fonts.com, and Webtype.

Type.js

It 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.

Typeset

This is an html pre-proces­sor for web ty­pog­ra­phy. It uses no client-side JavaScript but gives you hang­ing punc­tu­a­tion, soft hy­phen in­ser­tion, op­ti­cal mar­gin out­dents, small-caps con­ver­sion and punctuation substitution.

Gutenberg

It is a flexible and simple-to-use web typography starter kit for web designers and developers. It’s a small step towards a better typography on the web. Beautiful typographic styles can be made by setting base type size, line-height (leading) and measure (max-width).

Underline.js

A javascript library that sets out to do one simple job: draw and animate the most perfect and playful text underline.

Lining.js

An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.

CircleType

It is a tiny JavaScript library that lets you curve type on the web.

Opentype.js

It is a JavaScript parser and writer for TrueType and OpenType fonts. It gives you access to the letterforms of text from the browser or node.js.

Utility OpenType

Simple, CSS utility classes for advanced typographic features.

Typr.js

It is a Javascript parser and utility for working with fonts (TTF, OTF). It is an alternative to opentype.js. It is the main text engine for Photopea image editor.

Hyphenator

It is a free open source Javascript library that automatically hyphenates text on websites. It comes in handy as a polyfill for legacy browsers that don’t support CSS 3 hyphation at all or for modern browsers that do hyphenation, but do not provide hyphenation dictionaries for a particular language.

variableFont

JavaScript library for using variable fonts. Extends the functionality of opentype.js. You must also install opentype.js to use this library.

Brick

Open-source webfont service. In the age of the Internet, we’ve found ourselves in yet another typographic battle. In an effort to speed up loading times, we’ve compressed fonts, and along the way, we’ve lost much of the quality of typography in found in other media. Let’s change that. The fonts served by Brick are clones of the original, converted without modification to WOFF format for high quality rendering and fast loading across all modern browsers.

RFS

RFS (abbreviation for responsive font size) is an algorithm which automatically calculates the appropriate font size based on the dimensions of the browser viewport.

MathJax

A JavaScript display engine for mathematics that works in all browsers. No more setup for readers. It just works.

React Native Typography

Creating great Text Styles in React Native is not a simple task, it requires a lot of fiddling and handling edge cases. This library provides a good set of defaults and helpers that cover the majority of the cases you’ll need, make your code much simpler and bonus render great on iOS, Android and the web.

ShevyJS

Configurable Vertical Rhythm & Typography in CSS-in-JS.

Cap height

Calculate the cap height of fonts loaded with Web Font Loader.

Hanging Punctuation

The hanging-punctuation property should be part of CSS in the future, but no browser supports in yet. In the meantime, this Stylefill polyfills the missing features through the exact same CSS.