5 fuentes web seguras que puedes usar en tu sitio web

Si es propietario de un sitio web, debe saber que una fuente HTML juega un papel importante en su sitio web. Todos los sitios web tienen contenido de texto de una forma u otra, si se elige correctamente una buena fuente puede aumentar la estética de su página y tener un impacto positivo en la legibilidad del contenido, por lo que el diseño y desarrollo de un sitio web es de hecho uno de los aspectos más importantes para poner en marcha cualquier negocio. Una fuente mala afecta negativamente el rendimiento de su suite, todo depende de si está utilizando una fuente segura para la web o no.

¿Qué es una fuente web segura?

Una fuente es legible y se ve igual en cualquier navegador o dispositivo (móvil, tableta, etc.) solo si la fuente está instalada en ese dispositivo. Las fuentes web seguras son aquellas fuentes que generalmente están preinstaladas en cualquier dispositivo: computadoras, teléfonos móviles, consolas de juegos, tabletas y televisores inteligentes.

Recomendado para usted: 20 impresionantes fuentes de diseño de logotipos que todo gran diseñador necesita.

¿Por qué son importantes las fuentes seguras para la web?

En un mundo perfecto, puede elegir cualquier fuente que desee para su sitio web. Sin embargo, según el sistema operativo, los dispositivos vienen con sus propias selecciones de fuentes preinstaladas. El problema radica en que sus diseños suelen diferir según el sistema que utilices. Los dispositivos que funcionan con Windows pueden tener un grupo, MacOS puede tener otro y luego Android de Google tiene otra versión diferente.

Cuando abre un sitio web, la fuente que ve en la ventana gráfica puede no ser necesariamente la fuente que el diseñador pretendía. Significado: digamos que el diseñador usa una fuente que es relativamente oscura. Si no tiene esa fuente instalada, su sitio web volverá a la fuente genérica definida por el sistema y es posible que ni siquiera lo sepa, para usted simplemente se vería desagradable.

Las fuentes web seguras son una colección de fuentes que se encuentran en todos los sistemas y le brindan la posibilidad, como diseñador, de especificar la fuente a la que recurrir en caso de que el dispositivo no tenga la fuente necesaria. Le permite hacer que el sitio web se vea igual en una variedad de dispositivos.

¿Qué son las cinco familias tipográficas?

En tipografía, todas las fuentes se clasifican en una de las cinco familias de fuentes en función de sus similitudes de diseño. Estos son los siguientes:

1. Cursiva (p. ej., Zapf-Chancery)

La familia de fuentes Cursive imita la escritura humana con las letras generalmente unidas de manera fluida. A menudo se asocia con personas con caligrafía y escritura más rápida.

2. Fantasía (p. ej., Star Wars)

Las fuentes de la familia de fuentes Fantasy generalmente tienen elementos decorativos en cada letra, pero aún representan el carácter. Los títulos de muchos libros y películas de ficción utilizan fuentes de esta familia para reforzar los matices del contenido.

3. Serif (p. ej., Times New Roman)

La característica más notable de la familia de fuentes Serif es una pequeña línea al final de un trazo grande en una letra o símbolo. Crea una sensación de elegancia y formalidad. Se utiliza ampliamente para el texto del cuerpo por una gran cantidad de sitios web.

4. Sans-serif (p. ej., Helvetica)

A diferencia de las fuentes de la familia Serif, las fuentes de la familia Sans-serif no tienen la línea pequeña adjunta a cada letra. La mayoría de las fuentes que pertenecen a esta familia tienen un ancho de trazo similar, lo que la hace minimalista y moderna.

5. Monoespacio (p. ej., Courier)

En la familia de fuentes Monospace, cada letra y símbolo ocupa exactamente el mismo espacio horizontalmente. Haciéndolos así consistentes y fáciles de distinguir, razón por la cual se usaban a menudo con máquinas de escribir y más recientemente con terminales de computadora.

Te puede gustar: 11 impresionantes fuentes de Photoshop que debes probar (¡GRATIS!).

Fuentes web populares:

Ahora que tenemos una idea de las fuentes, a continuación se muestran 5 fuentes seguras para la web populares para agregar a su sitio web:

1. Arial

Una de las fuentes sans-serif más utilizadas tanto en medios impresos como en línea. Es el estándar de facto. La versión 3.0 de OpenType lo describe como:

“Un diseño sans serif contemporáneo, Arial contiene características más humanistas que muchos de sus predecesores y, como tal, está más en sintonía con el estado de ánimo de las últimas décadas del siglo XX. El tratamiento general de las curvas es más suave y completo que en la mayoría de las caras sans serif de estilo industrial. Los trazos terminales se cortan en diagonal, lo que ayuda a dar a la cara una apariencia menos mecánica. Arial es una familia de tipos de letra extremadamente versátil que se puede utilizar con el mismo éxito para la configuración de texto en informes, presentaciones, revistas, etc., y para uso de exhibición en periódicos, publicidad y promociones”.

También es la fuente predeterminada en los documentos de Google.

2. Times New Roman

Times New Roman es una variación de la antigua fuente Times de la familia de fuentes Serif. Encargado por el periódico británico 'The Times' en 1931 y diseñado por Stanley Morison, el asesor artístico de la empresa de equipos de impresión Monotype y colaborador de Victor Lardent, del departamento de rotulación de la división publicitaria de Time. Se ha convertido en una de las fuentes más populares de todos los tiempos y está preinstalada en la mayoría de los dispositivos.

