How to kern lettering with SVG's dx attribute.
Tags: svg, html, css
Published: 2020-04-25 11:29:39

---
title: How to kern lettering with SVG's dx attribute.
published: true
description: Using SVG's <text> element and dx attribute to visually kern letters. 
tags: svg, html, css
cover_image: https://res.cloudinary.com/makingthings/image/upload/v1587813538/articles/svg/parade-uneven.jpg
---

##The devil is in the detail
___

![The Kerning Game](https://res.cloudinary.com/makingthings/image/upload/c_scale,f_auto,w_800/c_fit,u_device:kern,w_600,x_0,y_-10/v1520245523/device/Apple_Macbook_Air_13_22.png)

Have you ever played the [Kerning Game](https://type.method.ac/#)? 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)

{% codepen https://codepen.io/limitedunlimited/pen/eYpBwxd %}{% gist https://gist.github.com/jamesgrubb/963197b7553c06eff8ec0adbbbbfa562 %}


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](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dx)*

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)

{%codepen https://codepen.io/limitedunlimited/pen/OJyWONv %}

{%gist https://gist.github.com/jamesgrubb/f3039f381a9d418c567ea6355f58a413 %}

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. 

{% codepen https://codepen.io/limitedunlimited/pen/pojRaGx %}
{% gist https://gist.github.com/jamesgrubb/dd1e787dc0b728fb81774ba202298f74  %}

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

![Parade aligned](https://res.cloudinary.com/makingthings/image/upload/v1587813508/articles/svg/parade-even.jpg)

### 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](https://css-tricks.com/creating-web-type-
lockup/)
2 [11-kerning-tips](https://99designs.co.uk/blog/tips/11-kerning-tips/)
3 [How to manipulate SVG text](https://vanseodesign.com/web-design/how-to-manipulate-svg-text/)