Este artículo presenta un conjunto extremadamente útil de consejos y mejores prácticas para aquellos que todavía son bastante nuevos para trabajar con tipografía en la web.
Repasaremos los métodos más populares para incrustar fuentes web, dimensionar fuentes y establecer una altura de línea sólida.
Tipografía Web: Los Fundamentos
Comencé mi carrera de diseño en la impresión por lo que una de las transiciones más discordantes para la mentalidad basada en la web para mí fue en el área de la tipografía. Para el diseño de impresión, puedo usar cualquier fuente que quiera en cualquier pieza siempre que la posea y viva en mi máquina. Además, a nadie le importa cómo dimensiono mis fuentes, ¡siempre que se imprima lo suficientemente grande!
Este artículo contiene algunas técnicas que desearía haber sabido desde el principio y haber tenido que aprender de la manera más difícil a través de errores atroces y otros sobre los que acabo de enterarme.
Cada una de estas tres técnicas puede parecer bastante básica para un profesional, e incluso es probable que sea debatida por algunos, pero definitivamente recomiendo que cualquier persona nueva en el diseño web intente comprender todos estos conceptos para que pueda elegir un defensor. Posición de cómo configurar su tipo en línea.
Incrustar fuentes web: usar @ font-face
Hace un año o dos el juego de fuentes web era bastante incierto. Todos sabían que se avecinaba una revolución, pero se estaban aplicando varias técnicas y pocas estaban seguras de dónde terminaríamos.
Avanzado hasta ahora, una única solución ha sido ampliamente aceptada para ser la mejor para muchas o incluso la mayoría de las circunstancias. Si vas a incrustar fuentes personalizadas en un sitio web, @ font-face es el camino a seguir. Es una solución CSS pura con soporte de navegador impresionante y, a diferencia de Cufon y sus primos, da como resultado un texto perfectamente seleccionable que funciona y se siente como una fuente nativa.
Sintaxis a prueba de balas @ font-face de Fontspring
Este es un ejemplo perfecto de cómo las mejores prácticas en diseño web están cambiando constantemente. La última vez que lo comprobé, la sintaxis a prueba de balas @ font-face de Paul Irish fue la mejor manera de hacerlo. Sin embargo, al investigar este artículo, descubrí que ha aparecido un nuevo método que el propio Paul Irish llama "la mejor solución".
El nuevo método es la sintaxis Bulletproof @ Font-Face de Fontspring, que aborda la preocupación por la falta de soporte para Android en la técnica original de Irish.
Si se está preguntando sobre el signo de interrogación, es un truco inteligente para engañar a IE9 y enviarlo con la carga de las fuentes adecuadas y evitar un error 404. Para más información sobre cómo funciona esto, echa un vistazo a esta publicación.
Dos servicios gratuitos de @ font-face
Si está buscando incrustar fuentes personalizadas gratuitas en su página web, la forma más sencilla que he encontrado es usar Google Web Fonts. Este increíble servicio contiene más de 180 familias de fuentes y requiere cero descargas de archivos de su parte. Simplemente navegue por la biblioteca, elija las fuentes que desea, luego copie y pegue los fragmentos de código que le dieron. ¡No podría ser más fácil!
Como alternativa, siempre recomiendo FontSquirrel. Aquí tiene que descargar los kits de @ font-face, que es un poco más de trabajo, pero la recompensa es una colección inigualable de bellas fuentes gratuitas y la capacidad de cargar un archivo de fuente único que se convertirá automáticamente en varios formatos convertido en un kit utilizable de @ font-face.
El dilema del tamaño de fuente
Mientras estamos en el tema de las fuentes, analicemos brevemente el tamaño de la fuente. Este es en realidad un tema mucho más debatido que el anterior. La verdad es que, independientemente del método que elija, hay muchos desarrolladores web que insistirán en que lo está haciendo mal.
En su mayor parte,? Em? Parece ser la opción popular. La conclusión es que usando? Px? da como resultado fuentes que no se escalan bien en ciertos navegadores. Kyle Schaeffer tiene un artículo interesante sobre por qué usar porcentajes puede ser una mejor opción, pero por lo que puedo decir, la mayoría de la gente todavía está a favor de ellos. (o al menos un em% híbrido).
Ahora, ¿desde? Em? puede ser un poco incómodo trabajar con él, una práctica común es establecer el tamaño de fuente del cuerpo en 62.5% y luego usar? em? para todo lo demás. La razón de esto es que los resultados son fáciles de traducir: 1.2em = 12px, 1.4em = 14px, 2.4em = 24px, etc.
Desafortunadamente, este método causa un extraño problema de composición cuando se trabaja con múltiples niveles de relaciones padre / hijo. Una vez que consigas un par de niveles, ¿dimensionar con? Em? se vuelve dificil La solución suele ser declarar elementos secundarios en "1em", pero Jonathan Snook podría tener una solución aún mejor.
Tamaño de fuente con REM
El? Rem? la unidad es de la bolsa CSS3 de fuentes de objetos y tamaños en relación con la raíz (html) en lugar de la principal, lo que evita el problema de la composición. Aquí está la sintaxis de Snook de su artículo Tamaño de fuente con REM:
La desventaja aquí es que tienes que declarar copias de seguridad en? Px? Para, lo has adivinado, varias versiones de Internet Explorer. Sin embargo, según Snook, el resultado es un tamaño consistente y predecible en todos los navegadores y un texto redimensionable en las versiones actuales de todos los navegadores principales.
Problemas en el paraiso
Como mencioné anteriormente, siempre hay alguien alrededor para decir "¡¿eso no es correcto ?! El desarrollador Harry Roberts publicó recientemente un artículo en CSS Wizardry, en el que describe por qué dimensionar con? Rem? se puede evitar.Su argumento es que el truco del 62.5% surge de la pereza por parte del desarrollador (algo bueno de acuerdo con Roberts), pero finalmente resulta en: Más trabajo (una mala cosa).
Roberts continúa argumentando en contra de establecer tamaños de fuente de base arbitrarios que no necesita o incluso no utiliza realmente, y en lugar de eso, recomienda establecer su base donde lo desee y diseñar solo las excepciones.
Ambos desarrolladores tienen puntos perfectamente válidos. El método de Snook es ciertamente más fácil de descifrar, pero Roberts presenta un argumento bastante convincente para evitar el truco del 62.5%. ¡Definitivamente deberías echar un vistazo de cerca a ambos y decidir en cuál de ellos puedes envolver tu mente!
Altura de línea sin unidades y grillas tipográficas
Lo último que me gustaría repasar es algo que ni siquiera sabía que existía hasta hace poco: la altura de la línea sin unidades. Eric Meyer explica esta idea en detalle aquí, pero le daré una descripción general rápida.
El concepto aquí es un poco difícil de entender pero ten paciencia conmigo. Básicamente, si declara la altura de la línea con un valor unido como "1em", ese valor calculado se pasará automáticamente a sus descendientes. Aquí está el ejemplo que Eric Meyer cocinó:
Esto parece lo suficientemente correcto al principio, pero el resultado es en realidad agarrar la altura de línea de los elementos secundarios de ese valor primario calculado. Por lo tanto, el código anterior es exactamente el mismo que si hubiera escrito esto:
Observe cómo la altura de la línea se mantiene en 15px para todos los elementos. Para evitar esto, Meyer sugiere usar alturas de línea sin unidades, que se usan como un multiplicador para la altura de línea de los elementos secundarios. Aquí está el ejemplo anterior reescrito para utilizar esta técnica:
El resultado del código anterior es exactamente el mismo que el del código siguiente. De esto podemos ver que nuestra línea de altura de? 1? se está multiplicando por el tamaño de fuente de la li y pequeña Los elementos y los resultados son mucho más predecibles.
Observe aquí que la altura de la línea se mantiene igual al tamaño de fuente de cada elemento. Es importante entender que esto no es un argumento para establecer su altura de línea para exactamente su tamaño de fuente, esto se hizo solo para el ejemplo. Se puede usar cualquier número para la altura de la línea y debe experimentar para encontrar qué funciona mejor (el siguiente ejemplo usa 1.231).
HTML5 Boilerplate aprobado!
Para ver si esto es una práctica común, descargué una copia de HTML5 Boilerplate y hurgué en el CSS. Efectivamente, enseguida encontré una altura de línea sin unidad en la práctica, aunque en una versión abreviada más concisa.
Creando una cuadrícula tipográfica
Si realmente desea sumergirse en la creación de una bonita tipografía web, consulte el artículo de Richard Rutter, "¿Componer a un ritmo vertical?", Que describe algunas técnicas útiles para hacer malabares con el tamaño de la fuente, la altura de la línea y el margen o el relleno para crear un ritmo perfecto para su página. .
Chris Coyier en CSS-Tricks toma esta técnica y la lleva más lejos combinándola con, espérala, ¡línea de altura sin unidades! Echa un vistazo a esta página donde puedes ver y descargar la cuadrícula tipográfica prefabricada de Chris utilizando estos métodos.
Conclusión
Estas tres lecciones se pueden resumir muy bien. Primero, cuando esté incrustando fuentes en la web, use @ font-face para una solución de navegador cruzado altamente funcional. Por ahora, la sintaxis de Fontspring parece ser la mejor solución para formatear sus declaraciones @ font-face. Google Web Fonts y Fontsquirrel son los lugares a los que debe ir si desea obtener fuentes web gratuitas que se puedan insertar fácilmente en cualquier página.
A continuación, ¿desde? Px? ¿Puede y tiene problemas para cambiar el tamaño en varios navegadores, usando? em? o? rem? para el tamaño de la fuente es probablemente la mejor manera de ir. ¿Utilizando? Rem? permite un uso fácil del truco del 62.5% sin problemas de composición, pero hay un argumento decente en contra de abandonar esta técnica, establecer un tamaño de fuente base intencional y hacer los cálculos manualmente para cualquier excepción, como encabezados.
Finalmente, cuando se trabaja con altura de línea, es una buena idea configurar un ritmo vertical o una cuadrícula tipográfica completa. Un método importante a tener en cuenta es el uso de alturas de línea sin unidad para simplificar la herencia.
Estas son las mejores prácticas actuales en la medida en que las veo. Siéntase libre de dejar una feroz refutación en los comentarios de cualquiera y todas estas técnicas. Me encanta profundizar y aprender sobre estas cosas y si tienes métodos alternativos, ¡quiero verlos!