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:

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?

score 2 · Accepted Answer · answered Jun 19 '13 at 13:08

2

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.

answered Jun 19 '13 at 13:08

aendra

1

Thanks for share all this links. Perhaps [Lettering.js](http://letteringjs.com/) might help too. – Arkana Oct 07 '13 at 10:18
@Arkana I ended up using Lettering.js to break the text into `span`s. Hugely useful script, though doesn't really have much to do with sizing/justifying text. – aendra Oct 07 '13 at 10:27

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

You can take a look at Adjusting Kerning in CSS for the CSS part and have you take a look at http://kerningjs.com/ ?

edited May 23 '17 at 12:13

Community

answered Feb 19 '13 at 11:15

X-Blaster

2 Answers2