¿Cómo diseñar un sitio web usando fuentes finas que se vean bien en un navegador web?

Recientemente me encontré con el mismo problema de manera repetitiva: las fuentes en Photoshop no se parecen ni siquiera a las fuentes incrustadas en los sitios web.

Obviamente, se trata principalmente de fuentes externas de terceros, porque para Helvetica, Arial, etc. obtengo resultados bastante buenos. Las más problemáticas son las fuentes delgadas y altas, aunque este problema también ocurre con las fuentes normales si se usan en tamaños inferiores a 16 px (no tengo idea de por qué tan a menudo hay un borde mágico en 16 px desde que las cosas comienzan a verse bien en todas partes).

Aquí tenemos un ejemplo de la fuente SkarpaLT en 14px #000000: a la izquierda puede verla incrustada @font-faceen un sitio web tal como se presenta en Firefox en Windows 7. A la derecha puede ver exactamente la misma fuente exactamente igual color y tamaño tal como aparece en Photoshop utilizando diferentes configuraciones de suavizado:

ejemplo de desglose - Firefox vs Photoshop

Como puede ver, la diferencia es bastante gigantesca. En Firefox:

  • Toda la fuente es mucho más gruesa, parece que en Photoshop es la versión ligera, mientras que en Firefox es normal.
  • El suavizado es muy extraño, en algunas letras (por ejemplo, O) casi no existe, en otras está bien
  • La A es extrañamente corta en comparación con las otras letras.
  • O no es redondo

Como puede ver, intenté jugar con la configuración de Photoshop, pero hasta ahora nunca logré obtener los resultados que están cerca de Firefox. También hice algunos intentos de cambiar el texto en Firefox para que se pareciera más a lo que representa Photoshop, pero no llegué a ninguna parte.

Por lo tanto, pregunta de dos partes:

  • ¿Hay alguna forma en que el diseñador pueda predecir cuándo la fuente no se comportará bien en el navegador web, incluso si se ve bien en FireFox?
  • ¿Cómo renderizar fuentes en Photoshop de una manera más cercana a un navegador web, o forzar al navegador web a renderizar fuentes de una manera más cercana a Photoshop?

O una larga historia corta: ¿Cómo diseñar un sitio web usando fuentes delgadas no convencionales que se vean bien en un navegador web?

[editar:] Solución destacada: parece que la única buena solución es font dragr , que permite probar las fuentes en un navegador web para ver si no producen ningún artefacto extraño. No se puede hacer mucho más que eso.

En un lado de los diseños, esta acción se puede usar para crear suavizado de subpíxeles en Photoshop. Hará que las fuentes sean más nítidas y similares a las que obtienes en un navegador. El único problema es que crea 3 capas de texto, por lo que debe aplicarse después de que se haya realizado toda la edición del texto.

Fog Creek Software escribió una buena publicación sobre los íconos basados ​​en fuentes que usan. Cubre las pantallas @font-face y font. Podría resultarle útil leer blog.fogcreek.com/trello-uses-an-icon-font-and-so-can-you
y... ¿cómo ayuda exactamente una información sobre la incrustación de fuentes? ... Sin ofender, pero sé cómo incrustar fuentes en un sitio web. También soy muy consciente de que puede diseñar fuentes con píxeles perfectos, aunque obviamente este no es un caso: intente usarlo en el tamaño 14. Se rompe. En todas partes. Al igual que mi ejemplo.
Marcin - ninguno tomado. Ciertamente no estaba asumiendo que no sabías nada sobre incrustar fuentes. Pensé que parte de la publicación que cubría los formatos de fuente y los métodos de Fog Creek para corregir las inconsistencias de visualización en los sistemas operativos y navegadores podría ser útil.

Respuestas (3)

Esto se conecta con mi pregunta de hace unas semanas . Siento que todavía no hay una gran respuesta para "¿Cómo determino cuándo una fuente web puede cortarla y cuándo usar el tipo gráfico?" Describí cómo tomo esa determinación, aunque todavía es confuso.

