Texto y tipografía

The CSS Podcast - 036: Text & Typography (Podcast de CSS, episodio 36: Texto y tipografía)

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

Cuando creas un sitio web, no es necesario que le apliques un estilo a tu texto. De hecho, el código HTML tiene un estilo predeterminado bastante razonable.

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

En este módulo, comenzaremos con la regla @font-face, que te permite importar fuentes personalizadas a tus páginas web. Esto garantiza que tengas la tipografía exacta que necesitas, independientemente de las fuentes instaladas por el usuario.

Luego, analizaremos las propiedades de fuentes de CSS esenciales, incluidas font-family, font-style, font-weight y font-size. Estos conceptos básicos sientan las bases para manipular el texto en cuanto a estilo y legibilidad.

También analizaremos las propiedades específicas de los párrafos, como text-indent y word-spacing, antes de concluir con temas avanzados, como las fuentes variables y los seudoelementos, que refinan aún más tu control tipográfico.

A lo largo del curso, se proporcionarán ejemplos y sugerencias prácticos para consolidar tu comprensión y aplicación de estas técnicas de CSS.

La regla @font-face

La regla @ @font-face de CSS es fundamental en el diseño web, ya que te permite especificar y usar fuentes personalizadas para mostrar texto. La belleza de @font-face radica en su versatilidad: te permite obtener fuentes de un servidor remoto o de una fuente instalada en el dispositivo del usuario.

Sintaxis

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

Descriptores

ascent-override
Personaliza la métrica de ascenso, lo que afecta el espacio por encima del valor de referencia.
descent-override
Ajusta la métrica de descenso, lo que afecta el espacio debajo de la línea de base.
font-display
Controla el comportamiento de visualización de la fuente según su estado de descarga.
font-family
Nombra la fuente para usarla en propiedades relacionadas con fuentes.
font-stretch
Establece el ajuste horizontal aceptable, especificado como un solo valor o un rango.
font-style
Define el estilo de fuente y admite rangos de ángulos para los estilos oblicuos.
font-weight
Determina el grosor de la fuente o el rango de grosores disponibles.
font-feature-settings
Habilita el acceso a las funciones de fuentes OpenType.
font-variation-settings
Proporciona un control preciso sobre la configuración de fuentes variables.
line-gap-override
Anula el espacio entre líneas predeterminado de la fuente.
size-adjust
Aplica un factor de escala al contorno y las métricas de la fuente.
src
Define la fuente de la fuente, ya sea local o remota. Esto es obligatorio para la regla @font-face. Combinar url() y local() dentro de src es una estrategia común que usa una fuente local si está disponible y vuelve a un archivo de fuente remota como alternativa. Los navegadores priorizan los recursos según el orden de declaración, por lo que local() suele preceder a url().
unicode-range
Limita los caracteres para los que se debe usar esta fuente.

Descripción

@font-face libera a los diseñadores de las limitaciones de las fuentes "seguras para la Web" y les permite usar tipografía personalizada. La capacidad de la función local() para buscar una fuente en el dispositivo del usuario ofrece una experiencia fluida que no depende necesariamente de una conexión a Internet.

Tipos de MIME de fuentes

Formato Tipo de MIME
TrueType font/ttf
OpenType font/otf
Web Open Font Format font/woff
Web Open Font Format 2 font/woff2

La diferencia entre @font-face y font-family

En los CSS, @font-face y font-family suelen confundirse, pero cumplen propósitos distintos.

Como ya mencionamos, @font-face es una regla que se usa para definir las fuentes personalizadas que deseas usar en tu aplicación web. Indica al navegador dónde descargar la fuente, cómo mostrarla durante la carga (con la propiedad font-display) y especifica qué subconjunto de caracteres descargar (con unicode-range).

