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