blog

Responsive titles with variable font sizes

The title at the top of this site has two different components, a large main title (e.g. 'Blog') and a follow-on title (e.g. 'of Brendan James Arnold'). As far as I can work out, CSS at present does not have the tools to allow for good looking wrapping of the text as the window size changes – either the follow on text is crushed up until the containing block has to wrap, the font baselines are off or if inline elements are used then the line-height is too big for the smaller text.

Since this is to be used in a template, I needed a general solution. So picking up my sledgehammer and aiming squarely at the walnut, I knocked together some JavaScript to handle it.

To see the end result, take a look at this jsFiddle.