Often when I interact with clients that are less than happy with their web design results the issue tends to revolve around a lack of polish. Obviously there are are times when the web design project goes completely off the rails for other reasons. But extra polish can make a site, landing-page, custom widget or project, and even blog posts significantly more engaging.
Best of all it’s easy, and you can do it without becoming a typography nerd! (not that I’d discourage you)
What is kerning for fonts?
Kerning refers to the spacing adjustments between particular characters in a word, when certain fonts might create dissonant horizontal spacing “out-of-the-box.” Kerning allows traditional and analog visual designers to create a more harmonious reading experience for the end user.
Kerning for fonts has been around a long long time, and started with newspaper type setters who had to physically move and set each letter on a page with tight deadlines. These adjustments often allowed publishers to turnaround pages without making significant alterations or running back to the editor. Nowadays, kerning is just another tool available to designers, and I’d argue gives each end product a little bit more polish.
Check out the image below. The same word, repeated 4 times, totally different feeling each time.
From: What Is Kerning, and Why Is It Important?
Kerning Web Fonts & Other Tools:
Generally we have 5 CSS tools available to us.
- letter-spacing – Letter spacing is a CSS property that allows you to increase the spacing between letters and words. Applied to an individual set of letters with a span tag you can kern characters, and applied to an entire word or style element you can increase tracking within elements.
- font-family – The specific typeface, what most people refer to as a font, you actually choose to use on your site. All of the variants and sizes of that typeface, form its type family, which most developers call a font-family. The specific font-family you choose will also have a massive impact on your sites feels. This is a large topic, and you may not want to mess with your sites overall design for one page, but you can read more about selection here. You can also access a wealth of different fonts through embedding typefaces now: https://fonts.google.com/
- font-weight – You no longer have to settle just for bold or non bold type, font-weight CSS modifications allow for values including normal, bold, bolder, lighter, number 100-900, initial, or inherit. Generally speaking most people use the numeric values or none at all.
- line-height – Line height again is something that most web users won’t think about, but refers to the space between letters on your page. Most sites and frameworks have this value preset but it’s definitely something you could play with further. This is traditionally referred to as leading (or linespacing) and similarly to kerning and tracking, the dead space between letters can impart a certain emotional feel for readers.
- text-shadow – You probably won’t use this much, if ever, but it’s a novel CSS tool available to designers. And I have seen some interesting applications of it on some sites.
As a quick reminder here are the differences between these tools:
From 8 Simple and Useful Tools for Kerning Type
Most importantly, these minutes difference really do affect how the page feels the end user.
Examples of CSS Kerning, Leading, Tracking, and Other CSS Design Properties:
Some samples:
.sampleText1:
What did Johann von Goethe mean when he wrote, “Somebody once told me, the world was going to rule me, I ain’t the sharpest tool in the shed.”
.sampleText2:
What did Johann von Goethe mean when he wrote, “Somebody once told me, the world was going to rule me, I ain’t the sharpest tool in the shed.”
.sampleText3:
What did Johann von Goethe mean when he wrote, “Somebody once told me, the world was going to rule me, I ain’t the sharpest tool in the shed.”
.dopey:
What did Johann von Goethe mean when he wrote, “Somebody once told me, the world was going to rule me, I ain’t the sharpest tool in the shed.
CSS Rules for Samples:
.sampleText1 {
letter-spacing: 2px;
font-size: 1.9em;
line-height: 2.1em;
font-weight: 400;
font-family: Helvetica, sans-serif;
}
.sampleText2 {
letter-spacing: 1px;
font-size: 1.6em;
line-height: 1.9em;
font-weight: 100;
font-family: Helvetica, sans-serif;
}
.sampleText3 {
letter-spacing: -1px;
font-size: 1.3em;
line-height: 1.5em;
font-weight: 900;
font-family: Helvetica, sans-serif;
}
.dopey {
letter-spacing: 4px;
font-size: 1.1em;
line-height: 1em;
text-shadow: 2px 2px orange;
font-family: "Times New Roman", Times, serif;
}
How to Effectively Use the CSS Font-Kerning Property
Kerning like any other design tool is an easy place to go overboard. Most people won’t care. Some people care too much. But in some areas, especially flashy text heavy sites, unobtrusive kerning increases the readability and pleasure of people perusing the website. It can also make copy significantly more impactful.
“Too little kerning is preferable to too much, and inconsistent kerning is worse than none.” – Robert Bringhurst
As you can see in the photo below, there is a significant difference in the ease of reading the copy on the right, compare to the copy on thee left. (all awkward bits have been circled by the author on the left page as well)
Kerning before and after example taken by author from the Elements of Typographical Style by Robert Bringhurst.
A few simple modifications on your site can go a long long way.
Understanding Optical Kerning
Having a numerically equal amount of space between letters is not as important as having the optically preferred amount of space. There is definitely a degree of artistry to selecting the ideal kerning space for letters on your design. Depending on the design of the original typeface and the letters involved the specifics of spacing will vary.
from 13 Tips for Avoiding Kerning Disasters
Kerning for Fun and Style
Kerning and tracking are a just two fun tools in your arsenal as a designer/marketer. Like music everyone will have a different opinion, and though something will feel totally wrong, there can be a many right answers to the same problem.
Great Examples of Web Design Typography
- https://www.awwwards.com/websites/typography/
- https://www.intechnic.com/blog/top-50-best-examples-of-websites-using-typography/
- https://www.supremo.co.uk/typeterms/
- https://answerthepublic.com/reports/8bc60be8-14a2-423b-8335-a73b9db08ea5
- https://www.portent.com/tools/title-maker
Resources:
There are a large set of libraries that can serve as useful tools for more intense kerning that is easily done with just CSS.
Original Kerning.js Info:
- https://www.adamhyde.net/tag/kerning-js/
- https://github.com/endtwist/kerning.js/blob/master/README.md
Other JS Resources for Kerning with JS:
- http://letteringjs.com
- https://designshack.net/articles/typography/kerning-live-web-type-with-jquery-and-lettering-js/
- http://www.kernjs.com/
- http://fittextjs.com/
Further Reading on Typography and UX From People Significantly more Talented than I
- https://css-tricks.com/methods-controlling-spacing-web-typography/
- https://uxplanet.org/10-tips-on-typography-in-web-design-13a378f4aa0d
- https://medium.com/gravitdesigner/the-art-of-kerning-be16be25344f
- https://cssreference.io/typography/
