Los estándares para la tipografía en la web han cambiado. Los diseñadores optan por una tipografía más grande y fácil de leer que es más transparente y consistente en todos los dispositivos. La tendencia hacia una tipografía web más grande comenzó con tratamientos de gran tamaño sobre el rollo, desde titulares hasta elementos de texto de encabezados de héroes más artísticos.
El tamaño del texto del cuerpo comenzó a aumentar simultáneamente en los dispositivos móviles para mejorar la legibilidad. Y a partir de ahí, la tendencia comenzó a llegar a casi todos los aspectos del tipo de web. Si no ha pensado recientemente sobre el tamaño de la copia en su sitio web, es hora de volver a visitar esa copia de 12 o 14 puntos / píxel. ¡El texto grande está en!
Titulares de gran tamaño
La implementación más obvia, y más fácil, de texto más grande es utilizar titulares de gran tamaño para exigir la atención del usuario.
Un título de gran tamaño funciona mejor cuando no hay muchas palabras largas o complicadas que considerar. Este es un tratamiento en la cara para que las letras reales sean fáciles de entender.
Consejos para el éxito:
- Se adhieren a un tipo de letra serif o sans serif que puede utilizar en otras partes del diseño. Las opciones de novedad o de script pueden complicarse rápidamente.
- Hágalo grande, incómodamente grande, y luego retroceda un poco para encontrar la armonía correcta en el diseño.
- Comience con un texto de al menos 80 puntos y amplíe para llenar la pantalla. Asegúrese de usar un tamaño relativo en el diseño final para que se adapte adecuadamente a todos los dispositivos. (La regla CSS adecuada es "tamaño de fuente", que utiliza una escala de porcentaje basada en un tamaño estándar que es 100 por ciento).
Haciendo el caso para una copia más grande del cuerpo
Si la copia del cuerpo en su sitio web no tiene al menos 16 puntos, es hora de repensar su situación de tipografía.
¿Esta regla? tiene raíces en el móvil, ya que el texto que es más pequeño que el de las entradas en realidad se ampliará en algunos dispositivos. (Esto puede ser molesto en términos de experiencia de usuario). La solución del diseño es crear niveles de tipografía que sean lo suficientemente grandes para leer y comprender con facilidad.
Además, el objetivo es que el texto en un dispositivo móvil se pueda leer cómodamente cuando se mantiene a una distancia natural (por lo general, aproximadamente la mitad de un brazo, similar a la lectura de un libro).
El texto más grande puede ser más fácil de leer a esta distancia y es más apropiado para el tamaño de la pantalla. Los usuarios no deberían tener que entrecerrar los ojos o acercar el dispositivo a su cara para entender razonablemente el texto.
Consejos para el éxito:
- Comience con un tamaño de copia de cuerpo de unos 16 puntos. Esto suele ser aceptable para dispositivos de escritorio y móviles.
- Use una fuente altamente legible con un ancho de trazo regular y líneas limpias para maximizar la legibilidad.
- Ajuste el tamaño hacia arriba o hacia abajo ligeramente para los tipos de letra que sean delgados (hacerlo más grande) o anchos (que sea más pequeño).
- Para páginas con mucho texto, considere aumentar el tamaño del texto del cuerpo para reducir la fatiga visual, como 18 puntos o incluso 20 puntos. (Como guía, Medium utiliza texto de 21 puntos y el sitio de Jeffrey Zeldman está en 24 puntos).
Aumentar la jerarquía general
Por lo tanto, tiene que hacer algo más que ajustar el tamaño del texto en una parte del diseño de su sitio web. Necesitas repensar toda la jerarquía tipográfica.
A medida que aumenta el tamaño del texto del cuerpo, querrá escalar el resto del tipo en consecuencia. De lo contrario, podría terminar con una escala tipográfica discordante en la que algunos tamaños de texto son difíciles de diferenciar entre sí.
Cuando se trata de aumentar el tamaño de la tipografía grande, como titulares o subtítulos, es un poco menos importante ajustar la escala tipográfica general. Incluso a medida que estos elementos se hagan más grandes, la distinción natural de los elementos del texto del cuerpo permanecerá (obviamente). Debería considerar aumentar el tamaño general del texto del cuerpo también si comienza a verse fuera de lugar o si el tamaño del tipo grande hace que el texto del cuerpo aparezca más pequeño de lo que realmente es. (Las ilusiones ópticas pueden arruinar una jerarquía de diseño).
Consejos para el éxito:
- Ajustar los tamaños del texto en proporción entre sí a lo largo del diseño.
- Preste atención a cómo el contraste de color y tamaño impacta la apariencia de los tamaños.
- Confía en tus ojos; Si el texto parece demasiado grande o pequeño, continúe haciendo ajustes hasta que se sienta bien.
No te olvides de ajustar el interlineado
Al realizar ajustes en los elementos de texto, no descuide el espacio entre líneas de tipo. El texto de mayor tamaño a menudo requiere un mayor espacio entre líneas.
Considere la posibilidad de crear reglas de espaciado de líneas basadas en un porcentaje del tamaño del texto en lugar de una altura fija. (De esta manera esos cambios se ajustarán automáticamente.)
Consejos para el éxito:
- Comience con 1,5 veces (150 por ciento) el tamaño del texto del cuerpo para el interlineado del mismo bloque al texto. Si se siente apretado, aumentar el espacio entre líneas.
- Los elementos de fondo y de texto con un contraste extremo a menudo necesitan un poco de espacio de línea adicional para una sensación más armoniosa. Agregue el interlineado para el texto blanco sobre un fondo negro, disminúyalo para los fondos grises de tono medio.
- Preste mucha atención a los ascendentes y descendientes del tipo de letra que elija y ajuste el interlineado en consecuencia.
Tamaños de texto están aumentando fuera de línea, también
Y mientras esta tendencia tipográfica está dirigida principalmente a proyectos de diseño web, los tamaños de los textos están aumentando en general. Desde correos electrónicos a materiales impresos, los diseñadores están utilizando las mismas pautas para proyectos digitales con diseños impresos de tamaños similares. (Puede equiparar un dispositivo móvil con una tarjeta postal).
Buen diseño es buen diseño.
Y muchos proyectos incluyen múltiples componentes en los que nos centramos en una experiencia de usuario común. Así que quieres que el diseño de un sitio web parezca similar al diseño de una postal relacionada.
La otra cosa en común es que tus ojos simplemente comienzan a acostumbrarse a ver texto en un tamaño determinado. Al igual que al trabajar con patrones de usuario, los patrones visuales facilitan la comprensión y la visualización de las cosas. El texto más grande no es una excepción.
Conclusión
¿Ha comenzado a notar un cambio en los tamaños que utiliza para la tipografía en varios proyectos de diseño? Personalmente, me sorprendió lo rápido que se me acercó. De hecho, me encuentro presionando por tipos de letra cada vez más grandes.
Así es como comienzan las tendencias y los cambios en los patrones de diseño comunes. Me encantaría escuchar tus experiencias con intentar el tipo más grande. ¿Fue bien recibido o recibiste un gran rechazo? Hazme saber en Twitter y etiqueta @designshack.