If you were developing sites in 2006, then you may have worked with a designer like me who was all up in your business about fonts not looking exactly the same in the browser as they did in mockups.
Then you may have tried explaining to me the pains of cross-browser compatibility and how different browsers render fonts differently from one another. In response, I likely would have sent you an image file that contains the content instead to make sure everything looked the same in all browsers. Yes, I was one of those designers.
Web fonts have come a very long way since then and we now have tools to tweak the way fonts render in browsers. Some have been around for quite a while. I remember my mind nearly bursting with excitement when I discovered FitText.js and Lettering.js way back when.
There are still plenty of situations today where adjusting fonts is needed to ensure the best legibility despite having all these fancy tools. We’re going to cover a few of those in this post along with methods for how to deal with them.
Getting one exact headline to look right
I often run into this one, especially when a design contains a highly customized web font that looks great in general, but might look funky when used in a certain context.
Take the following headline using Abril Fatface from Google Fonts:

It a lovely font! However, there are a couple of points I’m not loving with this particular headline, specifically the spacing between a couple of letters, which makes things a little crowded:

This is where kerning comes to the rescue! Kerning is literally defined as the spacing between letters. All font files, whether we know it or not, contain some degree of kerning and we have the CSS font-kerning
property to remove it:
.no-kern-please {
font-kerning: none;
}
<h1 class="no-kern-please">Rubber Baby Buggy Bumpers</h1>
It’s is a subtle difference, but one that can come in handy if your designer (or your own eye) wants to do it.

Note that disabling kerning is not always in your best interest. As James Kolce noted in a comment below, well-designed types use kerning as a tool and have a reason to do so. Removing the kerning with CSS, while addressing some specific design needs in a one-off situation, could have unintended consequences on the spacing between letters in the font overall, which could make spacing between other letters not-so-great.
See the Pen Kerning Toggle by CSS-Tricks (@css-tricks) on CodePen.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
29* | 34 | No | 79 | 7* |
Mobile / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
117 | 117 | 4.4* | 8* |
Fixing poor letter-spacing across the board
If you’ve ever worked with a web font where the space between every single letter is either too wide or too narrow, then you know exactly how painful this situation is. Here’s an example using another beautiful Google web font called Dorsa:

That might make for a decent display font for headlines, but could you imagine trying to read that as a paragraph? No bueno.

The CSS letter-spacing
property can help make a sweeping change to the paragraph content if we add a couple pixels between each letter:
.spaced-out {
letter-spacing: 2px;
}
I wouldn’t go so far as to say this is still the best font for paragraph text, but it is much easier to read with that extra spacing:
See the Pen zKkPqK by CSS-Tricks (@css-tricks) on CodePen.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
30 | 2 | 9 | 12 | 6.1 |
Mobile / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
117 | 117 | 4.4 | 4.0-4.1 |
Too little or too much spacing between words
This is an offshoot of the last situation except that the spacing issues are between each word rather than individual characters.
This is where the CSS word-spacing
property is great and universally accepted by all browsers. Here’s an example of a prose using the Prompt web font which is a little wider than many other fonts and would look nicer if it was dialed down a bit for this use case.
See the Pen GjJaaE by Geoff Graham (@geoffgraham) on CodePen.
Gnarly spacing between lines
Not all line heights are considered equal. Take the way some fonts look bigger than others, even though they have the same assigned font-size
value.
See the Pen Difference in line height by font by CSS-Tricks (@css-tricks) on CodePen.
Setting the font-size
sets the bounding box for which a font is allowed to take up space. If we set our font-size
at 20px
then that creates a box that takes up 20px
of vertical space for each character to occupy.

Some fonts will take up more of the space than others and that will both give the appearance that one font is larger than the other but also that there is more or less vertical space between lines.
We can use the line-height
property to help adjust that vertical space. A decent rule of thumb is something like font-size * 1.5 = line-height
(or use a unitless line-height: 1.5;
) for legibility but that will depend on the font being used and how it occupies vertical space. Check out molten leading.
Crispness and Legibility
Not all fonts are created equal across operating systems. That’s because each operating system, be it Windows, Mac OS or anything else, will have different process for how many pixels to use when displaying fonts.
Many of us web designers loathe the thought of being beholden to how a system interprets our typography decisions.

