Ver 3+ más
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). El 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í:
Sitios web de tipografía gratis
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 páginas 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 está considerado como 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.
Ejemplos de sitios web de tipografía
¿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.
Fuente sans
En lo que a mí respecta, soy un ávido navegante de páginas web, recolector de conocimientos y buscador de datos. Pero nunca he salido de, por ejemplo, un artículo de la Wikipedia y he pensado “¡Vaya, el texto de esa página era tan legible!” He venido a buscar información, he leído la información y me he ido con la información en la cabeza. Esto significa que, desde el punto de vista de la tipografía, Wikipedia hizo su trabajo perfectamente.
La tipografía desempeña un papel fundamental en cualquier sitio web, ya que garantiza que podamos leer y procesar cómodamente todo su contenido basado en texto. Si la tipografía de un sitio web funciona, no lo notaremos. Si falla, lo más probable es que abandonemos la página.
Todo sitio web tiene texto, y donde hay texto hay una buena o mala tipografía. Así que, como propietario de un sitio web, debe invertir tiempo en la tipografía de su propio sitio. Si se centra en el aspecto y la legibilidad de sus palabras, se asegurará de que sus lectores no se sientan desafiados por su texto. Y para los pocos que sí aprecian una buena tipografía, su atención a los detalles transmitirá profesionalidad, empatía e inteligencia de diseño.
