Guía definitiva de fuentes HTML y cómo usarlas bien

Si hay algo que puede hacer o deshacer el diseño de un sitio web, son las fuentes HTML. Elegir la fuente correcta es fundamental para el éxito, y no es solo una elección estética porque elegir una que sea difícil de leer puede ahuyentar a los visitantes.

Como tal, la fuente debe ser fácil de preparar, tener el tamaño adecuado y ser de un color que no se mezcle con el fondo. Si bien esto puede sonar como lo básico, muchos sitios web todavía no lo hacen bien, y es probable que te hayas topado con uno o dos sitios web que son difíciles de leer.

Hoy, cubriré todo lo que necesita saber sobre las fuentes HTML en WordPress.

¿Qué son las fuentes HTML?

Una fuente HTML, o fuente web, es el estilo de texto que se muestra en los sitios web, que está escrito en CSS. En la mayoría de los casos, la plataforma en la que cree su sitio web solo tendrá una selección limitada de fuentes para elegir, pero en realidad, hay cientos disponibles.

Sin embargo, usarlos viene con una compensación bastante grande. Es posible que no se almacenen en los servidores con los que se comunica.

O, en otras palabras, su página puede tardar más en cargarse si está utilizando una fuente inusual porque el servidor y los navegadores web deben ubicar la fuente que está utilizando y luego instalarla antes de que la página pueda cargarse.

Esta es la razón por la cual la mayoría de los sitios web usan una fuente muy similar.

Otro aspecto de las fuentes HTML es su capacidad para adaptarse a diferentes tamaños de pantalla. O en otras palabras, capacidad de respuesta.

También es importante mencionar que cada fuente es personalizable en cuanto a su tamaño y el color que elijas. También hay otras personalizaciones estándar como negrita y cursiva que puede aplicar. Estas opciones están disponibles para casi todas las fuentes.

¿Cómo cambio las fuentes en WordPress?

Las fuentes que tiene a su disposición dependen del tema que esté utilizando. Cada tema normalmente ofrecerá varias fuentes estándar entre las que puede elegir. Dicho esto, como la mayoría de las cosas en WordPress, puede agregar más con complementos.

Echemos un vistazo a cómo elegir una fuente en WordPress.

Método 1: Personalizador de temas

Antes de WordPress 5.9 , prácticamente todos los temas dentro de WordPress le permitían cambiar la fuente a través del personalizador de temas. Esto le permite cambiar la fuente en cualquier área de su sitio web. Y es muy fácil de hacer.

El único problema es que algunos temas no tienen las mismas opciones disponibles. Por lo tanto, si no ve una opción de tipografía, vaya al método 2.

En el panel de administración de WordPress, haga clic en Apariencia y seleccione la opción Personalizar.

personalizar

Como dije antes, esto es diferente para cada tema. A veces, la opción de tipografía aparecerá en las opciones de nivel superior. Otras veces se entierra en otro lugar.

En mi caso, estoy usando el tema Astra. Primero necesito hacer clic en Global antes de poder seleccionar la opción de tipografía.

Tipografía

Las opciones disponibles dependen del tema, pero normalmente tendrá opciones para cambiar el espaciado, los márgenes, el tamaño de fuente y más. Puede usar el selector de fuente para elegir entre los valores predeterminados que ofrece su tema. Algunos ofrecen más que otros.

Seleccionar fuente

Puede ver cómo se ve la fuente en las áreas que cambia. A veces son opciones globales, y otras veces son para secciones específicas.

Método 2: Código

No todos los temas ofrecen tipografía como opción; en su lugar, debe codificar las fuentes en la hoja de estilo. La buena noticia es que esto suena mucho más difícil de lo que realmente es.

Vaya al backend de su sitio web y localice la hoja de estilo CSS de su tema. Para usar una fuente en todo su sitio web, agregue la siguiente línea de código en la parte superior de la hoja:

* {font-family:”Nombre de la fuente”}

Debe reemplazar el «nombre de la fuente» con el nombre real de la fuente (como Arial). Guarde los cambios y esa es su nueva fuente. La fuente debe ser una fuente HTML estándar; de lo contrario, debe descargar la fuente para usarla.

En esos casos, a veces puede incrustar una línea de código en su área de encabezado. Un gran ejemplo de esto son las fuentes de Google.

Método 3: Editor del sitio (WordPress 5.9)

El Editor del sitio es una nueva incorporación a WordPress a partir de la última actualización 5.9. No está disponible en la mayoría de los temas, y los que están todavía están en versión beta. Sin embargo, en el futuro, esto reemplazará lenta pero seguramente al personalizador de temas.

En los próximos meses, los temas se lanzarán exclusivamente con este editor y los temas existentes lo agregarán como reemplazo o junto con el personalizador de temas del método 1.

TL; DR: El editor del sitio está aquí para quedarse y le permite realizar cambios en todo su sitio a la vez. Y sí, esto incluye opciones de tipografía.

