fuentes personalizadas para la web

Usando tipografías para la web

Las tipografías hablan de ti y de tu personalidad, ya que solo con su forma pueden decirle a tu lector si eres moderno, sofisticado, arriesgado, fuerte; o si por el contrario eres anticuado, pasado de moda o quizás una combinación entre antiguo con moderno.

 

Lo cierto de todo esto es que uno entra a una página web buscando información (tal cual lo estás haciendo ahora) y el contenido debe ser legible y comunicar de forma clara un mensaje.

 

[wp_ad_camp_1] 

 

Los aburridos comienzos de las tipografías para la web

Quizás muchos recordemos lo limitada que era la web en materia de tipografías. Solo podíamos usar una fuente si esta estaba instalada en el computador y por si fuera poco, para maximizar la compatibilidad, se usaban estilos generales como Sans-serif.

 

Además, si queríamos dar estilos con CSS, las opciones eran pocas, pues solo se podía controlar el tamaño, el estilo, el color, el peso y la familia tipográfica.

 

La revolución del @font-face

Finalmente cuando se agregó soporte universal para insertar tipografías no estándar, la web dió un giro de 180 grados al permitir a los diseñadores comunicar los mensajes de una forma más atractiva e impactante. Se puede decir que ahora una gran cantidad de sitios logran personalizarse gracias al uso de fuentes web.

 

Elige con cuidado

Al tener tantas opciones para escoger debemos tener cuidado al usar una fuente en nuestro sitio. Estos consejos pueden ser utilidad:

  • Cuida la legibilidad: para textos largos usa una fuente que sea legible, es decir, que no canse a tu lector.
  • Diferenciar entre títulos y textos largos: haz que se note la diferencia entre leer un título y un texto largo, ya que muchas veces los usuarios buscan a través de los títulos para cerciorarse si realmente la información que leen es de su interés.
  • Usa un tamaño grande para la letra: de nuevo hablamos de la legibilidad, debemos ser generosos con el tamaño y hacer pruebas de lectura con diferentes personas que no conozcan el proyecto o no estén relacionados con el entorno digital, ya que estos usuarios nos dirán con sinceridad si el contenido es cómodo para leer.
  • Usa un buen interlineado: no queremos que nuestros textos se vean pegados por eso hay que asegurarse de que hay un buen espaciado vertical, esto lo puedes acomodar con la etiqueta CSS line-height.

 

¿Cómo usar @font-face?

Existen varias maneras de insertar tipografías en la web. Por ejemplo puedes insertarlas directamente en tu servidor convirtiéndola a diferentes formatos o cargándolas desde servicios como Google Fonts (Gratuito) o Typekit (que tiene opciones gratuitas y pagadas).

 

Para cargarlas directo en tu servidor te recomiendo visitar Font Squirrel, una web en donde encontrarás muchas tipografías libres para uso comercial; algunas ya vienen convertidas y otras tienes que convertirlas con el generador de fuentes que creará un archivo ZIP con las fuentes en cuatro formatos diferentes para compatibilidad para navegadores: EOT, SVG, TTF y Woff. También está incluido un archivo CSS con las reglas necesarias para declarar las fuentes y usarlas en tu web.

 

Tipografías CSS

 

Solo con poner la ruta con el parámetro URL, las fuentes quedarán cargadas listas para usar con tu font-family personalizado.

 

Por otra parte, usar Google Fonts es aún más sencillo. Lo único que debes hacer es elegir la fuente que quieres usar y presionar “Quick Use” como se muestra en la siguiente imagen:

 

Google fonts quick use

 

Luego selecciona los estilos que quieres agregar (esto depende de cada tipografía): bold, normal, medium, extra-bold, etc., pero procura no elegir demasiados por que esto puede afectar los tiempos de carga de tu página. Lo recomendable es tener un máximo de tres estilos.

 

[wp_ad_camp_1]

 

Cuando hayas elegido los estilos, mas abajo encontrarás las opciones para insertar la tipografía en tu web. Google nos ofrece tres alternativas: standard (con etiqueta <link>), @import (para poner directo en el CSS) y Javascript.

 

Una vez puesto el código del paso anterior, ya podrás insertar el font-family en cualquier parte de tu CSS y tendrás la tipografía cargada, por ejemplo: font-family: ‘Roboto’, sans-serif;

 

Espero que este pequeño tutorial te haya sido útil para implementar tipografías en la web, si tienes dudas no te olvides de comentar.


Califica este artículo
1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (2 votos, promedio: 5,00 de 5)
Cargando…


Comenta

comentarios