El diseño web siempre ha tomado prestados principios y definiciones del mundo del diseño gráfico y de impresión. Esto es especialmente cierto cuando se trata de tipografía web y la forma en que obtenemos formularios de letras en nuestras páginas web. Estos paralelos no siempre son traducciones 1 a 1, pero ciertamente puedes ver dónde una disciplina ha influido en la otra. Esto es especialmente evidente cuando se considera la relación entre el término de tipografía tradicional "líder" y la propiedad CSS conocida como "altura de línea".
El propósito de liderar
Cuando las personas solían colocar manualmente letras de metal o de madera para crear la tipografía de una página impresa, se colocaban piezas delgadas de plomo entre líneas horizontales de texto para crear un espacio entre esas líneas. Si quisieras un espacio más grande, insertarías piezas más grandes de plomo. Así es como se acuñó el término "líder". Si buscase el término "líder" en un libro sobre diseño y principios tipográficos, se leería algo en el sentido de que "la distancia entre las líneas de base de líneas de tipo sucesivas".
Liderando en diseño web
En diseño digital, el término inicial se sigue utilizando para referirse al espaciado entre líneas de texto. Muchos programas utilizan este término exacto, aunque obviamente no se está utilizando el plomo real en esos programas. Este es un gran ejemplo de nuevas formas de diseño que toman ideas prestadas de las tradicionales, aunque la implementación exacta de ese principio ha cambiado.
Cuando se trata de diseño web, no hay ninguna propiedad CSS para "líder". En su lugar, la propiedad CSS que manejaría esta visualización visual de texto se llama altura de línea. Si desea que su texto tenga espacio adicional entre las líneas horizontales de texto, usaría esta propiedad. Por ejemplo, supongamos que desea aumentar la altura de línea para todos los párrafos dentro de la main p { línea de altura: 1.5;}
Ahora sería 1.5 veces la altura de línea normal, según el tamaño de fuente predeterminado de la página (que normalmente es de 16 px). Como se detalla anteriormente, la altura de línea es apropiada para espaciar las líneas de texto en párrafos u otros bloques de texto. Si hay demasiado poco espacio entre las líneas, el texto puede volverse confuso y difícil de leer para los espectadores de su sitio. De manera similar, si las líneas están demasiado separadas en la página, el flujo normal de lectura se interrumpirá y los lectores tendrán problemas con su texto por ese motivo. Esta es la razón por la que desea encontrar la cantidad adecuada de espaciado de altura de línea para usar. También puede probar su diseño con usuarios reales para obtener sus comentarios sobre la legibilidad de la página. No confunda la altura de la línea con el relleno o los márgenes que usaría para agregar espacios en blanco al diseño de su página, incluso debajo del encabezado o párrafos. Ese espacio no está adelantado, y por lo tanto no se maneja por la altura de la línea. Si desea agregar espacio debajo de ciertos elementos de texto, debe usar márgenes o relleno. Volviendo al ejemplo de CSS anterior que usamos, podríamos agregar esto: main p { línea de altura: 1.5; margen inferior: 24px;}
Esto todavía tendría la altura de 1,5 líneas entre las líneas de texto para los párrafos de nuestra página (los que están dentro de la main p { línea de altura: 1.5; parte inferior de relleno: 24px;} En casi todos los casos, esto mostraría lo mismo que el CSS anterior. Supongamos que desea agregar un espacio debajo de los elementos de la lista que estaban dentro de una lista con una clase de "servicios-menú", usaría márgenes o relleno para hacerlo, NO para la altura de la línea. Así que esto sería apropiado. .services-menu li {< parte inferior de relleno: 30px;} Solo usaría la altura de línea aquí si quisiera establecer el espaciado del texto dentro de los elementos de la lista, suponiendo que tuvieran tiradas largas de texto que pudieran correr en múltiples líneas para cada punto de viñeta. Cuándo usar la altura de la línea
Cuándo no usar la altura de la línea
