Estilos fundamentales de texto y fuentes

¿Qué implica dar estilo al texto en CSS?

El texto dentro de un elemento se dispone dentro del cuadro de contenido del elemento. Comienza en la parte superior izquierda del área de contenido (o en la parte superior derecha, en el caso de contenido en idiomas RTL), y fluye hacia el final de la línea. Una vez que llega al final, pasa a la siguiente línea y vuelve a fluir hasta el final. Este patrón se repite hasta que todo el contenido se ha colocado dentro del cuadro. El contenido de texto se comporta efectivamente como una serie de elementos en línea, disponiéndose en líneas adyacentes entre sí, y sin crear saltos de línea hasta que se alcanza el final de la línea, o a menos que fuerces un salto de línea manualmente usando el elemento <br>.

Las propiedades CSS utilizadas para dar estilo al texto generalmente se dividen en dos categorías, que veremos por separado en este artículo:

• Estilos de fuente: Propiedades que afectan a la fuente de un texto, por ejemplo, qué fuente se aplica, su tamaño, y si es negrita, cursiva, etc.
• Estilos de diseño de texto: Propiedades que afectan el espaciado y otras características de diseño del texto, permitiendo manipular, por ejemplo, el espacio entre líneas y letras, y cómo se alinea el texto dentro del cuadro de contenido.

Fuentes

Sigamos directamente para ver las propiedades para dar estilo a las fuentes. En este ejemplo, aplicaremos algunas propiedades CSS a la siguiente muestra de HTML:

<h1>Tommy el gato</h1>

<p>Bueno, lo recuerdo como si fuera una comida atrás…</p>

<p>
  Dijo Tommy el Gato mientras retrocedía para limpiar cualquier materia extraña
  que pudiera haberse metido en su poderosa garganta. Más de una rata callejera
  gorda había encontrado su muerte mientras miraba fijamente el cavernoso cañón
  de esta impresionante máquina merodeadora Verdaderamente una maravilla de la
  naturaleza, este depredador urbano: el gato Tommy tenía muchas historias que
  contar. Pero era una rara ocasión como ésta en la que lo hacía.
</p>

Color

La propiedad color establece el color del contenido en primer plano de los elementos seleccionados, que generalmente es el texto, pero también puede incluir otras cosas, como un subrayado o superrayado colocado sobre el texto usando la propiedad text-decoration.

color puede aceptar cualquier unidad de color CSS, por ejemplo:

p {
  color: red;
}

Esto hará que los párrafos se vuelvan rojos, en lugar del negro predeterminado estándar del navegador, así:

Familias de fuentes

Para establecer una fuente diferente para tu texto, usas la propiedad font-family; esto te permite especificar una fuente (o lista de fuentes) para que el navegador la aplique a los elementos seleccionados. El navegador solo aplicará una fuente si está disponible en la máquina desde la que se accede al sitio web; si no, simplemente usará una fuente predeterminada del navegador. Un ejemplo simple se ve así:

p {
  font-family: "Arial";
}

Esto haría que todos los párrafos de una página adopten la fuente Arial, que se encuentra en cualquier computadora.

Fuentes seguras para la web

Hablando de la disponibilidad de fuentes, solo existe un cierto número de fuentes que están generalmente disponibles en todos los sistemas y que, por lo tanto, pueden usarse sin mucha preocupación. Estas son las llamadas fuentes seguras para la web.

La mayoría de las veces, como desarrolladores web queremos tener un control más específico sobre las fuentes usadas para mostrar nuestro contenido de texto. El problema es encontrar una manera de saber qué fuente está disponible en la computadora usada para ver nuestras páginas web. No hay forma de saber esto en todos los casos, pero se sabe que las fuentes seguras para la web están disponibles en casi todas las instancias de los sistemas operativos más usados (Windows, macOS, las distribuciones de Linux más comunes, Android, e iOS).

La lista de fuentes realmente seguras para la web cambiará a medida que evolucionen los sistemas operativos, pero es razonable considerar las siguientes fuentes como seguras para la web, al menos por ahora (muchas de ellas se popularizaron gracias a la iniciativa de Microsoft Core fonts for the Web de finales de los años 90 y principios de los 2000):

