Dealing with typography on the web has been real quirky. Each browser has its 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, 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.
There are only a few CSS properties you can use to have some control over fonts, such as font kerning, font smoothing, 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.
TypeRendering 2
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 1
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.
LiningJS 1
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.