Texto y tipografía

Podcast de CSS - 036: Texto y tipografía

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

Al crear un sitio web, no es necesario que apliques estilo a tu texto; en realidad, 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 agregar un poco de estilo para mejorarlo. Si cambias algunas propiedades básicas, puedes mejorar significativamente la experiencia de lectura para 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.

A continuación, analizaremos las propiedades esenciales de fuentes de CSS, como font-family, font-style, font-weight y font-size. Estos conceptos básicos establecen el escenario para manipular el texto, tanto para el estilo como para la legibilidad.

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

Se proporcionarán ejemplos prácticos y sugerencias para consolidar tu comprensión y aplicación de estas técnicas de CSS.

La regla @font-face

La regla-at @font-face de CSS es fundamental en el diseño web, ya que te permite especificar y usar fuentes personalizadas para mostrar texto. Lo bueno de @font-face es su versatilidad: te permite obtener fuentes desde un servidor remoto o desde 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 sobre el modelo de referencia.

descent-override

Ajusta la métrica de descenso, lo que afecta el espacio debajo del modelo de referencia.

font-display

Controla el comportamiento de visualización de la fuente según su estado de descarga.

font-family

Asigna un nombre a la fuente para usarla en las propiedades relacionadas con la fuente.

font-stretch

Establece un escalamiento horizontal aceptable, especificado como un solo valor o rango.

font-style

Define el estilo de fuente y admite rangos de ángulos para estilos oblicuos.

font-weight

Determina el grosor de la fuente o el rango de grosores disponibles.

font-feature-settings

Permite el acceso a las funciones de fuentes de OpenType.

font-variation-settings

Proporciona un control más preciso sobre la configuración de las fuentes variables.

line-gap-override

Anula el intervalo de 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 necesario 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 se revierte a un archivo de fuente remoto como resguardo. Los navegadores priorizan los recursos en función del orden de la declaración, de manera que local() debería 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 restricciones de las fuentes "seguras para la Web" ya que les permite usar una 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.

Nota: Para conocer estrategias de compatibilidad y más detalles sobre navegadores anteriores, consulta la documentación del descriptor src. También puedes anidar @font-face dentro de las reglas de grupos condicionales de CSS.

Tipos de MIME de la fuente

Formato	Tipo de MIME
TrueType	font/ttf
OpenType	font/otf
Formato de fuente abierta web	font/woff
Formato de fuente abierta web 2	font/woff2

Nota: Las fuentes web siguen la política del mismo origen, pero se pueden configurar para el uso de origen cruzado con controles de acceso HTTP.

Nota: @font-face no se puede declarar dentro de un bloque de selección de CSS.

Diferencias entre @font-face y font-family

En CSS, @font-face y font-family a menudo se confunden, pero tienen distintos propósitos.

Como se explicó anteriormente, @font-face es una regla que se usa para definir cualquier fuente personalizada que quieras usar en tu aplicación web. Le 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).

Por el contrario, 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 incluidas en font-family pueden ser 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.

Este es un ejemplo de 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 del cuerpo, con Arial como resguardo si "CustomFont" no está disponible.

Cambiar el tipo de letra

Navegadores compatibles

• 1
• 12
• 1
• 1

Origen

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

La propiedad font-family acepta una lista de cadenas separadas por comas, 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.

Nota: Cuando el navegador elige qué fuente mostrar en tu declaración de font-family, no se detiene en la primera fuente disponible de la lista. En cambio, selecciona las fuentes un carácter a la vez. Si un carácter en particular no está disponible en la primera fuente de la lista, pasa a la siguiente, y así sucesivamente.

Cuando usas 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), tu resguardo debe ser sans-serif para que coincida.

Usar fuentes cursivas y oblicuas

Navegadores compatibles

• 1
• 12
• 1
• 1

Origen

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

Nota: P.: ¿Cuál es la diferencia entre italic y oblique? R.: En las fuentes que lo admiten, font-style: italic suele ser una versión cursiva del tipo de letra normal. font-style: oblique muestra una versión inclinada del tipo de letra normal.

Aplicar negrita al texto

Navegadores compatibles

• 2
• 12
• 1
• 1

Origen

