Una tipografía bien pensada y bien elegida es clave para lograr un sitio web estéticamente agradable y, lo más importante, fácil de leer. Pero, ¿sabe cómo hacer que el texto del sitio web sea claro y coherente con la identidad de su marca?

No te preocupes. He recopilado las 8 reglas tipográficas más cruciales que harán que todo el proceso de creación de la tipografía perfecta para su sitio web sea fácil y efectivo. Asegúrate de seguir todas las reglas y serás recompensado con un sistema de tipografía transparente que hará que tu proyecto luzca profesional y mejore su UX.

Lo más importante es que su tipografía debe reflejar la verdadera naturaleza de su industria. Por lo tanto, elegir la tipografía adecuada para un sitio web no puede ser una cuestión de azar. El hecho de que una fuente sea popular y te guste no significa que sea apropiada para tu marca. Preste atención a lo que comunica la fuente y si coincide con el estilo de su marca.

Preste atención a lo que comunica la fuente y si coincide con el estilo de su marca. Si tiene una tienda para niños, no utilizará fuentes comerciales simples y elegantes y viceversa. Siempre haga coincidir las fuentes con la comunicación de su marca para ser coherente con ella.

¡El tamaño de fuente en la página importa! Si eliges una fuente que no sea demasiado pequeña ni demasiado grande, harás que la lectura sea mucho más fácil para tus usuarios. Una unidad especial que usan los tipógrafos para describir las fuentes es "pt" o "punto".

El rango preferido de tamaños de fuente estándar para sitios web es entre 14 y 25 puntos. Se pueden reservar fuentes más grandes para encabezados: 20 puntos y más , y para texto sin formato, el mejor rango es 14-18 puntos.

Independientemente del tamaño de fuente que elija, asegúrese de que el tamaño de fuente:

a) hace que el texto sea legible: el tamaño de fuente de 12 puntos e inferior puede dificultar significativamente la legibilidad;

b) coincida con el tipo de letra ; por ejemplo, para su fuente de sistema Roboto, Google recomienda un mínimo de 16 pt. Por otro lado, San Francisco: la fuente utilizada, entre otros, en los dispositivos Apple, debe tener un tamaño de al menos 18 puntos;

c) refleja el propósito del sitio web : si la página no está dominada por el texto sino por el diseño, puede usar una fuente más pequeña. También en el caso de páginas interactivas que animen al usuario a hacer clic en cada paso, esta solución se puede permitir. Si, por el contrario, se trata de un sitio web donde predomina el texto y la tarea principal del usuario es leer (p. ej., área de blog, portal de información), es mejor elegir una fuente un poco más grande.

¿Ha decidido el tamaño de fuente de su cuerpo de texto pero no sabe cómo mantener el tamaño de los encabezados en proporción con el resto del contenido? Hay varias mejores prácticas para esto:

a) El encabezado H1 debe tener el 300% del tamaño de fuente utilizado en el cuerpo del texto. Por ejemplo, si su sitio web utiliza una fuente de 18 puntos para el cuerpo del texto, el tamaño óptimo para sus encabezados es de 54 puntos.

b) El encabezado H2 debe tener el 200% del tamaño de fuente del texto del cuerpo. En este caso, con un tamaño de fuente base de 18 puntos, el encabezado H2 ideal sería de 36 puntos.

⚡ Tipo BOWWE:

Para encabezados sucesivos, puede disminuir gradualmente el porcentaje; por ejemplo, para el encabezado H4, puede multiplicar el tamaño de fuente principal por 130-150%.

Al elegir el tamaño de fuente, debe responder la pregunta en qué dispositivos se mostrará el texto. El tamaño de la fuente se verá diferente en los monitores de las computadoras portátiles que en los dispositivos móviles. Si prefiere centrarse en la apariencia del sitio web en dispositivos móviles, recuerde estas dos reglas importantes:

a) En las pantallas de los teléfonos inteligentes, una fuente grande no se verá bien,

b) Los títulos no deben ocupar más de dos líneas.

Por lo tanto, al diseñar un sitio web móvil, vale la pena comprobar cómo se ve el texto y asegurarse de que la fuente sea demasiado grande.

⚡ Tipo BOWWE:

Al crear un sitio web en el constructor BOWWE , responde automáticamente. Esto significa que, en primer lugar, no necesita crear un sitio web separado adaptado a los dispositivos móviles. En segundo lugar, la edición del sitio web puede cambiar entre la vista previa de escritorio y móvil en unos segundos. Gracias a esto, puedes controlar muy fácilmente cómo se comporta la fuente que elijas en los dispositivos móviles.

Al diseñar sitios web, es mejor seguir el principio del minimalismo. El uso de más de dos tipos de fuentes en un proyecto puede alterar la estética del proyecto. La solución más segura es elegir dos tipos de fuente: encabezados y texto sin formato.

Sin embargo, también debe tener en cuenta el contraste. Si usa dos fuentes que son demasiado similares, no llamarán completamente la atención de los usuarios. Intente no elegir dos fuentes Sans Serif, sino una combinación de Serif y Sans Serif, lo que hace que su contenido se vea aún más atractivo.

Además, tenga en cuenta que no todas las fuentes pueden funcionar juntas. Hay pares de fuentes que se gustan más y algunas son incompatibles. ¡Vale la pena familiarizarse con ellos antes de tomar su decisión final!

⚡ Tipo BOWWE:

Si quiere estar 100% seguro de que elige la mejor combinación de fuentes , siempre puede inspirarse en la combinación de fuentes en fontpair.co .

