Blog

  • Front Page
  • Blog
  • CSS & JS Kerning: How to Easily & Tastefully Add Polish to Your Site

CSS & JS Kerning: How to Easily & Tastefully Add Polish to Your Site

Category: Branding, Design, HTML

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.

  1. 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.
  2. 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/
  3. 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.
  4. 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.
  5. 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

  1. https://www.awwwards.com/websites/typography/
  2. https://www.intechnic.com/blog/top-50-best-examples-of-websites-using-typography/
  3. https://www.supremo.co.uk/typeterms/
  4. https://answerthepublic.com/reports/8bc60be8-14a2-423b-8335-a73b9db08ea5
  5. 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:

  1. https://www.adamhyde.net/tag/kerning-js/
  2. https://github.com/endtwist/kerning.js/blob/master/README.md

Other JS Resources for Kerning with JS:

  1. http://letteringjs.com
  2. https://designshack.net/articles/typography/kerning-live-web-type-with-jquery-and-lettering-js/
  3. http://www.kernjs.com/
  4. http://fittextjs.com/

Further Reading on Typography and UX From People Significantly more Talented than I

  1. https://css-tricks.com/methods-controlling-spacing-web-typography/
  2. https://uxplanet.org/10-tips-on-typography-in-web-design-13a378f4aa0d
  3. https://medium.com/gravitdesigner/the-art-of-kerning-be16be25344f
  4. https://cssreference.io/typography/

Your message posted with success! The response was as follows:

Web Upon: A Portland Marketing Agency & Web Design Focused SEO Company

We Help
Small Brands
Dominate Their Verticals

Build Customer Relationships.
Scale Growth.

From web design to SEO, Social, & content marketing we use data driven insights to bring your brand closer to customers. We strive to serve as strategic partners that can provide clear results and insights into the work we do. Wherever prospects find you, we make sure that they turn into loyal customers.

Intelligently Engineered

Technical proficiency and repeatability are at the heart of what we do. We work to understand you strategic goals, and then make them happen.

Captivating Design

Customer attention is fickle. We focus on combining data driven insights with brilliant design.

Mobile, Like Your Customers

Customers are on the move. From desktop, to cell phones, and across social channels, we can't expect that if we build it customers will come.

Algorithmically Driven

Data is our DNA. Our proprietary technology combs through billions of data points daily to understand Google, and your customers.

Results Driven

We never wait and see, and never mail it in. Performance is at the core of our work, and we strive to help you understand where we are and where we're going.

A Team You Can Trust

We're obsessed with marketing & your business.

We specialize in reverse engineering the customer journey.

These are Just a few of the things we can do for you.

We're a different kind of marketing agency.

Passion is at the heart of what we do.
While we obsess over numbers and analyze information, we love what we do. We’re driven to achieve results, and believe in fighting for your business. Let's build together.

GROWTH FOCUSED

We don't mince words when it comes to results. Our priority is your success.

Making Growth Magical

Unlocking new opportunities is part of the territory. Our strategic vision can help you meet (& exceed) business goals.

DIGITAL FIRST

We practice what we preach. We constantly test the marketing tactics we recommend.

Continuous Growth

Our data driven approach means that we can locate and execute opportunities as they present themselves.

refined strategies

Don't leave the future to guess work, we're granular marketers that plan for success.

Winning is Fun

We absolutely love what we do for businesses. It's that passion that pushes us forward.

Our Story

We grew tired of mediocre marketing companies providing sub-par services. Our goal is to create the greatest marketing company in the world. Over the years we’ve seen it all. From the rise and fall of marketing companies to huge shifts that destroyed remade industries over night. We plan on being different, but at a minimum, we’ll always be a Portland SEO company you can trust. But among all the failures and success, one common factor emerged:


Motivated teams, who felt like they were doing the work that needed to be done, created the best outcome for their clients. And the clients who felt like we were serving their interests ended up being the most loyal. Together we built incredible campaigns that changed lives.


What we saw too often was half-hearted management from lackadaisical workers once the ink on the contract was dry. We live to fight for our clients. Every day we get up with the goal of doing the best work we can for you. And we refuse to give an inch to the competition, the fluctuations of the market, or any little algorithm change.
Things will change, but I can promise you that we will do what we can to keep your business growing.

LEAVE A REPLY