Qué tipo de letra en el 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? Bueno, 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.
¿Qué tamaño de letra es este?
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
En lo que a mí respecta, soy un ávido navegante de páginas web, recopilador 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.
Fontanello
Extensiones como WhatFont (disponible para Chrome, Firefox y Safari) facilitan la detección de las familias de fuentes de cualquier texto en una página web. Basta con instalar la extensión, activarla en un sitio y hacer clic en el elemento que se desea inspeccionar. Los resultados se muestran en un cuadro flotante, siempre en el contexto que elijas.
La mayoría de los navegadores web permiten encontrar fácilmente las fuentes mediante el botón derecho → ‘Inspeccionar’ o ‘Inspeccionar elemento’. También se puede hacer pulsando F12. Esto mostrará una lista de estilos adjuntos al sitio web, que puedes explorar para encontrar las fuentes utilizadas en cualquier elemento HTML.
Usar el inspector no es tan sencillo como usar una extensión, pero tiene varias ventajas. Se requiere un poco de comprensión de CSS, ya que normalmente tendrá que pasar por varios estilos para encontrar el que se está aplicando. Como regla general, los estilos que están tachados se están sobrescribiendo, así que busca siempre los que se están aplicando en último lugar.
Todos los estilos de la página están listados en la pestaña Estilo, pero si en su lugar utilizas la pestaña Calculado, puedes encontrar las propiedades que se están aplicando activamente al elemento que has seleccionado, incluyendo por supuesto el font-family.