El nombre de Roman en Times New Roman es una referencia al estilo romano, la primera parte de la familia de fuentes Times New Roman que se diseñó. Tiene su origen en la imprenta italiana de finales del siglo XV y principios del XVI, el diseño no tiene conexión con Roma ni con los romanos.

3. Helvética

Helvetica o Neue Haas Grotesk es una fuente ampliamente utilizada de la familia de fuentes Sans-serif. Desarrollado en 1957 por el diseñador suizo de fuentes Max Miedinger con aportes de Eduard Hoffmann. Está diseñado en un diseño neogrotesco que presenta una alta altura de x, terminación de trazos en líneas horizontales o verticales y un espaciado estrecho muy inusual entre las letras, todo esto se combina para darle una apariencia sólida y densa. Diseñado originalmente para su uso como una fuente neutra que tenía una gran claridad, sin un significado intrínseco en la forma, y ​​que podía usarse en una variedad de letreros y se llamó Neue Haas Grotesk (New Haas Grotesque), Linotype la autorizó rápidamente y la rebautizó como Helvetica en 1960. , latín para suizo. Los diseñadores adoran la fuente por su neutralidad y la prefieren muchas marcas famosas como Jeep, Kawasaki, Motorola y BMW.

4. Mensajero

La fuente Courier es una fuente que pertenece a la familia de fuentes Serif. Diseñado por Howard “Bud” Kettler originalmente para las máquinas de escribir de IBM, ha sido adaptado para su uso como fuente de computadora y casi todas las computadoras vienen con él. Debido a su composición tipográfica Monospace, en la década de 1990 encontró un uso renovado en la industria electrónica e informática donde las columnas de caracteres deben alinearse de manera consistente, por ejemplo, en la codificación donde es la fuente predeterminada para escribir o representar cualquier tipo de código.

De acuerdo con el estándar de la industria, todos los guiones debían escribirse en Courier de 12 puntos. El Departamento de Estado de EE. UU. la usó como fuente estándar para todos los documentos hasta enero de 2004. Con el uso cada vez mayor en las industrias digitales, Courier ha desarrollado variantes con características como signos de puntuación más grandes, distinciones más fuertes entre caracteres similares (como el número 0 / O mayúscula y número 1 / L minúscula), etc. para una mayor legibilidad de la pantalla.

5. Calibri

La fuente Calibri es miembro de la familia de fuentes Sans-serif diseñada por Lucas de Groot en 2002-2004. Fue lanzado públicamente en 2007, incluido con Microsoft Office 2007 y Windows Vista. A partir de Office 2007, reemplazó a Times New Roman como fuente predeterminada en MS Word y Arial como fuente predeterminada para MS Powerpoint, MS Excel, Microsoft Outlook y WordPad. Es parte de la colección de fuentes ClearType diseñada para trabajar con el sistema de representación de texto ClearType de Microsoft para hacer que el texto sea más claro para leer en pantallas de cristal líquido (LCD).

Herramientas de fuentes para verificar

Existe una serie de herramientas en línea que puede usar para probar las diferentes fuentes antes de usarlas en su sitio web. Si desea explorar los tipos de fuentes disponibles o tiene dificultades para elegir qué fuente usar, estas herramientas son de gran ayuda.

Par de fuentes

Font Pair es un sitio web de nicho que tiene muchos recursos relacionados con la tipografía. Hay varios libros electrónicos, guías, reseñas, videos y recomendaciones de complementos para fuentes. Tienen una sección dedicada a las fuentes más populares disponibles en Google y una comparación detallada de qué fuentes combinan mejor.

Wordmark.it

Wordmark.it le brinda una vista previa rápida de cómo se vería su texto con una fuente en particular o incluso con varias fuentes juntas. Simplemente ingrese el texto en la barra y listo, le mostrará cómo se ve con diferentes fuentes.

WhatTheFont

WhatTheFont es para enviar mensajes de texto lo que la búsqueda inversa de imágenes es para imágenes. Te ayuda a identificar una fuente que hayas visto. Simplemente cargue la imagen de la fuente y la comparará con su base de datos y le dará lo que cree que es la coincidencia más cercana. También puede dirigirse a sus foros activos para obtener ayuda en la identificación de fuentes o incluso consultas tipográficas generales.

También te puede interesar: 3 formas diferentes de agregar fuentes personalizadas al tema de tu sitio de WordPress.

¿Cómo agregar fuentes web seguras a mi sitio web?

Ahora que ha elegido una fuente web segura, es hora de aplicarla. Si tiene poca experiencia en programación, siga estos pasos para agregar una fuente web segura a su página web:

1. Abra su archivo header.php.

2. Copie el código fuente/estándar de la fuente. Por lo general, puede encontrar esto a través de Google.

3. Pegue el código en la parte superior de su archivo de encabezado.

4. Cargue su estilo.css, coloque el código de fuente para cambiar el texto de fuente de su elección.

Al final, su hoja de estilo debería verse así:

 Este artículo está escrito por Abhyank Srinet. Abhyank tiene una Maestría en Administración de ESCP Europe y tiene un título de ingeniería con especialización en Instrumentación y Control. Su interés en el panorama digital lo motivó a crear una startup en línea para consultoría de aplicaciones (MiM-Essay), enfocada en difundir información de calidad sobre maestrías de inicio de carrera.