How to kern lettering with SVG's dx attribute.

James Grubb — Sat, 25 Apr 2020 11:29:39 +0000

The devil is in the detail

Have you ever played the Kerning Game? I scored 72 out of 100, it's not easy and the scoring is a little subjective (that's my excuse 😀).

To kern a word is to adjust the space between letters and whilst it might be overkill to do this on every blog post <h1>, there are occasions where a wordmark might benefit from a little tlk (tender-loving-kerning)

In the above Codepen, the word Devil is set in Google's Akronim type-face. With the browser's default font-kerning settings - font-kerning: auto, notwithstanding, the first two letters D and e sit a little awkwardly, perhaps they are socially distancing?

dx to the rescue

"The dx attribute indicates a shift along the x-axis on the position of an element or its content." MDN Web docs

If we add a unitless value to the <text> dx attribute our Devil will shift along the x-axis by that units amount (and in relation to the svg's viewBox dimensions)

If you continue reading the MDN Web docs they describe using multiple dx values

If there are multiple values, dx defines a shift along the x-axis for each individual glyph relative to the preceding glyph. If there are fewer values than glyphs, the remaining glyphs use a value of 0. If there are more values than glyphs, extra values are ignored.

Let's help the D and e kiss and makeup by adjusting the individual spaces. I find that once you start tinkering you end up looking at all the letter spaces. This is what I ended up with.

As I mentioned, kerning is quite subjective and if you can, it's worth asking someone to look over your shoulder and get their kerning opinion.

!!!WARNING!!! once you start looking at kerning you will see bad kerning everywhere

Conclusion

I hope you enjoyed this article. Of course, this method relies on using SVG in your markup. If you are using HTML, you could, for example, wrap each letter with a <span> with a display: inline-block class and adjust margins or relative positions. There are a number of other methods out there.

Usefull links

1 creating-web-type-lockup
2 11-kerning-tips
3 How to manipulate SVG text

DEV Community: James Grubb

How to kern lettering with SVG's dx attribute.

The devil is in the detail

dx to the rescue

Conclusion

Usefull links