Use These 9 Great Scripts For Better Web Typography. #5 Is Awesome


As someone who got started in the industry when creating transparent gifs (yes, gifs, not png’s) as headlines was still okay it’s amazing to see how far web typography has come.

Here are some great JavaScripts that will take your web typography one step further.

Hope you enjoy (and use) ’em!

1. FlowType.js
This is a great script that lets assures you that your typography will be legible (45 and 75 characters per line) all the time.
If you tried to ensure this, you know that doing it using only CSS media-queries is hard.
FlowType.JS eases this difficulty by changing the font-size and the line-height based on a specific element’s width. Allowing for a near-perfect character count per line at any screen width! Recommended!

2. Responsive Measure
This is another great (and simple script) which will generate the ideal font size “needed to produce the ideal measure for texts”.

3. Fittext.js
MOAR FAT HEADLINES! This is the perfect plugin to achieve scalable headlines that fill the width of a parent element. Awesome for headlines. You should try it!

4. Font-To-Width
Font‑To‑Width (FTW!) :-) takes advantage of large type families to fit pieces of text snugly within their containers. Not to be mistaken for the above-mentioned FitText.js, Font‑To‑Width does not scale the font-size. Nope, it “chooses a width or weight variant according to what fits best, and then allows for letter- and word-spacing adjustments as needed”. Great example on their webpage.

5. slabText
This nifty little script splits headlines into rows before resizing each row to fill the available horizontal space. Makes things look great. Bonus points for using legendary reggae icons in the placeholder texts!

6. Typeplate
Typeplate is what you might call a “typographic starter kit”. It lets you “define proper markup with extensible styling for common typographic patterns”. Great stuff!

9 insanely useful scripts for better web typography

7. Widowtamer
This is a Javascript that automatically fixes typographic widows on your web pages. Yes! A must-use tool for any serious web typographer

8. Texttailor.js
Responsive text to fill the height of the parent element or ellipse it when it doesn’t fit. Check it out!

9. Responsive sidenotes
Let your sidenotes become footnotes and vice-versa. God is in the details.

Annotate webprojects