Usa font-weight para establecer la "negrita" del texto. Esta propiedad acepta valores de palabras clave (normal, bold), valores relativos de palabras clave (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 superior. Consulta Signing of Relative Weights de MDN para obtener un gráfico útil que muestra cómo se determina este valor.

Nota: La mayoría de las fuentes, en especial las "seguras para la Web", solo admiten los pesos 400 (normal) y 700 (bold). Cuando importes fuentes con @font-face o @import, puedes elegir los pesos específicos que desees incorporar. Sin embargo, las fuentes no variables solo admiten valores numéricos para font-weight en las centenas, p.ej., 100, 200, 300, etc. Si deseas usar font-weight: 321 (por ejemplo), deberás usar una Fuente variable.

Cómo cambiar el tamaño del texto

Navegadores compatibles

• 1
• 12
• 1
• 1

Origen

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 absolutas (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 superior.

Nota: P.: ¿Cuál es la diferencia entre em y rem? R.: En CSS, em representa el font-size heredado del elemento superior. Por ejemplo, font-size: 2em es equivalente al font-size del elemento superior multiplicado por dos. rem es similar, pero representa el font-size heredado del elemento raíz, como <html>.

Cambiar el espacio entre las líneas

Navegadores compatibles

• 1
• 12
• 1
• 1

Origen

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.

Cómo cambiar el espacio entre caracteres

Navegadores compatibles

• 1
• 12
• 1
• 1

Origen

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, selecciona una letra individual para ver el tamaño del letterbox y cómo cambia con letter-spacing.

Cambiar el espacio entre palabras

Navegadores compatibles

• 1
• 12
• 1
• 1

Origen

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 especifiques es para 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 ordenar estas propiedades.

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

Navegadores compatibles

• 1
• 12
• 1
• 1

Origen

Usa text-transform para modificar las mayúsculas del 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 al texto subrayados, sobrelíneas y líneas directas

Navegadores compatibles

• 1
• 12
• 1
• 1

Origen

Usa text-decoration para agregar líneas a tu texto. El subrayado es el más utilizado, pero puedes agregar líneas sobre el texto o a lo largo de él.

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 de trazo de todas las decoraciones de text-decoration-line.

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

Nota: Usa text-underline-position para compensar el subrayado de una text-decoration: underline por la cantidad especificada. Esta propiedad no funciona para overline ni line-through.

Cómo agregar una sangría al texto

Navegadores compatibles

• 1
• 12
• 1
• 1

Origen

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

Cómo manejar el contenido oculto o desbordado

Navegadores compatibles

• 1
• 12
• 7
• 1.3

Origen

Usa text-overflow para especificar cómo se representa el contenido oculto. Existen 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 los espacios en blanco

Navegadores compatibles

• 1
• 12
• 1
• 1

Origen

La propiedad white-space se usa para especificar cómo se debe manejar el espacio en blanco en un elemento. Para obtener más información, 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

Navegadores compatibles

• 1
• 12
• 15
• 3

Origen

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 divide las palabras. Si usas el valor de palabra clave break-all para word-break, el navegador podrá descifrar palabras en caracteres individuales si es necesario.

Cambiar la alineación del texto

Navegadores compatibles

• 1
• 12
• 1
• 1

Origen

Usa text-align para especificar la alineación horizontal del texto en un bloque o elemento de celda de 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 comienzo y del 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 la secuencia de comandos árabe, que se escribe de derecha a izquierda (RTL). Son alineaciones lógicas. Para obtener más información, consulta 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 de las palabras automáticamente para que se alinee con los bordes izquierdo y derecho del bloque.

Cómo cambiar la dirección del texto

Navegadores compatibles

• 2
• 12
• 1
• 1

Origen

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 escriben de izquierda a derecha, usa direction: ltr.

Precaución: En general, se recomienda usar el atributo HTML dir en lugar de direction. Si quieres obtener más información, consulta este debate de StackOverflow.

Cambia el flujo del texto

Navegadores compatibles

• 48
• 12
• 41
• 10.1

Origen

Usa writing-mode para cambiar la forma en que se organiza y fluye 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

Navegadores compatibles

• 48
• 79
• 41
• 14

Origen

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 establece en un valor distinto de horizontal-tb.

Cómo agregar una sombra al texto

Navegadores compatibles

• 2
• 12
• 3.5
• 1.1

Origen

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

Normalmente, las fuentes "normales" requieren que se importen diferentes archivos para diferentes versiones del tipo de letra, como negrita, cursiva o condensado. 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 fuentes variables para obtener más detalles.

Pseudoelementos

Término clave: Un seudoelemento es una parte de un elemento al que puedes segmentar tus anuncios con palabras clave de CSS sin tener que agregar más HTML. Consulta nuestro módulo sobre los pseudoelementos para obtener información más detallada sobre este tema.

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

Navegadores compatibles

• 1
• 12
• 1
• 1

Origen

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

Seudoelemento ::selection

Navegadores compatibles

• 1
• 12
• 62
• 1.1

Origen

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

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

font-variant

Navegadores compatibles

• 1
• 12
• 1
• 1

Origen

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 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 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

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

serif

Correcto.

monospace

Correcto.

italic

Vuelve a intentarlo. italic es una palabra clave válida para font-style, no para font-family.

sci-fi

Vuelve a intentarlo. Sin embargo, fantasy es un resguardo genérico válido para font-family.

sans-serif

Correcto.

helvetica

Vuelve a intentarlo. "Helvetica" no es una palabra clave genérica, sino que hace referencia a una familia de fuentes específica.

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

text-capitalize: true;

Vuelve a intentarlo.

text-case: capitalize;

Vuelve a intentarlo.

text-transform: capitalize;

Correcto.

font-style: capitals;

Vuelve a intentarlo.

font-variant: capitalize;

Vuelve a intentarlo.

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

Verdadero

Vuelve a intentarlo. text-orientation cambia la rotación de las letras en una línea.

Falso

Correcto. text-orientation cambia la rotación de las letras en una línea. Usa text-align para alinear el texto hacia la izquierda, la derecha o el centro (y más).

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

line-spacing

Vuelve a intentarlo.

leading

Vuelve a intentarlo. Introducción es el término correcto para el espacio entre líneas en la tipografía, pero no es una propiedad válida de CSS.

baseline-distance

Vuelve a intentarlo.

line-height

Correcto.

Recursos

• En Prácticas recomendadas sobre fuentes, se analizan la importación de fuentes, la renderización de fuentes y otras prácticas recomendadas para usar fuentes en la Web.
• Diseño de fuente y texto básico de MDN