Dealing with web typography can be quite tricky. Each browser comes with their own algorithms for rendering fonts which could lead to unexpected problems and discrepancies. The sad thing is that there are only a few CSS properties out there that you can use to have some control over fonts, like kerning, smoothing, etc. Not only that, you have to deal with many layout issues, too.
Lucky for you, there are plenty of resources that you can use to take over the wheel. Here are 10 handy tools, libraries and frameworks for web typography. Use them to make your tasks a whole lot easier.
Gridlover provides an adjustable CSS for font sizes, line heights, and margins. The default CSS output is for body, p, and h1 – h2 headings. You can also apply your adjusted values to any element by editing the CSS later.
This JS library adds the line class in each line of your paragraph. This lets you style the line separately, stimulating the idea of ::nth-line(), ::nth-last-line() and ::last-line pseudo-classes which is not present in CSS. What’s more, this library supports Chinese paragraph flow.
CSS finally meets kerning with Kerning.js! With it, you can automatically kern, style, transform, and scale your web typography with real CSS rules. Now, you have complete control over your typography!
This web typography plugin works by expanding the size of a font to fill the entire width of its container. It works out of the box with the algorithm. Simply put, it measures the container width, the length of the font character, and appends the proper size of the font.
Type Rendering Mix detects your browser’s text rasterizer and anti-aliasing method by parsing the user agent string. It then adds two classes to your HTML element; one to describe the text rasterizer and the other one the anti-aliasing method it’s using: <html class=”tr-coretext tr-aa-subpixel”>.
This JS library makes the text underline better. Make sure to check the demo and hover over the lines. Compare it with the underline output of current CSS text-decoration standard and you’ll surely become an instant fan of this JS library.
Creating a dropcap can be done with current standards in CSS, but the outcome isn’t perfect yet. It might not even be your cup of tea. For that, there’s Dropcap.js, which is developed by Adobe Web Platform. It aims to allow web designers to apply a perfect dropcap the easy and simple way.
FlowType is a web typography plugin that dynamically adjusts the font size based on a specific wrapper width. It helps you apply an ideal number of characters per line, at any screen width. The library comes with options where you can set min/max screen width, min/max font size, and font ratio.
This web application will help you easily determine the perfect font size for your site. It provides a simple and 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 experiment with the font scale to get the right value. Once you’re done, simply grab the CSS and you’re good to go!