Articles
Introducción a CSS
Propiedades CSS relacionadas con el espaciado de texto

Propiedades CSS relacionadas con el espaciado de texto

Este artículo explica las propiedades de CSS relacionadas con el espaciado de texto.

Puedes aprender sobre el uso y cómo escribir propiedades como line-height y word-spacing.

YouTube Video

Creando HTML para vista previa

css-text-space.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-text-space.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Text-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Text-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>line-height</h3>
 23            <section>
 24                <header><h4>line-height: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="line-height-normal">This is a paragraph with normal line height.</p>
 27                </section>
 28                <header><h4>line-height: 1.5</h4></header>
 29                <section class="sample-view">
 30                    <p class="line-height-150">This is a paragraph with 1.5 line height.</p>
 31                </section>
 32                <header><h4>line-height: 200%</h4></header>
 33                <section class="sample-view">
 34                    <p class="line-height-200">This is a paragraph with 200% line height.</p>
 35                </section>
 36            </section>
 37        </article>
 38        <article>
 39            <h3>letter-spacing</h3>
 40            <section>
 41                <header><h4>letter-spacing: normal</h4></header>
 42                <section class="sample-view">
 43                    <p class="letter-spacing-normal">This is text with normal letter spacing.</p>
 44                </section>
 45                <header><h4>letter-spacing: 4px</h4></header>
 46                <section class="sample-view">
 47                    <p class="letter-spacing-wide">This is text with wide letter spacing.</p>
 48                </section>
 49                <header><h4>letter-spacing: -1px</h4></header>
 50                <section class="sample-view">
 51                    <p class="letter-spacing-narrow">This is text with narrow letter spacing.</p>
 52                </section>
 53            </section>
 54        </article>
 55        <article>
 56            <h3>word-spacing</h3>
 57            <section>
 58                <header><h4>word-spacing: normal</h4></header>
 59                <section class="sample-view">
 60                    <p class="word-spacing-normal">This is text with normal word spacing.</p>
 61                </section>
 62                <header><h4>word-spacing: 4px</h4></header>
 63                <section class="sample-view">
 64                    <p class="word-spacing-wide">This is text with wide word spacing.</p>
 65                </section>
 66                <header><h4>word-spacing: -1px</h4></header>
 67                <section class="sample-view">
 68                    <p class="word-spacing-narrow">This is text with narrow word spacing.</p>
 69                </section>
 70                <header><h4>word-spacing: -0.1em; letter-spacing: -0.05em;</h4></header>
 71                <section class="sample-view">
 72                    <p class="word-and-letter-spacing">This is text with word and letter spacing.</p>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>word-break</h3>
 78            <section>
 79                <header><h4>word-break: normal</h4></header>
 80                <section class="sample-view">
 81                    <p class="box word-break-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 82                </section>
 83                <header><h4>word-break: break-all</h4></header>
 84                <section class="sample-view">
 85                    <p class="box word-break-break-all">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 86                </section>
 87                <header><h4>word-break: keep-all</h4></header>
 88                <section class="sample-view">
 89                    <p class="box word-break-keep-all">&#12371;&#12428;&#12399;&#26085;&#26412;&#35486;&#12398;&#25991;&#31456;&#12391;&#12377;&#12290;&#12371;&#12398;&#35373;&#23450;&#12391;&#12399;&#33258;&#28982;&#12395;&#25913;&#34892;&#12373;&#12428;&#12414;&#12377;&#12290;</p>
 90                </section>
 91            </section>
 92        </article>
 93        <article>
 94            <h3>hyphens</h3>
 95            <section>
 96                <header><h4>hyphens: none</h4></header>
 97                <section class="sample-view">
 98                    <p class="no-hyphens">
 99                        Supercalifragilisticexpialidocious is a very long word.
100                    </p>
101                </section>
102                <header><h4>HTML</h4></header>
103<pre>
104&lt;p class="no-hyphens"&gt;
105    Supercalifragilisticexpialidocious is a very long word.
106&lt;/p&gt;
107</pre>
108                <header><h4>hyphens: manual</h4></header>
109                <section class="sample-view">
110                    <p class="manual-hyphens">
111                        Super&shy;califragilistic&shy;expialidocious is a very long word.
112                    </p>
113                </section>
114                <header><h4>HTML</h4></header>
115<pre>
116&lt;p class="manual-hyphens"&gt;
117    Super&amp;shy;califragilistic&amp;shy;expialidocious is a very long word.
118&lt;/p&gt;
119</pre>
120                <header><h4>hyphens: auto</h4></header>
121                <section class="sample-view">
122                    <p class="auto-hyphens">
123                        Supercalifragilisticexpialidocious is a very long word.
124                    </p>
125                </section>
126                <header><h4>HTML</h4></header>
127<pre>
128&lt;p class="auto-hyphens"&gt;
129    Supercalifragilisticexpialidocious is a very long word.
130&lt;/p&gt;
131</pre>
132            </section>
133        </article>
134    </main>
135</body>
136</html>

