Código HTML para alturas de interlineado

Por ben lingenfelter
Código HTML para alturas de interlineado
Dynamic Graphics/Dynamic Graphics Group/Getty Images

Controla el espacio vertical entre las líneas de texto dentro de un párrafo de una página Web para afinar la presentación visual. Si necesitas un poco más de espacio ocupado de texto, o necesitas exprimir un poco más de texto en un espacio determinado, puedes utilizar etiquetas HTML y CSS para cambiar el espaciado de línea a la medida adecuada. Con unas pocas líneas de código puedes ajustar la altura del espacio entre líneas, o el "alto de línea" en tu página Web.

HTML estricto

Código HTML para alturas de interlineado
Computer image by Haris Rauf from Fotolia.com

Para crear un espacio entre líneas que se vea bien, o que ayude a hacer que una sección de texto encaje perfectamente dentro del área apropiada en un sitio, utiliza HTML estricto. Selecciona la opción "fuente" de etiquetas para crear un código como este:

El "150%" es la parte que aumenta la distancia entre las líneas de texto. Sustituye los valores para aumentar o disminuir el espacio.

Etiqueta span

Código HTML para alturas de interlineado
computer image by blaine stiger from Fotolia.com

Utiliza etiquetas span para aplicar el cambio de altura de la línea de texto escrito entre la apertura y el cierre de la etiqueta. La codificación es similar a:

texto va aquí ...

Utiliza un número de píxeles para ajustar el tamaño de la fuente en lugar de los tamaños relativos grandes, medianos o pequeños. Utilizar mediciones precisas para el tamaño de fuente permite un mejor control del texto y permite que el espacio entre líneas trabaje mejor.

Alternativas CSS

Código HTML para alturas de interlineado
computer image by blaine stiger from Fotolia.com

El interlineado también se puede ajustar mediante una hoja de estilos en cascada (CSS). El CSS controla cualquier elemento que decides aplicar, ya sea un ID de span que has establecido para una sola sección del texto en la página o toda una clase de objetos de uso común. Por ejemplo, si estás trabajando con un blog puedes crear una clase para las entradas del blog y fijar la altura de la línea de la hoja de estilos para la clase a 135%. Cada entrada del blog tendría la altura de la misma línea. El código para el establecimiento del "alto de línea" en CSS es:

{line-height: 150%;}

Control de espaciado de línea WYSIWYG

Código HTML para alturas de interlineado
computer image by martini from Fotolia.com

Muchos de estos problemas de codificación pueden evitarse mediante el uso de un editor WYSIWYG Web o mediante la creación de sitios con programas en línea, tales como WordPress y Joomla, o sitios web con herramientas de creación gratuitos como Weebly, Wix y Moonfruit. Todas estas herramientas proporcionan editores de texto que mantienen las conjeturas y dolores de cabeza fuera. Un simple clic de un botón del ratón y el interlineado aumenta del mismo modo que lo haría si estuvieras escribiendo un documento en tu procesador de textos favorito.

La mayoría de los editores Web, no importa cómo sea su interfaz WYSIWYG, son mucho más fáciles de usar si sabes cómo codificar, incluso si encuentras que estas codificando mucho menos de lo que solías.