Fuentes predeterminadas

CSS define cinco nombres genéricos para las fuentes: serif, sans-serif, monospace, cursive y fantasy. Estos son muy genéricos, y la fuente exacta usada a partir de estos nombres genéricos puede variar entre cada navegador y cada sistema operativo en el que se muestren. Representa un escenario en el peor de los casos, en el que el navegador intentará dar lo mejor de sí para proporcionar una fuente que se vea apropiada. serif, sans-serif y monospace son bastante predecibles y deberían ofrecer algo razonable. Por otro lado, cursive y fantasy son menos predecibles, y recomendamos usarlas con mucho cuidado, probando sobre la marcha.

Los cinco nombres se definen de la siguiente manera:

Mi gran elefante rojo

body {
  font-family: serif;
}

Mi gran elefante rojo

body {
  font-family: sans-serif;
}

Mi gran elefante rojo

body {
  font-family: monospace;
}

Mi gran elefante rojo

body {
  font-family: cursive;
}

Mi gran elefante rojo

body {
  font-family: fantasy;
}

Pilas de fuentes

Como no puedes garantizar la disponibilidad de las fuentes que quieres usar en tus páginas web (incluso una fuente web podría fallar por alguna razón), puedes proporcionar una pila de fuentes (font stack) para que el navegador tenga varias fuentes entre las que elegir. Esto implica un valor de font-family que consiste en varios nombres de fuentes separados por comas, por ejemplo:

p {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
}

En ese caso, el navegador comienza por el principio de la lista y comprueba si esa fuente está disponible en la máquina. Si lo está, aplica esa fuente a los elementos seleccionados. Si no, pasa a la siguiente fuente, y así sucesivamente.

Es una buena idea proporcionar un nombre de fuente genérico adecuado al final de la pila, de modo que, si ninguna de las fuentes listadas está disponible, el navegador pueda al menos proporcionar algo aproximadamente adecuado. Para enfatizar este punto, a los párrafos se les asigna la fuente serif predeterminada del navegador si no hay otra opción disponible (que normalmente es Times New Roman), ¡lo cual no es adecuado para una fuente sans-serif!

Un ejemplo de font-family

Añadamos algo a nuestro ejemplo anterior, dándole a los párrafos una fuente sans-serif:

p {
  color: red;
  font-family: "Helvetica", "Arial", sans-serif;
}

Esto nos da el siguiente resultado:

Tamaño de fuente

En el artículo Valores y unidades de CSS del módulo anterior, repasamos las unidades de longitud y tamaño. El tamaño de fuente (establecido con la propiedad font-size) puede tomar valores medidos en la mayoría de estas unidades (y otras, como los porcentajes); sin embargo, las unidades más comunes que usarás para dimensionar el texto son:

• px (píxeles): la cantidad de píxeles de alto que quieres que tenga el texto. Esta es una unidad absoluta, es decir, produce el mismo valor computado final para la fuente en la página en prácticamente cualquier situación.
• em: 1 em es igual al tamaño de fuente establecido en el elemento padre del elemento actual al que estamos dando estilo (más específicamente, el ancho de una letra M mayúscula contenida dentro del elemento padre). Esto puede volverse complicado de calcular si tienes muchos elementos anidados con diferentes tamaños de fuente establecidos, pero es posible, como verás más abajo. ¿Por qué molestarse? Resulta bastante natural una vez que te acostumbras, y puedes usar em para dimensionar todo, no solo el texto. Puedes tener un sitio web entero dimensionado usando em, lo cual facilita el mantenimiento.
• rem: estas funcionan igual que em, excepto que 1 rem es igual al tamaño de fuente establecido en el elemento raíz del documento (es decir, <html>), no en el elemento padre. Esto hace que sea mucho más fácil hacer los cálculos para determinar tus tamaños de fuente.

El font-size de un elemento se hereda del elemento padre de ese elemento. Todo esto comienza con el elemento raíz de todo el documento — <html> — cuyo font-size estándar está establecido en 16px en todos los navegadores. Cualquier párrafo (u otro elemento que no tenga un tamaño diferente establecido por el navegador) dentro del elemento raíz tendrá un tamaño final de 16px. Otros elementos pueden tener tamaños predeterminados diferentes. Por ejemplo, un elemento h1 tiene un tamaño de 2em establecido por defecto, por lo que tendrá un tamaño final de 32px.