There are CSS properties at our disposal to increase the apparent resolution of how fonts are displayed on different systems. This process is more formally known as subpixel rendering because it instructs the browser to attempt to fill missing pixels where they might exist.
There is no shortage of #hotdrama over whether it is appropriate to play with the subpixel rendering of fonts. Despite being written a few years ago, Dmitry Fadeyev summed up his argument against the practice nicely.
The antialiasing mode is not a “fix” for subpixel rendering — in most cases it’s a handicap. Subpixel rendering is technically superior, clearer, and more readable than antialiasing because by utilizing every one of the subpixels it increases its effective resolution used for font smoothing by three times. Antialiasing is useful for certain circumstances, such as for light on dark text, but it is absolutely not a replacement for subpixel rendering, and certainly not a “fix”.
But let’s say we wanted to do it anyway. CSS gives us a certain level of control over the crispness and legibility by using font-smooth
to fill in what operating systems might leave behind.
The font-smooth
values include:
auto
: Allows the browser to decide the best case for filling in pixels on fonts.never
: Disables the system from auto-smoothing fonts. This will display the font in its natural state, jagged edges and all.always
: Instructs the browser toll always add pixels to fonts where it sees the opportunity.
Note: The font-smooth
property is considered an unofficial property at the time of this writing and is not recommended for use on a production site. There are vendor prefixes to achieve the effect in WebKit and Mozilla, though there is no standard implementation.
Given that note, the following vendor prefixes are currently available with their own values:
-webkit-font-smoothing
none
: Disables font smoothing in WebKit browsers.antialiased
: Smooths the font on the same level as the pixels already provided by the system.subpixel-antialiased
: Smooths the font on a more micro level to give the sharpest text possible, particularly on high-resolution screens.
-moz-osx-font-smoothing
auto
: Allows the browser to decide whether to optimize the font smoothness.inherit
: Takes the property value of the parent element.unset
: The same as specifyingnone
in the WebKit prefix.grayscale
: Similar to theantialiased
value in the WebKit prefix.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
120* | 120* | No | 117* | TP* |
Mobile / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
No | No | No | No |
Oh, wait, you’re using SVG?!
SVG has its own level of support for the techniques we’ve been covering in this post. We’ve got kerning (not likely to do much) and the usual suspects letter-spacing and word-spacing. Interestingly, we also have a textLength
attribute which can be used to explicitly set how wide the text should be rendered, and it will stretch/squish the text to accommodate. The lengthAdjust attribute controls whether that should happen to just the characters or the glyphs (like punctuation) too.
See the Pen SVG Text Spacing by CSS-Tricks (@css-tricks) on CodePen.
In Conclusion
Typography on the web is hard! Yes, we do have a ton of control over how type is displayed, rendered and positioned on the screen. But with great power comes great responsibility. At least you now have a few tools at your disposal to respond back to web designers who are stuck on the the precision of typographical design in the browser.
Sorry, but I find this to be well-intentioned but nearly incomprehensible. “…dialed down a bit…”? Here you are dealing with the concept of tight kerning (in almost invisible amounts) and you throw in a totally non-specific statement. How could I possibly interpret that to achieve the result you had in mind.
I also disagree with your kerning example. The original, in my opinion, is far easier to read than the one in which you expanded the kerning on two word pairs.
Your “crispness and legibility” has no examples. You merely show output styles of OS displayed at an unnaturally increased image size. This is of no value in learning how take advantage of this concept.
The SVG examples are completely unclear.
The use of Dorsa as an example of text with too little letter spacing is silly. Dorsa is NOT a text font; it is a display font. Using Dorsa in that manner is first-level mistake, not one of the second-level considerations you are dealing with. Then you changed the point size when you increased the letter space so that one is no longer comparing apples to apples.
While I agree that type on the web needs observation and consideration to improve its legibility, I don’t think you added anything to the argument and may, in fact, have caused more confusion than clarification.
As we say down south, “Just sayin'”
Hey Randy — I appreciate your feedback! I really do.
While a few of your points are more on the subjective side of things, you do have some interesting observations that are certainly worth addressing.
I suppose there could be static screenshots of the difference and I’ll definitely look into that. At the same time, the support for those methods are null at the moment and it does not seem right to provide specific examples of something that cant be used in a production environment.
Is the side-by-side not clear enough? Having the code examples next to the output seems to be the most clear and concise way to illustrate the concepts.
I said as much in the post. I wanted something that dramatically showcased the difference.
I’m not sure if the post was intended to be an argument but considerations of what to do with typography in specific situations. Having worked both on the design and the dev side of things, these are real-life scenarios I’ve found myself in and they are how I come to deal with them. It’s totally valid and cool if you have different approaches, but let’s at least keep the scope of the article in mind. And, if you have different scenarios or approaches, then definitely contribute them, as this post is not meant to be an exhaustive list of all situations — merely ones I’ve encountered. We can all learn from each other’s experience collectively rather than mine alone. :)
As we say down here in SoCal, “Right on.”
Bless your heart
Hello!
In the section “Getting one exact headline to look right” the kerning in the first example is actually right. Deactivating it produces undesired results if you look closer. All those little parts of the letterform that probably you are looking at, are too lightweight and don’t require that amount of space (as shown in the second example), you have to consider the whole letter not only the borders or it, that’s why the “b” and “y” overlap a little in the first example, to fix the space left by the “y”, but when you deactivate kerning the overall space becomes too big.
The kerning feature is not automatic (as far as I know), it only activates the spacing settings provided by the type designer, and they are usually right, at least in well-designed fonts.
Also kerning is not the spacing between letters, that’s called tracking (letter-spacing in CSS), kerning is only the space between two letters.
I just thought I should point this out because this is a very popular website, so a lot of people would probably consider deactivating the kerning in a real website after this, but that’s not a good idea 99% of the time.
Thank you, I was thinking the same thing. I was taken aback to see a recommendation to disable kerning on a site like CSS-Tricks.
You are spot on and this is a support helpful comment, James!
Just to be clear, the post is not recommending kerning as a great idea but referring to it as a tool that CSS provides in situations where we may need to adjust the spacing.
I’m definitely going to add a note in the post about watching for the overall impact and unintended consequences of kerning because, as you point out, that’s super legit and worth noting for sure.
Cheers!
Great, just keep in mind that we are talking about how bad is deactivating kerning, not about using kerning! Kerning is good, good kerning is better, but no kerning is bad… unless you are working with monospaced fonts.
Cheers!
Heck yeah and roger that!
I also have to be blunt about it: Your advice about turning off kerning is unfounded—in general and in this specific case: How do you even figure that these two letter combinations need fixing because there are supposedly “crowded”? Look at how close “be” and “ab” are! And u and b are even merged together. But “Ru” und “by” need fixing? Why? What’s your kerning principle to explain this? I’m sure no type designer or graphic designer experienced with manual letter spacing would agree with you.
And in general: Default spacing (without kerning) is the best a type designer can do by just placing each letter within the letter’s bounding box. That has its limits because it’s not contextual and certain letter pairs might require adjustments. That’s where kerning comes in. It’s a contextual improvement(!) of the default letter spacing, especially when done right, as you can expect it with a font from good type foundry like Type Together (which created Abril).
What you showed should be the other way around: you should show the limits of unkerned text and how it gets improved through kerning in almost all cases. And that’s not just my “opinion”—pick up any of the 100 so beginner’s typography books—they will all say the same because that’s the combined knowledge of 500 years of typesetting.
Exactly. I think my typography teacher would turn around in his grave just by viewing the provided examples.
Hey Ralf,
I totally hear you here, but to directly answer your question:
This post is about dealing with specific scenarios I have come across as a front-end developer where a designer has requested very specific changes to the type being implemented. It’s not a post about whether the principle of kerning is warranted or even correct but methods that CSS provides when very detailed, picky (and yes, totally strange) requests for changes are made.
In other words: I agree with you 100%. The context of how we respond to such requests by the people we work with, however, might be where we disagree.
Wow. The author goes to considerable effort to give us typography nerds control and precision over elements we might want control over, and all everyone can say is his work sucks. Really?
I appreciate what i learned from this article. Tools I will likely use. Good enough for me.
On my site https://tobireif.com/ I added custom kerning to the headings to get the spacing between the characters just like I wanted, without having to change the font itself.
Thanks for this! Somehow I wasn’t aware of the kerning and word-spacing properties.
Great article! Loved the read.
There is one question that I can’t seem to find the answer to: can you control the spacing between individual letters (for instance like t his)?
Also wanted to point out that I’m just started to learn CSS, so forgive if it’s a silly question. I googled the shit out of it but never found an answer.
Thanks anyway!
thanks for the article, I was just looking for this.
Chill out, folks. Dude’s just giving some information.
Having been a designer for quite a while, and having been coding websites for a good portion of that time, all of these CSS properties are ones that I have been using for years. That is to say, for me specifically, there is nothing really new here. However, that does not invalidate what the author is saying.
You may not agree with his typographic decisions (I wouldn’t turn off kerning…I spend too much time building it into fonts that I create), but that really didn’t seem to be the point of the article. It is simply a primer of some of the ways you can control spacing on the web if you wish, as the title states. That’s a useful thing for many people; clearly, it is good and new information for many responding.