How to get rid of accents just with CSS

Question

Without using JS, I wanted to remove accents with CSS so the HTML continues semantically correct while visually achieving UPPERCASE without accents.

Example:

h1 {
  text-transform: uppercase;
  /*sth here*/
}

<h1>Fácil</h1>

Tks!

Answer 1

You can adjust the line-height and use overflow:hidden but pay attention when using a different font-family you may need another value:

h1 {
  text-transform: uppercase;
  line-height: 0.75em;
  overflow: hidden;
}

<h1>Fácil é â ä</h1>
<h1 style="font-size:25px">Fácil é â ä</h1>
<h1 style="font-size:18px">Fácil é â ä</h1>

With another font-family:

h1 {
  font-family:arial;
  text-transform: uppercase;
  line-height: 0.87em;
  overflow: hidden;
}

<h1>Fácil é â ä</h1>
<h1 style="font-size:25px">Fácil é â ä</h1>
<h1 style="font-size:18px">Fácil é â ä</h1>