There is some text that is deployed at 90deg.

span { -webkit-font-smoothing: subpixel-antialiased; text-rendering: optimizeSpeed; backface-visibility: hidden; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } /* Customizer */ .container { height: 2000px; background: #eee; } span { position: fixed; right: 1rem; top: 20%; font-size: 2rem; } 
 <div class="container"> <span>some text</span> </div>

Problem: Text is blurred, not displayed correctly.

Question: How can I correct the display of the text (and can it be corrected at all) so that it is clear and not "smeared" (vague)?

PS: In this example, it is always the same, in my project it is in this form, only when scrolling (when you stop scrolling the page - it is normally displayed).

  • one
    Lena, for example, if you add font-family then in my opinion the problem disappears codepen.io/Geyan/pen/YGvBky?editors=110 - user33274
  • Hmm, interesting, and did not think to replace the font. Thank!!! - HamSter 2:21 pm
  • one
    glad you helped! - user33274

1 answer 1

The problem is connected with a bunch of font size + "family" of the font.
It is not possible to correct the blurring of just such a text size, the properties (their sizes) do not allow, they begin to stretch, blur. To solve, you need to take a larger size, or start playing with other fonts, if it is not so important.

PS For tests based on your code, the font size ( font-size ) was tested at 27px and 28px , on a larger size, the blurring disappears. So the moment is a dead center point for large letters with clear mapping.

Test 1 (blur present):

 span { -webkit-font-smoothing: subpixel-antialiased; text-rendering: optimizeSpeed; backface-visibility: hidden; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } /* Customizer */ .container { height: 2000px; background: #eee; } span { position: fixed; right: 1rem; top: 20%; font-size: 27px; } 
 <div class="container"> <span>some text</span> </div>

Test 2 (no blur):

 span { -webkit-font-smoothing: subpixel-antialiased; text-rendering: optimizeSpeed; backface-visibility: hidden; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } /* Customizer */ .container { height: 2000px; background: #eee; } span { position: fixed; right: 1rem; top: 20%; font-size: 28px; } 
 <div class="container"> <span>some text</span> </div>

  • Thanks, helped! - HamSter