¿Este tipo hace que mi diseño se vea gordo?
Nada puede arruinar un diseño como la tipografía que no encaja. Ya sea que sea demasiado grande (o demasiado pequeño), el escalado de tipo incorrecto es un problema importante.
Es un problema para más diseños de lo que piensas. Demasiado comúnmente visita un sitio web donde el tipo se reproduce de forma hermosa en un navegador de escritorio, solo para volver a visitarlo más tarde desde un teléfono y le resulta difícil de leer. Pasa todo el tiempo.
El problema es que el tipo no fue realmente escalado para cada dispositivo. Es un problema totalmente evitable cuando se considera una escala tipográfica para proyectos.
¿Qué es una Escala Tipográfica?
Una escala tipográfica visual encapsula los tamaños, el espacio y las proporciones de los elementos de tipo relativos a otro en un proyecto. Esto incluye todo, desde el estilo de texto del cuerpo principal hasta titulares, subcabeceras, subtítulos y cualquier otro elemento de texto.
La escala ayuda a determinar el tamaño y la ubicación de los elementos de texto en relación entre sí. Para el diseño web, en particular, la escala de tipo visual a menudo corresponde a las etiquetas en su CSS (como h1, h2, h3, p, etc.).
Una escala tipo te ayuda a crear armonía y ritmo en el diseño. También lo mantiene alejado de los problemas de estilo porque los elementos de texto se corresponden con los elementos de CSS de modo que cada parte del diseño utiliza los mismos elementos y consistencia.
La escala debe basarse en el tamaño del texto del cuerpo. (Siempre configure un tipo de letra y tamaño para eso primero). Luego construye la escala alrededor de esta tipografía principal. ¿No estás seguro por dónde empezar? Google tiene un recomendación sólida :
- Use un tamaño de letra base de 16 píxeles CSS. Ajuste el tamaño según las propiedades de la fuente que se está utilizando.
- Use tamaños relativos al tamaño de la base para definir la escala tipográfica.
- El texto necesita espacio vertical entre los caracteres; la recomendación general es usar la altura de línea predeterminada del navegador de 1.2 em.
- Restrinja la cantidad de fuentes utilizadas y la escala tipográfica.
Crear armonía y ritmo
Una escala de tipo hace más que simplemente ayudar a los usuarios a moverse a través de la copia, crea armonía y ritmo para el flujo de texto. Esto es importante en cualquier dispositivo.
Entonces, ¿dónde empiezas?
UX Matters tiene algunas de las mejores investigaciones disponibles sobre mínimos tamaños de texto por dispositivo . Tenga en cuenta que estos son tamaños mínimos y, a medida que los tamaños de texto del cuerpo continúan aumentando (al igual que el espaciado entre líneas), debe considerar con mayor énfasis los tamaños de punto más grandes. Steven Hoober recomienda comenzar al menos un 40 por ciento más de los mínimos recomendados. Además, los estilos de contenido mejorado pueden llegar hasta un 80 por ciento por encima del mínimo, pero también debe tener cuidado con tipos excepcionalmente grandes.
| Tipo de dispositivo | Talla minima | 40% de recomendación (ajustado para un uso fácil) | 80% máximo (ajustado para un uso fácil) |
| Teléfono pequeño | 4 | 5,6 (6) | 7.2 (7.5) |
| Teléfono grande | 6 | 8,4 (8,5) | 10.8 (11) |
| Phablet | 7 | 9.8 (10) | 12,6 (13) |
| Tableta | 8 | 11.2 (11.5) | 14.4 (14.5) |
| Laptop / Escritorio | 10 | 14 (14) | 18 (18) |
Una vez que se establece el tamaño del texto del cuerpo, puede determinar cómo ajustar el tamaño de los elementos de texto de apoyo. Hay un arte fino para eso y la prueba de la vista a menudo es un buen lugar para comenzar.
Casi no existe un titular demasiado grande. Di lo que necesitas decir y tamaño para escalar las palabras en el espacio. Un titular de dos líneas se sentirá más grande que una línea, incluso si el texto tiene exactamente el mismo tamaño.
La manera más fácil de pensar en escalar para titulares y otros elementos de prueba más grandes es trabajar en porcentaje basado en el texto del cuerpo. Si bien cada diseñador tiene un punto de partida diferente, un 250 por ciento más grande que el texto del cuerpo es un buen estadio para el titular; 150 por ciento para h2, 75 por ciento para h3 y 50 por ciento para elementos tales como cotizaciones en bloque. (Esta no es una regla, solo es un punto de partida).
Estos son los motivos por los cuales los porcentajes, en lugar de los tamaños configurados, son importantes: una vez que establece el tamaño del cuerpo, los porcentajes ajustan los tamaños según corresponda, independientemente del tamaño de la pantalla. Cada elemento de tipo es relativo al tipo de cuerpo.
Directrices de carácter y espaciado
Hay algunas otras pautas que los diseñadores también consideran cuando se trata de escribir en la pantalla. Cuando se trata de espaciar, una de las reglas generales ha sido observar los caracteres por línea para garantizar la legibilidad.
- Dispositivos de escritorio y grandes: de 60 a 75 caracteres por línea
- Teléfonos y dispositivos pequeños: de 35 a 40 caracteres por línea
Tenga en cuenta que la legibilidad en pantallas más pequeñas se basa en tener menos caracteres (texto más grande).
La misma idea se aplica al espaciado también. Necesita más espacio entre líneas de texto cuando el tamaño de la pantalla está limitado para que sea más fácil para los usuarios leer y escanear contenido. Considere agregar un 25 por ciento más de espacio entre líneas en dispositivos más pequeños que para la tipografía de escritorio.
El tamaño y el espaciado adicionales ayudan a aliviar esa sensación tensa o crujiente que los usuarios pueden sentir cuando intentan leer en dispositivos más pequeños. Debido a que el lienzo es pequeño, el flujo del lector y la legibilidad es vital para mantener a los usuarios desplazándose.
Consejos para comenzar
Hay muchas maneras de crear una escala tipográfica y garantizar que el texto no haga que su diseño se vea gordo. La forma en que lo haga probablemente dependa de su nivel de comodidad con el código y el desarrollo además del diseño.
La mejor opción es usar un diseño receptivo con consultas de medios. Esta es la opción de diseñador y desarrollador que proporcionará el mayor nivel de control sobre las especificaciones de texto. (Para más, regrese a las recomendaciones de Google anteriores).
Otra ruta es diseñar diferentes versiones. Si bien este es un concepto bastante desactualizado, todavía hay algunos lugares que usan URL móviles y URL de escritorio para sus sitios web. No se recomienda en la mayoría de los casos, pero para algunos sitios web donde el diseño es radicalmente diferente o los usuarios experimentan cosas diferentes, puede ser una opción.
La opción más fácil es comenzar con un tema para su sitio web. Solo asegúrate de optar por una opción totalmente receptiva. Cuando utiliza un tema receptivo de alta calidad, la mayoría de las conjeturas se sacan de usted. Todo lo que realmente tiene que pensar es el tamaño del texto del cuerpo. Solo asegúrese de verificar todo para asegurarse de que los tamaños de los tipos de dispositivos cumplan con sus estándares.
3 herramientas para crear una escala tipo
Hay una serie de herramientas disponibles para ayudarlo a ver el impacto exacto de una escala de tipografía visual. Estas son algunas de las mejores y más fáciles de usar opciones.
- Tipo Escala : Ingrese el texto y juegue con opciones como el tamaño, la escala y la fuente en la pantalla; gradúe el CSS o edite el código directamente desde la herramienta;
- Escala modular : La báscula funciona como una regla para ayudar a determinar los tamaños para el tipo; luego descargue los resultados como un complemento Sass o JS o véalos en la pantalla;
- Calculadora de tipografía Golden Ratio : La herramienta optimiza el tamaño, la altura de la línea, el ancho y los caracteres por línea usando la proporción áurea
Conclusión
La escala tipográfica correcta mantendrá su diseño con una apariencia elegante y esbelta. Es la armonía adicional que los usuarios pueden no entender pero que contribuye a la legibilidad y usabilidad general.
Es probable que la báscula esté apagada si el diseño "simplemente no se ve bien". El tipo de tamaño incorrecto puede ser difícil de precisar, pero a menudo es un lugar para mirar cuando algo sobre un diseño está desequilibrado. Juega con algunas opciones diferentes de escala antes de decidirte por algo, y recuerda que la tendencia ahora es para un tipo que es un poco más grande que en el pasado.