Smooth Edges CSS

index.html

<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@1,900&display=swap" rel="stylesheet">

<div class="text">ROUNDED TEXT BEFORE</div>
<div class="text smooth">ROUNDED TEXT AFTER</div>
<p>
Inspired by PhotoshopSupply.com: <a href="https://www.photoshopsupply.com/actions/smooth-edges-photoshop-action-free">Smooth Edges Photoshop</a></p>

<svg viewbox="0 0 100% 100%">
  <defs>
    <filter id="smooth">
      <feMorphology operator="dilate" radius="0" />
      <feGaussianBlur stdDeviation="3" in="operator"/>
      <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>

smooth-edges-css.markdown

Smooth Edges CSS

If you find that some fonts have edges that are too sharp or too rough, you can smooth edges and create rounded fonts using CSS and SVG filters.

Inspired by the free Photoshop action from PhotoshopSupply.com Smooth Edges Photoshop

A Pen by Ion Emil Negoita on CodePen.

License.

style.css

.text{
  font-size:70px;
  font-family:'Raleway';
  color:black;
}

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