Tipografía (Relativo al margen del texto)

Propiedad line-height 

 1/* Line height examples */
 2.line-height-normal {
 3    line-height: normal; /* Default line height */
 4}
 5
 6.line-height-150 {
 7    line-height: 1.5; /* 1.5 times the font size */
 8}
 9
10.line-height-200 {
11    line-height: 200%; /* 200% of the font size */
12}

line-height es una propiedad CSS utilizada para ajustar el espaciado entre líneas (altura de línea). line-height especifica el espacio vertical entre líneas, utilizado para mejorar la legibilidad o ajustar el espaciado como parte del diseño.

Usos principales de line-height

Números sin unidad 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • Especificar una altura relativa al tamaño de la fuente. Por ejemplo, especificar 1.5 establece la altura de línea en 1.5 veces el tamaño de la fuente. Este método es útil para diseños responsivos.
Porcentaje 
1p {
2    line-height: 150%;
3}
  • Especificar la altura de línea como un porcentaje del tamaño de la fuente. Por ejemplo, especificar 150% establece la altura de línea en el 150% del tamaño de la fuente.
Valores fijos (px, em, rem, etc.) 
1p {
2    line-height: 20px;
3}
  • Especificar la altura de línea en unidades absolutas. Por ejemplo, puedes especificar un valor concreto como 20px, pero puede carecer de flexibilidad en diseños responsivos.
normal 
1p {
2    line-height: normal;
3}
  • Especificar normal aplica la configuración por defecto del espaciado de líneas del navegador. Normalmente será entre 1.2 y 1.4 veces el tamaño de la fuente.

Ejemplos de uso de line-height

Párrafos legibles
  • Se recomienda usualmente una line-height de aproximadamente 1.5 a 1.6 para una mejor legibilidad. Si el espaciado entre líneas es demasiado estrecho, el texto estará comprimido y será difícil de leer, y si es demasiado amplio, el texto se sentirá desconectado.
Diseño de encabezados
  • Para encabezados y títulos, donde el texto es más grande, se puede reducir el espaciado entre líneas. Configuraciones como 1.1 o 1.2 se utilizan con frecuencia.

Resumen

  • line-height es una propiedad importante para mejorar tanto la legibilidad como el diseño del texto.
  • Usar valores relativos (números o porcentajes) facilita la adaptación a diseños responsivos.
  • Para encabezados con texto grande y párrafos con texto más pequeño, es crucial establecer un espaciado entre líneas adecuado en cada caso.

Aprovechar esta propiedad puede hacer que la apariencia del texto sea más legible y mejorar su calidad de diseño.

Propiedad letter-spacing 

 1/* Letter spacing examples */
 2.letter-spacing-normal {
 3    letter-spacing: normal; /* Default letter spacing */
 4}
 5
 6.letter-spacing-wide {
 7    letter-spacing: 4px; /* Increase letter spacing */
 8}
 9
10.letter-spacing-narrow {
11    letter-spacing: -1px; /* Decrease letter spacing */
12}

letter-spacing es una propiedad de CSS que se utiliza para ajustar el espacio entre caracteres (espaciado entre letras). Esta propiedad puede usarse para mejorar el diseño del texto, aumentar la legibilidad y lograr estilos específicos.

En este ejemplo, se especifica de la siguiente manera:.

  • normal: El espaciado por defecto entre letras. Es un valor estándar determinado por el navegador y la fuente.
  • 4px: Un ejemplo de espaciado entre letras ampliado. Añade 4 píxeles de espacio entre cada carácter.
  • -1px: Un ejemplo de espaciado reducido entre letras. Reduce 1 píxel de espacio entre cada carácter.

Cómo usar letter-spacing

Valores con unidades 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • Al establecer un valor positivo, se aumentará el espaciado entre letras.
  • Al establecer un valor negativo, se reducirá el espaciado entre letras.
  • Las unidades suelen ser en px (píxeles) o em.
