Saltar al contenido principal

Propiedad de css que hacen que tu tipografía se vea mejor

May 11, 2016

La verdad sea dicha

Bueno, no es que se vea mejor mejor, la idea es que los vectores sean más fieles a como fueron creados originalmente, el efecto visual que dan es que sen más delgadas, pero en algunos casos algunas tipografías (sobre todo las thin) sin esta propiedad pierden completamente la gracia

El css de Font-smoothing

-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

Font-smoothing en funcionamiento

SIN font smoothing

Lorem Ipsum dolor Est

Lorem Ipsum dolor Est

Lorem Ipsum dolor Est

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue quis lacus in scelerisque. Nullam facilisis nibh a magna aliquet, vitae tempor odio dignissim. Sed non dolor dapibus, vestibulum sem vitae, sollicitudin diam. Nulla elit quam, rhoncus at arcu eget, pretium pulvinar est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue quis lacus in scelerisque. Nullam facilisis nibh a magna aliquet, vitae tempor odio dignissim. Sed non dolor dapibus, vestibulum sem vitae, sollicitudin diam. Nulla elit quam, rhoncus at arcu eget, pretium pulvinar est.

Con Font smoothing

Lorem Ipsum dolor Est

Lorem Ipsum dolor Est

Lorem Ipsum dolor Est

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue quis lacus in scelerisque. Nullam facilisis nibh a magna aliquet, vitae tempor odio dignissim. Sed non dolor dapibus, vestibulum sem vitae, sollicitudin diam. Nulla elit quam, rhoncus at arcu eget, pretium pulvinar est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue quis lacus in scelerisque. Nullam facilisis nibh a magna aliquet, vitae tempor odio dignissim. Sed non dolor dapibus, vestibulum sem vitae, sollicitudin diam. Nulla elit quam, rhoncus at arcu eget, pretium pulvinar est.

El único problema que tiene es que es compatible con pocos navegadores, pero bueno, así es la vida… supongo:

Can I Use font-smooth? Data on support for the font-smooth feature across the major browsers from caniuse.com.

Tags: