En este artículo iniciará su viaje hacia el dominio del estilizado de texto con CSS. Aquí trataremos en detalle todos los fundamentos básicos del diseño del texto y las fuentes tipográficas, incluyendo configuración del peso, familia y estilo de la fuente, taquigrafía de fuente, la alineación del texto, el espaciado de líneas y letras y otros efectos.

Requisitos previos: Conocimientos básicos de informática, comceptos básicos de HTML basics (estudio de Introducción a HTML), conceptos ásicos de CSS basics (estudio de Introducción a CSS).
Objetivo: Aprender las propiedades y técnicas fundamentales necesarias para dar estilo al texto en las páginas web.

¿Qué implica el diseño de texto en CSS?

Como ya habrá experimentado en su trabajo con HTML y CSS, el texto dentro de un elemento se presenta dentro del cuadro de contenido del elemento. Este inicia desde la parte superior izquierda del área de contenido (o en la esquina superior derecha, en el caso del contenido del lenguaje RTL), y fluye hacia el final de la línea. Una vez que llega al final, baja a la siguiente línea y continúa, luego la siugiente línea, hasta que todo el contenido se haya ubicado en la caja. El contenido de texto se comporta efectivamente como una serie de elementos en línea, distribuios en líneas adyacentes entre sí, y sin crear saltos de línea hasya que se llega al final de la línea, o a menos que fuerce un salto de línea manualmente usando el elemento <br>.

Nota: Si el parrafo anterior lo deja confuso, no importa: vuelva atrás y revisa nuestro articulo sobre el Modelo de caja antes de continuar.

Las propiedades CSS usadas para dar estilo al texto generalmente pueden clasificarse en dos categorías, que veremos por separado en este artículo:

  • Estilos de la fuente tipográfica: Propiedades que afectan a la fuente que está siendo aplicada al texto (qué fuente se aplica, como de grande es, si es negrita, itálica, etc).
  • Estilos de disposición del texto: Propiedades que afectan el espaciado y otras característica de la disposición del texto, permitiendo la manipulación de, por ejemplo, el espacio entre líneas y letras, y como el texto se alinea dentro de la caja contenedora.

Nota: Tenga en cuenta que el texto dentro de un elemento es afectado completamente como si fuera una única entidad. No puede seleccionar y dar estilo a subsecciones de texto a menos que las envuelva mediante un elemento apropiado (como un <span> o <strong>), o usando un pseudo-elemento específico para el texto como ::first-letter (selecciona la primera letra del texto de un elemento), ::first-line (selecciona la primera línea del texto de un elemento), o ::selection (selecciona el texto actualmente resaltado por el cursor).

Fuentes tipográficas

Veamos las propiedades que permiten dar estilo a las fuentes tipográficas. En este ejemplo aplicaremos algunas propiedades CSS diferentes al mismo ejemplo HTML, las cuales se ven así:

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat 
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban 
predator — Tommy the cat had many a story to tell. But it was a rare 
occasion such as this that he did.</p>

Puedes ver el  ejemplo completo en Github (mire también el código fuente.)

Color

La propiedad color establece el color del contenido de los elementos seleccionados (el cual normalmente es texto, pero puede también incluir un par cosas más, como un subrayado línea superpuesta ubicada en el texto usando la propiedad text-decoration ).

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

p {
  color: red;
}

Esto causará que el contenido de los parrafos se  muestre en color rojo, en lugar del negro que es el estandar por defecto del navegador:

Familia de fuentes tipográficas

Par usar una fuente diferente en nuestro texto, usamos la propiedad font-family , que nos permite indicar al navegador una fuente (o lista de fuentes) que debe aplicar a los elementos seleccionados. El navegador sólo aplicará una fuente si está disponible en la máquina que está accediendo al sitio web; en caso contrario, simplemente usará  default font. Aquí tienes un ejemplo sencillo:

p {
  font-family: arial;
}

Esto hará que todos los parrafos de una página adopten la fuente arial, que se encuentra en cualquier computador.

Fuentes seguras para la web (web safe fonts)

Hablando de disponibilidad de fuentes, sólo hay cierto número de fuentes que están disponibles en general en todos los sistemas, y que en consecuencia peuden ser utlizadas sin demasiadas preocupaciones. Son las llamadas web safe fonts.

La mayor parte del tiempo, como desarrolladores web deseamos tener más control específico sobre las fuentes utilizadas para mostrar nuestro contenido de texto. El problema está en encontrar una manera de saber que fuente está disponible en el ordenador que está siendo utilizado para ver nuestras páginas. No hay manera de saber esto en todos los casos, pero al menos contamos con que las fuentes web safe están disponibles en casi todos los sistemas operativos más utilizados (las distribuciones Linux más comunes, Windows, Mac, Android, e iOS.)

