Quiero profundizar mis conocimientos en tipografía, más concretamente, tipografía web.
Estoy buscando buena información para este propósito, pero no encuentro nada bueno.
Veo mucha gente hablando mal de algunas tipografías, luego voy a otro sitio y me recomiendan estas mismas tipografías. Parece que la gente habla de las fuentes como una elección personal, y no por razones "técnicas".
Entonces, estoy un poco confundido. La elección de la tipografía me parece muy importante, y no solo en el sentido de ser bonita o no.
¿Alguien por ahí conoce un buen sitio web donde pueda comenzar a estudiar las familias de fuentes que se recomiendan para la web y qué puntos debemos tener en cuenta para elegir una fuente web?
Normalmente elijo mis fuentes web en función de tres cosas: representación, disponibilidad y estética.
Representación
No todas las fuentes se representan de la misma manera. Mientras que algunos se ven muy bien en el escritorio, la web es un reino completamente diferente. Hasta cierto punto, todo se reduce a su audiencia, el sistema operativo y los navegadores que utilizan. Tenemos bastantes preguntas aquí sobre la representación de fuentes, por nombrar algunas:
¿Existe una fuente web que se muestre mejor que otras en los navegadores?
Font-face cargado en Windows se ve muy mal. ¿Qué fuentes estás usando que se renderizan mejor?
Personalmente, me gusta tomar un montón de fuentes que me gustan y probarlas usando diferentes navegadores, máquinas virtuales o servicios en línea. Le doy a cada fuente una puntuación para cada sistema operativo/navegador principal y luego elijo entre las que tienen mejores puntuaciones.
Disponibilidad
Esto no es un gran problema, pero debe preguntarse: ¿Está alojando su propia fuente o está utilizando un servicio en línea como Google Fonts de Font Squirrel ? ¿Estará @font-face disponible para todos (piense en versiones anteriores de IE)? Si no, ¿a qué fuente te inclinarás?
Estética
Por último, pero no menos importante, necesita una fuente que vaya bien con el mensaje/servicio que ofrece. ¿Irás por serif o sans-serif? ¿Qué tamaño? Hay 'teorías' detrás de las opciones de fuentes, pero la mayoría de los diseñadores estarán de acuerdo en que probablemente sea una cuestión de 'gusto'.
Algunas preguntas relacionadas:
Necesita una buena pila de fuentes alternativa, porque no encontrará una solución al 100 % en todos los dispositivos, en todos los navegadores.
Debería envolver sus fuentes en @font-face, con todos los formatos cubiertos, brindándole la máxima cobertura del navegador de la fuente deseada. font squirrel creará la sintaxis @font-face y convertirá sus archivos por usted.
Google Fonts y Typekit son buenos en algunas cosas, pero también generan algunos gastos generales: no tienes el control al 100 %, tienes que realizar solicitudes HTTP adicionales para sus servicios, sus servicios no están optimizados y dependes de a ellos. las soluciones de terceros no son evitables, pero deben evitarse a toda costa; en mi caso, evito por completo las soluciones de fuentes de terceros siguiendo las reglas que expuse anteriormente.
Lo que realmente desea es una fuente de tipo abierto, porque CSS3 permite que el navegador utilice fuentes en su totalidad, lo que básicamente le permite desbloquear características de tipo abierto que no vemos en la web hoy en día, como versalitas, ligaduras, etc. si el la fuente que desea usar no es OTF, aún puede implementarla en los métodos descritos anteriormente sin ningún problema; si es OTF, puede usar CSS3 para implementar realmente la tipografía web.
Hay bibliotecas de JavaScript, además de los servicios de fuentes como las fuentes de Google, que obligan a los navegadores a cumplir; Por lo general, me alejo de ellos, pero ciertamente funcionan. Cufon es el mejor, pero también se basa en flash, por lo que no tiene iOS. También hay lettering.js, fuera de mi cabeza.
En cuanto a la lectura: debe comenzar con lo básico, comprender @font-face y cómo interactúa con los navegadores/agentes de usuario; comprender los formatos de fuente, particularmente .otf y las propiedades CSS3 que desbloquean el poder de OTF. También querrás leer sobre las diferencias entre los navegadores y las características de las fuentes .OTF/CSS3, si planeas luchar en ese campo. El mejor lugar para buscarlos son los sitios de especificaciones de navegador individuales para referenciar lo que cada uno puede/no puede hacer, pero el santo grial es developer.mozilla y webplatform.org para referencias de HTML5/CSS3, así como soluciones funcionales.
Esta lista no es definitiva, sin embargo, lo ayudará a guiarlo en su camino. Tome nota de la publicación @font-face a prueba de balas de Paul Irish; Ha realizado una serie de publicaciones con respecto a obtener la sintaxis de @font-face entre navegadores/plataformas, y es la sintaxis "a prueba de balas @font-face" que la mayoría de los desarrolladores web tienen en sus kits de herramientas. Font Squirrel lo implementa en su totalidad cuando les pides que rueden el kit @font-face por ti.
http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://blog.fontdeck.com/post/15777165734/opentype-1
http://webtypography.net/
http:/ /www.w3.org/wiki/Typography_on_the_Web
http://nicewebtype.com/
http://ffffallback.com/
https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature- configuración
https://developer.mozilla.org/en-US/
https://docs.microsoft.com/en-us/archive/blogs/ie/css-corner-using-the-whole-font
lea este blog, no solo esta publicación -> http://www.broken-links.com/2012/07/10/unlocking-opentype-features-with-css/
impresionante herramienta -> http://clagnut.com/sandbox/css3/
¡El blog de clagnut también es genial! -> http://clagnut.com/
http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
http://opentype.info/blog/2010/08/14/better-web-typography- with-opentype-features/
y lea el blog -> http://opentype.info/blog/
http://elliotjaystocks.com/blog/expert-subsets-for-css-in-123/
nuevamente, gran blog -> http://elliotjaystocks.com/blog/
http://dev.w3.org/csswg/css-fonts/
lista de características de fuente abierta http://www.microsoft.com/typography/otspec/featurelist.htm
usuario de tipo abierto guía (pdf) https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf
Podría enumerar mucho más; si pudieras darme tu opinión aquí, con respecto a qué tan cerca está esto de lo que quieres, o qué tan lejos está, puedo responder con contenido más apropiado. La tipografía en la web está casi lista y es un momento emocionante para desarrollar en la web.
scott