Dar estilo al texto con propiedades de fuentes de CSS

Introducción

En este laboratorio, los estudiantes aprenderán a dar estilo al texto utilizando propiedades de fuentes CSS, explorando técnicas fundamentales de tipografía en el diseño web. El tutorial completo guía a los aprendices a través de la creación de un documento HTML y la aplicación de varios métodos de estilo de fuente, incluyendo familia de fuentes, tamaño, altura de línea, estilo y peso.

Los participantes comenzarán estableciendo una estructura HTML básica y luego mejorarán progresivamente sus habilidades de tipografía mediante la implementación de propiedades CSS que controlan la apariencia del texto. A través de la práctica práctica, los estudiantes descubrirán cómo crear contenido web atractivo visualmente y legible utilizando diferentes técnicas de fuentes, ganando experiencia práctica en el diseño de tipografía web.

Crear un archivo HTML y configurar la estructura básica

En este paso, aprenderás a crear un archivo HTML y configurar su estructura básica para dar estilo al texto con CSS. Usaremos el WebIDE para crear un nuevo documento HTML que servirá como base para nuestro ejercicio de estilo tipográfico.

Primero, navega hasta el directorio ~/project en el WebIDE. Crea un nuevo archivo llamado tipografia.html haciendo clic derecho en el explorador de archivos y seleccionando "Nuevo archivo".

Aquí está la estructura básica de HTML que crearás:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Estilo tipográfico con CSS</title>
    <style>
      /* Agregaremos nuestros estilos CSS aquí en pasos posteriores */
    </style>
  </head>
  <body>
    <h1>Bienvenido al tipografía con CSS</h1>
    <p>Este párrafo demostrará varias técnicas de estilo de texto.</p>
  </body>
</html>

Analicemos los componentes clave de esta estructura HTML:

<!DOCTYPE html> declara que se trata de un documento HTML5
<html lang="en"> establece el idioma del documento
<head> contiene metadatos sobre el documento
<meta charset="UTF-8"> asegura una codificación de caracteres adecuada
<meta name="viewport"> ayuda con el diseño responsivo
<title> establece el título de la página
La etiqueta <style> es donde agregaremos nuestro CSS (lo expandiremos en pasos posteriores)
<body> contiene el contenido visible de la página

Salida de ejemplo cuando abres este archivo en un navegador:

[Una página simple con un encabezado "Bienvenido al tipografía con CSS"
y un párrafo debajo de él]

Aplicar una familia de fuentes a los encabezados

En este paso, aprenderás a aplicar diferentes familias de fuentes a los encabezados utilizando CSS. La familia de fuentes es una propiedad crucial que determina la tipografía del texto, lo que te permite crear una tipografía atractiva visualmente y legible.

Abre el archivo tipografia.html en el WebIDE y modifica la sección <style> para agregar propiedades de familia de fuentes:

<style>
  h1 {
    font-family: Arial, sans-serif;
  }

  h2 {
    font-family: "Times New Roman", serif;
  }

  p {
    font-family: Verdana, sans-serif;
  }
</style>

Exploremos los conceptos clave de la familia de fuentes:

Fuentes seguras para la web: Son fuentes que generalmente están disponibles en diferentes dispositivos y navegadores.
- Fuentes sin serif (como Arial): Apariencia limpia y moderna
- Fuentes con serif (como Times New Roman): Apariencia tradicional y formal
Fuentes de respaldo: Siempre proporciona una familia de fuentes genérica como respaldo
- sans-serif
- serif
- monospace
Varias opciones de fuentes: Lista las fuentes en orden de preferencia
- La primera fuente es la opción principal
- Las fuentes siguientes son fuentes de respaldo si las fuentes anteriores no están disponibles

Expande tu HTML para demostrar diferentes encabezados:

<body>
  <h1>Título principal (Arial)</h1>
  <h2>Subtítulo (Times New Roman)</h2>
  <p>Texto del párrafo en Verdana</p>
</body>

Salida de ejemplo en un navegador:

[Una página que muestra:
- Título principal en Arial
- Subtítulo en Times New Roman
- Párrafo en Verdana]

Establecer el tamaño de fuente y la altura de línea

En este paso, aprenderás a controlar la legibilidad y la apariencia del texto mediante la configuración del tamaño de fuente y la altura de línea utilizando CSS. Estas propiedades son cruciales para crear una tipografía atractiva visualmente y fácil de leer.

Abre el archivo tipografia.html y actualiza la sección <style> con el siguiente CSS:

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    line-height: 1.5;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    line-height: 1.4;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;
  }
</style>

Analicemos los conceptos clave:

Tamaño de fuente:
- Se mide en píxeles (px), em o rem
- Controla la altura del texto
- Tamaños típicos:
  - Encabezados: 24 - 36px
  - Texto del cuerpo: 14 - 16px
