Texto y tipografía

El podcast de CSS - 036: Text & Typography

El texto es uno de los componentes básicos de la Web.

Cuando creas un sitio web, no necesariamente necesitas darle estilo al texto; HTML tiene un estilo predeterminado bastante razonable.

Sin embargo, es probable que el texto componga la mayor parte de tu sitio web, por lo que vale la pena agregarle algo de estilo. Si cambias algunas propiedades básicas, puedes mejorar significativamente la experiencia de lectura para tus usuarios.

En este módulo, primero veremos algunas propiedades fundamentales de las fuentes de CSS, como font-family, font-style, font-weight y font-size. Luego, analizaremos las propiedades que afectan los párrafos de texto, como text-indent y word-spacing. El módulo finaliza con algunos temas más avanzados, como las fuentes variables y los pseudoelementos.

Cambiar el tipo de letra

Usa font-family para cambiar el tipo de letra del texto.

La propiedad font-family acepta una lista de strings separadas por comas, ya sea que hagan referencia a familias de fuentes específicas o genéricas. Las familias de fuentes específicas son cadenas entrecomilladas, como "Helvetica", "EB Garamond" o "Times New Roman". Las familias de fuentes genéricas son palabras clave como serif, sans-serif y monospace (consulta la lista completa de opciones en MDN). El navegador mostrará el primer tipo de letra disponible de la lista proporcionada.

Cuando uses font-family, debes especificar al menos una familia de fuentes genéricas en caso de que el navegador del usuario no tenga tus fuentes preferidas. En general, la familia de fuentes genéricas de resguardo debe ser similar a tus fuentes preferidas: si usas font-family: "Helvetica" (una familia de fuentes sans-serif), el resguardo debe ser sans-serif para que coincida.

Cómo usar fuentes oblicuas y cursivas

Usa font-style para establecer si el texto debe estar en cursiva o no. font-style acepta una de las siguientes palabras clave: normal, italic y oblique.

Aplicar negrita al texto

Usa font-weight para establecer la “negrita” del texto. Esta propiedad acepta valores de palabras clave (normal, bold), valores relativos de palabra clave (lighter, bolder) y valores numéricos (de 100 a 900).

Las palabras clave normal y bold son equivalentes a los valores numéricos 400 y 700, respectivamente.

Las palabras clave lighter y bolder se calculan en relación con el elemento superior. Consulta la sección Significado de los pesos relativos de MDN para ver una tabla práctica que muestra cómo se determina este valor.

Cómo cambiar el tamaño del texto

Usa font-size para controlar el tamaño de los elementos de texto. Esta propiedad acepta valores de longitud, porcentajes y algunos valores de palabras clave.

Además de los valores porcentuales y de longitud, font-size acepta algunos valores absolutos de palabras clave (xx-small, x-small, small, medium, large, x-large, xx-large) y un par de valores de palabra clave relativos (smaller, larger). Los valores relativos son relativos al font-size del elemento principal.

Cambiar el espacio entre las líneas

Usa line-height para especificar la altura de cada línea en un elemento. Esta propiedad acepta un número, una longitud, un porcentaje o la palabra clave normal. Por lo general, se recomienda usar un número en lugar de una longitud o un porcentaje para evitar problemas con la herencia.

Cambiar el espacio entre caracteres

Usa letter-spacing para controlar la cantidad de espacio horizontal entre los caracteres de tu texto. Esta propiedad acepta valores de longitud como em, px y rem.

Ten en cuenta que el valor especificado aumenta la cantidad de espacio natural entre caracteres. En la siguiente demostración, selecciona una letra individual para ver el tamaño del formato letterbox y cómo cambia con letter-spacing.

Cómo cambiar el espacio entre palabras

Usa word-spacing para aumentar o disminuir la longitud del espacio entre cada palabra del texto. Esta propiedad acepta valores de longitud como em, px y rem. Ten en cuenta que la longitud que especificas corresponde al espacio adicional, además del espaciado normal. Esto significa que word-spacing: 0 es equivalente a word-spacing: normal.

Abreviatura de font

Puedes usar la propiedad abreviada font para establecer muchas propiedades relacionadas con la fuente a la vez. La lista de propiedades posibles es font-family, font-size, font-stretch, font-style, font-variant, font-weight y line-height.

Consulta el artículo font de MDN para obtener información específica sobre cómo pedir estas propiedades.

Cómo cambiar mayúsculas y minúsculas del texto

Usa text-transform para modificar las mayúsculas del texto sin necesidad de cambiar el HTML subyacente. Esta propiedad acepta los siguientes valores de palabra clave: uppercase, lowercase y capitalize.

Subrayar, subrayar y agregar líneas al texto

Usa text-decoration para agregar líneas al texto. Por lo general, los subrayados son los más utilizados, pero es posible agregar líneas encima del texto o directamente a través de él.

La propiedad text-decoration es la abreviatura de las propiedades más específicas que se detallan a continuación.

La propiedad text-decoration-line acepta las palabras clave underline, overline y line-through. También puedes especificar varias palabras clave para varias líneas.

