Salta al contingut principal

Beefing Up Dull Text in WebKit

Beefing Up Dull Text in WebKit:
While doing a bit of cross-browser poking around on CodePen, I noticed that the font for the code editors was notably duller and weaker in WebKit browsers (Safari and Chrome) than it was in Firefox or Opera. I quite like Chrome and it was sad to me knowing that I would be spending a lot of time looking at inferior looking text, so I set about looking for solutions.

Here's the "before" shot:

View Full Size

There used to be a text-shadow trick, but that has since stopped working and was actually for making text thinner, not beefier. Then there is the -webkit-font-smoothing stuff to play with. But no dice there. The value none looked gross and there was no visual difference between antialiased and subpixel-antialiased in this case.
The answer came on Twitter, as usual!
@chriscoyier try -webkit-text-stroke: 0.35px
— Kevin Ennis (@kevincennis) July 11, 2012
Adding this to the text noticeably beefed it up. Still not quite as bright and sharp as Opera or Firefox, but closer. And since the effect is applied with a -webkit- vendor prefix I didn't need to worry about it affecting the other browsers.

View Full Size

I was all proud that this would solve the issue and all would be lovely. Of course I wake up to an email like this:
Hey,
I have seen the change to the text on Chrome and it really gives you a headache, it's so blurry.
Ah, the internet. Whattyagonnado?

Update

Feedback from this has been about 50/50. Some people hate the "faux bolding" (I don't think this is really faux bolding but I understand), some people prefer the thin text, some people preferred the attempt at brightness.
Here's the scoop. The thin text from the very top screenshot wasn't a result of "That's just how WebKit does it", it was because an element within the same parent element of the text had a CSS 3D transform applied to it. Namely, transform: translate3d(0, 0, 0). The great irony here is that that code was applied in order to prevent text from getting that "thin" look when a CSS transition was taking place, a curious side effect of CSS transitions. While it worked, it also caused the text in the editor to get that "thin" look all the time.
So, in CodePen, I've removed the -webkit-text-stroke so the text rendering looks way better and more comparable with Opera and Firefox. I've then more carefully applied the 3D transform fix to other elements that need the help during transitions.
Beefing Up Dull Text in WebKit is a post from CSS-Tricks

Comentaris

Entrades populars d'aquest blog

15 Tutoriales CSS3 para mejorar tus paginas web

15 Tutoriales CSS3 para mejorar tus paginas web : Les dejo una pequeña recopilación de tutoriales CSS3 que espero sean de utilidad para ustedes, intentamos hacer una recopilación bastante completa para crear impresionantes diseños web con CSS3 y aprovechar las bondades de CSS3 incluso para aplicar efectos, son un total de 15 tutoriales CSS3 gratis . Crear menu dropdown con CSS3 Crear breadcrumbs con estilo Transiciones de paginas con CSS3 Crear timeline con CSS3 y jQuery Reproductor de video con HTML5, CSS3 y jQuery Crear efecto acordion CSS3 Aplicar degradado a texto Crear texto en curva con CSS3 y jQuery Aplicar textura a texto con Magic Pill Crear slider de imagenes con CSS3 y jQuery Rotar texto con CSS3 Crear menu vertical con CSS3 Crear formulario con HTML5 y CSS3 Crear efecto de imagenes apiladas con CSS3 Aplicar estilos para imagenes con CSS3  

Learn Composition from the Photography of Henri Cartier-Bresson

“Do you see it?” This question is a photographic mantra. Myron Barnstone , my mentor, repeats this question every day with the hopes that we do “see it.” This obvious question reminds me that even though I have seen Cartier-Bresson’s prints and read his books, there are major parts of his work which remain hidden from public view. Beneath the surface of perfectly timed snap shots is a design sensibility that is rarely challenged by contemporary photographers. Henri Cartier-Bresson. © Martine Franck Words To Know 1:1.5 Ratio: The 35mm negative measures 36mm x 24mm. Mathematically it can be reduced to a 3:2 ratio. Reduced even further it will be referred to as the 1:1.5 Ratio or the 1.5 Rectangle. Eyes: The frame of an image is created by two vertical lines and two horizontal lines. The intersection of these lines is called an eye. The four corners of a negative can be called the “eyes.” This is extremely important because the diagonals connecting these lines will form the breakdown ...

Averiguar la Salud del Disco Duro, con Crystal Disk Info [Windows]

Averiguar la Salud del Disco Duro, con Crystal Disk Info [Windows] : El actual “cuello de botella” en nuestras PCs; es decir, donde todo el rendimiento de nuestra PC llega a estancarse , es en el Disco Duro. Si bien los procesadores han evolucionado considerablemente en velocidad / rendimiento, el RAM no sólo es más económico, sino más veloz, y las tarjetas de video siguen innovando con cada generación, los discos duros han permanecido idénticos desde hace años, limitados por la física. Y es que un disco duro tradicional sólo tiene un máximo de velocidad con el que puede girar (medido en revoluciones por minuto, o RPM) que, a su vez, limita la velocidad de lectura y escritura. En pocas palabras, a pesar de que nuestras PCs pueden procesar información mucho más rápido que hace 5 años, los discos duros siguen leyendo (y escribiendo) esta información prácticamente a la misma velocidad. Esto ha cambiado con la llegada de los SSD, los Discos de Estado Sólo que no están limitados por la velo...