La lista de las fuentes web safe cambiará al ir evolucionando los sistemas operativos, pero es correcto considerar las siguientes fuentes como web safe, al menos por ahora (muchas de ellas han sido popularizadas gracias a la iniciativa Core fonts for the Web de Microsoft a finales de los 90 y principio de los 2000):

Name Generic type Notes
Arial sans-serif A menudor se considera una buena práctica añadir también Helvetica como alternativa preferida a Arial ya que, aunque tienen casi el mismo aspecto, se condisera que Helvetica  tiene una forma más agradable, aunque Arial está más ampliamente disponible.
Courier New monospace Algunos sistemas operativos  cuentan con una versión alternativa (posiblemente más antigua) de la fuente Courier New llamada Courier. Se considera una buena práctica usar ambas, con Courier New como la alternativa preferida.
Georgia serif  
Times New Roman serif Algunos sistemas operativos  cuentan con una versión alternativa (posiblemente más antigua) de la Times New Roman llamada Times. Se considera una buena práctica usar ambas, con Times New Roman como la alternativa preferida.
Trebuchet MS sans-serif Debería tener cuidado usando  esta fuente ya que no está ampliamente disponible en los sistemas operativos moviles.
Verdana sans-serif  

Nota: Entre otros recursos, el sitio cssfontstack.com maintiene una lista de fuentes web safe disponibles en los sistemas operativos Windows y Mac, que puede ayudarlo en la toma de decisiones acerca de lo que consideras seguro para tus propositos.

Nota: Existe una manera de descargar una fuente personalizada junto con la página web, para que pueda personalizar el uso de la fuente de la manera que lo desee: web fonts. Esto es un poco más complejo, y discutiremos sobre esto en un artículo separado más adelante en el módulo.

Fuentes predeterminadas

CSS define cinco nombres genéricos para las fuentes:  serifsans-serif, monospace, cursive, y fantasy. Son muy genéricos y la fuente exacta que será utilizada cuando se especifiquen dichos nombres dependerá de cada navegador y puede variar dependiendo del sistema operativo. Representa el peor escenario posible en el que el navegador tratará de proporcionar al menos una fuente que parezca apropiada. serif, sans-serif y monospace son bastante predecibles y el navegador debería proporcionar algo razonable. Por otra parte, cursive y fantasy son menos predecibles y recomendamos que las use con cautela, probando a medida que avanza.

Los cinco nombres se definen de la siguiente manera:

Term Definition Example
serif Fuentes que tienen serifas (pequeños adornos ubicados generalmente en los extremos de las líneas de los caracteres tipográficos) Mi gran elefante rojo
sans-serif Fuentes que carecen de serifas. Mi gran elefante rojo
monospace Fuentes en las cuales cada caracter tiene el mismo ancho,  usadas frecuentemente en los listados de código de programa. Mi gran elefante rojo
cursive Fuentes que intentan emular la letra manuscrita, con trazos fluidos y conectadis. Mi gran elefante rojo
fantasy Fuentes que intentan ser decorativas. Mi gran elefante rojo

Listas de fuentes

Ya que no puede garantizar la disponibilidad de las fuentes que desea utilizar (incluso una web font podría fallar por alguna razón), puede proporcionar un lista de fuentes para que el navegador tenga múltiples fuentes entre las que elegir. Esto simplemente involucra al valor de font-family que debera consistir de una lista de varios nombres de fuentes separados por comas, por ejemplo.

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

En tal caso, el navegador comenzará al principio de la lista y busca si la primera fuente está disponible en la máquina. Si es así, aplicará esa fuente a los elementos seleccionados, y si no, lo intentara con el siguiente nombre de la lista, y así sucesivamente.

Es buena idea proporcionar un nombre de fuente genérica al final de la lista para que, en el caso de que ninguna de las fuentes deseadas esté disponible, el navegador pueda al menos proporcionar algo aproximadamente adecuado. Para enfatizar este punto, los navegadores asignan a los parrafos la fuente serif por defecto si ninguna otra opción está disponible - que normalmente es Time New Roman - y ¡esto no es bueno para una fuente sans-serif!

Nota: Los nombres de fuentes que constan de más de una palabra (como Trebuchet MS ) necesitan ser rodeadas por comillas, por ejemplo "Trebuchet MS".

Un ejemplo con font-family

A nuestro ejemplo anterior, vamos a proporcionarlo de una fuente sans-serif en los párrafos:

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