En cambio, font-family es una propiedad de CSS que se usa dentro de una regla de CSS para asignar una fuente en particular o una lista de fuentes a un elemento. Las fuentes que se enumeran en font-family pueden ser fuentes seguras para la Web, fuentes del sistema o fuentes personalizadas definidas con @font-face.

En resumen, @font-face declara una fuente y le asigna un nombre, y font-family aplica esta fuente declarada a los elementos HTML.

A continuación, se muestra un ejemplo del uso de ambos:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

En este ejemplo, @font-face define "CustomFont" y le indica al navegador dónde encontrarla. Luego, la propiedad font-family la aplica al elemento body, con Arial como alternativa si "CustomFont" no está disponible.

Cómo cambiar el tipo de letra

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

La propiedad font-family acepta una lista de cadenas separadas por comas, que pueden hacer referencia a familias de fuentes específicas o genéricas. Las familias de fuentes específicas son cadenas entre comillas, como "Helvetica", "EB Garamond" o "Times New Roman". Las familias de fuentes genéricas son palabras clave como serif, sans-serif y monospace (encuentra 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érica en caso de que el navegador del usuario no tenga las fuentes que prefieres. Por lo general, la familia de fuentes genérica de resguardo debe ser similar a tus fuentes preferidas: si usas font-family: "Helvetica" (una familia de fuentes Sans Serif), tu resguardo debe ser sans-serif para que coincida.

Cómo usar fuentes en cursiva y oblicuas

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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.

Cómo aplicar negrita al texto

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Usa font-weight para establecer el "grosor" del texto. Esta propiedad acepta valores de palabras clave (normal, bold), valores de palabras clave relativos (lighter, bolder) y valores numéricos (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 principal. Consulta el artículo de MDN sobre el significado de los pesos relativos para ver un gráfico útil que muestra cómo se determina este valor.

Cómo cambiar el tamaño del texto

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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 de longitud y porcentaje, font-size acepta algunos valores de palabras clave absolutos (xx-small, x-small, small, medium, large, x-large, xx-large) y un par de valores de palabras clave relativos (smaller, larger). Los valores relativos son relativos al font-size del elemento principal.

Cómo cambiar el espacio entre las líneas

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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. En general, se recomienda usar un número en lugar de una longitud o un porcentaje para evitar problemas con la herencia.

Cómo cambiar el espacio entre caracteres

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Usa letter-spacing para controlar la cantidad de espacio horizontal entre los caracteres del 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 los caracteres. En la siguiente demostración, intenta seleccionar una letra individual para ver el tamaño de su buzón y cómo cambia con letter-spacing.

Cómo cambiar el espacio entre palabras

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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 es para el 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. Las propiedades posibles son font-family, font-size, font-stretch, font-style, font-variant, font-weight y line-height.

Consulta el artículo font de MDN para conocer los detalles sobre cómo ordenar estas propiedades.

## Cambia las mayúsculas y minúsculas del texto

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Usa [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) para modificar el uso de mayúsculas en el texto sin necesidad de cambiar el código HTML subyacente. Esta propiedad acepta los siguientes valores de palabras clave: "uppercase", "lowercase" y "capitalize".

Cómo agregar subrayados, sobrelíneas y tachados al texto

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Usa text-decoration para agregar líneas a tu texto. Los subrayados son los más comunes, pero es posible agregar líneas sobre el texto o que lo atraviesen.

La propiedad text-decoration es una 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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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 controlar el contenido desbordado u oculto

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

Source

Usa text-overflow para especificar cómo se representa el contenido oculto. Hay dos opciones: clip (la predeterminada), que trunca el texto en el punto de desbordamiento, y ellipsis, que muestra una elipsis (…) en el punto de desbordamiento.

Controlar el espacio en blanco

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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 sobre white-space en MDN.

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

Controla cómo se separan las palabras

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

Source

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

Cómo cambiar la alineación del texto

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Usa text-align para especificar la alineación horizontal del texto en un bloque o un elemento de celda de tabla. Esta propiedad acepta los valores de palabras 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 inicio 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 escritura árabe, que se escribe de derecha a izquierda (RTL). Son alineaciones lógicas. Obtén más información en nuestro módulo sobre propiedades lógicas.

Usa center para alinear el texto al centro del bloque.

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

Controla cómo se ajusta el texto

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Source

Usa text-wrap para cambiar la forma en que se ajusta el texto dentro de un elemento.

Las palabras clave aceptadas para esta propiedad incluyen wrap, nowrap, balance y stable. El valor predeterminado es wrap, que minimiza el desbordamiento ajustando el texto en varias líneas a lo largo de los espacios normales y los saltos de palabras.

Puedes usar la palabra clave nowrap para lograr exactamente lo contrario y evitar que el texto se corte en varias líneas, lo que puede provocar un desbordamiento.

Para obtener la misma cantidad de texto en cada línea cuando, por ejemplo, escribes encabezados o títulos, usa la palabra clave balance. Para mejorar el rendimiento, los navegadores solo aplicarán este valor en elementos con seis líneas de texto o menos.

La palabra clave stable funciona de manera similar a wrap, pero está diseñada para usarse con texto contenteditable. Con text-wrap: stable configurado, las líneas sobre el contenido que se edita no se desplazarán durante el proceso.

A veces, las cadenas largas sin un punto de interrupción claro pueden desbordar los contenedores. Para controlar cómo se separan este tipo de textos, usa overflow-wrap.

Browser Support

  • Chrome: 23.
  • Edge: 18.
  • Firefox: 49.
  • Safari: 7.

Source

Las palabras clave que puedes usar para esta propiedad son normal, break-word y anywhere. El parámetro de configuración predeterminado es normal y no dividirá el texto en la siguiente línea, a menos que incluya espacios o puntos de interrupción naturales.

Los valores anywhere y break-word agregan puntos de interrupción en cualquier lugar dentro de la cadena para evitar el desbordamiento. Las palabras clave difieren en la forma en que responden a un tamaño min-content intrínseco o explícito. La palabra clave anywhere permite todas las oportunidades de interrupción suave posibles. El valor break-word no lo hace y haría que el texto sea tan largo como la palabra más larga.

Cómo cambiar la dirección del texto

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Usa direction para establecer la dirección del texto, ya sea ltr (de izquierda a derecha, el valor predeterminado) 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 leen de izquierda a derecha, usa direction: ltr.

Cambiar el flujo del texto

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

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

Browser Support

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 14.

Source

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 se configura en un valor que no sea horizontal-tb.

Cómo agregar una sombra al texto

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

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 la importación de diferentes archivos para las distintas versiones del tipo de letra, como negrita, cursiva o condensada. Las fuentes variables son fuentes que pueden contener muchas variantes diferentes de un tipo de letra en un solo archivo.

Roboto Flex en combinaciones aleatorias de ancho y peso

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

Pseudoelementos

Seudoelementos ::first-letter y ::first-line

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Los seudoelementos ::first-letter y ::first-line segmentan la primera letra y la primera línea de un elemento de texto, respectivamente.

Pseudoelemento ::selection

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1.

Source

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

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

font-variant

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

Verifica tus conocimientos

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

¿Cuál de las siguientes palabras clave se puede usar como un resguardo genérico font-family?

helvetica
serif
monospace
italic
sans-serif
sci-fi

¿Qué instrucción se usa para convertir la primera letra de cada palabra en mayúscula? p.ej., This is a sentence. ➡ This Is A Sentence.

font-variant: capitalize;
text-capitalize: true;
font-style: capitals;
text-case: capitalize;
text-transform: capitalize;

Verdadero o falso: Usa text-orientation para alinear el texto a la izquierda, a la derecha o al centro.

Falso
Verdadero

¿Qué propiedad de CSS se puede usar para cambiar el espacio entre las líneas de texto?

line-spacing
line-height
leading
baseline-distance

Recursos