CSS Interlineado

En esta ocasión, vamos a hablar sobre el interlineado en CSS. ¿Qué es el interlineado? Se trata de la distancia vertical entre dos líneas de texto. Por defecto, el interlineado viene determinado por el tamaño de la fuente y el ancho del contenedor, pero podemos modificarlo mediante CSS.

Existen varias formas de modificar el interlineado en CSS. La primera forma es utilizando la propiedad line-height, que nos permite especificar el interlineado en unidades absolutas o relativas. Por ejemplo:

                    
                p {
                    line-height: 1.5; /* Interlineado del 150% del tamaño de la fuente */
                  }   
         
        

Otro método es utilizando la propiedad font-size junto con la propiedad line-height, de forma que podemos modificar el tamaño de la fuente y el interlineado al mismo tiempo:

                    
                p {
                    font-size: 16px;
                    line-height: 24px; /* Interlineado de 24px */
                  }     
         
        

Letter spacing

Además, podemos utilizar la propiedad letter-spacing para ajustar el espaciado entre letras y lograr un efecto de interlineado más compacto o espaciado. Por ejemplo:

                    
                p {
                    letter-spacing: 0.1em; /* Aumenta el espacio entre letras en 0.1em */
                  }
         
        

Interlineado css con Bootstrap

Bootstrap es un framework de diseño web que nos proporciona una serie de clases y estilos predefinidos para facilitar el desarrollo de sitios web. Si queremos utilizar Bootstrap para modificar el interlineado de nuestro texto, podemos hacerlo de varias formas. Una de ellas es utilizando la clase .font-weight-normal, que nos permite establecer un interlineado normal para el texto. Por ejemplo:

                    
                <p class="font-weight-normal">Texto con interlineado normal</p>
         
        

Otra opción es utilizar la clase .font-weight-lighter, que nos permite establecer un interlineado más ligero para el texto. Por ejemplo:

                        
                    <p class="font-weight-lighter">Texto con interlineado más ligero</p>
             
            

Además, podemos utilizar la clase .font-weight-bolder, que nos permite establecer un interlineado más grueso para el texto. Por ejemplo:

                            
                        <p class="font-weight-bolder">Texto con interlineado más grueso</p>
                 
                

Como puedes ver, con Bootstrap podemos modificar el interlineado de nuestro texto de manera sencilla y rápida utilizando clases predefinidas. ¡Espero que esta información te haya sido útil!