Sidebearings & Alignment

Sidebearings are a necesary part of any font; along with kerning, they ensure that letters look well-spaced next to one another. If you look at one of the glyphs in a font, its sidebearings are the spaces to the left and right of the letterform. These, along with the character itself, span a glyph’s entire width.

So how can sidebearings cause problems with alignment?

In left-aligned type, each line’s first glyph begins at the same point, but because of their sidebearings, the actual characters don’t. This causes large type to look indented — especially when set above or below smaller type.

In the example above, you can see that the larger the font size is, the more indented the type appears.

Negative margins

Accounting for sidebearings in left-aligned type is pretty straightforward in CSS: you can use margin-left with a negative value.

Depending on the typeface and font size, the value you’ll need can differ wildly, so try out several values to see what works best. I’ve found that they usually fall within the -0.02em to -0.1em range.

And there you have it: the type now looks properly aligned, thanks to a few negative margins.

Takeaways

Tweaking alignment with CSS can become a hassle if you try to manage all the type across a website. I think it’s best to focus on just the largest type, and then make adjustments elsewhere as needed. It’s simple to do and can have a huge effect on how cohesive your web typography looks.

As always, feel free to message me on Twitter if you have any questions, feedback, or topic suggestions.