La conclusión es que debe probar las fuentes web en varios navegadores en varios sistemas lo antes posible en el proceso de diseño. Esto lo ayudará a determinar no solo qué pesos funcionarán, sino también aspectos fundamentales como el tamaño de fuente base (y el interlineado). Photoshop nunca le dará una indicación útil de cómo se representarán las fuentes en el navegador en cualquier tamaño, especialmente los tamaños de texto.

Para tipos de letra delgados, debe considerar la dimensión real en píxeles de los trazos más delgados de la fuente en un tamaño determinado. También debe considerar cómo se construyó esa fuente. Si no se incluyen sugerencias decentes por debajo de cierto tamaño, los píxeles que caen en el contorno serán impredecibles. Incluso puede haber una gran variación entre dos tamaños muy cercanos. Photoshop hará un excelente trabajo con las conjeturas en todos los ámbitos; Internet Explorer no lo hará.

" La conclusión es que debe probar las fuentes web en varios navegadores en varios sistemas lo antes posible en el proceso de diseño ": ¿alguna idea de cómo podría hacerlo un diseñador sin conocimientos de HTML o CSS? Porque de ahí saco los diseños >_>
El diseñador debe coordinarse con el equipo de desarrollo de la interfaz de usuario en las primeras etapas. Los requisitos/limitaciones de desarrollo no deberían poner un techo a los conceptos, pero son críticos para trabajar en los detalles.
Sí, soy muy consciente de eso, y esa es la forma en que prefiero trabajar, pero todo el problema surgió del hecho de que los diseñadores están a unos cientos de millas de distancia y casi no hay forma de que puedan coordinar el desarrollo todo el tiempo junto con equipo de desarrollo Especialmente cuando el equipo de desarrollo obtuvo sus propias tareas. Sé que es factible crear una herramienta que permita simular el comportamiento de las fuentes en el navegador web, para predecir si la fuente se comporta bien o no, pero me pregunto si alguien no ha hecho algo así.
@MarcinWolny Eso suena como una pregunta separada que vale la pena hacer. Una sugerencia rápida de la que he oído hablar pero que no he probado: fontdragr.com podría funcionar ya que el diseñador debe tener los archivos para cualquier fuente que sea para hacer el knockup.
@ user568458 - ¡Se ve genial! Eso es perfecto. Debería ser más que bueno y lo suficientemente fácil para que el diseñador pruebe las fuentes. ¡Salud!
Muy buena idea. Sin embargo, no estoy seguro de cómo esto resolvería la cuestión de las fuentes alojadas. Esa es la mayoría de las fuentes web en uso hoy en día. No querrá probar una fuente de escritorio donde se usará una fuente web alojada, ya que las sugerencias serían diferentes.
@plainclothes por lo general, las fuentes web ya están optimizadas para los navegadores (de ahí el nombre: WEBfonts), por lo que muy rara vez se encuentra con algún problema con ellas. Especialmente si usa algún proveedor serio para ellos, no solo cosas aleatorias encontradas en un sitio web aleatorio;). Donde ocurren problemas son las fuentes de escritorio, ya que son la mayoría de las fuentes realmente buenas que se usan actualmente.
@MarcinWolny Te concedo que estos problemas son cada vez menos. Desafortunadamente, todavía hay fuentes web de firmas profesionales que no están bien optimizadas para su uso en Windows/IE. Recientemente he sido testigo de fuentes (¡con licencia por miles de dólares!) que se reproducen terriblemente en no menos de la mitad de los tamaños más comunes. Tomó una gran cantidad de trabajo con la fundición para remediar el problema.

Hay varios problemas aquí.

  1. SkarpaLT parece estar diseñado como una pantalla. La mayoría de las formas de letras delgadas están diseñadas para eso... carteles, titulares, etc., básicamente donde las usaría grandes. No están diseñados para usarse como caras de texto pequeñas.

  2. La mayoría de las pantallas siguen siendo de baja resolución. Cuanto más pequeño sea el tipo, más difícil será representarlo limpiamente en una pantalla basada en píxeles.

  3. La incrustación de fuentes web funciona, pero aún está a merced del navegador y el sistema operativo para representarlo. En muchas situaciones, es posible que no haya suavizado o que no haya métricas de espaciado. Ambos contribuyen a la tipografía fea en tamaños pequeños.

