Cómo ajustar el interlineado en HTML (En 5 Pasos)
A lo largo de los años de infancia y adolescencia de la web, los diseñadores de impresión se han esforzado por llevar las herramientas precisas de su oficio al ámbito de diseño basado en HTML. Durante largo tiempo los conceptos como el interlineado eran difíciles de llevar a cabo y se mostraban de forma poco confiable en los exploradores de diferentes lectores. Sin embargo, a medida que la web maduró la tecnología llamada CSS le dio a los diseñadores el poder de llevar a cabo conceptos como el interlineado de forma fácil y confiable. Tú puedes cambiar el interlineado de un párrafo de texto simplemente usando la propiedad "line-height" de CSS.
Ajusta el interlineado de un párrafo de texto
Paso 1
Abre un archivo de texto con tu editor de textos favorito y crea una página HTML de ejemplo con un único párrafo de la manera siguiente:
Lorem ipsum dolor sit amet…
Sustituye el texto "Lorem ipsum" con texto suficiente para asegurar que el párrafo se ajuste a él para formar varias líneas.
Guarda tu archivo de texto con la extensión de archivo ".html".
Paso 2
Añade código CSS a la etiqueta de tu párrafo (
) para configurar la propiedad "line-height". Esta propiedad es la forma en la que CSS se refiere al concepto de interlineado. También configura la propiedad "font-size" a 12 puntos para que puedas ver de qué manera las diferentes unidades de altura de línea pueden cambiar la apariencia. Modifica la etiqueta de párrafo de esta forma:
Guarda tu archivo y ábrelo en un explorador web. Verás que el interlineado de tu texto es mayor al del texto estándar de tu explorador. La configuración que tienes ahora cambiará el interlineado en base al tamaño de fuente actual. En este caso el interlineado es dos ems o dos veces el tamaño de la fuente.
Paso 3
Cambia el tamaño de la fuente a ocho puntos y observa cómo cambia el interlineado junto con e tamaño del texto, de esta forma:
Guarda tu archivo y actualiza tu explorador para ver el cambio. El interlineado debe ser el mismo de antes en relación al tamaño de la fuente.
Paso 4
Cambia la etiqueta de párrafo para definir el interlineado con píxeles en vez de ems, de esta forma:
Guarda tu archivo y actualiza tu explorador. Esta nueva configuración colocará exactamente diez píxeles entre las líneas base de las líneas de texto de 12 puntos.
Paso 5
Cambia el tamaño de la fuente a ocho puntos y observa cómo cambia el interlineado junto con el tamaño del texto, de esta forma:
Guarda tu archivo y actualiza tu explorador para ver el cambio. Verás que el valor del interlineado es diferente, relativo al tamaño de la fuente con respecto a la versión de la fuente de 12 puntos. Esto es debido a que el uso de píxeles como unidad para configurar la altura de las líneas ocasiona que el interlineado sea estático y no esté basado en el tamaño de la fuente.
Referencias
