Creating mixed-height justified headlines?

Question

I have a design that has a lot of three-line mixed-height headlines. Probably the easiest way to explain the look is with an example:

(For the purpose of this, ignore the fact that the last line has two words.)

Everything's fully-justified, but the font-size and kerning change depending on the length of the word.

Is there any way of doing this with either JavaScript or CSS?

Answer 1

I went through a boatload of libraries for this project, including:

• FitText.js
  • Couldn't get it to work so that different lines are different sizes (I.e., justified, but not mixed-height).
• BigText.js
  • Couldn't get it to work at all.
• Stretch
  • I forget the issue with this, but it didn't work for my purposes.
• Winner: SlabText
  • This is what I ended up using, and it works fantastic.