Control de Texto

Controla tu tipografía con precisión usando propiedades clave de CSS para alinear, transformar, decorar e indentar texto. Aquí verás cómo aplicar text-align, text-transform, text-decoration y text-indent de forma clara, con ejemplos prácticos y consideraciones de maquetación.

¿Cómo alinear texto con CSS sin complicaciones?

La alineación define la posición del contenido dentro de su contenedor. Por defecto, los párrafos se alinean a la izquierda y ocupan el 100 % del width disponible. Con la propiedad text-align puedes usar valores como left, center, right y justify para lograr el resultado deseado. El centrado funciona mientras el contenedor tenga espacio; si no, necesitarás otras técnicas de maquetación.

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }

• Left: alineación por defecto a la izquierda.
• Center: centra el texto dentro del ancho disponible.
• Right: empuja el texto hacia la derecha.
• Justify: distribuye espacios para ocupar el ancho completo en cada línea.

Nota: justify ajusta los espacios entre palabras en líneas con suficiente contenido. Si una línea tiene pocas palabras, no forzará espacios excesivos.

¿Qué transformaciones de texto mejoran la legibilidad?

Cuando el contenido llega en un formato y necesitas mostrarlo en otro, usa la propiedad text-transform. Puedes convertir a mayúsculas, minúsculas o capitalizar cada palabra sin cambiar el contenido original.

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

• Uppercase: convierte todo a mayúsculas.
• Lowercase: transforma a minúsculas.
• Capitalize: pone en mayúscula la letra inicial de cada palabra.

Estas opciones ayudan a mantener consistencia tipográfica según el tono o la formalidad del contenido.

¿Cómo decorar e indentar texto de forma efectiva?

Las decoraciones resaltan estados o estilos visuales. Las etiquetas de ancla traen subrayado por defecto, pero con la propiedad text-decoration puedes controlar la línea, y con color ajustar el color del texto.

.underline { text-decoration: underline; }
.through { text-decoration: line-through; }
.no-underline { text-decoration: none; color: red; }

• Underline: añade una línea inferior a cualquier elemento, no solo enlaces.
• Line-through: tacha el texto; útil para estados como tareas completadas.
• None: elimina el subrayado en enlaces; combina con color para cambiar el azul por defecto.

Para maquetación editorial, la propiedad text-indent permite una sangría en la primera línea del párrafo, logrando un estilo de lectura más clásico.

.indent { text-indent: 2rem; }

• Text-indent: aplica la sangría solo en la primera línea.
• Unidades: usar rem asegura consistencia relativa al tamaño base de fuente.

¿Te gustaría ver más patrones de alineación y composición tipográfica con CSS? Comparte tus dudas o ejemplos en los comentarios y continuamos la conversación.