Here I’m trying out using Littlebit Twisty as the title font. The challenging thing about the whole Littlebit family of fonts is that, though there are a few uppercase variants, all the characters act like caps, in that they’re all roughly the same size and are naturally spread apart.

In contrast, the font I normally use for page/post titles, Mr. Eaves Sans Heavy Italic, creates some nice natural kerning effects, such as tucking the “e” in Test right “into” the “T.”

I was able to tighten up the look of this page’s current title font by adding this line of CSS:

letter-spacing: -4px;

But this works across all letters equally, and though I googled this heavily, I just couldn’t find a way to kern the individual spaces with different values, as one would do in a page-layout program. I’d like to, for example, tease the “r” and the “n” apart a little bit, and bring the two “n’s” a little closer to the “i.”

I’m guessing that this is either impossible or ridiculously complex. I think it might be possible to do this with html., in a “pure” web-publishing scenario and some span tags, but here in WordPress, using just css, well, I’m feeling doubtful.

I’m going to try adding html markup to this h1. Then I can add span tags and tweak the letter pairs individually. If this works, I can figure out how to do this with the page title.

A Kerning Test

first, in the WP editor, I clicked on the above header, then clicked the three dots on the right, and chose Edit as HTML, and changed “A Kerning Test” to “<h1>A Ke<span class=”r”>r</span>ning Test</h1>” Then I added the css below. Oh my goodness, that’s it! : ) All I changed was the space after the “r” Just compare the one above to the one at the very top, the page title. Not sure if they page-id is necessary or not, but first, gotta figure out how to do this with page titles.

.page-id-1377 .r {
letter-spacing: normal;
}