Reglas tipográficas
En el primer artículo del módulo, exploramos las características básicas de CSS disponibles para estilizar las fuentes y el texto. En este artículo iremos más allá, explorando las fuentes web en detalle. Veremos cómo utilizar fuentes personalizadas con tu página web para permitir un estilo de texto más variado y personalizado.
Familias de fuentes recapitulaciónComo vimos en Estilo fundamental de texto y fuentes, las fuentes aplicadas a tu HTML pueden ser controladas usando la propiedad font-family. Ésta toma uno o más nombres de familias de fuentes. Al mostrar una página web, un navegador recorrerá una lista de valores de font-family hasta que encuentre una fuente disponible en el sistema en el que se está ejecutando:
Este sistema funciona bien, pero tradicionalmente las opciones de fuentes de los desarrolladores web eran limitadas. Sólo hay un puñado de fuentes que se puede garantizar que estén disponibles en todos los sistemas comunes: las llamadas fuentes Web-safe. Se puede utilizar la pila de fuentes para especificar las fuentes preferidas, seguidas de las alternativas seguras para la web, seguidas de la fuente del sistema por defecto. Sin embargo, esto aumenta la carga de trabajo debido a las pruebas necesarias para asegurarse de que sus diseños funcionan con cada fuente.Fuentes webPero hay una alternativa que funciona muy bien. (Incluso es compatible con navegadores más antiguos, como la versión 6 de IE). CSS permite especificar archivos de fuentes, disponibles en la web, para que se descarguen junto con el sitio web cuando se acceda a él. Esto significa que cualquier navegador que soporte esta función CSS puede mostrar las fuentes que hayas elegido específicamente. Es increíble. La sintaxis requerida es algo así:
Qué tipo de letra
La tipografía es el arte y la técnica de organizar los tipos de letra. Implica la selección reflexiva y deliberada de los tipos de letra, el tamaño de los puntos, la longitud de las líneas, el interlineado, el interletraje, el color y cualquier otro elemento que pueda afectar al diseño. La legibilidad es la principal preocupación del tipógrafo o diseñador de información. En los sitios web, la coherencia es clave en el uso de la tipografía.
Hemos avanzado mucho desde el inicio de Internet. Durante mucho tiempo la tipografía ha sido ignorada por los diseñadores web, pero ha ganado reconocimiento como parte importante del diseño webLa digitalización abrió la tipografía a las nuevas generaciones de diseñadores. Sólo unas pocas fuentes tipográficas podían utilizarse con seguridad en los sitios web, asegurando que cada espectador las viera como el diseñador pretendía, pero se han desarrollado servicios como @font-face y Typekit para permitir a los diseñadores utilizar una mayor variedad de fuentes en el diseño web.
Tipografía web
Cada tipo de letra tiene un tono único que debe producir un ajuste armonioso entre el flujo verbal y visual de su contenido. Con las primeras versiones de html, los autores de la web no tenían control sobre los tipos de letra (“fuentes” en la terminología de los ordenadores personales). Los tipos de letra los fijaba el navegador, por lo que las páginas se veían con el tipo de letra que el usuario especificaba en las preferencias de su navegador. Las versiones modernas de html y css permiten a los diseñadores especificar el tipo de letra. Esto es útil no sólo por razones estéticas, sino también por las diferentes dimensiones de los tipos de letra. Una maqueta cuidadosamente diseñada con un tipo de letra puede no tener el formato correcto en otro.
A la hora de especificar los tipos de letra, debe elegir uno de los tipos de letra residentes por defecto en la mayoría de los sistemas operativos. Si especifica un tipo de letra que no está en la máquina del usuario, el navegador mostrará sus páginas utilizando el tipo de letra por defecto especificado por el usuario. Tenga en cuenta también que los usuarios pueden configurar las preferencias del navegador para que todas las páginas se muestren con su fuente favorita.
Algunos tipos de letra son más legibles que otros en la pantalla. Un tipo de letra tradicional como la Times Roman se considera uno de los más legibles en papel, pero en la resolución de pantalla su tamaño es demasiado pequeño y sus formas parecen irregulares. La legibilidad en pantalla depende sobre todo de la altura de la “x” minúscula y del tamaño total del tipo de letra.
Tamaño de la fuente del sitio web
¿Así que estás navegando por la web y te encuentras con la mejor combinación de fuentes pero no puedes identificar el tipo de letra? Pues en este vídeo (y en la lista de abajo) te muestro exactamente cómo encontrar esas fuentes…
La extensión para Chrome y Firefox de Fontanello, en mi opinión, es la forma más rápida de averiguar qué tipo de letra utiliza una página web. Simplemente haces clic con el botón derecho del ratón sobre el texto, buscas Fontanello en el menú y ahí está la familia de fuentes y algunos atributos adicionales.
La extensión de WhatFont para Chrome y Safari es mi opción favorita cuando se trata de descubrir fuentes. Para activar la herramienta debes hacer clic en el icono de What Font en el menú del navegador. Ahora puedes seleccionar varias partes del texto permitiendo una mejor visualización del desglose de la fuente frente a Fontanello.
La extensión de Chrome Visual Inspector ofrece un poco más de profundidad que las dos anteriores. Basta con hacer clic en el icono del Inspector Visual en el menú de Chrome para activar la herramienta, y luego dirigirse a la sección de Tipografía en el menú desplegable. Ahora se le presentan las familias de fuentes utilizadas con un desglose adicional de toda la tipografía dentro de la página web.