15 Useful Web Typography Tools, Libraries And Frameworks

Dealing with typography on the web has been real quirky. Each browser has their own algorithm to render fonts which could lead to unexpected discrepancies. There are only a few CSS properties you can use to have some control over fonts, such as font kerning, font smoothing, in creating DropCaps etc. On top of that, we have to deal with a lot of layout issues when it comes to fonts.

The good news is there are resources that you can use to take over the wheel when it comes to website typography. Here are 15 web tools, libraries and frameworks you can use to that end.

More on Hongkiat:

9 WordPress Plugins To Do More With Your Fonts

20 Best WordPress Typography Plugins To Enhance Readability

Better And Sharper UI Icons With Web Fonts

TypeRendering

In a nutshell, TypeRendering works similar to Modernizr, except it only identifies the browser engine for font rendering. This library adds custom classes based on its discoveries which can be used to apply specific styling rules for type rendering.

KerningJS

Kerning is not customizable for use on the web yet – font-kerning support is still poor at the moment – but a new standard property is coming our way. KerningJS is a Javascript library that gives you a few new properties for better kerning control, for example -letter-kern.

 #heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;

Keep in mind that the above example is non-standard and only applicable with KerningJS.

DropcapJS

Though creating a dropcap is doable with current CSS standards, the outcome is not perfect yet. Sometimes it is downright undesirable. DropcapJS, developed by Adobe Web Platform, is entrusted with the mission to allow web designer to apply a perfect dropcap easily.

LiningJS

LiningJS is a JavaScript library which adds the line class in each line of your paragraph. This allows you to style the line separately. It simulates the idea of ::nth-line(), ::nth-last-line() and ::last-line pseudo-classes which is not present in CSS still. Here is an example how we style the first line of a paragraph with LiningJS:

 p .line[first] font-weight: 600; text-transform: uppercase;

In addition, LiningJS also supports Chinese paragraph flow.

UnderlineJS

UnderlineJS is a JavaScript library that makes the text underline better. Check out the demo to see what I mean, be sure to hover over the lines. Compare the demo with the underline output of current CSS text-decoration standard and you’d probably be a fan of underlineJS too.

FlowType

This plugin will dynamically adjust font size based on a specific wrapper width. FlowType helps you apply an ideal number of characters per line at any screen width. The library comes with options where one can set min/max screen width, min/max font size, and font ratio.

HatchShow

HatchShow expands the size of a font to fill the entire width of its container. The plugin works out of the box with the algorithm; in a nutshell, it measures the container width, and length of the font character and appends the proper size of the font.

GridLover

GridLover is a great tool to generate basic styles for typography arrangement (size, line height, and margin) with an easy slider UI. It generates the styles in SCSS, LESS, and Stylus so you can include it right away in your project regardless of which CSS-Preprocessor you use.

TypeScale

TypeScale is an online tool that will help you to easily determine the right font size for your website. The tool provides a simple intuitive GUI to insert base font size, scale, and font family you want to use. The results will be visualized for you so you can play around with the scale, to get just the right value. Just grab the CSS once you are done.

Modular Scale

Modular Scale is a tool to generate ideal font scaling for body and heading text. It outputs in Sass which should be used in conjunction with its Sass library. Alternately, you may use JavaScript .

Font-To-Width

Font-To-Width (FTW) is a Javascript library that makes a font fit to its width container. It will determine the font size along with the word spacing required for the font. Should you want to make a pretty headline, this is the library you may want to try.

FFFFallback

FFFFallback, a handy tool that allows you to find the best font stack that will degrade gracefully. The tool comes in a form of a bookmarklet, which will analyze the font family on your page and suggest a set of fonts to use as fallback.

Font Pair

Google Font is one of the most popular web font library used by millions, and host above 500 font families. Font Pair is a collection of paired Google Fonts, where you can find a various combination between font families and type faces easily. Font Pair makes choosing font pairing a little less overwhelming.

TypeSettings

TypeSettings is a collection of CSS rule set to define proper font scaling, vertical rhythm, and responsive ratio of typography. TypeSettings comes in Sass and Stylus which allows for flexibility to meet your project needs by adjusting the variables.

Typeplate

Typeplate is probably one of the most complete starter kit for setting up typography. Typeplate ships with a handful of basic typographic styles that address scaling, colors, small capital, dropcap, indenting, hyphenation, blockquote, code block and a lot more stuff.