El estilo de texto y fuente en mi sitio web en vivo se ve ligeramente diferente de lo que fue diseñado en los archivos PSD. ¿Cómo puedo asegurarme de que se ve igual que fue diseñado?

Answer 1

Podría haber varios problemas aquí:

1. Está funcionando en la máquina de los desarrolladores, pero no en la tuya.
   Obtenga una captura de pantalla del desarrollador de la página afectada. Tome una captura de pantalla de su navegador viendo la misma página. Comparar.
2. Ha elegido utilizar una fuente web personalizada y el peso de la fuente no es lo suficientemente preciso.
   A veces, font-weight:bold se interpreta en la variante incorrecta de font-weight. Utilice ponderaciones más precisas como font-weight:700 .
   Ver: http://css-tricks.com/watch-your…
3. La fuente se ve diferente en otras plataformas.
   Como ejemplo: Windows no maneja muy bien las fuentes web personalizadas en términos de suavizado. Usa el truco de sombra de texto que Miguel Gaeta sugiere en su respuesta.
4. Podrías estar pensando como un diseñador de impresión.
   La web es una plataforma multifacética para el diseño. Es prácticamente imposible hacer que una página en cada navegador se comporte y se vea de la misma manera que en la impresión: acepte este hecho. Acepte que habrá desviaciones en el diseño de salida y que se deben tomar ciertas decisiones que afectarán el rendimiento, la estética, el costo de desarrollo y el tiempo de desarrollo de una página web.

Answer 2

Sin ver el sitio y el archivo de Photoshop en cuestión, es difícil decirlo con certeza, pero es probable que la diferencia que esté viendo se deba a que la fuente en Photoshop está anti-aliased mientras que la fuente en el navegador web no lo es.

Básicamente, las fuentes en Photoshop son súper suaves, mientras que las renderizadas en el navegador web son más nítidas y irregulares. También agregaría que también puede haber otras diferencias muy sutiles en la forma en que Photoshop representa una fuente en comparación con la forma en que lo hace cualquier navegador web.

No solo eso, la forma en que se muestra una fuente también puede cambiar en los navegadores (IE vs Chrome vs Firefox, por ejemplo). No hay grandes diferencias, pero se nota a veces.

Si necesita una coincidencia de fuente perfecta de píxeles, la biblioteca Cufon javascript es probablemente su mejor opción http://cufon.shoqolate.com/gener … Sin embargo, el inconveniente de Cufon es que pierde algunos detalles como la selección de texto y en realidad solo es adecuado para pequeñas cantidades de texto como encabezados.

En este artículo http://www.renaissance-design.ne … se describe otro enfoque que podría hacer que la fuente se parezca más a su aspecto en Photoshop (la técnica involucrada se describe en la parte inferior e implica agregar un texto muy sutil sombra a la fuente para simular anti-aliasing y producir una fuente de mejor aspecto).

Espero que ayude.