Esto nos da el siguiente resultado:

Tamaño de fuente

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

  • px (pixeles): El número de pixeles de alto que desea que sea el texto. Esta es una unidad absoluta — da como resultado el mismo valor calculado para la fuente en la página en casi cualquier situación.
  • ems: 1em es igual al tamaño de fuente establecido en el elemento padre del elemento actual que estamos diseñando (más específicamente, el ancho de una letra M mayúscula contenida dentro del elemento principal.) Esto puede ser complicado de entender si tiene muchos elementos anidados con diferentes tamaños de fuentes establecidas, pero es factible, como verá a continuación. ¿Por qué molestarse? Es bastante natural una vez que se acostumbra, y puede usar ems para establecer el tamaño de todo, no solo el texto. Puede tener un sitio web completo dimensionado con ems, lo que facilita el mantenimiento.
  • rems: Funcionan igual que los ems, excepto que 1rem es igual al tamaño de fuente establecido en el elemento raíz del documento (es decir, <html>), no el elemento padre. Esto hace que sea mucho más facil hacer los cálculos para calcular los tamaños de fuente, pero desafortunadamente los rems no son soportados en Internet Explorer 8 versiones anteriores. Si necesita dar soporte a navegadores más antiguos para su proyecto, puede seguir utilizando ems o pxs, o usar un polyfill tales como REM-unit-polyfill

El font-size de un elemento es heredado del elemento padre de ese elemento. Todo esto comienza con el elemento raíz de todo el documento — <html> — el font-size el cual se establece a 16px como estándar en todos los navegadores. Cualquier párrafo (o cualquier 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 diferentes tamaños predeterminados, por ejemplo un elemento <h1> tiene un tamaño de 2ems establecido de manera predeterminada, por lo que tendrá un tamaño final de 32px.

Las coasas se vuelven más complicadas cuando se empieza a alterar el tamaño de fuente de los elementos anidados. Por ejemplo, si tiene un elemento <article> en su página, y establece su tamaño de fuente a 1.5ems (el cual se calculará con un tamaño final de 24px), y luego quiere que los párrafos dentro del elemento <article> tengan un tamaño de letra calculado de 20px, ¿qué valor de ems debería usar?

<!-- el tamaño de letra base del documento es 16px -->
<article> <!-- Si mi tamaño de fuente es 1.5em -->
  <p>My paragraph</p> <!-- ¿Cómo calculo el tamaño de fuente a 20px? -->
</article>

Necesitaría establecer el valor de ems a 20/24, o 0.83333333ems. El cálculo puede ser compliado, por lo que debe tener cuidado cómo diseña las cosas. Lo mejor es usar rems donde pueda, para mantener las cosas simples, y evitar establecer el tamaño de letra de los elementos del contenedor siempre que sea posible.

Un simple ejemplo de tamaño

Al dimensionar el texto, generalmente es una buena idea establecer el tamaño de fuenta base del documento a 10px, de modo que los cálculos sean mucho más fáciles de resolver — los valores obligatorios (r)em son el tamaño de fuente de pixeles dividido por 10, no por 16. Luego de hacer eso, puede facilmente clasificar los diferentes tamaños de los tipos de su documento como desee. Es una buena idea enumerar todos los conjuntos de reglas de de tamaño de fuente de un area designada en su hoja de estilo, para que sean fáciles de encontrar.

Nuestro nuevo resultado luce así:

html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
}

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

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

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

  • font-style: Usado para activar y desactivar el texto en cursiva. Los posibles valores son los siguientes (raramente usará esto, a menos que desee desactivar algún estilo de cursiva por alguna razón):
    • normal: Establece el texto de la fuente normal (desactiva la cursiva existente).
    • italic: Establece el texto para usar la versión en cursiva de la fuente si está disponible; si no está disponible, simulará cursiva con oblicuo en su lugar.
    • oblique: Establece el texto para usar una versión simulada de cursiva en la fuente, creada inclinando la versión normal.
  • font-weight: Establece como negrita el texto. Este tiene muchos valores disponibles en caso de que tenga muchas variantes de fuente disponibles (tales como -light, -normal, -bold, -extrabold, -black, etc.), pero siendo sincero, raramente usará alguna de ellas, excepto por normal y bold:
    • normal, bold: Peso de la fuente Normal y negrita
    • lighter, bolder: Establece la negrita del elemento actual para que sea un paso más claro o más pesado que la negrita de su elemento padre.
    • 100900: Valores numéricos de negrita que proporcionan un control más detallado que las palabras claves anteriores, si es necesario. 
  • text-transform: Le permite configurar su fuente para ser transformada. Los valores incluyen:
    • none: Evita cualquier transformación.
    • uppercase: Transofrma TODO EL TEXTO A MAYÚSCULAS.
    • lowercase: Transforma todo el texto en minúsculas.
    • capitalize: Transforma todas las palabras para Tener La Primera Letra En Mayúscula.
    • full-width: Transforma todos los glifos que se escribirán dentro d un cuadrado de ancho fijo, similar a una fuente monoespaciada, lo que permite la alineación de por ejemplo, caracteres latinos junto con glifos del lenguaje asiático (como Chino, Japonés, Koreano.)
  • text-decoration: Activa/desactiva las decoraciones de texto en las fuentes (principalmente usará esto para desactivar el subrayado por defecto en los enlaces al diseñarlos.) Los valores disponibles son:
    • none: Desactiva cualquier decoración de texto que ya esté presente.
    • underline: Subraya el texto.
    • overline: Proporciona al texto una línea superpuesta.
    • line-through: Coloca un tachado sobre el texto.
    Debe tener en cuenta que text-decoration puede aceptar múltiples valores a la vez, si desea agregar múltiples decoraciones simultaneamente, por ejemplo text-decoration: underline overline. También tenga en cuenta que text-decoration es una propiedad abreviada de text-decoration-line, text-decoration-style, y text-decoration-color. Puede utilizar combinaciones de estos valores de propiedad para crear efectos interesantes, por ejemplo text-decoration: line-through red wavy.