Las cosas se vuelven más complicadas cuando empiezas a alterar el tamaño de fuente de elementos anidados. Por ejemplo, si tuvieras un elemento <article> en tu página, y establecieras su font-size en 1.5 em (lo cual se computaría a un tamaño final de 24 px), y luego quisieras que los párrafos dentro de los elementos <article> tuvieran un tamaño de fuente computado de 20 px, ¿qué valor de em usarías?

<!-- El tamaño de letra base del documento es 16px -->
<article>
  <!-- Si mi tamaño de letra es 1.5em -->
  <p>Mi párrafo</p>
  <!-- ¿Cómo calculo el tamaño del tipo de letra para que dé 20px? -->
</article>

Necesitarías establecer su valor em en 20/24, o 0.83333333 em. Los cálculos pueden ser complicados, así que debes tener cuidado con cómo das estilo a las cosas. Es mejor usar rem cuando puedas para mantener las cosas simples, y evitar establecer el font-size de elementos contenedores cuando sea posible.

Estilo de fuente, peso de fuente, transformación de texto y decoración de texto

CSS ofrece cuatro propiedades comunes para alterar el peso visual/énfasis del texto:

• font-style: se usa para activar o desactivar el texto en cursiva. Los valores posibles son los siguientes (rara vez usarás esto, a menos que quieras desactivar algún estilo en cursiva por alguna razón):

  • normal: establece el texto con la fuente normal (desactiva cualquier cursiva existente).
  • italic: establece el texto para usar la versión en cursiva de la fuente, si está disponible; si no, simulará la cursiva usando oblicua en su lugar.
  • oblique: establece el texto para usar una versión simulada de una fuente en cursiva, creada inclinando la versión normal.

• font-weight: establece qué tan negrita es el texto. Tiene muchos valores disponibles por si tienes muchas variantes de fuente disponibles (como -light, -normal, -bold, -extrabold, -black, etc.), pero en la práctica rara vez usarás alguno que no sea normal y bold:

  • normal, bold: peso de fuente normal y negrita.
  • lighter, bolder: establece el grosor del elemento actual para que sea un paso más ligero o más pesado que el grosor de su elemento padre.
  • 100 – 900: valores numéricos de grosor que proporcionan un control más fino que las palabras clave anteriores, si es necesario.

• text-transform: te permite establecer que tu fuente sea transformada. Los valores incluyen:

  • none: evita cualquier transformación.
  • uppercase: transforma todo el texto a mayúsculas.
  • lowercase: transforma todo el texto a minúsculas.
  • capitalize: transforma todas las palabras para que tengan la primera letra en mayúscula.
  • full-width: transforma todos los glifos para que se escriban dentro de un cuadrado de ancho fijo, similar a una fuente monoespaciada, permitiendo alinear, por ejemplo, caracteres latinos junto con glifos de idiomas asiáticos (como chino, japonés, coreano).

• text-decoration: establece/quita decoraciones de texto en las fuentes (principalmente lo usarás para quitar el subrayado predeterminado de los enlaces al darles estilo). Los valores disponibles son:

  • none: quita cualquier decoración de texto ya presente.
  • underline: subraya el texto.
  • overline: le da al texto una línea superior.
  • line-through: pone una línea que atraviesa el texto (tachado).

  Debes tener en cuenta que text-decoration puede aceptar múltiples valores a la vez si quieres añadir varias decoraciones simultáneamente, por ejemplo, text-decoration: underline overline. Ten en cuenta también que text-decoration es una propiedad abreviada de text-decoration-line, text-decoration-style y text-decoration-color. Puedes usar combinaciones de estos valores de propiedad para crear efectos interesantes, por ejemplo: text-decoration: line-through red wavy.

Veamos cómo añadir algunas de estas propiedades a nuestro ejemplo:

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: "Helvetica", "Arial", sans-serif;
}

Nuestro nuevo resultado se ve así:

Sombras de texto

Puedes aplicar sombras a tu texto usando la propiedad text-shadow. Esta puede tomar hasta cuatro valores, como se muestra en el ejemplo a continuación:

