Tipografías modernas para páginas web visualmente atractivas

Gracias a la gran oferta de fuentes web, como diseñador web nunca había sido tan fácil encontrar o crear familias tipográficas creativas para una página web. Sin embargo, tener este gran abanico de posibilidades significa que será necesario invertir una mayor cantidad de tiempo hasta encontrar la tipografía adecuada. En el diseño web no se debe subestimar la importancia de la fuente, pues una correcta combinación de familias tipográficas se verá reflejada en el carácter de la web y en una buena primera impresión ante visitantes y clientes potenciales.

Fuentes web: del navegador a las tipografías modernas

El papel de la tipografía online ha cambiado drásticamente en los últimos años, especialmente como consecuencia de las oportunidades ofrecidas por los nuevos avances tecnológicos. En los tiempos del HTML y compañía, las fuentes y estilos no eran definidos por el código de la web, sino de acuerdo a la configuración del navegador web. No fue hasta la aparición de la etiqueta <font>, hoy en día un poco obsoleta, cuando los desarrolladores web tuvieron la oportunidad de integrar fuentes elegidas por ellos y que no vinieran definidas por defecto. Sin embargo, los usuarios solo podían cargar dichas fuentes si estas habían sido previamente instaladas en sus ordenadores. De no ser así, se mostraría automáticamente una “Fallback Font”, por lo general una Browser Standart Font.

Gracias a la separación del contenido (HTML) de herramientas de diseño como las Cascading Style Sheets (CSS) y a la implementación de la opción Font Download en los navegadores web, ahora los diseñadores web pueden utilizar las llamadas “web fonts” para la creación de páginas web. Se trata de familias tipográficas digitalizadas. Así, el navegador del usuario, cuando carga la página, recibe la información sobre el servidor donde se encuentran las fuentes web, las solicita a este servidor y este las carga automáticamente. De esta forma, los visitantes de una página web pueden ver la tipografía seleccionada, incluso si no está instalada en su ordenador. Desde el desarrollo del Web Open Font Format en 2007, las licencias de determinadas fuentes web son vendidas bajo diferentes condiciones por multitud de proveedores. Suele variar el precio y la forma de pago, así como el tipo de alojamiento (en un servidor propio o en el servidor del proveedor). Como consecuencia de la competencia, que se debe principalmente a la creciente importancia de la tipografía para dispositivos móviles, los diseñadores web tienen a su disposición una cantidad casi ilimitada de tipografías modernas y creativas.

Categorías y áreas de aplicación de las fuentes tipográficas

El término fuente hace referencia a una gran cantidad de caracteres creados y diseñados bajo un mismo concepto. Los diferentes tipos de una misma fuente son conocidos como familia tipográfica y reúnen principalmente variedades diferenciadas por la anchura o la separación de las líneas. Así, las fuentes Segoe UI, Segoe Light y Segoe Semibold forman parte de una misma familia tipográfica.

Cada tipo determinado de letra está indicado para un propósito diferente. Al elegir un tipo de letra se debe prestar atención a dos cosas: la legibilidad del texto y su impacto emocional, aunque el medio también juega un aspecto fundamental. Por ejemplo, las fuentes con serifas o trazos de pie están pensadas para facilitar la lectura de textos pequeños en papel, lo que para la lectura en un monitor no suele ser precisamente la mejor opción.

La función y la posición dentro del texto también influyen en la elección de una fuente: mientras que una tipografía llamativa en los títulos sirve para atraer la atención de los lectores, en el cuerpo de texto no resulta cómoda. Por esta razón, los diseñadores web suelen utilizar diferentes variables tipográficas (alfabetos alternativos dentro de una misma familia) en un mismo texto. Sin embargo, no se debe exagerar con las combinaciones, pues una página web puede verse sobrecargada fácilmente.

Las fuentes web también se diferencian dependiendo de sus efectos en los usuarios. La siguiente tabla ofrece una visión general de cómo se pueden implementar y cuál es el impacto que tienen sobre los lectores.

