Line-height global en CSS

Ya hablamos de cómo calcular tamaños tipográficos para Web y de cómo usar las medidas em y rem en CSS3, ahora veremos algo muy sencillo acerca del uso del line-height en nuestros textos con CSS.

El line-height es la propiedad que debemos usar para establecer los espacios entre líneas en un párrafo, es decir que se encarga de la espacialidad en lo vertical del diseño de textos.

Ya vimos que podemos utilizar la proporción áurea para establecer un correcto interlineado, también si nesecitas “sacarlo a ojo” tenés que pensar el line-height a partir del tamaño de la letra y sumarle 5 o 10px de acuerdo a las características que tenga la tipografía en cuestión.

Cómo usar line-height

El uso de line-height es muy sencillo, de acuerdo a cómo estemos trabajando las medidas en nuestro CSS solo lo establecemos en píxeles, porcentaje, puntos, em o rem, y generalmente se aplica directamente a los elementos que lo necesiten.

[css:1:26f72b296f]line-height:1.8em;[/css:1:26f72b296f]

Declarar line-height global

Otra manera más sencilla para no estar haciendo tanto cálculo y asignando tantos line-height a los elementos es declararlo en forma global, sin ninguna medida específica, asignándole solamente el valor proporcional.

[css:1:26f72b296f]line-height:1.8;[/css:1:26f72b296f]

De esta manera se aplica esa proporción en base al tamaño de cada texto:
[css:1:26f72b296f]html {
font-size:62.5%;
}

body{
font-family:georgia,serif;
font-size:10px;
line-height:1.8;
}

p, strong {
font-size:1.6rem;
}

h1{
font-size:2.6rem;
color:Crimson ;
}

h2{
font-size:2rem;
color:#666;
}

.otro{
font-size:1.2rem;
}[/css:1:26f72b296f]

Código :

<body>
   <h1>Esto es un título</h1>
   <h2>No ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.</h2>
   <p>En un lugar de la Mancha, de nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino. 
</p>
<br/>
<h1 class="">Esto es otro título</h1>
<p class="otro">En un lugar de la Mancha, de nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. 
</p>
</body>

Veamos cómo se comporta el line-height en este ejemplo con tantos tamaños distintos:

Como vemos en la imagen, el line-height se acomodó de acuerdo a la proporción indicada automáticamente de acuerdo al tamaño de cada texto.

Si hubiera un caso en el que en una misma oración conviviesen dos tamaños distintos, el line-height toma el tamaño mayor para aplicar la proporción a todo el texto.

Como vemos, la interlínea se abrió un poco más para que la frase en negritas y de mayor tamaño no quede apretada. Esto igualmente en cuestiones de diseño no es bueno, ya que en un párrafo los textos deberían tener el mismo tamaño y destacar solo usando itálicas o negritas, y no modificando el tamaño del texto ya que genera un ruido en la lectura además de quedar con interlíneas poco parejas.

[nota:26f72b296f]Declarar el line-height global no aplica a medidas absolutas.[/nota:26f72b296f]

Espero que les sea útil! Qué opinan de usar el line-height de modo global?

Enviar comentario

via Cristalab http://ift.tt/1elJYuX

Advertisements

Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: