Las 22 fuentes principales y seguras para usar en tu sitio web

Ya sea que estés usando un diseñador web profesional y experimentado o un Creador de Sitios de negocio de Hágalo Usted Mismo (DIY), puede que te hayas cruzado con el término “Fuentes seguras para web”. Este es un elemento importante para cualquier diseño exitoso, pero encontrar y usar la mejor tipografía para la web puede ser complicado.

Afortunadamente, las fuentes seguras para la web son más fáciles de acceder e incorporar en tu sitio de lo que piensas. No solo aseguran consistencia a través de tu marca, sino que también proveen ventajas en términos de Experiencia de Usuario (UX) y Search Engine Optimization (SEO-Posicionamiento en buscadores)

En este artículo explicaremos qué son las fuentes seguras para web y por qué son importantes desde una perspectiva de diseño web. Luego compartiremos algunos ejemplos populares, recursos donde puedes adquirirlas e instrucciones para usarlas. Siéntete libre de usar los enlaces a continuación para saltar a la sección que más te interesa.

• Introducción a las fuentes seguras para web
• 22 Fuentes web seguras para usar en tu sitio web
• Dónde descargar las fuentes seguras para web
• Cómo añadir fuentes seguras para web a tu sitio web

Hay mucho que cubrir, ¡así que comencemos!

Una introducción a las fuentes seguras para la web (y por qué importa)

Una fuente segura para web es simplemente una tipografía que es visible en la mayoría de dispositivos, incluyendo computadores de escritorio y móviles. Típicamente, vienen preinstalados en cada Sistema Operativo (OS).

Esto es importante porque si un visitante intenta ver tu sitio web y usa una fuente que no está instalada en su dispositivo, verán una tipografía genérica tal como Arial o Times New Roman en vez de la tuya. En algunos casos, tu contenido incluso puede volverse ilegible en ciertos dispositivos.

Por supuesto, la última situación no es deseable, ya que los usuarios típicamente no se van a quedar si no pueden leer tu sitio. Sin embargo, incluso tener que mostrar una fuente de una familia genérica puede interrumpir el diseño de tu sitio web en general. También puede llevar a inconsistencias en tu marca.

En algunos casos, usar fuentes seguras para web puede mejorar la velocidad de carga de tus páginas. Ya que están preinstaladas en los sistemas operativos más famosos, los navegadores modernos no tienen que descargarlas de tu servidor mientras que están leyendo tu sitio. Esto puede mejorar ambos UX y SEO.

Las 22 fuentes principales y seguras para usar en tu sitio web

Afortunadamente, hay muchas fuentes seguras para web diferentes allá afuera de las que puedes escoger cuando estás diseñando tu sitio. Encontrar una que se ajuste al tono de tu marca y personalidad no debería ser un reto muy grande.

Para darte una ventaja, hemos recopilado algunas de las elecciones populares para tu consideración. Comencemos con lo básico y luego veremos algunas opciones más únicas.

1. Arial

Muchos diseñadores ven Arial como simple o aburrida, pero no puedes negar que es una fuente para web segura y a prueba de errores. Esto es perfecto para usar como alternativa para una tipografía más inusual (y no siempre disponible). Además, es bastante legible.

2. Times New Roman

Si aprecias la fiabilidad y la simplicidad de Arial, pero prefieres una fuente serif, Times New Roman es la opción que debes escoger. Aunque de cierta manera le falta personalidad, puedes estar seguro de que será visible en cualquier dispositivo.

Relacionado: Tu pila de fuentes puede aumentar la tasa de conversión de tu sitio web

3. Helvetica

Helvetica es una fuente sans serif que muchos prefieren como una alternativa de Arial. Diseñado a propósito para ser industrial y sin personalidad, haciéndolo útil para documentación y contenido sin lujo que querrás que sea legible.

4. Calibri

Calibri es otra fuente básica sans serif, similar a Helvética y Arial. Ha sido la fuente por defecto de Microsoft Office por muchos años ya y es una elección excelente para negocios modernos y sitios de e-commerce. Al usar una fuente modesta, no invasiva, puedes atraer más atención a tus productos y servicios.