Un aspecto igualmente importante de la tipografía como la elección de la fuente es el diseño y la estructura de todo el contenido de la página. No importa si se trata de una breve descripción de su negocio o de un extenso artículo en la sección del blog: la estructura de cada tipo de contenido impacta dramáticamente en la percepción que los usuarios tienen de su sitio web. ¿Cuáles son las reglas tipográficas para una mejor legibilidad?

mantener suficiente altura de línea (o interlineado) y el espacio entre las líneas. Una distancia demasiado corta hará que las líneas de texto prácticamente se superpongan. Por otro lado, un lector demasiado alto será "explotado". Así que es mejor encontrar una proporción áurea.

Se sabe desde hace mucho tiempo que los fragmentos de texto cortos se leen mucho mejor. Las líneas o párrafos demasiado largos pueden cansar la vista y perturbar el ritmo de lectura. La longitud de la línea debe estar entre 50 y 75 caracteres para no agotar al usuario. Lo mismo se aplica a los párrafos: hacen que los textos más largos sean más fáciles de leer.

En tipografía, la alineación es la posición del texto en relación con un margen, el borde de una página u otro punto de referencia.

⚡ Tipo BOWWE:

Aunque parece conveniente alinear todos los bordes del texto, no recomendamos que al final justifiques el contenido de la página. Los lectores justificados en Internet simplemente no se ven bien y, contrariamente a las apariencias, interfieren con la legibilidad. Cuando se alinea con el borde izquierdo, puede mover las palabras que no se ajustan a la línea siguiente manteniendo el mismo espacio. Esto es más natural a la vista y da el ritmo de lectura correcto.

El color de la fuente es un elemento de la tipografía muy relacionado con la identidad visual de tu marca en Internet. Sin embargo, al igual que con la combinación de fuentes, también debe tener cuidado al elegir sus colores. Estos son los estándares más esenciales para el color de la fuente:

Ya sabes que es mejor seguir el minimalismo en la tipografía. Lo mismo ocurre con los colores. Trate de no usar más de tres colores en el texto porque más puede causar caos en el sitio web y hacer que se vea infantil.

El texto debe tener un contraste adecuado con el fondo. Por supuesto, la combinación más segura es el color de fuente negro sobre un fondo blanco o gris claro. Es la combinación de colores más natural y no cansa la vista del usuario durante la lectura.

Recuerda que algunos colores, como el rojo y el verde, no combinan. Romper los esquemas de color en el caso de las fuentes no suele funcionar.

⚡ Tipo BOWWE:

Para seleccionar el color de la fuente de manera más rápida y eficiente, puede usar la Herramienta de color de material.io . Gracias a esto, podrás ver si el color de fuente seleccionado encajará bien, por ejemplo, con el color de fondo de tu sitio web.

Con una jerarquía de importancia en su texto, puede enfatizar que una palabra es más importante que otra. Por lo tanto, se deben resaltar las palabras más críticas en su sitio web. Puedes hacerlas más grandes, colorearlas o usar negritas o cursivas.

⚡ Tipo BOWWE:

Destacar más palabras esenciales o fragmentos de texto es muy importante en el caso de los materiales del blog. Tal procedimiento los hace más legibles y fáciles de recordar. También vale la pena usarlas en negrita para las palabras clave necesarias para el alto posicionamiento del sitio web en los resultados de búsqueda.

El escalado de fuentes es el proceso de aumentar o disminuir el tamaño del texto en un sitio web.

Es posible que desee crear una escala de fuente por varias razones. Una razón es asegurarse de que todo el texto de su página tenga el mismo tamaño. Esto puede ser importante para la usabilidad, principalmente si usa texto para transmitir información importante a sus visitantes. También puede hacer que su página se vea más uniforme y profesional.

Otra razón para usar una escala de fuentes es hacer que el texto sea más fácil de leer. Puede encontrar que algunas fuentes son demasiado pequeñas o demasiado grandes cuando las ve en su tamaño predeterminado. Al escalar el texto, puede hacerlo más cómodo de leer.

Hay algunas cosas que debe recordar al crear una escala de fuente.

a) Asegúrese de que todo el texto de su página tenga el mismo tamaño. Esto incluye tanto el cuerpo del texto como cualquier encabezado u otros elementos de texto.

b) Elija un tamaño de fuente que sea cómodo y fácil de leer. Es posible que deba experimentar con diferentes tamaños de fuente para encontrar el adecuado para usted. Algunas fuentes pueden verse bien en un tamaño grande, pero se vuelven difíciles de leer cuando se reducen.

⚡ Tipo BOWWE:

Hay muchas herramientas gratuitas en línea con las que puede crear fácilmente una escala de fuente. Uno de ellos es type-scale.com .

Encuentre los mejores diseños de sitios web con ejemplos de tipografía emocionante. En sitios web como Dribbble puedes encontrar mucha inspiración. También puedes usar plataformas como Pinterest que te permiten crear los llamados tableros donde puedes recopilar cualquier cosa que te inspire y compartirla con tus amigos o compañeros de trabajo.

También vale la pena investigar entre sitios web similares al tuyo o al de tu competencia. ¡Entonces aprenderá cómo otros implementan los mejores principios tipográficos y cómo puede hacerlo usted también!

Recuerde que la tipografía es clave para el éxito de cualquier diseño de sitio web exitoso. Siguiendo los principios de la tipografía , puede estar seguro de que el texto no solo será legible sino que, sobre todo, creará el estado de ánimo adecuado y reflejará fielmente el estilo de su marca.

Siguiendo las mejores prácticas de buena tipografía que se encuentran en este artículo, puede mejorar rápidamente la apariencia de su sitio web y, lo que es más importante, la experiencia del usuario.

Lea también: