Tipografías para web

Publicado por & archivado en Diseño Web, Tipografía.

Web fonts

Por Austin512 (trabajo propio) [dominio público], vía Wikimedia Commons

Claro está que la tipografía dice mucho de la imagen de una empresa u organización, y las tipografías se han utilizado como parte de la imagen de las empresas para papel de carta, logotipos, catálogos, dípticos, etc. Es decir, todo tipo de material gráfico. Sin embargo, en el diseño web, las tipografías han sido relegadas a un último plano ya que la tecnología sólo permitía usar las fuentes más básicas, a esas fuentes que formaban parte del sistema operativo de los usuarios (Arial, Verdana, Times New Roman, Serif, Courier…). Ésto ha limitado mucho el diseño web y lo ha empobrecido mucho… hasta ahora, ya que por suerte, en los últimos años han aparecido una serie de recursos que te permiten utilizar un gran abanico de fuentes. ¿Quieres conocerlos?

Google Fonts

Es un repositorio de cientos de fuentes libres y de código abierto optimizadas para web. Para usar una Google Font en tu diseño web lo único que debes hacer es escoger qué fuente quieres utilizar y copiar el código que te dan. Hay tres métodos disponibles: estandard (etiqueta en el html), @import url y JavaScript. Sea cual sea el método que escojas lo único que tienes que hacer es copiarlo y pegarlo.

La gran ventaja de Google Fonts es que es independiente de la plataforma del usuario (sistema operativo y navegador) ya que la fuente siempre se va a buscar a fonts.googleapis.com. La desventaja es que tienes que hacer una consulta a un servidor externo y eso ralentiza el tiempo de carga. Así que es mejor que no utilices muchas Google Fonts y que selecciones aquellas que realmente necesita tu página web.

Fonts Squirrel

Fonts Squirrel es un recurso con una selección de fuentes gratuitas optimizadas para web con licencia para ser usada para fines comerciales. Pero es que además hay un generador de fuentes para web. Ésto es una herramienta que te permite subir fuentes que tengas en tu ordenador (nota: debes tener derechos sobre la tipografía que subas) y estas se optimizarán para web y podrán ser utilizada desde tu CSS (@font-face).

FitText

FitText no es un recurso de fuentes para web, pero es algo realmente interesante y por eso lo he añadido en este artículo. FitText es un plugin jQuery que te permite hacer las tipografías adaptativas (ideales para diseños web responsive).

Espero que todos estos recursos te sean de utilidad si es que no los conocíais todavía, de todos modos hay que tener en cuenta que cuántos más recursos se utilicen (fuentes, jQuery, CSS,…), mayor va a ser el tiempo de carga de la página. Así que antes de hacer un diseño web es mejor pararse a pensar y llegar a un término medio entre el diseño web y el tiempo de carga.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Utilizamos cookies de terceros para recoger información sobre sus visitas y su uso de nuestra web. En caso de continuar navegando por esta web entenderemos que acepta el uso de estos dispositivos. Más información: Política de Cookies .

ACEPTAR
Aviso de cookies
Artimedia