Añadamos un par de estas propiedades a nuestro ejemplo. Nuestro nuevo resultado quedaría como este:

html {
  font-size: 10px;
}

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

h1 + p {
  font-weight: bold;
}

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

Sombras en el texto

Puede aplicar sombras a sus textos usando la propiedad text-shadow. Esta toma hasta cuatro valores, como se muestra en siguiente ejemplo:

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

Las cuatro propiedades son las siguientes:

  1. El desplazamiento horizontal de la sombra desde el texto original — esta puede tomar la mayoría de las unidades y magnitudes de CSS disponibles, pero lo más habitual es usar px. Este valor debe ser incluido.
  2. El esplazamiento vertical de la sombra desde el texto original; básicamente se comporta igual que el desplazamiento horizontal, excepto porque mueve la sombra arriba/abajo, y no derecha/izquierda . Este valor debe ser incluido.
  3. El radio de desenfoque — entre más alto sea el valor, significa que la sombra se dispersa más ampliamente. Si este valor no está incluido, el valor por defecto es 0, lo que significa que no hay desenfoque. esta propiedad puede tomar la mayoría de las unidades y magnitudes de CSS.
  4. El color base de la sombra, que puede tomar cualquier unidad de color de CC. Si no está incluido, el valor predeterminado es negro.

Nota: Los valores de desplazamiento positivo, mueven la sombra hacia la derecha o hacia abajo, mientras que los valores de desplazamiento negativo, mueven la sombrea hacia la izquierda o hacia arriba, por ejemplo -1px -1px.

Sombras múltiples

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

text-shadow: -1px -1px 1px #aaa,
             0px 4px 1px rgba(0,0,0,0.5),
             4px 4px 5px rgba(0,0,0,0.7),
             0px 0px 7px rgba(0,0,0,0.4);

Si aplicamos esto al elemento <h1> en nuestro ejemplo Tommy the cat, obtendríamos esto:

Nota: Puede ver más ejemplos interesantes del uso de  text-shadow en el artículo de Sitepoint Moonlighting with CSS text-shadow.

Diseño del texto

Con las propiedades básicas de fuente tratadas, echecmos un vistazo a las propiedades que podemos usar para afectar el diseño del texo.

Alineación del texto

L a propiedad text-align es usada para controlar la forma en que se alínea el texto dentro de su caja de contenido. Los valores disponibles son los siguientes, y funcionan dela misma forma que en una aplicación de procesamiento de texto:

  • 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. Debe usar esto con cuidado — ya que puede verse terrible, especialmente especialmente cuando se aplica a un párrafo con muchas palabras largas en él. Si va a utilizar esta propiedad, también debería pensar en algo más junto con ello, como hyphens, para dividir algunas de las palabras más largas en líneas.

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

Altura de la línea

