How To Get An Aliased (retro-style) Html Text Effect

I am trying to achieve a jagged text effect with HTML and CSS text. I am aware of the webkit-font-smoothing and font-smooth properties, but even with those set to 'none' and 'never

Solution 1:

A lot of text-shadow can approximate such effect. The more you add the more you get the bad effect:

.box {
  font-size:180px;
  display:inline-block;
  font-weight:bold;
  text-shadow:
    000px, 
    000px,
    000px, 
    000px, 
    000px, 
    000px, 
    000px, 
    000px, 
    000px, 
    000px, 
    000px, 
    000px;
}

<divclass="box">a b</div><divclass="box"style="text-shadow:none;">a b</div>

Solution 2:

You can remove all the transparency created by antialiasing with SVG filters:

.box {
  font-size:180px;
  display:inline-block;
  font-weight:bold;
  filter: url(#remove-alpha);
}
.small.box {
  font-size:20px;
  font-weight:normal;
}

<svgwidth="0"height="0"style="position:absolute;z-index:-1;"><defs><filterid="remove-alpha"x="0"y="0"width="100%"height="100%"><feComponentTransfer><feFuncAtype="discrete"tableValues="0 1"></feFuncA></feComponentTransfer></filter></defs></svg><divclass="box">a b</div><divclass="box"style="filter:none;">a b</div><divclass="small"><divclass="box">a b</div><divclass="box"style="filter:none;">a b</div><div>

But note that on high-res monitors this won't have much visible effects on big texts. You should rather go with a web-font that has been designed this way from the beginning.