Altura de línea:
- Controla el espacio vertical entre las líneas de texto
- Mejora la legibilidad
- Normalmente se establece entre 1.4 y 1.6
- Puede ser sin unidades (recomendado) o en píxeles

Expande tu HTML para demostrar diferentes tamaños de texto:

<body>
  <h1>Título principal (36px)</h1>
  <h2>Subtítulo (24px)</h2>
  <p>
    Texto del párrafo con una altura de línea aumentada para una mejor
    legibilidad.
  </p>
</body>

Salida de ejemplo en un navegador:

[Una página que muestra:
- Un gran título principal
- Un subtítulo más pequeño
- Un párrafo con un espaciado de línea cómodo]

Agregar estilo y peso de fuente

En este paso, aprenderás a usar el estilo y el peso de fuente para agregar énfasis y variedad a tu texto utilizando CSS. Estas propiedades ayudan a crear una jerarquía visual y a mejorar el diseño general de tu tipografía.

Abre el archivo tipografia.html y actualiza la sección <style> con el siguiente CSS:

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-style: italic;
    font-weight: bold;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
  }

  .highlight {
    font-style: italic;
    font-weight: bold;
  }
</style>

Exploremos los conceptos clave:

Estilo de fuente:
- normal: Apariencia estándar del texto
- italic: Texto en cursiva
- oblique: Similar a cursiva, pero menos común
Peso de fuente:
- normal: Texto regular (400)
- bold: Texto más grueso y prominente (700)
- Valores numéricos: 100 - 900 (incrementos de 100)
  - 400: Normal
  - 600: Semi-negrita
  - 700: Negrita

Modifica tu HTML para demostrar estas propiedades:

<body>
  <h1>Título principal (Cursiva y Negrita)</h1>
  <h2>Subtítulo (Semi-Negrito)</h2>
  <p>
    Texto regular del párrafo.
    <span class="highlight">Este texto está resaltado</span>.
  </p>
</body>

Salida de ejemplo en un navegador:

[Una página que muestra:
- Título principal en cursiva y negrita
- Subtítulo en semi-negrita
- Párrafo con un span resaltado]

Combinar propiedades de fuente usando notación abreviada

En este paso, aprenderás a usar la propiedad abreviada font de CSS para combinar múltiples propiedades relacionadas con la fuente en una declaración concisa y única. Este enfoque hace que tu CSS sea más legible y eficiente.

Abre el archivo tipografia.html y actualiza la sección <style> con el siguiente CSS:

<style>
  h1 {
    font:
      bold italic 36px Arial,
      sans-serif;
  }

  h2 {
    font:
      600 24px "Times New Roman",
      serif;
  }

  p {
    font:
      normal 16px/1.6 Verdana,
      sans-serif;
  }

  .highlight {
    font:
      bold italic 16px Verdana,
      sans-serif;
  }
</style>

Analicemos la sintaxis de la propiedad abreviada font:

Sintaxis básica: font: [estilo de fuente] [peso de fuente] [tamaño de fuente] [altura de línea] [familia de fuentes]
- ¡El orden importa!
- No todos los valores son necesarios
Patrones abreviados comunes:
- font: estilo peso tamaño familia
- font: tamaño/altura de línea familia
- font: peso tamaño familia

Modifica tu HTML para demostrar las propiedades abreviadas:

<body>
  <h1>Título principal (Notación abreviada)</h1>
  <h2>Subtítulo (Sintaxis compacta)</h2>
  <p>
    Párrafo con altura de línea. <span class="highlight">Texto resaltado</span>.
  </p>
</body>

Salida de ejemplo en un navegador:

[Una página que muestra:
- Título principal con estilo en negrita y cursiva
- Subtítulo con declaración de fuente compacta
- Párrafo con altura de línea integrada]

Resumen

En este laboratorio, los participantes aprenden los fundamentos del estilo de texto utilizando las propiedades de fuentes de CSS mediante un enfoque paso a paso. La fase inicial implica crear un archivo HTML con una estructura básica, configurar los metadatos esenciales y preparar un lienzo para la experimentación tipográfica. A los aprendices se les presenta los elementos y atributos HTML clave, incluyendo la declaración DOCTYPE, la configuración del idioma y la configuración del viewport.

El laboratorio avanza hacia técnicas prácticas de estilo CSS, centrándose en la manipulación de fuentes. Los participantes exploran métodos para aplicar familias de fuentes a los encabezados, ajustar los tamaños de fuente y las alturas de línea, y modificar los estilos y pesos de fuente. Al trabajar directamente en el WebIDE y construir gradualmente su código HTML y CSS, los estudiantes adquieren experiencia práctica en la transformación de la apariencia del texto y en la comprensión de cómo diferentes propiedades de fuente contribuyen a una tipografía web efectiva.