Relacionado: 11 Formas en que ttienda en línea puede competir con los mega-minoristas y ganar

5. Georgia

La elegante, serificada Georgia tiene una apariencia atemporal que le da a tu sitio un tono y estilo sin sobrecargar el diseño. Es ideal para blogs de estilo de vida y marcas que quieren una sensación un poco más suave, no tan estricta.

6. Cambria

Cambria es similar a Georgia, pero es un toque un poco más moderno. Sus serifs son un poco más sutiles, lo que la hace fácil de leer – especialmente en pantallas más pequeñas.

Relacionado: 10 Lecciones de diseño web que puedes aprender de StarWars.com

7. Veranda

Veranda fue diseñada específicamente para uso en pantalla y como resultado, es particularmente fácil de leer en todos los dispositivos. Tiene una sensación clásica y ciertamente no te distraerá del contenido. Se adapta bien a los encabezados o texto de cuerpo, así que la puedes usar para casi cualquier contenido.

8. Tahoma

Tahoma es otra fuente sans serif clara y fácil de leer. Es lo suficientemente flexible para funcionar bien con sitio de negocios, blogs, portafolios creativos o cualquier otra cosa para lo que la puedas necesitar. Los caracteres son limpios, uniformes y fáciles para los ojos.

9. Trebuchet

Diseñada para ser legible y ser usada en signos, Trebuchet es la fuente perfecta para encabezados y títulos. También retiene su legibilidad en tamaños más pequeños, así que no dudes en usarla en el cuerpo de tu texto también.

10. Century Gothic

Pulcra, limpia y geométrica, Century Gothic hace una fuerte declaración en encabezados y títulos. Si Arial y Helvetica son muy planas para tu gusto, pero aún quieres una fuente cuadrada sans serif para tu sitio, debes considerar esta.

11. Didot

La clásica, elegante Didot da una sensación intelectual que se ajustará a sitios de universidad o incluso algunos blogs o emprendimientos. Muestra líneas limpias y derechas con serifs minimalistas que no toman mucha atención del texto.

Relacionado: Tu lista de tareas de rediseño de sitio web

12. Bodoni

Esta tipografía llamativa es una alternativa más interesante al estándar Times New Roman. Más atrevida que Georgia, pero no resalta tanto como una Courier New o Rockwell, Bodoni es un increíble punto intermedio si quieres que tu texto tenga algo de personalidad sin pasar por encima del diseño.

13. Calisto

Las líneas suaves de Calisto y serifs delicados le dan un aire femenino, perfecto para blogs de estilo de vida o emprendimientos liderados por mujeres. Su espacio corto puede que no se preste bien para bloques de texto muy largos, pero se verá muy bien en encabezados y títulos.

Relacionado: 30 Maneras de ser un aliado de las mujeres en la tecnología

14. Candara

Presentada en la colección de fuentes ClearType de Microsoft, Candara usualmente es vista como una de las fuentes sans serif menos modernas. Proyecta una actitud abierta, fácil de llevar que puede prestarle un tono memorable a tu sitio y marca.

15. Optima

Puede ser difícil inyectar mucha personalidad a una tipografía elegante y limpia sans serif, pero Optima ciertamente lo logra. Es lo suficientemente memorable para prestarse bien para desarrollar la identidad de tu marca, pero no hará sentir las frases como largas, desordenadas o intimidantes para los lectores.

16. Palatino

Una fuente ideal para encabezados de revistas digitales y otro texto que necesite hacer una declaración fuerte, Palatino es una fuente clásica serif. Se siente menos estructurada que  Georgia y tiene mucha más personalidad que tu estándar Times New Roman.

17. Quicksand

Quicksand es una fuente moderna diseñada para verse bien en dispositivos móviles. Es simple y no muy ostentosa, pero aún muestra personalidad peculiar para mantener el cuerpo de tu texto interesante. Esta tipografía optimizada es fácil de leer también, haciéndola una elección sólida para sitios con mucho texto.

18. Courier New

Courier New es una fuente peculiar que es altamente reconocible y empaca mucha personalidad. Es la opción perfecta si quieres que tu sitio se vea un poco más clásico y estás buscando una fuente fuerte que se ajuste a la identidad de tu marca.

