MÓDULO 1: ESTILOS BÁSICOS

Tipografía Web

La tipografía es el corazón del diseño web. Las fuentes, tamaños, espaciados y pesos correctos pueden transformar tu sitio de amateur a profesional. Aprenderás a elegir y usar fuentes como un diseñador.

---

1. Font Family (Familia de Fuentes)

Define qué fuente usar. Puedes especificar varias opciones (fallbacks) en caso de que la primera no esté disponible.

/* Fuentes seguras del sistema */
body {
  font-family: Arial, sans-serif;
}

/* Múltiples opciones (fallbacks) */
h1 {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

/* Con comillas si tiene espacios */
p {
  font-family: "Times New Roman", serif;
}

---

2. Fuentes Seguras del Sistema

Estas fuentes están disponibles en casi todos los navegadores y sistemas operativos.

---

3. Google Fonts (Fuentes Personalizadas)

Google Fonts ofrece cientos de fuentes gratuitas y hermosas. Úsalas en tu sitio web.

/* 1. Importar en el head del HTML */
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

/* 2. Usar en CSS */
body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700; /* Negrita */
}

---

4. Font Size (Tamaño de Fuente)

Define el tamaño del texto. Usa unidades relativas para mejor responsividad.

/* Píxeles (fijo) */
p {
  font-size: 16px;
}

/* Em (relativo al elemento padre) */
p {
  font-size: 1em; /* = tamaño del padre */
}

/* Rem (relativo a la raíz) - RECOMENDADO */
body {
  font-size: 16px; /* Tamaño base */
}

h1 {
  font-size: 2.5rem; /* 2.5 * 16px = 40px */
}

p {
  font-size: 1rem; /* 1 * 16px = 16px */
}

/* Porcentaje (relativo al padre) */
span {
  font-size: 150%; /* 150% del padre */
}

---

5. Font Weight (Peso de la Fuente)

Define qué tan gruesa o delgada es la fuente.

/* Números (100-900) */
p {
  font-weight: 400; /* Normal */
}

strong {
  font-weight: 700; /* Bold */
}

h1 {
  font-weight: 900; /* Extra Bold */
}

/* Palabras clave */
p {
  font-weight: normal; /* = 400 */
}

strong {
  font-weight: bold; /* = 700 */
}

em {
  font-weight: lighter; /* Más ligero que el padre */
}

---

6. Font Style (Estilo de Fuente)

Define si el texto es normal, itálico u oblicuo.

/* Normal */
p {
  font-style: normal;
}

/* Itálico */
em {
  font-style: italic;
}

/* Oblicuo (similar a itálico) */
span {
  font-style: oblique;
}

---

7. Line Height (Altura de Línea)

Define el espacio entre líneas de texto. Crucial para legibilidad.

/* Número (multiplicador) - RECOMENDADO */
p {
  line-height: 1.6; /* 1.6 veces el tamaño de fuente */
}

/* Píxeles */
p {
  line-height: 24px;
}

/* Porcentaje */
p {
  line-height: 160%;
}

---

8. Letter Spacing (Espaciado de Letras)

Define el espacio entre caracteres.

/* Normal */
p {
  letter-spacing: normal;
}

/* Aumentar espaciado */
h1 {
  letter-spacing: 2px;
}

/* Reducir espaciado */
span {
  letter-spacing: -1px;
}

---

9. Text Align (Alineación de Texto)

Define cómo se alinea el texto dentro de su contenedor.

/* Izquierda (por defecto) */
p {
  text-align: left;
}

/* Centro */
h1 {
  text-align: center;
}

/* Derecha */
p {
  text-align: right;
}

/* Justificado */
p {
  text-align: justify;
}

---

10. Text Transform (Transformación de Texto)

Cambia la capitalización del texto sin modificar el HTML.

/* Mayúsculas */
h1 {
  text-transform: uppercase;
}

/* Minúsculas */
p {
  text-transform: lowercase;
}

/* Primera letra de cada palabra */
h2 {
  text-transform: capitalize;
}

/* Normal (sin cambios) */
span {
  text-transform: none;
}

---

11. Text Decoration (Decoración de Texto)

Añade o quita decoraciones como subrayados.

/* Subrayado */
a {
  text-decoration: underline;
}

/* Línea a través (tachado) */
s {
  text-decoration: line-through;
}

/* Línea superior */
span {
  text-decoration: overline;
}

/* Sin decoración */
a {
  text-decoration: none;
}

---

12. Forma Corta: Font

Puedes combinar varias propiedades en una sola línea.

/* Forma larga */
p {
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
  font-family: Arial, sans-serif;
}

/* Forma corta: style, weight, size/line-height, family */
p {
  font: italic bold 16px/1.5 Arial, sans-serif;
}