Haga clic en Apariencia y seleccione la opción Editor.

Editor

Lo primero que debería ver es la opción Tipografía en el lado derecho. Haz click en eso.

Tipografía

Luego se le pedirá que elija entre Texto y Enlaces. Los enlaces se refieren a los hipervínculos que crea, mientras que el texto se refiere a todo lo demás. Seleccione la opción Texto.

Elegir texto

Use el cuadro desplegable Familia de fuentes para seleccionar qué fuente usar. Al igual que antes, las opciones a su disposición dependen del tema.

Elegir fuente

Y eso es. Este editor seguramente se ampliará en futuras actualizaciones, por lo que definitivamente habrá más opciones para aprovechar en el futuro.

¿Qué pasa con los complementos?

WordPress tiene una gran selección de complementos que puede usar para agregar fuentes personalizadas, pero las fuentes personalizadas no se refieren a las fuentes HTML estándar. Estas son fuentes únicas a las que puede acceder de forma gratuita.

Ahora, esto puede sonar atractivo, pero en su mayor parte, hay un gran problema al usar estas fuentes. Ralentizan tu sitio web.

Mencioné esto anteriormente, pero para que se cargue una página, el navegador web que usa el visitante debe descargar esa fuente del servidor en el que está almacenada. Este es un paso adicional y cuantas más fuentes personalizadas use, más tiempo llevará.

Esta es una gran razón por la cual las fuentes HTML son ampliamente utilizadas. Son estándar y se pueden encontrar en cualquier lugar. Y también es por eso que la mayoría de los sitios se deciden por una sola fuente. Cuanto más agregue, más tardará en cargar.

La buena noticia es que Google ha estado trabajando para expandir la selección de fuentes que tiene disponible con Google Fonts.

¿Qué son las fuentes de Google?

Google Fonts son fuentes personalizadas disponibles directamente de Google. Y ofrecen más de 1000 fuentes para elegir. Lo que es más importante, evitan los problemas con los que se encuentran las fuentes personalizadas porque se almacenan directamente en los servidores de Google.

Luego entrega la fuente a todos los usuarios de la manera más óptima posible. El resultado final es que su sitio web se cargará más rápido que con un archivo de terceros.

Dado que Google Fonts no es el foco de esta guía, lo dejaré así, pero si está interesado, ya tenemos una guía sobre cómo alojarlas localmente en WordPress .

Consejos para hacer que su fuente HTML sea legible

Uno de los mayores problemas que enfrentan los principiantes es la legibilidad. La mitad de las veces, ni siquiera se dan cuenta de que es un problema. Si los visitantes no pueden leer su contenido, no volverán por más. Y será menos probable que lo compartan.

Echemos un vistazo a las principales consideraciones que todos los sitios web deben tener al seleccionar su fuente.

1. No uses un estilo cursivo

Hay un montón de fuentes entre las que puede elegir, y existen muchas que usan cursiva como estilo detrás de ellas. Si bien puede ser una buena opción para algunos sitios web, como los que se centran en la historia, no es la mejor opción para la accesibilidad.

Primero, es importante abordar el principal defecto de esta elección de diseño, mucha gente no puede leer cursiva.

De hecho, en Estados Unidos, muchas escuelas han eliminado las clases en cursiva, por lo que ese grupo solo crecerá en tamaño. Y lo más probable es que no solo los estadounidenses visiten su sitio web.

Las personas que aprenden inglés como segundo idioma también tienen dificultades para leer cursiva.

Puede pensar que es elegante, pero puedo asegurarle que alejará a muchos del contenido.

2. Elija el color correcto

Uno de los mayores errores que cometen los principiantes es cambiar el color de la fuente. Esto puede hacer que el texto sea muy difícil de ver para los visitantes habituales e imposible para las personas con discapacidad visual.

En particular, debe tener en cuenta que existe el daltonismo. Solo en Estados Unidos, más de 12 millones de personas tienen algún tipo de daltonismo .

Sin embargo, aquí no solo debe preocuparse por el texto, sino también por el color de fondo. Por ejemplo, el texto negro es una excelente opción para la mayoría de los sitios, pero no sobre un fondo negro o de color oscuro. En cambio, el texto blanco funciona mejor.

El color es fácilmente uno de los factores más importantes que hacen que el contenido web sea difícil de leer.

3. No hagas el texto demasiado pequeño

Ahora, sé lo que estás pensando, las personas pueden usar la función de zoom para hacer que el texto sea legible, ¿verdad? Si bien esto es muy cierto, ¿cuántas personas realmente se tomarán el tiempo para ajustar los niveles de zoom? ¿Cuántas personas realmente saben cómo hacerlo?

La verdad es que si alguien encuentra el texto demasiado pequeño, simplemente se va a ir.

