Si hay algo más importante para la imagen de marca y la apariencia de tu sitio web, pueden ser las fuentes. Un tipo de letra cuidadosamente elegido puede transmitir personalidad, hacer más legibles los pasajes largos de texto y consolidar tu marca en la mente de la gente.
Pero no puedes descargar cualquier fuente y utilizarla en tu sitio web. Primero hay que tener en cuenta varias cosas.
¿Dónde puedes encontrar fuentes web, qué fuentes son compatibles con HTML y cuáles son «seguras para la web» y pueden utilizarse en cualquier sitio web? En este artículo los analizaremos todos.
¡Empecemos!
Fuentes HTML: ¿Qué Son las Fuentes Web?
Los tipos de letra tienen una rica historia, pero las fuentes, tal y como los conocemos hoy en día, se empezaron a utilizar con el auge de los ordenadores e Internet. Las fuentes digitales necesitaban un tratamiento especial para ser reproducidas en las pantallas. Y cuando entraron en juego diferentes tamaños de pantalla y dispositivos, las cosas se complicaron aún más.
Cuando se trata de fuentes digitales, hay varios tipos diferentes. Algunas fuentes están pensadas principalmente para la impresión y el diseño gráfico. Suelen ser grandes e inadecuadas para los sitios web, pero son perfectas para crear gráficos. También hay fuentes «seguras para la web» que se encuentran en la mayoría de las máquinas.
Pero para el diseño web, lo que hay que buscar son fuentes web, tipos de letra especialmente diseñados para que se reproduzcan perfectamente en la web y en diversos dispositivos. También puedes utilizar fuentes web en correos electrónicos u otros servicios online.
Hay algunas cosas que hacen que las fuentes web sean diferentes de las fuentes de escritorio estándar que se pueden descargar. Por un lado, a menudo no se pueden utilizar con programas en el ordenador; deben cargarse en un servidor y utilizarse en la web.
También están diseñados para ser legibles en diferentes pantallas y para diferentes tamaños. Pueden ser estilizados con CSS (como aplicar negrita o cursiva, colores y otros atributos) y ofrecen soporte para otras condiciones como la representación de derecha a izquierda.
Aunque las fuentes web no vienen instaladas en tus dispositivos ni en los de tus visitantes, hay formas especiales de mostrarlas para que cualquiera que visite tu sitio pueda verlas.
Puedes descargar estas fuentes de forma normal y subirlas a tu servidor, o utilizar un servicio especial de alojamiento de fuentes web que las incorpore a tu sitio sin necesidad de descargarlas.
¿Qué Fuentes se Pueden Utilizar en HTML?
Algunas fuentes no están pensadas para ser utilizadas en la web, pero ¿cuáles pueden insertarse en tu sitio HTML?
Básicamente, puedes utilizar cualquier fuente descargable en tu sitio. Todo lo que tienes que hacer es subirla y configurarla correctamente, y debería aparecer en tu sitio web.
Pero, aunque técnicamente puedes utilizar cualquier tipo de letra en tu sitio, no siempre es la mejor idea. Hay que buscar fuentes específicas para la web, no para la impresión o el diseño gráfico. Algunas fuentes son tan estilizadas o están pensadas para tamaños de texto tan grandes que no se verán bien en tu sitio. Con una fuente web, esto no es un problema.
También hay que preocuparse por las licencias cuando se utilizan fuentes de escritorio en el sitio web (o cuando se utilizan fuentes web para el diseño de la impresión). Utilizar una fuente en un medio diferente al que la has comprado puede traerte problemas. Asegúrate de leer detenidamente la licencia de la fuente antes de comprarla.
También puedes buscar ciertos hosts que te permitan utilizar una simple llamada en el HTML para renderizar sus fuentes en tu propio sitio web a través de planes gratuitos o de pago.
En cualquier caso, siempre que la fuente que utilices esté cargada correctamente y tenga el tipo de archivo adecuado:
- TTF
- OTF
- WOFF/WOFF2
- SVG
- EOT
Con estos tipos de archivo de fuentes, podrás utilizarlas en todo tu sitio y darles estilo con HTML y CSS.
También hay fuentes seguras para la web que suelen funcionar de forma universal en todos los navegadores y programas.
¿Qué Son las Fuentes Seguras Para la Web?
Uno de los problemas de 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, en el que se puede crear una imagen en un programa e imprimirla para distribuirla, un navegador tiene que renderizar las fuentes web cada vez que alguien abre la página. Si las fuentes no se cargan, el sitio web puede quedar en blanco y sin funcionar.
Por esta razón, algunos propietarios de sitios web optan por confiar únicamente en las fuentes seguras para la web. Estas vienen preinstaladas en la mayoría de los sistemas, por lo que está garantizado que se muestren correctamente en todos los dispositivos, excepto en los más oscuros. Además, suelen cargarse mucho más rápido que las fuentes web, que pueden tardar en aparecer.
Si lo único que te preocupa es maximizar el rendimiento y asegurarte absolutamente de que tu sitio muestra las fuentes correctamente, entonces las fuentes seguras para la web son para ti.
Esta es una lista de fuentes seguras para la web que generalmente se pueden utilizar.
- Arial
- Brush Script MT
- Comic Sans
- Courier New
- Garamond
- Georgia
- Helvetica
- Impact
- Lucida Console
- Palatino
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
También hay docenas de fuentes más seguras para la web, pero estas son las más omnipresentes en los dispositivos.
De todas ellas, Arial, Times New Roman, Helvetica y Courier New son las más seguras. A pesar de ser consideradas seguras para la web, algunas de las otras no funcionan en determinados sistemas operativos.
El problema es que, a no ser que se trate de un sitio gubernamental o de un simple sitio de información, no merece la pena sacrificar la marca evitando la mayoría de las fuentes. Las fuentes seguras para la web son legibles, pero también son demasiado genéricas y están sobreutilizadas.
Es mucho mejor elegir un conjunto de fuentes más bonitas y únicas para utilizar en tu sitio web, sobre todo porque existe una solución al problema de las fuentes web que no se cargan: las fuentes de reserva.
Nota Sobre las Pilas de Fuentes
Las pilas de fuentes, también conocidas como fuentes de reserva, son la única razón para utilizar fuentes web atrevidas y creativas.
No importa lo que hagas o las precauciones que tomes, siempre hay alguien que no podrá cargar tus fuentes. Tal vez tengan Javascript desactivado, por lo que tus fuentes alojadas no se muestran correctamente, o algo va mal en el código e impide que se muestren las fuentes que has subido. O tal vez una determinada fuente no sea compatible con el dispositivo de alguien.
Gracias a las fuentes de reserva, es fácil cargar una fuente segura para la web si algo va mal. Esto funciona seleccionando una fuente que el usuario haya instalado basándose en la familia de fuentes:
- Serif fonts se definen por los pequeños trazos unidos a los extremos de las líneas de las letras. Estas fuentes se consideran elegantes y legibles.
- Sans serif fonts están diseñadas de forma similar a las fuentes Serif, pero carecen de trazos. Son más sencillas y más legibles.
- Monospace fonts están espaciados uniformemente entre cada letra, lo que les da un aspecto distintivo.
- Cursive fonts (o Script fonts) representan letras formales, escritas a mano. No son muy legibles y son mejores para los títulos o el diseño gráfico.
- Fantasy fonts (o Decorative fonts) son muy estilizadas y, al igual que las fuentes cursivas, no son apropiadas para el cuerpo de texto.
Recuerda que las pilas de fuentes son realmente una «pila»; es perfectamente posible tener varias fuentes de reserva en secuencia. Solo tienes que asegurarte de que siempre tienes una fuente segura para la web al final de la pila, y todavía tienes la oportunidad de transmitir tu marca con una fuente similar si la principal falla.
Cómo Añadir Fuentes Con HTML
Si quieres añadir una fuente web a tu sitio, tienes algunas opciones.
Para los usuarios de WordPress, la forma más fácil de incorporar fuentes en tu sitio es utilizar un plugin. Los dos más populares son Easy Google Fonts y Use Any Font. El primero simplifica el proceso de añadir Google Fonts a tu sitio web, mientras que UAF te permite subir fuentes a tu sitio directamente.
Si no usas WordPress, o no quieres depender de un plugin, el proceso requerirá algunos ajustes manuales.
En primer lugar, puedes utilizar fuentes alojadas en otro lugar, como por ejemplo en Google Fonts. Las instrucciones aquí dependen del servicio que elijas. Con Google Fonts, tendrías que incrustar la fuente que quieres usar en tú <head> y luego llamarla cuando quieras usarla.
También puedes alojar localmente en tu sitio web las fuentes que hayas descargado de Internet. Esto puede ser preferible porque no tendrás que depender de servicios de terceros.
Por suerte, esto es muy fácil de hacer siempre que tengas una fuente web correctamente configurada. Solo tienes que subir los archivos a tu servidor, y luego utilizar la regla @font-face en tu hoja de estilos para definirla. Por ejemplo:
@font-face {
font-family: FontName;
src: url(FontLocationOnServer);
}A continuación, puedes utilizar la etiqueta font-family para llamar a tu fuente donde quieras en el documento HTML.
Estilizar las Fuentes Con HTML y CSS
Una vez que la fuente esté cargada de forma segura en tu sitio web, puedes darle estilo con HTML y CSS. Incluso si tienes pocos conocimientos de programación, estilizar una fuente es bastante fácil. Puedes cambiar el color del texto, el color de fondo, el tamaño, el estilo o el peso.
Nota: Si has trabajado con versiones antiguas de HTML, puede que recuerdes la etiqueta <font>. Esta ya no es soportada y no debería utilizarse. En su lugar, puedes estilizar el texto con CSS o con un elemento de estilo HTML.
En primer lugar, puedes cambiar la fuente con códigos de color. Puedes usar un nombre de color como «rojo», 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 utilizando el atributo background-color.
p {
background-color: blue;
}Lo siguiente es el tamaño de la fuente. Puede ser en píxeles, porcentajes o ems (que son buenos para el diseño de sitios responsivos).
p {
font-size: 16px;
}O:
<p style="font-size:200%;">Text.</p>
Y por último están el estilo y el peso de la fuente, o la cursiva y la negrita. Para un texto inclinado, utiliza la etiqueta «cursiva».
.italic {
font-style: italic;
}
Y para la negrita:
.bold {
font-weight: bold;
}
También puedes utilizar etiquetas HTML en su lugar. Para la cursiva, puedes utilizar:
<em>para un texto que transmite el énfasis, o el uso:
<i> para un texto que pretende ser visualmente distinto.
Y para la negrita, usa:
<b>or<strong>
Por ejemplo:
<b>Bold Text</b>
o
<strong>I'm of special importance.</strong>¿Dónde Conseguir Fuentes HTML?
Tanto si quieres utilizar un host de fuentes de terceros como si quieres descargarlas, tienes que saber cuáles son los mejores lugares para encontrar fuentes. Hay cientos de distribuidores, pero un buen puñado son conocidos por ser fuentes fiables para conseguir fuentes. He aquí algunos:
- Google Fonts es uno de los mejores lugares para conseguir fuentes. ¿Por qué? Puedes incrustarlas fácilmente en tu sitio sin necesidad de descargar ninguna, su selección es amplia y bonita, y lo más importante, es completamente gratuita. Los servidores de Google son siempre rápidos, así que puedes confiar en que te entregarán las fuentes con el menor retraso posible.
- Adobe Fonts ofrece miles de fuentes con cualquier suscripción a Creative Cloud. Con otros servicios (que no se basan en fuentes de código abierto como Google Fonts, al menos), a menudo hay que preocuparse por las licencias. Estas fuentes están autorizadas para su uso en cualquier proyecto, personal o comercial.
- Fonts.com tiene una amplia selección de fuentes tanto para el escritorio como para la web. Te proporcionan el código que necesitas para ponerlas en tu sitio. El problema es que hay varias licencias diferentes, y puede ser un poco confuso. El pago se basa en una cuota única o en un modelo de pago por uso.
- TypeNetwork ofrece fuentes de alta calidad para proyectos serios con una variedad de opciones de licencia. Puedes comprar fuentes para escritorio, web, aplicaciones o ePub. Las fuentes web también tienen una opción adicional: alojadas o autoalojadas.
- Antes de que existiera Google Fonts, Font Squirrel era el lugar donde encontrar fuentes gratuitas con licencia comercial para usar en cualquier proyecto. Tiene una gran selección, pero lamentablemente no hay opción de alojamiento de fuentes. Tendrás que descargar las fuentes y subirlas a tu sitio manualmente. Tampoco todas las fuentes están optimizadas para la web, pero puedes probar el generador de fuentes web.
Las 10 Mejores Fuentes HTML
Hay miles de fuentes web, pero ¿por dónde empezar? Aquí tienes diez fuentes HTML sencillas que quedarán muy bien en cualquier sitio web. Todas ellas son seguras para la web, por lo que deberían funcionar en casi todos los dispositivos. También son excelentes fuentes de reserva.
Si necesitas algo más emocionante, tenemos muchos artículos sobre fuentes cursivas, fuentes caligráficas y fuentes modernas.
1. Arial
Arial es la más conocida de todas las fuentes. No es la más bonita, pero es sencilla y útil en diversas situaciones.
2. Times New Roman
Times New Roman también es un tipo de letra muy común. Es la mejor si se trata de un sitio más formal. Este tipo de letra serif no es especialmente emocionante, pero tampoco distrae.
3. Palatino
Puede que Palatino te resulte familiar, ya que se utiliza a menudo en la impresión de libros. Ahora es un elegante tipo de letra digital incluido por defecto en muchos dispositivos.
4. Verdana
Verdana es conocida por ser muy fácil de leer, y sigue viéndose muy bien incluso en tamaños grandes. Esta sans serif es una buena alternativa a Arial.
5. Courier New
Courier New, que recuerda al texto de las antiguas máquinas de escribir, es un diseño monoespaciado ideal para los sitios que desean un aspecto anticuado pero legible.
6. Calibri
Calibri es una fuente sans serif sencilla y encantadora que viene de serie con programas como Microsoft Office. Sin embargo, es una fuente propietaria, por lo que a menudo solo es compatible con los sistemas operativos Windows.
7. Georgia
Esta fuente serif redondeada se inspira en la fuente similar Garamond, segura para la web. Si necesitas una fuente formal no tan seria como Times New Roman, es una buena opción.
8. Garamond
Al igual que Palatino, Garamond es una fuente clásica que se utiliza a menudo para la impresión de libros. A pesar de haber sido actualizada para los sistemas operativos modernos, sigue teniendo un aspecto bastante anticuado.
9. Didot
El mínimo espacio entre letras de esta fuente serif le da un aspecto único. Puedes encontrarla en la mayoría de los dispositivos Apple.
10. Tahoma
Esta fuente limpia ha actuado como el tipo de letra por defecto para los sistemas operativos Windows más antiguos. Su aspecto más atrevido hace que destaque lo suficiente sin distraer.
Resumen
Es importante elegir fuentes web que se vean bien en tu sitio web y que sean legibles y personifiquen tu marca. Hay varios sitios web en los que puedes instalar fuentes gratuitas o descargar otras con licencia a cambio de una cuota, y te ofrecemos algunos ejemplos de buenas fuentes para empezar.
No tienes por qué ceñirte a las aburridas fuentes seguras para la web que has visto por todo Internet durante décadas. Gracias a las fuentes de reserva, puedes usar la tipografía que quieras y establecer una reserva para que se use si no se carga.
Tanto si utilizas estas fuentes HTML en tu sitio web, en los correos electrónicos o en tu logotipo, asegúrate de hacer muchas pruebas para que tu sitio siga siendo legible y la tipografía encaje bien con el resto del diseño.
Deja una respuesta