Tu guía completa de tipografía HTML (o fuentes web)


Una de las cosas más importantes para una marca y el diseño de tu sitio web, puede que sean solo las fuentes. Un tipo de letra cuidadosamente elegido puede transmitir personalidad, hacer que las líneas de texto largos sean más legibles y ayuda a solidificar su marca en la mente de las personas.

No debes descargar cualquier fuente y usarla en tu sitio web. Hay algunas cosas que deberías de tener en cuenta primero.

¿Dónde puedes encontrar fuentes web, qué fuentes son compatibles con HTML y cuáles son «seguras para la Web» y se pueden utilizar en cualquier sitio web? Los exploraremos todos en este artículo.

Fuentes HTML: ¿Qué son las fuentes web?

Las fuentes tipográficas tienen una larga historia, pero las fuentes, tal como las conocemos hoy en día se generalizaron con el auge de los ordenadores e Internet. Las fuentes digitales necesitaban un tratamiento especial para renderizarse en pantallas. Y cuando entraron en juego diferentes tamaños de pantalla y dispositivos, las cosas solo se complicaron más.

Algunas tipografías están destinadas principalmente para impresión y diseño gráfico. Suelen ser grandes e inadecuados para sitios web, pero son perfectos para crear gráficos. También hay fuentes «seguras para la Web» que se encuentran en la mayoría de los ordenadores.

Pero para el diseño web, lo que necesitas buscar son fuentes web, tipos de letra especialmente diseñados para renderizarse perfectamente en la web y en una variedad de dispositivos. También puedes utilizar fuentes web en correos electrónicos u otros servicios online.

Hay algunas cosas que hacen que las tipo web sean distintas de las fuentes de escritorio estándar. Están diseñados para ser legibles en distintas pantallas y diferentes tamaños. Se pueden diseñar con CSS (como aplicar negrita o cursiva, colores y otros atributos) y ofrecen soporte para otras condiciones como la reproducción de derecha a izquierda.

Si bien las fuentes web no vienen instaladas en tus dispositivos ni en los de tus visitantes, existen formas especiales de mostrarlas para que cualquier persona que visite tu web pueda verlas.

Puedes descargar estas fuentes y cargarlas en tu servidor, o utilizar un servicio de alojamiento de fuentes web especial que las incrusta en su sitio sin necesidad de descargarlas.

¿Qué fuentes puedes usar en HTML?

Básicamente, puedes utilizar cualquier fuente descargable en tu sitio. Todo lo que necesitas hacer es cargarla y configurarla correctamente, y debería aparecer.

Pero aunque técnicamente puedes usar cualquier fuente en tu web, no siempre es la mejor idea. Algunas fuentes están tan estilizadas o diseñadas para tamaños de texto tan grandes que no se mostrarán correctamente en su web.

También hay problemas de licencia de los que preocuparse al usar fuentes de escritorio en su sitio (o al usar fuentes web para el diseño de impresión). Usar una fuente en un medio diferente al que la compró puede causarle problemas. Asegúrese de leer detenidamente la licencia de su fuente antes de comprarla.

También puede buscar ciertos hosts que le permitan usar una simple llamada en el HTML para mostrar tus fuentes en tu propio sitio web a través de planes gratuitos o pagos, siempre que la fuente que use esté cargada correctamente y tenga el tipo de archivo correcto:

  • TTF
  • OTF
  • WOFF/WOFF2
  • SVG
  • EOT

Estos tipos de archivos podrás usarlos en todo tu sitio y diseñarlos con HTML y CSS. También hay fuentes seguras para la web que suelen funcionar universalmente en todos los navegadores y programas.

¿Qué son las fuentes web seguras?

Un problema con la mayoría de las fuentes web es que no hay garantía de que se muestren correctamente en tu sitio web. A diferencia del diseño gráfico, donde puede crear una imagen en un programa e imprimirla para su distribución, un navegador debe representar fuentes web cada vez que alguien abre la página. Si tus fuentes no se cargan, podría terminar con un sitio web en blanco o roto.

Por esa razón, algunos propietarios de sitios web eligen confiar solo en fuentes seguras para la web. Estas vienen preinstalados en la mayoría de los sistemas, por lo que se garantiza que se mostrarán correctamente en todos los dispositivos, excepto en los más desconocidos. También tienden a cargarse mucho más rápido que las fuentes web, que pueden tardar en aparecer.

Si lo único que le preocupa es maximizar el rendimiento y asegurarse de que su sitio muestre las fuentes correctamente, entonces las fuentes seguras para la web es lo que estás buscando. A continuación, se muestra una lista de fuentes seguras para la web que generalmente se pueden usar.

  • Arial
  • Brush Script MT
  • Comic Sans
  • Courier New
  • Garamond
  • Georgia
  • Helvetica
  • Impact
  • Lucida Console
  • Palatino
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

De todas estas, Arial, Times New Roman, Helvetica y Courier New son las más seguras. A pesar de que se consideran seguras para la web, algunas no funcionan en determinados sistemas operativos. El problema es que, a menos que estés ejecutando algo como un sitio gubernamental o un sitio de información simple, no vale la pena sacrificar tu marca evitando la mayoría de las fuentes. Las fuentes seguras para la web son legibles, pero también son demasiado genéricas y se usan en exceso.

Es mucho mejor elegir un conjunto de fuentes más agradable y único para usar en tu web, especialmente porque existe una solución al problema de las fuentes web que no se cargan, que son fuentes de respaldo.

Cómo añadir fuentes con HTML

Si deseas añadir una fuente web a tu web, tiene algunas opciones.

Para los usuarios de WordPress, la forma más sencilla de introducir fuentes en tu web es mediante un plugin. Los dos más populares son Easy Google Fonts y Use Any Font. El primero simplifica el proceso de añadir fuentes de Google a tu web, mientras que UAF te permite cargar fuentes directamente.

Si no está utilizando WordPress, o no desea depender de un plugin, el proceso requerirá algunos ajustes manuales.

Primero, puede usar fuentes alojadas en otros lugares, como con Google Fonts. Las instrucciones aquí dependen del servicio que elijas. Con Google Fonts, necesitarías incrustar la fuente que deseas en tu <head> y luego invocarla cuando quieras usarla.

También puede alojar localmente fuentes que hayas descargado de Internet. Esto puede ser preferible porque no necesitarás depender de servicios de terceros.

Afortunadamente, esto es muy fácil de hacer siempre que tenga una fuente web configurada correctamente. Simplemente cargua los archivos en tu servidor, luego use la regla @ font-face en su hoja de estilo para definirlo. Por ejemplo:

@font-face {

font-family: FontName;

src: url(FontLocationOnServer);

}

Luego, puedes usar la etiqueta font-family para llamar a tu fuente donde lo desees en el documento HTML.

Diseño fuentes con HTML y CSS

Una vez que tu fuente se cargue de manera segura en tu web podrás añadirle diseño con HTML y CSS. Incluso si tienes muy pocas habilidades de programación, diseñar una fuente es bastante fácil. Puedes cambiar el color del texto, el color de fondo, el tamaño, el estilo o el peso.

Puedes cambiar la fuente con códigos de color. Puede utilizar un nombre de color como «azul», un código RGB o un valor HEX. Esto se establece con la propiedad de color así:

p {
color: blue;
}

O en un elemento de estilo HTML individual:

<p style="color:blue;">Text.</p>

El color de fondo es el mismo, pero usando el atributo background-color.

p {
background-color: blue;
}

El siguiente es el tamaño de fuente. Esto puede ser en píxeles, porcentajes o ems (que son buenos para diseñar sitios responsive).

 p {
font-size: 16px;
}

Y por último están el estilo y el peso de la fuente, o la cursiva y la negrita.

.italic {
font-style: italic;
}
 
.bold {
font-weight: bold;
}

¿Dónde obtener fuentes HTML?

Independientemente que desees utilizar un host de fuentes de terceros o descargarlas, necesita saber dónde están los mejores sitios para encontrar fuentes. Hay cientos de distribuidores, a continuación te mostramos algunos:

Google Fonts

es uno de los mejores sitios. ¿Por qué? Puedes insertarlos fácilmente en tu web sin descargar ninguna, su selección es amplia y bonita y lo más importante, es completamente gratis. Los servidores de Google siempre son rápidos, por lo que puedes confiar en que entregarán las fuentes con la menor demora posible.

Adobe Fonts

ofrece miles de fuentes con cualquier suscripción a Creative Cloud. Con otros servicios (que no dependen de fuentes de código abierto como Google Fonts, al menos), debes preocuparse por las licencias. Estas fuentes están autorizadas para su uso en cualquier proyecto, personal o comercial.

Font Squirrel

Antes de que existiera Google Fonts, Font Squirrel era el sitio para encontrar fuentes gratuitas con licencia comercial para su uso en cualquier proyecto. Tiene una gran variedad de opciones, pero lamentablemente no hay ninguna opción para el alojamiento de fuentes. Tendrás que descargar las fuentes y subirlas a tu sitio manualmente. No todas las fuentes están optimizadas para la web, pero puede probar Webfont Generator.

Deja un comentario