text-shadow: 4px 4px 5px red;

Las cuatro propiedades son las siguientes:

1. El desplazamiento horizontal de la sombra respecto al texto original: puede tomar la mayoría de las unidades de longitud y tamaño de CSS disponibles, pero lo más común es que uses px; los valores positivos mueven la sombra hacia la derecha, y los negativos hacia la izquierda. Este valor debe incluirse.
2. El desplazamiento vertical de la sombra respecto al texto original. Se comporta de forma similar al desplazamiento horizontal, excepto que mueve la sombra hacia arriba/abajo, no hacia la izquierda/derecha. Este valor debe incluirse.
3. El radio de desenfoque: un valor más alto significa que la sombra se dispersa más ampliamente. Si este valor no se incluye, el valor predeterminado es 0, lo que significa sin desenfoque. Puede tomar la mayoría de las unidades de longitud y tamaño de CSS disponibles.
4. El color base de la sombra, que puede tomar cualquier unidad de color CSS. Si no se incluye, el valor predeterminado es currentColor, es decir, el color de la sombra se toma de la propiedad color del elemento.

Múltiples sombras

Puedes aplicar múltiples sombras al mismo texto incluyendo varios valores de sombra separados por comas, por ejemplo:

h1 {
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
}

Si aplicáramos esto al elemento <h1> en nuestro ejemplo de Tommy The Cat, terminaríamos con esto:

Diseño de texto

Con las propiedades básicas de fuente ya cubiertas, veamos las propiedades que podemos usar para afectar el diseño del texto.

Alineación de texto

La propiedad text-align se usa para controlar cómo se alinea el texto dentro de su cuadro de contenido contenedor. Los valores disponibles se listan a continuación. Funcionan de manera muy similar a como lo hacen en una aplicación de procesador de texto normal:

• left: justifica el texto a la izquierda.
• right: justifica el texto a la derecha.
• center: centra el texto.
• justify: hace que el texto se extienda, variando los espacios entre las palabras para que todas las líneas de texto tengan el mismo ancho. Debes usar esto con cuidado; puede verse fatal, especialmente cuando se aplica a un párrafo con muchas palabras largas. Si vas a usar esto, también deberías considerar usar algo más junto con ello, como hyphens, para dividir algunas de las palabras más largas entre líneas.

Si aplicáramos text-align: center; al elemento <h1> en nuestro ejemplo, terminaríamos con esto:

h1 {
  text-align: center;
}

Altura de línea

La propiedad line-height establece la altura de cada línea de texto. Esta propiedad no solo puede tomar la mayoría de las unidades de longitud y tamaño, sino que también puede tomar un valor sin unidad, que actúa como un multiplicador y generalmente se considera la mejor opción. Con un valor sin unidad, el font-size se multiplica y da como resultado el line-height. El texto del cuerpo generalmente se ve mejor y es más fácil de leer cuando las líneas están espaciadas. La altura de línea recomendada es de alrededor de 1.5 a 2 (doble espacio). Para establecer nuestras líneas de texto a 1.6 veces la altura de la fuente, usaríamos:

p {
  line-height: 1.6;
}

Aplicar esto a los elementos <p> en nuestro ejemplo nos daría este resultado:

Espaciado entre letras y palabras

Las propiedades letter-spacing y word-spacing te permiten establecer el espaciado entre letras y palabras en tu texto. No las usarás muy a menudo, pero podrías encontrarles utilidad para lograr un aspecto específico, o para mejorar la legibilidad de una fuente particularmente densa. Pueden tomar la mayoría de las unidades de longitud.

Para ilustrarlo, podríamos aplicar algo de espaciado entre palabras y letras a la primera línea de cada elemento <p> en nuestra muestra de HTML con:

p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}

Esto renderiza nuestro HTML como:

Otras propiedades que vale la pena revisar

Las propiedades anteriores te dan una idea de cómo empezar a dar estilo al texto en una página web, pero hay muchas más propiedades que podrías usar. Aquí solo quisimos cubrir las más importantes. Una vez que te hayas acostumbrado a usar las anteriores, también deberías explorar las siguientes:

Estilos de fuente:

