Improve your web typography with baseline shift

The baseline is an invisible line onto which all type characters sit, although of course some characters (including ‘j’, ‘p’, ‘g’ and ‘y’) have descenders that hang below the baseline. Baseline shift involves moving characters up or down in relation to the baseline and using it effectively can make a huge difference to the professional look of your type. Although baseline shift has traditionally been a part of using tools like InDesign or Quark, there are ways to accomplish the same results using today’s CSS.

Baseline shift is a great tool for fine-tuning your typography. Try using it to:

create fractions manually. Use baseline shift to raise the numerator in diagonal fractions

Baseline shift using CSS

If you find yourself with a lost weekend, or your sleeping tablets aren’t working, the W3C has a (seemingly) forgotten Working Draft that deals with baseline shift (and other things) — CSS3 module: line — edited, in part, by Eric Meyer.

The contents of that CSS3 Working Draft might one day make it to a screen near you, but why wait to improve your typography when you can shift your baselines now using CSS2.1? Let’s take a look at one or two practical examples.

Has it ever bothered you that when you set your text large, parenthesis hang below the baseline and sometimes collide with the stroke of an uppercase character? That is because parentheses work best with lowercase characters and not so well will uppercase or numerals in, for example, telephone numbers. Don't worry, CSS2.1 can help you fix that.

Unfortunately there is no shortcut to selecting those parenthesis, so I wrap a span element around each one.

<h2>Blog:
<span class="parenthesis">(</span>
And All That Malarkey
<span class="parenthesis">)</span>
</h2>

Relative positioning is the perfect choice for shifting characters from the baseline, first by applying a generic parenthesis class (in which I've also slightly reduced the font-size of the parentheses:

.parenthesis {
position : relative;
font-size : 88%; }

Then specific descendent selectors to vary the baseline shift for each specific instance: