gonzalo gutierrez
fuentes seguras para tu web

¿Sabías que las tipografías pueden variar según el dispositivo y navegador?

¿Sabías que puedes utilizar fuentes seguras para evitar dolores de cabeza y no perder el estilo que tiene tu web?

El 80% de la carga de tu página web se depende de:

  1. Las imágenes que tengas
  2. la tipografía que utilices (fuentes)

Los servicios de incrustación de fuentes (como Google Web Fonts ) surgieron como una opción para brindar a los usuarios diseños nuevos y elegantes. Y también porque son muy fáciles de usar para los programadores y personas con conocimiento básico en html y css. Para los amantes de WordPress, Google Fonts viene incorporada para cualquier plantilla que se precie de si.

Por ejemplo:
Webs con HTML y CSS

Si eliges cualquier fuente como Oswald (muy usada últimamente),  Open Sans (la favorita de los diseñadores minimalista) o Montserrat (mi fuente favorita) por dar un ejemplo y generas el código y lo pegas  en el <encabezado> de su documento entre las etiquetas <head> y </head>. Luego haces la referencia en CSS y listo!

Eso tomó 2 minutos. Y fue completamente gratis gracias al tío Google.

WordPress

Viene incorporado en el apartado tipografía de tu plantilla. Así que ni te preocupes.

Siendo tan fácil ¿Qué podría salir mal no?

El problema es que no todos tendrán acceso a la misma fuente, ni verán la página de la manera que tú la diseñaste. Esta se mostrará como algo aleatorio para tus visitantes, por lo tanto deberías crear una alternativa segura para tu web.

Y funciona así.

¿Por qué importa ‘Web Safe’?

Cada dispositivo viene con su propia selección de fuente pre-instalada. La selección se basa en gran medida en su sistema operativo.

El problema es que cada sistema difiere un poco.

Los dispositivos basados ​​en Windows pueden tener un grupo. Los MacOS se extraen de los demás. El propio sistema Android de Google también usa el suyo.

Ahora abra un sitio web. Incluso este funcionaría. La fuente que ve puede no ser la original.

Significado: Digamos que el diseñador eligió una familia de fuentes oscuras y pagas para el diseño de este sitio. Si no tiene esa fuente ya instalada y no se extrae de un lugar compatible con la web, la fuente que ve volverá a una variación básica como Times New Roman.

Sin embargo, usted, como visitante, no necesariamente sabría que esto es lo que ha sucedido. Para ti, puede parecer simplemente feo.

Los ‘seguros para la web’ aparecen en todos los sistemas operativos. Son la pequeña colección de fuentes que se superponen desde Windows a Mac a Google (incluso las de Unix o Linux también).

Brindan a los diseñadores (y propietarios de sitios web) la capacidad de especificar a qué fuentes recurrir si es necesario. De esa manera, puede controlar lo que aparece (no importa qué) en todos los dispositivos. Y puede elegir algo que todavía esté un poco cerca de la fuente original (para que sus usuarios no vean algo aleatorio o fuera de lugar).

Es un plan B, la versión ‘por si acaso’. Un sistema de emergencia para salvar al mundo de malas selecciones de fuentes.

¿Entendido? ¡Bueno! Echemos un vistazo a las fuentes seguras web más populares para elegir.

🔺 ¡Aclaración! Si prefieres priorizar el diseño y que tu web sea estética y arriesgarte a un cambio en los dispositivos… también es válido. Así que os ofrezco un artículo donde te muestro 50 tipografías bonitas para que apliques.

15 mejores tipos de fuentes seguras web

Puede haber algunas más. Pero estas son las 15 mejores fuentes seguras para elegir. Seleccione uno de estos y no puede salir mal.

1. Arial

Web Safe Fuente - Arial

Arial es estándar para muchos dispositivos y querida por muchos diseñadores.

Es una de las fuentes sans-serif más utilizadas (lo que significa que no hay pequeños rizos al final de cada letra). A menudo se sustituye en dispositivos Windows por otras opciones de fuentes interesantes (léase: más bellas).

2. Roboto

Web Safe Fuente - Roboto