• font-variant: alterna entre versalitas y las alternativas de fuente normal.
• font-kerning: activa y desactiva las opciones de interletraje (kerning) de la fuente.
• font-feature-settings: activa y desactiva varias características de fuentes OpenType.
• font-variant-alternates: controla el uso de glifos alternativos para una fuente determinada.
• font-variant-caps: controla el uso de glifos de mayúsculas alternativos.
• font-variant-east-asian: controla el uso de glifos alternativos para escrituras del este de Asia, como el japonés y el chino.
• font-variant-ligatures: controla qué ligaduras y formas contextuales se usan en el texto.
• font-variant-numeric: controla el uso de glifos alternativos para números, fracciones y marcadores ordinales.
• font-variant-position: controla el uso de glifos alternativos de tamaños más pequeños posicionados como superíndice o subíndice.
• font-size-adjust: ajusta el tamaño visual de la fuente independientemente de su tamaño de fuente real.
• font-stretch: alterna entre las posibles versiones alternativas estiradas de una fuente determinada.
• text-underline-position: especifica la posición de los subrayados establecidos usando el valor underline de la propiedad text-decoration-line.
• text-rendering: intenta realizar alguna optimización en el renderizado del texto.

Estilos de diseño de texto:

• text-indent: especifica cuánto espacio horizontal debe dejarse antes del inicio de la primera línea del contenido de texto.
• text-overflow: define cómo se les señala a los usuarios el contenido desbordado que no se muestra.
• white-space: define cómo se manejan los espacios en blanco y los saltos de línea asociados dentro del elemento.
• word-break: especifica si se deben dividir las líneas dentro de las palabras.
• direction: define la dirección del texto. (Esto depende del idioma y, por lo general, es mejor dejar que HTML se encargue de esa parte, ya que está vinculada al contenido del texto).
• hyphens: activa y desactiva la separación silábica (guionado) para los idiomas compatibles.
• line-break: relaja o refuerza la separación de líneas para idiomas asiáticos.
• text-align-last: define cómo se alinea la última línea de un bloque o de una línea, justo antes de un salto de línea forzado.
• text-orientation: define la orientación del texto en una línea.
• overflow-wrap: especifica si el navegador puede o no dividir líneas dentro de las palabras para evitar el desbordamiento.
• writing-mode: define si las líneas de texto se disponen horizontal o verticalmente y la dirección en la que fluyen las líneas siguientes.

Propiedad abreviada de fuente

Muchas propiedades de fuente también pueden establecerse a través de la propiedad abreviada font. Estas se escriben en el siguiente orden: font-style, font-variant, font-weight, font-stretch, font-size, line-height, y font-family.

Entre todas estas propiedades, solo font-size y font-family son obligatorias al usar la propiedad abreviada font.

Se debe colocar una barra diagonal entre las propiedades font-size y line-height.

Un ejemplo completo se vería así:

font:
  italic normal bold normal 3em/1.5 "Helvetica",
  "Arial",
  sans-serif;

Jugando con el estilo del texto

Bien, ahora te toca a ti. Para esta tarea, no tenemos ningún ejercicio específico para que hagas. Solo nos gustaría que jugaras un poco con algunas propiedades de fuente/diseño de texto. ¡Descubre por ti mismo qué puedes lograr!

1. Haz clic en "Play" en el bloque de código a continuación para editar el ejemplo en el MDN Playground.
2. Añade algunas declaraciones a la regla p { } vacía proporcionada para cambiar el estilo del texto proporcionado. Sé todo lo creativo que quieras.

Si cometes un error, puedes borrar tu trabajo usando el botón Reset en el MDN Playground. Consulta las secciones anteriores del artículo para encontrar más información sobre los estilos de fuente y texto que puedes establecer.

<p>Un texto de muestra para tu deleite</p>

p {

}

Resumen

¡Esperamos que hayas disfrutado jugando con el texto en este artículo! El siguiente artículo te dará todo lo que necesitas saber sobre cómo dar estilo a las listas en HTML.

Véase también

• All about the CSS font-family property, explainers.dev
• Web-safe fonts, Scrimba ^{socio de aprendizaje de MDN}

• Overview: Estilo de texto
• Siguiente