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.
Código :
line-height:1.8em;
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.
Código :
line-height:1.8;
De esta manera se aplica esa proporción en base al tamaño de cada texto:
Código :
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;
}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.
Espero que les sea útil! Qué opinan de usar el line-height de modo global?
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por nestorpaul91 el 09 de Abril de 2014
nestorpaul91-blog :
Es una técnica muy vieja por lo que debe funcionar en cualquier navegador respetable.