19. Rockwell

La serificación distintiva de Rockwell evoca a Courier New, solo que sin la vibra abrumadora clásica. Puede ser un poco más difícil de leer en pantallas pequeñas y en tamaños más pequeños, pero puede ser una fuente divertida para encabezados y títulos.

20. Garamond

Garamond es una fuente atemporal, originalmente diseñada en 1615. Desafortunadamente, es más fácil de leer impresa que en la web. Sin embargo, aún puedes usarla para acentos en la fuente tipográfica en encabezados o tal vez como parte de tu logotipo.

Relacionado: Cómo diseñar un logotipo para tu sitio web que encantará a tus visitantes

21. Copperplate

Esta fuente altamente distinguible es difícil de ignorar y trae una sensación oficialmente industrial a tu texto. Copperplate es la tipografía ideal para atraer atención a tus encabezados o logo. Desafortunadamente, puede ser difícil de leer cuando se usa en el contenido de cuerpo de texto más pequeño.

22. Impact

Correctamente llamada, Impact es una fuente de declaración que querrás reservar para encabezados y títulos. Estas fuentes pesadas empacan fuerza y atraen la atención de los lectores a medida que se desplazan por tu blog u hojean tus publicaciones en busca de información clave.

Dónde descargar fuentes seguras para web

En resumen, no deberías tener que descargar fuentes seguras para la web. Ya que ellas están preinstaladas en todos los sistemas operativos populares, simplemente puedes codificarlos en tu sitio usando CSS y deberían aparecer como es esperado a través de todos los dispositivos.

Dicho eso, si sientes la necesidad de descargar una fuente segura web por alguna razón, puedes encontrarlas en la mayoría de biblioteca de fuentes, tales como Google Fonts, DaFont, o FontSpace

Sin embargo, ten en cuenta que solo porque una tipografía está disponible a través de uno de estos recursos no significa que automáticamente sea seguro para web.

Cómo añadir fuentes seguras para web a tu sitio web

Puedes añadir fuentes a tu sitio web con CSS. La mejor práctica es incluir tu fuente preferida (la cual puede o no ser una fuente segura para web) y una fuente alternativa (la cual siempre debería ser fuente segura para web). De esta manera, si tu fuente primaria no es compatible con el sistema operativo de un usuario, aún puedes opinar sobre la fuente de respaldo que se muestra en su lugar.

Hay algunas opciones diferentes para añadir el CSS e incorporar fuentes seguras para web en tu sitio web. Si estás usando WordPress, puedes ponerlo en la sección Additional CSS del personalizador.

Alternativamente, puedes cambiar la fuente de tu sitio web en su hoja de estilo (style.css). Debería haber una sección de fuentes y tipografías de este archivo donde puedes especificar cuáles fuentes deben ser usadas por los diferentes tipos de texto.

Aquí hay un ejemplo:

p {font-family:Montserrat,Arial,sans-serif; }

En esta pieza, hemos puesto el texto de párrafo para mostrar la fuente Montserrat primero. Si el dispositivo de un usuario no tiene Montserrat instalado, Arial será usado en su lugar. Puedes incluir más de dos fuentes si deseas y usar diferentes fuentes para el cuerpo de tu texto, encabezado y títulos.

¿Tienes un tipo de fuente favorito?

Si no eres un diseñador experto, es fácil pasar por alto la importancia de la fuente de tu sitio web. Sin embargo, este elemento juega un papel importante en tu marca. Escoger una fuente que no es visible en todos los dispositivos puede interrumpir el UX o incluso prevenir que los visitantes lean tu contenido completamente.

En esta publicación, hemos explicado la importancia de las fuentes seguras para web y cómo puedes añadirlas a tu sitio. También hemos compartido 22 opciones que puedes usar en tus próximos diseños, incluyendo fuentes comunes sans serif tales como Helvetica, fuentes serif clásicas como Georgia y algunas opciones únicas, incluyendo Courier New y Quicksand.

¿Estás listo para comenzar a diseñar tu nuevo sitio? Con nuestros planes de alojamiento web Shared, puedes tener tu sitio activo en poco tiempo. ¡Echa un vistazo hoy!