La propiedad line-height establece la altura de cada línea de texto — esto puede tomar la mayoría de las unidades y magnitudes, pero tabién puede tomar un valor sin unidades, que actúa como un multiplicador y generalmente se considera la mejor opción — la propiedad font-size es multiplicada para obtener la altura de la línea (line-height). El texto del cuerpo (Body) generalmente se ve mejor y es más facil de leer cuando las líneas están separadas; la altura de la línea recomendada es de alrededor 1.5–2 (a doble espacio.) Por lo tanto para configurar nuestras líneas de texto a 1.5 veces la altura de la fuente, debería usar esto:

line-height: 1.5;

Aplicando esto a los elementos <p> en nuestro ejemplo nos daría este rsultado:

Espaciado entre líneas y palabras

Las propiedades letter-spacingword-spacing le permiten establecer el espaciado entre letras y palabras en el texto. No los usará a menudo, pero podría ser útil para obtener una apariencia determinada, o para mejorar la legibilidad de una fuente particularmente densa. Pueden tomar la mayoría de las unidades y magnitudes.

Por ejemplo, si aplicamos lo siguiente a la primera línea de los elementos <p> en nuestro ejemplo:

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

Obtendríamos lo siguiente:

Otras propiedades que vale la pena mirar

Las propiedades anteriores nos dieron una idea de cómo iniciar a diseñar texto en una página web, pero hay muchas más propiedades que puede usar. Solo queríamos cubrir las más importantes aquí. Una vez que se haya acostumbrado a usar las propiedades anteriores, también debería explorar las siguientes:

Estilos de fuente:

  • font-variant: Cambia entre minúsculas y alternativas de fuentes normales.
  • font-kerning: Activa/desactiva las opciones de interletraje de fuentes.
  • font-feature-settings: Activa/desactiva varias características de la fuente OpenType.
  • font-variant-alternates: Controla el uso de glifos alternos para una fuente dada.
  • font-variant-caps: Controla el uso de glifos alternos de mayúsculas.
  • font-variant-east-asian: Controla el uso de glifos alternos para scripts de Asia Oriental, como Japonés y Chino.
  • font-variant-ligatures: Controla cuales ligaduras y formas contextuales serán usadas en el texto.
  • font-variant-numeric: Controla el uso de glifos alternos para números, fracciones y marcadores ordinales.
  • font-variant-position: Controla el uso de glifos alternos de tamaños más pequeños posicionados como subíndice y superíndice.
  • font-size-adjust: Ajusta el tamaño visual de la fuente independientemente de su tamaño de fuente real.
  • font-stretch: Alterna entre posibles versiones extendidas de una fuente determinada.
  • text-underline-position: Especifica la posición de los subrayados establecidos usando la propiedad text-decoration-line con el valor underline.
  • text-rendering: Intenta realizar una optimización de la representación del texto.

Estilos de diseño de texto

  • text-indent: Especifica la cantidad de espacio horizontal que debe dejarse antes del comienzo de la primera línea del contenido de texto.
  • text-overflow: Define cómo se envía el contenido desbordado que no se visualiza en los usuarios.
  • 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 y por lo general, es mejor dejar que HTML maneje esa parte, ya que está vinculada al contenido del texto.)
  • hyphens: Activa/desactiva la separación de los idiomas soportados.
  • line-break: Relaja o fortalece el salto de línea para idiomas asiáticos.
  • text-align-last: Define cómo se alinea la última línea de un bloque o una línea, justo antes de un salto de línea forzado.
  • text-orientation: Define la orientación del texto en una línea.
  • word-wrap: Especifica si el navegador puede dividir las 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.

Forma abreviada de Font

Muchas propiedades de fuente también pueden ser establecidas de forma breve a través de la propiedad font. Estas son escritas en el siguiente orden:  font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.

De entre todas estas propiedades, solo son requeridas font-size y font-family cuando se usa la propiedad font de forma abreviada.

Se debe colocar una barra inclinada (slash) entre las propiedades font-sizeline-height.

Un ejemplo completo se vería así:

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

Aprendizaje activo: Juagando con el diseño de texto

En esta sección de aprendizaje activo, no tenemos ejercicios específicos para realizar: Simplemente nos gustaría que jueguecon algunas propiedades de diseño de fuente/texto, ¡y vea qué puede producir! Puede hacer esto ya sea utilizando archivos HTML/CSS sin conexión, o ingresando su código en el ejemplo editable en vivo a continuación.

Si comete un error, siempre puede restablecerlo utilizando el botón Reset.

Summary

Esperamos que haya disfrutado jugando con el texto en este artículo! El próximo artículo, le dará todo lo que necesita saber sobre el diseño de listas en HTML.

En este módulo

 

Etiquetas y colaboradores del documento

Colaboradores en esta página: laatcode, joseanpg
Última actualización por: laatcode,