¿Qué tipo de letra utilizo en mi página web?
Elegir la tipografía puede parecer una tarea trivial, pero es una de las decisiones más importantes que debemos tomar a la hora de diseñar un sitio web o una tienda digital. En este artículo queremos ofrecerte algunas pistas sobre el uso de distintas fuentes en Internet, junto a algunos interesantes conceptos como pixelización, antialiasing o hinting. Y, por supuesto, lo más útil: unos recursos en los que encontrarás las tipografías que mejor encajan en tu proyecto web.
Cada familia tipográfica tiene su propia personalidad. Existen fuentes fuertes, sutiles, refinadas, toscas, geométricas, orgánicas… Dependiendo de la tipografía que elijamos expresaremos distintas cosas que ayudarán a definir nuestra línea de comunicación y facilitarán identificar el tipo de sitio web que se está realizando. Por ello, la selección de las tipografías a usar en una composición deberemos hacerla de manera responsable.
Un factor muy importante es escoger fuentes cuyos caracteres sean abiertos y bien proporcionados. Los caracteres con afectaciones estilísticas son menos legibles, sobre todo en pantalla, por lo que son menos recomendables a la hora de utilizarlos en grandes bloques de texto.
Además, hay que recalcar que las familias tipográficas disponibles en cada sistema operativo son diferentes, por lo que tendremos que asegurarnos de que los contenidos textuales tendrán el mayor parecido posible, sea cual sea el sistema operativo / navegador del usuario.
En la elección de nuestra tipografía, conviene que tengamos en cuenta algunos conceptos que explicamos a continuación:
- Pixelización. Las fuentes tipográficas diseñadas para los sistemas de impresión tradicionales suelen visualizarse mal en las pantallas de los ordenadores, ya que no han sido concebidas para ser reproducidas en una pantalla con menor resolución. Por este motivo, ha sido necesario crear fuentes específicas para pantalla, como Verdana, Tahoma (Sans Serif) y Georgia (Serif), que tienden a las líneas verticales u horizontales, lo que hace que se vean nítidas y definidas, suavizando el escalonado de los trazos.
- Antialiasing. La solución al problema del pixelado consiste en aplicar la técnica del antialiasing, un mecanismo muy utilizado en el tratamiento de imágenes de mapas de bits. Consiste en un difuminado de los bordes de los caracteres, creando unos píxeles intermedios entre el color del carácter y el color del fondo. Los sistemas operativos suelen ofrecer opciones de configuración del antialiasing para evitar su escalado en pantalla. El problema es que, como la aplicación de este método de visualización es configurable por el usuario, nunca podremos estar seguros de que ha sido activado, de modo que no sabremos cómo se verán las fuentes en el monitor de cada visitante de nuestra web.Antes, como solución en textos de corta extensión (titulares cortos o encabezamientos) se sugería convertir los textos en imágenes. Así podremos aplicarles el antialiasing y estar seguros de su visualización final. Sin embargo, hoy no se recomienda debido a que los textos de los encabezados suelen tenerse muy en cuenta por buscadores para el posicionamiento de la web. Esto, unido a las técnicas de CSS que nos permiten usar cualquier tipo de fuente, y los mejores motores de renderización, hacen que no necesitemos preocuparnos demasiado de la pixelización.
- Hinting. Otra técnica que podemos utilizar es el hinting, un método matemático que define exactamente los píxeles que se «encenderán» para modificar el contorno y, de este modo, crear el mejor dibujo posible de un carácter de tamaño pequeño a baja resolución.
Algunos recursos para fuentes
Dos de las páginas web más utilizadas para encontrar la mejor tipografía son Google Fonts, donde encontrarás una recopilación de fuentes que puedes descargar de manera gratuita para utilizarlas en cualquier diseño web, y Typekit de Adobe, más enfocado a los profesionales del diseño en general.
También resulta fácil encontrar sitios que recopilan fuentes soy las clasifican en diversos factores: fuentes limpias, fuentes sucias, fuentes decorativas y elaboradas, fuentes escritas a mano, fuentes para viñetas y fuentes de caligrafía. Unos ejemplos de estas útiles páginas serían DaFont, FontShop o Abstract Fonts.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.