Stylish CSS: Jagged 3-dimensional rotated text

Question

Stylish CSS: Jagged 3-dimensional rotated text

Have a look at this Codepen to see the issue.

As the text moves into the background, more aliasing appears.

A screenshot taken in Chrome on macOS (similar appearance in FF & Safari):

https://i.sstatic.net/n746I.png

I've experimented with different values for -webkit-font-smoothing and text-rendering, added translate3d(0,0,0) and other techniques. Unfortunately, nothing produces a satisfactory result. Using filter: blur can somewhat hide the issue, but it compromises sharpness.

Is this a problem we have to accept due to display pixels, or is there a solution?

🙏

For future reference, here's the code from the Codepen:

body {
  background: black;
  text-align: center;
}

div {
  perspective: 1000px;
}

h1 {
  color: white;
  font-weight: 300;
  font-size: 6vw;
  transform: rotate3d(1, -0.4, -0.4, 250deg);
}

html
<div>
  <h1>🤗 Hello World!</h1>
</div>

html css antialiasing

Answer 1

Answer №1

It seems that the way browsers display this is simply a matter of their rendering. If you're determined to remove it, perhaps consider taking a different path and experimenting with an alternative transformation method. ://

Answer 2

It seems that the way browsers display this is simply a matter of their rendering. If you're determined to remove it, perhaps consider taking a different path and experimenting with an alternative transformation method. ://

Answer 3

Answer №2

To adjust the sharpness of text in the browser, you can reduce its size and scale it using the transform property. The more you scale it, the smoother it becomes until it eventually blurs.

body {
  background: black;
  text-align: center;
}
div {
  perspective: 1000px;
}
h1 {
  color: white;
  font-weight: 300;
  font-size: 5vw;
  transform: rotate3d(1, -0.4, -0.4, 250deg) scale(4);
}

<div>
  <h1>🤗 Hello World!</h1>
</div>

Answer 4

To adjust the sharpness of text in the browser, you can reduce its size and scale it using the transform property. The more you scale it, the smoother it becomes until it eventually blurs.

body {
  background: black;
  text-align: center;
}
div {
  perspective: 1000px;
}
h1 {
  color: white;
  font-weight: 300;
  font-size: 5vw;
  transform: rotate3d(1, -0.4, -0.4, 250deg) scale(4);
}

<div>
  <h1>🤗 Hello World!</h1>
</div>

Stylish CSS: Jagged 3-dimensional rotated text

For future reference, here's the code from the Codepen:

Answer №1

Answer №2

Similar questions

What steps can be taken to provide accurate information in the absence of ImageData?

Issue with grid element not properly scaling using the transform:scale property

Issue with excessive content causing scrolling difficulty

Right-align SELECT-OPTIONS text

What is the best way to populate a dropdown menu in PHP?

What is the secret to creating a button that can sort text and another button that flips the word density in my content?

Turn off jQuery on certain pages while keeping the styling intact?

Is it possible to use JavaScript to load, edit, and store text files?

Scrollspy in bootstrap incorrectly highlights the navigation item as active

Tips for transferring the input text box value to angularjs when clicking on the text box

How can I add divs to an HTML page with a Javascript animated background?

IIFE and the Twitter share button are a powerful duo

The difference between using an event listener directly in HTML vs. using the add

I'm puzzled as to why the background isn't fully covering all of the content on the page

Improve the readability of text that is overflowing using CSS styling techniques

Streamlining all icons to a single downward rotation

What is the best way to use a button to hide specific divs upon clicking?

Is there a way to eliminate the 'All Files' option from an HTML file input field?

How can PHP be used to replace the div html() function?

Exploring Bootstrap 4: Creating list-inline elements for various screen sizes