Si una fuente aparece nítida en Illustrator o InDesign, ¿por qué aparece borrosa en un sitio web?

Hay muchas cosas en juego aquí.

En Illustrator (o Photoshop o cualquier otro programa de edición de gráficos) cuando trabaja con fuentes, su fuente es una ilustración vectorial que puede escalar hacia arriba o hacia abajo y volverá a rasterizar a la resolución máxima que su pantalla puede ver. Photoshop es diferente porque cuando haces un zoom superior al 100% estás viendo cómo se ve la imagen según la resolución de píxeles del documento. Illustrator e InDesign mantendrán las fuentes nítidas.

Cuando guarda la exportación de Illustrator a JPG, o PNG para rasterizar permanentemente esa fuente dentro de esa imagen. Y solo se verá bien en el sitio web si se muestra con el mismo tamaño de píxel que se exportó. Si lo escala hacia arriba o hacia abajo, sufrirá porque la pantalla de gráficos intentará interpolarlo como una imagen.

Entonces, si su fuente se ve bien en Illustrator, después de exportarla a PNG o JPG, abra el archivo en Photoshop y mírelo allí al 100%. Debería verse bien, pero si no lo hace, eso significa que algunas configuraciones deben ajustarse durante la exportación. Sin embargo, si se ve igual de bien en Photoshop, pero borroso en su sitio web, entonces algo está sucediendo allí. (En realidad, Photoshop es mejor para crear imágenes usando fuentes, ya que tiene diferentes algoritmos para suavizar sus fuentes. Esto es realmente útil cuando se usan tamaños de fuente pequeños porque las diferentes fuentes se verán más o menos en diferentes tamaños dependiendo de la configuración que use. Puede experimenta hasta que encuentres el que más te guste).

Si está utilizando algo como WordPress para administrar el contenido de su sitio web, su imagen debería verse igual de bien cuando la inserte en su administrador de contenido de fondo. Pero si lo coloca y luego decide escalarlo, comenzará a volverse borroso. Pero si se ve bien y presiona “vista previa” para mirar la página y se ve raro allí, entonces algo extraño está sucediendo con el tema que está utilizando o el navegador que está utilizando. Debería intentar abrir la página en varios navegadores de todos modos solo para asegurarse de que todo se vea bien en cada uno de ellos. Principalmente uso Chrome, pero cuando administro un sitio web lo miro en Firefox, Safari e Internet Explorer solo para asegurarme de que funciona correctamente. A veces se ve bien en tres pero no tan bueno en un cuarto. Eso es realmente frustrante.

Si está diseñando para la web, debería intentar utilizar fuentes que estén activas de todos modos. Simplemente no puede controlar si su página se escalará cuando se cargue. Debido a que las personas pueden verlo en cualquier cosa, desde una pequeña pantalla de teléfono inteligente hasta un gran monitor 4K, realmente desea que sus fuentes sean tan nítidas como los píxeles en la pantalla, y la única forma de asegurarse de eso es usar fuentes web estándar que todos tienen en su computadora, o usar fuentes web a través de un servicio como TypeKit o Cloud Typography.

La razón se debe a un error que ha sido parte del motor de representación de Illustrator. Cada vez que “Guardar para Web”, la configuración de suavizado que elija no se captura en la ilustración guardada, por lo que tiene el texto no tan nítido en la imagen que guarda.

De hecho, puede llamar o no llamar a la función anterior un error. Esto es lo que debe hacer: al guardar la imagen para la web, en “tamaño de imagen”, deberá elegir “tipo optimizado” en el menú. Esto debería ayudar ahora a que el texto representado en la ilustración sea más nítido en la página web. Si esto todavía no funciona, entonces probablemente deba llevar esto a Photoshop, recrear lo que sea necesario y luego guardarlo para la web. Espero que esto ayude. Aclamaciones.

La razón más probable para esto es que la imagen utilizada en el sitio web es de baja resolución y de baja calidad. Supongamos que si tiene una pantalla de 600px de ancho y está mostrando una imagen de 400px de ancho que se ha ampliado a 600px, definitivamente aparecerá borrosa y no será nítida y nítida como en Illustrator o InDesign.
La forma más fácil de superar esto es usar una imagen de alta resolución y alta calidad y luego usar HTML / CSS para cambiar su tamaño según el tamaño de la pantalla. Otra forma es usar imágenes de diferentes tamaños, y luego usar HTML para usarlas de acuerdo con el tamaño de la pantalla.

Hola señor,

Mantener el tamaño de fuente en números pares no los convierte en números impares como

22px 24px,

no a 23px 25px o 23.5 o 22.5

Según mi experiencia de repisa.

Puedes leer nuestros blogs en este sitio web