Por defecto: normal 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • Usa el espaciado entre letras por defecto. Normalmente, se aplica el espaciado estándar definido por la fuente.

Ejemplos del uso de letter-spacing

  • Mejora de la legibilidad: Para tamaños de fuente pequeños o fuentes demasiado condensadas, puedes mejorar la legibilidad aumentando el letter-spacing.
  • Ajuste de diseño: Puedes ajustar el espaciado entre letras para enfatizar visualmente elementos de diseño como títulos o logotipos.
  • Ajuste entre palabras: Puedes ajustar el espaciado a nivel de letras, en lugar de entre palabras. letter-spacing ajusta el espaciado a nivel de letras, pero usa word-spacing para ampliar el espacio entre palabras.
  • Equilibrio de diseño: Si aumentas demasiado el espacio entre letras, todo el texto podría parecer demasiado extendido. Por el contrario, si lo reduces demasiado, el texto puede volverse apretado y difícil de leer, por lo que es importante mantener un equilibrio adecuado.

Resumen

  • letter-spacing es una propiedad que ajusta el espacio entre letras, lo que afecta tanto al diseño como a la legibilidad.
  • Puedes aumentar el espaciado con valores positivos y reducirlo con valores negativos.
  • Es efectivo para títulos y elementos de diseño específicos, pero ten cuidado de no comprometer la legibilidad.

Al usar esta propiedad, puedes ajustar la apariencia del texto y lograr diseños atractivos.

Propiedad word-spacing 

 1/* Word spacing examples */
 2.word-spacing-normal {
 3    word-spacing: normal; /* Default word spacing */
 4}
 5
 6.word-spacing-wide {
 7    word-spacing: 4px; /* Increase word spacing */
 8}
 9
10.word-spacing-narrow {
11    word-spacing: -1px; /* Decrease word spacing */
12}
13
14.word-and-letter-spacing {
15    word-spacing: -0.1em;
16    letter-spacing: -0.05em;
17}

word-spacing es una propiedad de CSS que controla el espacio entre palabras en un texto. El uso adecuado de esta propiedad puede mejorar el equilibrio visual y la legibilidad del texto. word-spacing es particularmente útil en diseños enfocados en tipografía y en escenarios de diseño responsivo.

En este ejemplo, se especifica de la siguiente manera:.

  • normal: Aplica el espaciado predeterminado entre palabras. Este es el valor inicial del navegador.
  • 4px: Un ejemplo de aumento en el espaciado entre palabras. Añade 4 píxeles de margen entre cada palabra.
  • -1px: Un ejemplo de disminución en el espaciado entre palabras. Reduce el espacio entre cada palabra en 1 píxel.
  • word-and-letter-spacing: Un ejemplo de disminución en el espaciado entre palabras y letras. Reduce el espacio entre palabras en 0.1em y entre letras en 0.05em en comparación con el normal.

Uso de valores positivos y negativos

Establecer un valor positivo para word-spacing ampliará el espacio entre palabras. Por otro lado, usar valores negativos reduce los espacios entre palabras. Los valores negativos pueden usarse para enfatizar efectos visuales o para ajustar el espaciado de letras por razones de diseño específicas.

Diferencia con letter-spacing

word-spacing es una propiedad que ajusta el espacio entre palabras, mientras que letter-spacing ajusta el espacio entre letras. Al combinar estas propiedades, puedes tener un control más preciso sobre la tipografía de textos completos.

Precauciones y Mejores Prácticas

  • Ajuste excesivo del espacio: El uso excesivo de word-spacing puede producir una disminución en la legibilidad. Especialmente, espacios demasiado grandes o pequeños pueden ser estresantes para los usuarios, lo que hace que los ajustes moderados sean importantes.
  • Diseño responsivo: Especificar valores relativos usando em o rem es efectivo para diseños responsivos porque garantiza una visualización adecuada en diferentes tamaños de pantalla.
  • Ajuste del estilo de encabezados: Al aumentar el espacio entre palabras en textos de encabezados, puedes añadir énfasis visual. Esto permite clarificar la jerarquía del contenido y lograr un diseño sofisticado.

Propiedad word-break 

 1p.box {
 2    width: 200px;
 3    border: 1px solid #000;
 4    margin-bottom: 20px;
 5}
 6
 7.word-break-normal {
 8    word-break: normal;
 9}
