Aprender sobre dirixir o deseño web

O deseño web sempre tomou prestados directrices e definicións do mundo do deseño gráfico e impreso. Isto é especialmente verdadeiro no que se refire á tipografía web e ao xeito en que temos cartaformas nas nosas páxinas web. Estes paralelos non sempre son de 1 a 1 traducións, pero seguramente podes ver onde unha disciplina influenciou a outra. Isto é especialmente evidente cando se considera a relación entre o termo tipográfico tradicional "líder" ea propiedade CSS coñecida como "altura da liña".

O propósito de conducir

Cando a xente acostumaba manexar manualmente cartas de metal ou de madeira para crear a tipografía dunha páxina impresa, colocáronse pezas finas de chumbo entre as liñas horizontais de texto para crear espazos entre esas liñas. Se quería un espazo maior, inseriríalle pezas maiores de chumbo. Así foi como se acuñou o término "líder". Se mirou o termo "líder" nun libro sobre o deseño tipográfico e os directores, lería algo no sentido de: "a distancia entre as liñas de base de liñas sucesivas de tipo".

Liderando en Deseño Web

No deseño dixital, o termo principal aínda se usa para referirse ao espazamento entre liñas de texto. Moitos programas usan este termo exacto, aínda que a obrigación real non está a ser utilizada neses programas. Isto é un gran exemplo de novas formas de deseño, tomando ideas de formas tradicionais, aínda que a implantación exacta deste principio cambiou.

Cando se trata de deseño web, non hai propiedade CSS para "liderar". En cambio, a propiedade CSS que manexaría esta visualización de texto chámase altura de liña. Se quere que o seu texto teña espazo adicional entre as liñas horizontais de texto, usaría esta propiedade. Por exemplo, di que quería aumentar a altura da liña para todos os parágrafos dentro do elemento

do seu sitio , podería facelo así:

p principal (altura da liña: 1,5; }

Isto sería agora 1,5 veces a altura da liña normal, en función do tamaño predeterminado da fonte (que normalmente é de 16 px).

Cando usar a liña de altura

Como se detallou anteriormente, a altura da liña é apropiada para usar para espaciar as liñas de texto en parágrafos ou noutros bloques de texto. Se hai pouca cantidade de espazo entre liñas, o texto pode involucrarse e ser difícil de ler para os espectadores do seu sitio. Do mesmo xeito, se as liñas están separadas moi separadas na páxina, o fluxo normal de lectura interromperase e os lectores terán problemas co seu texto por ese motivo. É por iso que desexa atopar a cantidade adecuada de espazamento entre liñas e altura para usar. Tamén pode probar o seu deseño cos usuarios reais para obter os seus comentarios sobre a lexibilidade da páxina .

Cando non usar a altura da liña

Non confunda a altura da liña co recheo ou as marxes que usaría para engadir espazo en branco ao deseño da páxina, incluído baixo o encabezado ou os parágrafos. Este espazamento non é líder e, polo tanto, non se manexa a altura da liña.

Se quere engadir espazo debaixo de certos elementos de texto, usaría as marxes ou o recheo. Volvendo ao anterior exemplo de CSS que empregamos, poderiamos engadir isto:

p principal (altura da liña: 1,5; marxe inferior: 24 píxeles; }

Isto aínda tería a altura da liña de 1,5 entre as liñas de texto para o parágrafo da nosa páxina (as que están dentro do elemento

). Os mesmos parágrafos tamén terían 24 píxeles de espazo en branco por baixo de cada un deles, permitindo que os saltos visuais permitan aos lectores identificar facilmente un parágrafo doutro e facer a lectura do sitio web máis doado de facer. Tamén podes usar a propiedade de recheo en lugar das marxes aquí:

p principal (altura da liña: 1,5; padding-bottom: 24 píxeles; }

En case todos os casos, isto mostraría o mesmo que o CSS anterior.

Diga que quería engadir espazamento debaixo dos elementos da lista que estaban dentro dunha lista cunha clase de "menú de servizos", que usaría as marxes ou o recheo para facelo, a altura da liña NON. Así que isto sería apropiado.

.services-menu li { Só usaría a altura da liña aquí se quería definir o espazamento do texto dentro dos elementos da lista, supoñendo que tiñan longas pistas de texto que poderían executarse en varias liñas para cada punto de bala.