Entonces, para responder a su pregunta sobre 'cómo': no ​​lo haga. No incruste tipos de letra delgados en páginas web y utilícelos como caras de texto. Simplemente no va a funcionar muy bien.

Para sus preguntas específicas:

¿Hay alguna forma en que el diseñador pueda predecir cuándo la fuente no se comportará bien en el navegador web, incluso si se ve bien en FireFox?

No. Está a merced de la configuración y el software fuera de su control (está bajo el control del usuario final).

¿Cómo renderizar fuentes en Photoshop de una manera más cercana a un navegador web, o forzar al navegador web a renderizar fuentes de una manera más cercana a Photoshop?

no puedes Usan métodos completamente diferentes para rasterizar el tipo.

1. No trato de usarlo para texto sin formato, sino como encabezados / elementos de menú. Y estos no siempre tienen un tamaño de 24+ # 2. Sí, pero no se trata tanto de representar una fuente bellamente, sino de representarla de una manera similar para ambas herramientas. O la predicción de artefactos. # 3. Sí, lo sé, por ejemplo. Win 98 o MacO usan diferentes mecanismos de suavizado (o no usan ninguno), pero estoy apuntando a la plataforma más común aquí: Win7 + FF.
@MarcinWolny en su pregunta, muestra un tipo de 14px. Eso es demasiado pequeño para una pantalla, especialmente en la pantalla.
wops, lo siento, vea el comentario editado (haga clic en [ingresar] por accidente)
@MarcinWolny También agregué un poco más a mi respuesta. La conclusión es que simplemente no hay solución para esto en este momento. Al usar fuentes web, debe aceptar una cierta cantidad de variabilidad. Incluso si se dirige a una plataforma muy específica (Win7 + FF), todavía está a merced de la configuración y las preferencias del usuario final.
Delgado es eso: apuntar a una plataforma específica básicamente reduce la variedad al mínimo. El 99 % de las personas que usan FF con Win7 obtendrán el mismo aspecto que yo. Simplemente porque muy pocas personas tocan alguna configuración de usuario relacionada con la representación de fuentes en un navegador. Así que supongo que lo que busco es lo que tengo en mi PC (lo cual es bastante preciso, ya que también se adapta perfectamente a mi computadora portátil, y generalmente le muestro un sitio web al cliente durante las reuniones, así que suena como un plan perfecto).
Además, no vayamos demasiado lejos con estas diferencias. Las únicas diferencias reales que realmente importan son las fuentes sin alias y la representación similar a Safari junto a esta de Firefox. IE obtuvo un AA ligeramente mejor, pero aún dentro del margen de error visual, por lo que no importa, Chrome generalmente usa una representación similar a Safari, y bueno, los usuarios de Chrome están más acostumbrados a ver fuentes extrañamente feas que otros;) así que también lo omito . Por lo tanto, la plataforma de cliente más común en FF con la configuración predeterminada de Win. +ligero margen de error, pero es más como el que hay entre una representación nítida y fuerte en PS.
solo tenga cuidado de hacer demasiadas suposiciones al apuntar a una plataforma. La web tiene mucho que ver con la variabilidad.
Sí, lo es, pero apuntar a un objetivo hace que sea más fácil lograrlo, por lo que más adelante podría considerar cubrir objetivos adicionales. Es por eso que creo sitios web en 1 navegador y 1 sistema operativo más tarde, lo verifico y lo arreglo en otros sistemas operativos y otros navegadores. Cubrir todas las bases hasta el final no es más que una pérdida de tiempo.

Si es flexible a la hora de elegir la fuente, puede probar Google Web Fonts; Los usé en algunos sitios web sin ningún problema. Algunas fuentes se ofrecen en diferentes grosores, puede ajustarlas fácilmente con una palabra adicional en el código.

¿Cómo diseñar un sitio web usando fuentes finas que se vean bien en un navegador web?
RespuestasAquíPolítica de privacidad1y, 0v