CSS Smooth Font Edges

I'm a web developer, but I'm also a graphic designer.

Last week I bumped into this awesome free Photoshop action for creating Smooth Edges in Photoshop.

The action basically creates smooth edges for shapes, image cutouts and fonts.

I thought this would be a great exercise to try and use CSS to smooth font edges.

Let's Get Started

I used CSS filters to make round smooth edges for the Raleway font.

CodePen Demo:

See the Pen Smooth Edges CSS by Ion Emil Negoita
(@inegoita) on CodePen.

Github Gist: CSS Smooth Fonts

SVG Filters Stack

To smooth the corners and edges of the Raleway font I added a SVG filter to the div containing the text via the CSS class smooth. Here's how the CSS class looks:

.smooth{
    filter:url(#smooth);
}

To reference the SVG filter with the ID smooth I used the #smooth reference.

Now, for the smooth filter itself, I defined it like this:

<svg viewbox="0 0 100% 100%">
  <defs>
    <filter id="smooth">
      <feMorphology operator="dilate" radius="0" />
      <feGaussianBlur stdDeviation="3" />
      <feComponentTransfer>
        <feFuncA type="table" tableValues="0 0  1 1"></feFuncA>
      </feComponentTransfer>
      <feComponentTransfer>
        <feFuncA type="table" tableValues="0 0  1 1"></feFuncA>
      </feComponentTransfer>
      <feComponentTransfer out="rounded1">
        <feFuncA type="table" tableValues="0 0  1 1"></feFuncA>
      </feComponentTransfer>
      <feComposite in2="rounded1" in="SourceGraphics" operator="in"/>
    </filter>
  </defs>
</svg>

That might seem complicated, but it's not that bad.

Here's the SVG filter stack explained:

• feMorphology this is used to thicken the font if needed. In my case I used a radius of 0, because the font Raleway is already thick enough
• feGaussianBlur this will create a blurred version of the text. I used a radius of 3 for the blur.
• feComponentTransfer I used several of this which are actually like Photoshop levels adjustments. They basically increase the contrast. I applied them only on the alpha channel, because the Gaussian blur generates transparency and I want the font to be smooth and with full opacity
• feComposite I used the final pass to combine the original text (SourceGraphics) and the rounded1 result of the last feComponentTransfer pass to get the final result.

Here's how the intermediary & final results look like