Roboto es un tipo de letra sans-serif que fue desarrollado por Google para ser su fuente de sistema para Android.

3. Times New Roman

Web Safe Font - Times New Roman

Times New Roman es serif lo que Arial es sans serif.

Es uno de los más populares en dispositivos con Windows y es una nueva variación de la antigua fuente Times.

4. Times

Web Safe Font - Tiempos

La fuente Times probablemente se ve familiar. Es la impresión del periódico viejo que estás acostumbrado a ver en un tamaño pequeño en columnas estrechas. Es casi tan tradicional como se pone.

5. Courier New

Web Safe Font - Courier Nuevo

Courier New, similar a Times New Roman antes, es una variación de otro viejo clásico. También se considera una fuente monoespaciada (a diferencia de serif vs. sans serif que acabamos de ver).

6. Courier

Web Safe Font - Mensajero

Courier es el antiguo modo de espera monoespacial disponible en casi todos los dispositivos y sistemas operativos.

7. Verdana

Web Safe Font - Verdana

Verdana es una fuente web verdadera porque (1) las líneas simples sans serif y (2) es de gran tamaño. Las letras son casi alargadas, lo que facilita su lectura en línea. Además dentro de las tipografías clásicas es la menos usada por los diseñadores aunque tiene una facilidad de lectura y claridad destacable. Es de mis «fuentes seguras» favoritas.

8. Georgia

Fuente Web Safe - Georgia

Georgia es similar a Verdana en tamaño y estatura (con letras más grandes de lo normal en comparación con fuentes del mismo tamaño). Entonces, si bien es excelente para ciertas circunstancias, asegúrese de evitar emparejar esta fuente serif con otras (como Times New Roman) que pueden parecer minúsculas en comparación.

9. Palatino

Web Safe Fuente - Palatino

Palatino se remonta al Renacimiento. Realmente!  Es otra fuente grande que la hace perfecta para la web, utilizada tradicionalmente para encabezados y anuncios impresos.

10. Garamond

Web Safe Fuente - Garamond

Garamond es otra fuente de la vieja escuela que se remonta a los estilos utilizados en el París del siglo XVI . Esta versión nueva y mejorada se introdujo y se incluyó en la mayoría de los dispositivos con Windows (y ha sido adoptada por otros desde entonces).

11. Bookman

Web Safe Fuente - Bookman

Bookman (o Bookman Old Style) es otra opción de titular perfecta que mantiene la legibilidad (o legibilidad) incluso cuando se usa en un tamaño pequeño.

12. Comic Sans MS

Web Safe Font - Comic Sans MS

Comic Sans MS es una alternativa juguetona y caprichosa a otras opciones Sans Serif.

También es un poco fugitivo. ¡No lo uses! 😉

13. Candara

Web Safe Font - Candara

Candara es un tipo de letra sans-serif encargado por Microsoft. Forma parte de la colección de fuentes ClearType que se lanzó con Windows Vista.

14. Arial Black

Fuente Web Safe - Arial Black

Arial Black es la versión más grande, más audaz y más mala de su Arial básico. Curiosamente, también comparte proporciones con Helvetica. ¿Por qué es eso importante? Para que pudieran usarlo originalmente para reemplazar Helvetica e imprimir cosas sin pagar la licencia.

15. Impact

Web Safe Font - Impacto

Impact es otra elección de titulares en negrita que se ve muy bien en pocas palabras, y absolutamente terrible en una oración o más.

Conclusión

Las fuentes seguras para la Web le brindan un Plan B. Una opción alternativa para cuando su primera opción podría no funcionar.

Son ampliamente accesibles y han estado disponibles en la mayoría de los dispositivos durante décadas (en algunos casos).

Si bien no todos son «socialmente aceptadas»(indirecta para Comic Sans ), Hay suficientes opciones de tipografía seguramente relacionadas y visualmente parecidas a la opción original.

En fin, con Arial no te puedes equivocar jamás.

Comment (1)

  • Muchas gracias por la información!! Había tenido problemas con las tipografías y ahora lo entiendo todo!!
    Gracias

    Responder

Deja una respuesta

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

Start typing and press Enter to search

Shopping Cart