10
11.word-break-break-all {
12    word-break: break-all;
13}
14
15.word-break-keep-all {
16    word-break: keep-all;
17}

word-break es una propiedad de CSS que controla cómo se ajusta el texto cuando excede el ancho del contenedor. Normalmente, los navegadores ajustan líneas en los límites de las palabras, pero configuraciones específicas pueden mejorar la apariencia y la legibilidad cuando hay palabras largas o URLs presentes.

Puedes especificar los siguientes valores para la propiedad word-break.

  • normal

    normal es el valor predeterminado. Cuando una palabra excede el ancho del contenedor, se romperá en los límites de las palabras. Esta configuración es común en idiomas como el inglés, y no se producen rupturas en el medio de las palabras.

  • break-all

    break-all es una configuración donde los saltos de línea pueden ser insertados después de cualquier carácter, según sea necesario. Especialmente cuando se incluyen palabras largas o URLs, los saltos de línea ocurren a nivel de caracteres para evitar la disrupción del diseño.

  • keep-all

    keep-all es una configuración utilizada particularmente para idiomas asiáticos (japonés, chino, coreano, etc.). En esta configuración, se conserva toda la palabra y no ocurren rupturas en el medio de las palabras. Sin embargo, para idiomas separados por espacios como el inglés, se aplican los saltos de línea normales en los límites de las palabras.

Este ejemplo muestra tres configuraciones diferentes de word-break. Con word-break-normal, se conserva toda la palabra y se rompe en los límites de las palabras si excede el ancho del contenedor. Con word-break-break-all, las rupturas ocurren incluso en el medio de las palabras. word-break-keep-all permite rupturas naturales para idiomas asiáticos como el japonés y rupturas en los límites de las palabras para el inglés.

Escenarios de Aplicación de word-break

Dispositivos Móviles y Diseño Responsivo 

1@media (max-width: 600px) {
2  p {
3    word-break: break-all;
4  }
5}

En dispositivos móviles, el ancho de la pantalla es limitado, lo que puede hacer que textos incluidos URLs o palabras largas excedan el ancho de la pantalla. En tales casos, aplicar word-break: break-all; permite saltos de línea a nivel de carácter para ajustar el ancho de la pantalla, mejorando la legibilidad.

Propiedad hyphens 

 1p.no-hyphens {
 2    width: 200px;
 3    hyphens: none;
 4}
 5
 6p.manual-hyphens {
 7    width: 200px;
 8    hyphens: manual;
 9}
10
11p.auto-hyphens {
12    width: 200px;
13    hyphens: auto;
14}

  • La propiedad hyphens se utiliza en CSS para especificar cómo se debe manejar la división de palabras con guiones al partir líneas de texto. Al configurar esta propiedad adecuadamente, puedes mejorar la legibilidad y la apariencia del texto. La separación de palabras en sílabas es particularmente útil cuando las palabras largas necesitan ser ajustadas al final de una línea.

  • Dado que las reglas de separación por guiones varían según el idioma, esta propiedad depende de la configuración regional del texto.

Sintaxis 

1element {
2    hyphens: none | manual | auto;
3}

La propiedad hyphens puede configurarse con los siguientes valores:.

  • none: No se aplica separación por guiones. Las palabras típicamente se separarán solo al final de la palabra.
  • manual: La separación por guiones se aplica manualmente. En este caso, necesitas especificar manualmente los puntos de separación en el HTML. Por ejemplo, puedes usar &shy; (guión sutil).
  • auto: El navegador aplica automáticamente la separación por guiones en posiciones adecuadas. En este caso, el idioma del documento (atributo lang) debe especificarse correctamente.

Notas

  • Importancia de la configuración del idioma: Al usar hyphens: auto;, una correcta separación por guiones requiere que el atributo lang del documento HTML esté configurado correctamente.
  • Dependencia de la fuente: Algunas fuentes pueden no ser adecuadas para la separación por guiones.
  • Uso de diccionarios de separación: Las reglas de separación por guiones dependen de los diccionarios utilizados por el navegador. Por lo tanto, puede que no funcione como se espera en ciertos idiomas.

Resumen

Al utilizar correctamente la propiedad hyphens, puedes mejorar significativamente el diseño del texto. Especialmente para sitios web multilingües y diseños optimizados para móviles, el uso adecuado de auto y manual puede mejorar la experiencia del usuario.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Propiedades de CSS relacionadas con el textoPropiedades de CSS para la visualización de código y citas