1

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.

enter image description here

mheavers
  • 29,530
  • 58
  • 194
  • 315

2 Answers2

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
1

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;
}
<svg width="0" height="0" style="position:absolute;z-index:-1;">
  <defs>
    <filter id="remove-alpha" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="0 1"></feFuncA>
      </feComponentTransfer>
    </filter>
  </defs>
</svg>
<div class="box">a b</div>
<div class="box" style="filter:none;">a b</div>
<div class="small">
  <div class="box">a b</div>
  <div class="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.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • This is a cool apporoach. Yes, on my monitor this didn't have much effect. Agreed that finding a font would be ideal. I'm trying to match arial, so there may be something like that out there. – mheavers Dec 08 '20 at 00:47
  • You could also try the font Redaction by MCKL: https://mckltype.com/redaction I think it has exactly the effect you’re after – kennethormandy Dec 08 '20 at 01:35
  • @mheavers you mean you have less visible effect than Temani's solution? That's a bit weird, what they are doing should have less or exact same effect (they are just drawing semi-transparent pixels over themselves so they become transparent). What OS are you using? The screenshot in your question is from your computer? Could you also try this [fiddle](https://jsfiddle.net/sbg3azj7/)? Also, quick search for "arial bitmap" lead to [this](https://www.dafont.com/pixel-arial-11.font) – Kaiido Dec 08 '20 at 01:35
  • @kalido i think I will use pixel Arial. I realize my question was worded as being about using css to achieve a jagged effect, so I've accepted that answer here, but thank you for pointing me to thar. – mheavers Dec 09 '20 at 13:16