Fuente con serifaFuente sin serifafuente manuscritaFuente caligráfica
CaracterísticasPequeños remates en sus extremosTrazos gruesosToque personalCurvas y formas que dan la impresión de fluír
Ejemplo (tipos de fuente)Times New Roman, Century, PalatinoArial, Verdana, HelveticaBradley Hand ITC, Matura MT Script Capitals, Informal RomanBrush Script MT, Mistral, Kunstler Script
AplicaciónTextos largosTextos cortosTítulos, textos impactantesTítulos, textos impactantes
EfectoFormal, tradicional, intelectualModerna, juvenil, técnicaPersonal, individualCeremonial, lujosa

Estas características son solo un breve resumen de las posibles aplicaciones de algunas fuentes web. En la práctica, utilizar una tipografía personalizada es, a menudo, la mejor estrategia para diferenciarse de la competencia. Así, para encontrar una tipografía moderna y adecuada para tu web, es fundamental:

  • Considerar el tema y el público objetivo: una combinación visualmente atractiva de diferentes tipos de fuente no sirve de nada si estas no son congruentes con el tema de la página web. Lo más recomendable siempre es utilizar fuentes con y sin serifa. Las fuentes manuscritas sorprenden y dan una impresión de movimiento con el que es posible darle un toque personal a la web siempre y cuando se use con moderación. Las fuentes caligráficas suelen reservarse para ocasiones especiales, por ejemplo para las invitaciones de boda o para la celebración de un cumpleaños.
  • Centrarse en la funcionalidad (especialmente para webs con una gran densidad textual): además de la legibilidad, hay que tener en cuenta a aquellos usuarios que accederán a la web desde sus dispositivos móviles y que seguramente necesitarán una fuente que no prolongue innecesariamente los tiempos de carga.
  • Limitar el número de fuentes: se ha comprobado que utilizar dos tipografías diferentes suele ser de gran ayuda para los lectores. Una fuente impactante para los títulos llamará su atención y una más amable en los textos ayudará a que el usuario los lea e interactúe.
  • Buscar fuentes que logren un buen contraste: la interacción entre fuentes con y sin serifa es un buen ejemplo de ello. Sin embargo, recuerda combinarlas de forma armoniosa teniendo en cuenta el espaciado y las similitudes.

¿Cómo encontrar una tipografía adecuada para tu web?

Existen proveedores especializados en comercializar las licencias de tipografías digitales, con las que, por ejemplo, se consigue utilizar una familia tipográfica permanentemente o por un periodo de tiempo determinado. En el primer caso, las fuentes web se alojan en el propio servidor, mientras que en el segundo se recibe, por lo general, un enlace al servidor del proveedor donde están almacenadas las tipografías. Además de las fuentes de pago, también es posible encontrar fuentes de código abierto (altamente utilizadas por diseñadores web).

En caso de que quieras crear u optimizar tu página web con tipografías modernas e inusuales, deberás comparar las ofertas de los diferentes proveedores de fuentes web. A continuación, enumeramos algunos de los servicios más atractivos para los usuarios:

  • Google Fonts: servicio gratuito de tipografías con más de 100 familias tipográficas diferentes y funciones de vista previa.
  • Adobe Edge Webfonts: la colección de Adobe cuenta con más de 500 tipografías modernas para ser usadas libremente.
  • Font Squirrel: este proveedor cuenta con cientos de fuentes para publicidad y páginas web que pueden ser descargadas de forma gratuita. Tiene, además, un generador de fuentes.
  • Linotype: ofreec miles de fuentes para páginas web, escritorio o servidores que pueden ser compradas individualmente o en packs. Incluye una herramienta de vista previa.
  • Misprinted Type: tiene alrededor de 50 tipografías modernas, parcialmente libres, que están disponibles por separado o en packs.
  • MyFonts: ofrece diferentes fuentes web que pueden ser adquiridas, en su mayoría, con un pago único para ser probadas durante 30 días. Si has visto una tipografía y quieres saber cuál es, la función “Whatthefont” permite cargar una imagen e identificar automáticamente qué tipo de fuente es.

Porque la unión hace la fuerza. En IONOS
#estamoscontigo
y por eso que queremos ayudarte a seguir impulsando
tu negocio. Diseña la tienda de tus sueños con:

eCommerce
Gratis durante los primeros 3 meses.