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…

Baseline_shift_diagram

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!