Líder: el espacio es tan importante como las palabras
Un componente clave para cualquier diseño de sitio web es el tipo. La selección de fuentes, tamaños y colores puede ser una gran parte de cómo perfila su sitio. Tan importante como las formas mismas de las letras, es el espacio alrededor de esas letras y particularmente el encabezado utilizado en los bloques de texto.
Cuanto más tipo uses, más importante se convertirá en líder. Detrás de la fuente y el tamaño, es uno de los factores clave a tener en cuenta cuando se analiza qué tan legible es el tipo.
Las especificaciones principales que utiliza para un logotipo o pantalla de presentación pueden ser muy diferentes a las principales utilizadas para el tipo en una publicación de blog.
Otros elementos de diseño también tienen un impacto sobre cómo debe usar Leading. El tamaño del tipo, el ancho de las columnas e incluso el color de fondo pueden ayudarlo a tomar decisiones inteligentes.
La forma en que usas el liderazgo más notablemente entra en juego para grandes bloques de texto.
¿Qué está llevando?
Leading - pronunciado ledding - es el espacio entre líneas de tipo. Liderar se midió tradicionalmente en puntos (al igual que las fuentes). El término se originó con las prensas de letras de estilo antiguo, cuando el tipo se estableció a mano. Las tiras de plomo se colocaron entre las líneas de tipo para mantener todo en perfecta alineación.
Desde el advenimiento de la publicación digital, la guía se ha confundido frecuentemente con la altura de la línea. La altura de la línea es todo el espacio de una línea de base, el plano imaginario en el que se encuentran las letras como 'a', 'x' y 'n', para el siguiente. Liderar, por el contrario, es el espacio desde la parte inferior de una letra en una línea, hasta la parte superior de una letra en la siguiente: literalmente es la altura de la línea menos la altura del texto.
En la tipografía digital, en particular la tipografía web, los términos "leading" y "line height" se usan indistintamente. En CSS, por ejemplo, no hay un valor inicial, utilizamos line-height en su lugar.
Mientras que el liderazgo fue alguna vez un valor físico medible, ahora se usa más comúnmente como concepto: la impresión visual del espacio entre dos líneas.
La forma en que se usa el encabezado en un bloque de texto puede afectar la legibilidad. Hay una línea muy fina entre el tipo que está muy cerca el uno del otro y muy separado. Cualquier extremo puede ser difícil para los ojos de un lector. Liderar es todo sobre la alteración de la densidad del tipo. La clave es entender qué mensaje pretende transmitir para su tipo y, en consecuencia, hacer coincidir el líder.
No hay una solución perfecta
No existe una fórmula mágica perfecta para determinar cuánto líder necesitarás. Se trata de una combinación de factores: tamaño de letra, color, efecto deseado y, lo que es más importante, legibilidad.
Como regla general, el punto de inicio para liderar suele ser el mismo que el tamaño de punto de la fuente que está utilizando. Algunos programas, en particular los navegadores web, lo llevan un poco más allá y establecen el valor por defecto un poco más alto que el tamaño del punto, comúnmente utilizando un valor predeterminado del 120 por ciento. Entonces, los bloques que incluyen texto de 10 puntos tendrían una ventaja de 12 puntos.
Esta filosofía funciona muy bien para grandes bloques de texto, como publicaciones de blog, que usan tipos de letra comunes sin ascendentes, descendentes o ligaduras extravagantes sobre fondos pálidos de color neutro (piense en tipo negro en blanco o beige). Mantiene la sensación de que todas las líneas de texto van juntas al tiempo que agrega el espacio suficiente para que resulte fácil para los ojos.
Los bloques de texto son más fáciles de leer cuando el avance es más ancho que el espaciado entre palabras. Esta proporción ayudará al ojo a moverse a través de la página y luego hacia abajo, siguiendo el flujo natural de espaciado de oscuro a claro.
Esta altura de línea "normal" también se sentirá apropiada para cosas que requieren mucha lectura. Es el estándar utilizado por muchos sitios web y publicaciones impresas.
Mantenlo firme
El avance tenso o negativo ocurre cuando las líneas de tipo están más cerca que el tamaño del punto del tipo. Por ejemplo, si su tipo tiene un tamaño de 14 puntos, cualquier puntaje inferior a 14 puntos se considerará ajustado, incluso si no aparece muy cerca de la pantalla.
Una conducción cerrada puede crear una sensación de restricción. También se puede usar para crear caos. Por otro lado, se puede usar una guía más ajustada como un método para juntar bits de tipo o para crear un sentido distintivo de organización. Durante muchos años en medios impresos y en línea, las organizaciones de noticias han utilizado algunas de las especificaciones líderes más estrictas para el tipo de cuerpo. En forma impresa, esto fue para conservar espacio; en línea es para mantener el sentido de credibilidad y el aspecto asociado con las organizaciones y sus socios de impresión.
Piense en las mayúsculas y minúsculas que se encuentran arriba y debajo de la altura x al configurar las especificaciones de altura de línea. Cuando trabaje con mayúsculas no hay ascendentes o descendentes, por lo que puede ser necesario ajustar el espaciado entre líneas, como la técnica utilizada por Regenerate Music Co. Lo mismo es cierto para las fuentes que tienen ascendentes y descendentes más cortos.
El tipo usado en tamaños más grandes, como titulares o logotipos, a veces también puede beneficiarse de un mejor agarre.
Aflojar
La ventaja suelta, o positiva, es agregar espaciado para que la ventaja sea mayor que el tamaño de punto utilizado para el tipo. Por ejemplo, si su tipo tiene un tamaño de 14 puntos, cualquier espacio de 15 puntos o más se considerará suelto. Con algunos tipos de letra, el espaciado puede no parecer suelto en la pantalla aunque esté clasificado de esa manera.
La conducción suelta puede hacer que una página se sienta ligera y aireada. Es un truco comprobado por el tiempo para que los diseñadores agreguen protagonismo cuando el tipo se siente demasiado grueso o pesado en la página. Liderar que es demasiado flojo, aunque puede ser difícil de leer y seguir si se usa mucho texto; es mejor reservarlo para algunas palabras.
La mayoría de los diseñadores tienden a utilizar un estilo más flexible para el tipo de cuerpo principal en los blogs y para otros grandes bloques de texto. La punta suelta, pero no demasiado suelta, puede ser fácil de leer y seguir. Puede hacer que el texto más pequeño parezca algo más grande de lo que es y ayuda a equilibrar líneas de texto extremadamente largas. Tenga en cuenta el uso de leading en el blog A List Apart, el tipo de letra más grande para el cuerpo utiliza una especificación mientras que el tipo más pequeño en la barra lateral derecha es mucho más flexible, facilitando el seguimiento del tipo más pequeño y equilibrándolo con los demás elementos de la página .
Muchos diseñadores también optan por una conducción más flexible al usar tipos de letra sans serif. Puede ser una opción especialmente buena cuando se trabaja con fuentes con florituras o ligaduras exageradas. El espacio extra permite que las letras respiren sin superponerse.
La ventaja suelta también es una consideración importante si planea usar muchos tipos de letras en negrita o con mucho peso. El blog Bloggess utiliza una combinación de color, negrita y mayúsculas en todo el sitio, lo que lo convierte en una herramienta de legibilidad necesaria. En este caso, una guía suelta también ayuda a llamar la atención sobre las partes importantes del texto, que son en color y en negrita.
Colores de fondo y líder
El color y el contraste son especialmente importantes al elegir una altura de línea.
En fondos oscuros, es posible que desee utilizar un poco más de ventaja de lo que podría en un fondo más claro para ayudar a aliviar una sensación de masa. Los colores oscuros pueden aumentar el peso de su diseño, al igual que el de la punta, pero al elegir usar solo uno u otro puede crear más equilibrio.
Lo mismo es cierto cuando se usa el tipo de un color. Los colores, que no sean grises negros y oscuros, pueden agregar diferentes cantidades de peso a su diseño. Dependiendo del color de fondo, algunos textos incluso pueden tener la apariencia de sangrado en el fondo, esto sucede para algunas personas, especialmente cuando se leen letras rojas sobre un fondo blanco. La adición de un líder puede ayudar a que estos tipos de texto sean más legibles.
Cambiando anchos y liderando
El diseño receptivo hace que la comprensión como líder (y el tipo en general) sea aún más importante.
Con distintas resoluciones de pantalla y formas, las especificaciones de tipo deben ajustarse en consecuencia para garantizar que el sitio siga siendo legible. A medida que el texto se contrae (o crece) en la pantalla, la guía debe ajustarse en consecuencia.
Recuerde tener en cuenta las proporciones de altura de la línea al hacer estos ajustes. Porque el tipo será más pequeño para dispositivos móviles y otros dispositivos de pantalla pequeña. Considere aumentar la altura de la línea en un 20 por ciento con respecto a lo que utilizó para el diseño a escala completa. El aumento de la ventaja debería ayudar a la legibilidad cuando se combina con un tipo más pequeño.
Por lo tanto, cuando determine las principales especificaciones para su sitio, necesitará varios conjuntos de umbrales: uno para su diseño básico de sitio web, uno para dispositivos medianos como el iPad y otras tabletas, y uno para teléfonos móviles. Cada uno puede tener un conjunto diferente de proporciones utilizado para el texto a la altura de la línea.
Conclusión
Ahora que está armado con una variedad de consejos y herramientas líderes, ¿dónde comienza?
No hay lista de verificación. Su mejor opción es echar un vistazo al tipo y ver cómo se siente (use la buena prueba de la vista a la antigua). Déjalo reposar por un tiempo y vuelve a él nuevamente más tarde. ¿Todavía sientes lo mismo por el texto? ¿La sensación que obtienes coincide con la sensación que tienes en mente para el diseño de tu sitio?
Tenga en cuenta que esto es más efectivo cuando el bloque de texto contiene una copia real en lugar de un texto de marcador de posición. Desea obtener una vista realista y las opciones de marcador de posición a veces contienen números impares de letras que no se usan con tanta frecuencia en una copia real.
Juega con ello. Muestre su diseño de texto a otra persona para obtener opiniones adicionales. Pregúnteles cómo se sienten al respecto.
También asegúrese de emparejar su bloque de texto con el resto de los elementos en el diseño. Este puede no ser el primer paso, pero a veces ponerlo todo junto puede crear efectos involuntarios. Asegúrese de pasar la prueba de la vista nuevamente.