What I was after

I knew there was a way to shift the baseline of a character within a paragraph using CSS, but I couldn’t remember the code for it. I wanted to shift the search logo in my post titles on this site so that I could call it as a character, but make it smaller than the post title without it looking weird for being so low compared to the text…


The result(s)

The first result in my Google search, Improve your web typography with baseline shift (https://stuffandnonsense.co.uk/blog/about/improve_your_web_typography_with_baseline_shift) gave me exactly what I was looking for.

The important bits

The relevant bit for me was that if you made a child of a parent class and positioned it relative, you could adjust the top value to shift the baseline, for example:

.content span { position:relative; top:-.2em;}

So if you had a paragraph with the class content, and inserted a span tag within it, the baseline of the span tag would be shifted up.

<p class="content">Here is my test content <span>wow, what shift!</span></p>

Output: Here is my test content wow, what shift!