La propiedad text-decoration-color establece el color de todas las decoraciones de text-decoration-line.

La propiedad text-decoration-style acepta las palabras clave solid, double, dotted, dashed y wavy.

La propiedad text-decoration-thickness acepta cualquier valor de longitud y establece el ancho del trazo de todas las decoraciones de text-decoration-line.

La propiedad text-decoration es una abreviatura de todas las propiedades anteriores.

Cómo agregar una sangría al texto

Usa text-indent para agregar una sangría a tus bloques de texto. Esta propiedad toma una longitud (por ejemplo, 10px, 2em) o un porcentaje del ancho del bloque contenedor.

Cómo abordar el contenido oculto o desbordado

Usa text-overflow para especificar cómo se representa el contenido oculto. Existen dos opciones: clip (la opción predeterminada), que trunca el texto en el punto de desbordamiento; y ellipsis, que muestra puntos suspensivos (...) en el punto de desbordamiento.

Controlar los espacios en blanco

La propiedad white-space se usa para especificar cómo se deben controlar los espacios en blanco en un elemento. Para obtener más detalles, consulta el artículo de white-space sobre MDN.

white-space: pre puede ser útil para renderizar arte ASCII o bloques de código con sangría cuidadosamente.

Controla cómo se rompen las palabras

Usa word-break para cambiar la forma en que las palabras deben estar "rotas" cuando sobrepasan la línea. De forma predeterminada, el navegador no divide palabras. Si usas el valor de palabra clave break-all para word-break, se indicará al navegador que divida las palabras en caracteres individuales si es necesario.

Cómo cambiar la alineación del texto

Usa text-align para especificar la alineación horizontal del texto en un bloque o elemento de una celda de la tabla. Esta propiedad acepta los valores de palabra clave left, right, start, end, center, justify y match-parent.

Los valores left y right alinean el texto a los lados izquierdo y derecho del bloque, respectivamente.

Usa start y end para representar la ubicación del principio y el final de una línea de texto en el modo de escritura actual. Por lo tanto, start se asigna a left en inglés y a right en alfabeto árabe, que se escribe de derecha a izquierda (RTL). Son alineaciones lógicas. Obtén más información en nuestro módulo de propiedades lógicas.

Usa center para alinear el texto en el centro del bloque.

El valor de justify organiza el texto y cambia el espaciado entre palabras automáticamente, de modo que el texto se alinee con los bordes izquierdo y derecho del bloque.

Cómo cambiar la dirección del texto

Usa direction para definir la dirección del texto, que puede ser ltr (de izquierda a derecha, predeterminada) o rtl (de derecha a izquierda). Algunos idiomas, como el árabe, el hebreo o el persa, se escriben de derecha a izquierda, por lo que se debe usar direction: rtl. Para inglés y todos los demás idiomas que se escriben de izquierda a derecha, usa direction: ltr.

Cómo cambiar el flujo del texto

Usa writing-mode para cambiar la forma en que fluye y se organiza el texto. El valor predeterminado es horizontal-tb, pero también puedes establecer writing-mode en vertical-lr o vertical-rl para el texto que deseas que fluya horizontalmente.

Cómo cambiar la orientación del texto

Usa text-orientation para especificar la orientación de los caracteres en el texto. Los valores válidos para esta propiedad son mixed y upright. Esta propiedad solo es relevante cuando writing-mode está configurado en un valor distinto de horizontal-tb.

Cómo agregar una sombra al texto

Usa text-shadow para agregar una sombra al texto. Esta propiedad espera tres longitudes (x-offset, y-offset y blur-radius) y un color.

Consulta la sección text-shadow de nuestro módulo sobre sombras para obtener más información.

Fuentes variables

Por lo general, las fuentes “normales” requieren que se importen diferentes archivos para distintas versiones del tipo de letra, por ejemplo, negrita, cursiva o condensada. Las fuentes variables son fuentes que pueden contener muchas variantes diferentes de un tipo de letra en un archivo.

Consulta nuestro artículo sobre fuentes variables para obtener más detalles.

Seudoelementos

Pseudoelementos ::first-letter y ::first-line

Los pseudoelementos ::first-letter y ::first-line se orientan a la primera letra y la primera línea de un elemento de texto, respectivamente.

Pseudoelemento ::selection

Usa el seudoelemento ::selection para cambiar la apariencia del texto seleccionado por el usuario.

Cuando se usa este seudoelemento, solo se pueden utilizar determinadas propiedades de CSS: color, background-color, text-decoration, text-shadow, stroke-color, fill-color y stroke-width.

font-variant

La propiedad font-variant es una abreviatura de varias propiedades de CSS que te permiten elegir variantes de fuente, como small-caps y slashed-zero. Las propiedades de CSS que se incluyen en esta abreviatura son font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures y font-variant-numeric. Consulta los vínculos de cada propiedad para obtener más detalles sobre su uso.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre tipografía en la Web

Recursos

• En Prácticas recomendadas sobre fuentes, se aborda la importación y la renderización de fuentes, además de otras prácticas recomendadas para usar fuentes en la Web.
• Estilos fundamentales de texto y fuente de MDN.