How to get an aliased (retro-style) HTML text effect

Question

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", the text is still smoother than I would like.

Are there other css properties, or other methods I can use to force the text to be more jagged / aliased? Only caveat is it needs to be actual HTML text, not images.

Answer 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:
    0 0 0px, 
    0 0 0px,
    0 0 0px, 
    0 0 0px, 
    0 0 0px, 
    0 0 0px, 
    0 0 0px, 
    0 0 0px, 
    0 0 0px, 
    0 0 0px, 
    0 0 0px, 
    0 0 0px;
}

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