El tamaño de texto recomendado para usar en un blog es entre 16 y 20 px. Es importante no solo considerar a los usuarios de escritorio, ya que los usuarios de dispositivos móviles son mucho más susceptibles a los textos pequeños. Nuevamente, incluso si es fácil acercar la imagen, la mayoría no sabe o no sabe que existe.

El tamaño adecuado del texto es fundamental para el éxito.

Preguntas más frecuentes

¿Qué tamaño tiene la familia de fuentes HTML?

Si bien hay muchas fuentes para elegir, la lista real de familias de fuentes HTML solo consta de cinco miembros:

  1. Serif
  2. sans-serif
  3. Cursivo
  4. Fantasía
  5. monoespaciado

Las familias denotan un estilo específico que siguen todas las fuentes, al menos en su mayor parte. Hay algunos valores atípicos, pero puede esperar que la familia cursiva produzca fuentes que parezcan cursivas.

Dentro de cada familia de fuentes, hay cientos de fuentes para elegir y la lista crece cada año. Sin embargo, la mayoría no son seguros para la web.

¿Qué son las fuentes seguras para la web?

Las fuentes seguras para la web son las fuentes más utilizadas en Internet. Son seguros para la web porque todos los dispositivos y navegadores están acostumbrados a usarlos.

El número total de fuentes seguras para la web es difícil de determinar, pero hay unas 20 o más. La lista está creciendo debido a que más sitios web optan por fuentes con diferentes estilos.

Como resultado, más navegadores web admitirán de forma nativa las fuentes más populares, de ahí la creciente lista.

Estas son algunas de las fuentes más utilizadas en Internet y las familias de las que provienen:

  • Arial (sans-serif)
  • Times New Roman (serif)
  • Verdana (sans-serif)
  • Tahoma (sans serif)
  • Trebuchet MS (sans serif)
  • Impacto (sans-serif)
  • Didot (serif)
  • Georgia (serif)
  • Máquina de escribir americana (serif)

¿Es un tipo de letra una fuente?

Por definición, un tipo de letra son las letras, los números y los caracteres que comparten el mismo diseño. Mientras que la fuente es el estilo específico que utilizará el tipo de letra con un ancho, tamaño y peso específicos.

Eso todavía puede ser confuso, así que daré un ejemplo. Considere Times New Roman; es un tipo de letra por definición. Sin embargo, una vez que le asigna un tamaño específico, digamos 20 px, y lo pone en negrita, se convierte en una fuente.

Los dos son muy similares y, a menudo, se usan indistintamente, pero en realidad no son lo mismo.

¿La negrita es una fuente?

Es bastante común usar negrita , cursiva o negrita cursiva para ayudar a que las palabras clave o frases se destaquen. Sin embargo, Bold no es en realidad una fuente.

En cambio, es un modificador de la fuente en sí. Puede ayudar dramáticamente a que su contenido sea más legible, especialmente a medida que más usuarios comienzan a hojear las páginas para encontrar una frase o término específico. Y en este sentido, es muy eficaz.

Sin embargo, no es un sustituto de un encabezado real.

¿Cuál es la diferencia entre una fuente web y una fuente de escritorio?

Se instala una fuente de escritorio en su computadora con la intención de que se use dentro de una aplicación específica. Por ejemplo, imagine instalar una fuente para usar en Microsoft Word o en Photoshop.

Una fuente web está hecha específicamente para sitios web y utiliza CSS para mostrarse en las páginas web. Muchas fuentes pueden existir tanto como fuente web como de escritorio, como Times New Roman o Arial, pero en realidad son muy diferentes entre sí desde la perspectiva del código.

Por lo tanto, la línea entre ellos se ha vuelto borrosa con el tiempo.

¿Debo usar la etiqueta de fuente HTML?

No mencioné la etiqueta de fuente HTML porque el editor clásico está muy por detrás de nosotros. Sin embargo, si todavía lo está usando, puede usar el editor HTML para manipular la fuente. Sin embargo, esto no es necesario ya que existe el editor visual.

Para aquellos curiosos, la etiqueta de fuente es «<fuente>» y puede usarla para manipular la fuente en una publicación o página. Todavía se usa hoy en día, pero ese número está disminuyendo.

Las fuentes HTML que elija realmente importan

No se puede negar que para la mayoría de los sitios web, la mayor parte del contenido de su sitio web estará en forma de texto. O en otras palabras, utiliza una fuente.

Por lo tanto, la fuente que elija puede hacer o deshacer su sitio web. Y no es sólo el estilo de la misma tampoco. Debe asegurarse de que tenga el tamaño adecuado, que esté coloreado de una manera que lo haga visible y que coincida con el ambiente de su sitio web.

Muchos principiantes simplemente eligen una fuente genérica como Arial, que en realidad es una opción inteligente ya que es la más popular. Pero ser selectivo al respecto puede mejorar drásticamente la experiencia que ofrece a los visitantes.

¿Qué fuentes HTML utiliza en su sitio web? ¿Utiliza una fuente segura para la web?