Tema 4 · Tipografía

Tipografía, Fuentes Web y Texto

Domina el diseño tipográfico en CSS: fuentes seguras del sistema, integración de Google Fonts con @import, espaciado entre letras, interlineado, alineación y sombras.

Colores Web, Fondos y Gradientes El Modelo de Caja (Box Model)

Fuentes en la Web y la Pila de Fuentes (Font Stack)

La tipografía es el pilar de la legibilidad y la identidad visual de cualquier interfaz web. En CSS, declaramos una lista ordenada de fuentes de respaldo conocida como font stack: 

/* Si la primera no está instalada, usa la segunda, y finalmente una familia genérica */
body {
  font-family: Arial, Helvetica, sans-serif;
}

code, pre {
  font-family: "Courier New", Courier, monospace;
}
  • serif: Tipografías clásicas con remates en los extremos (ej. Times New Roman, Georgia).
  • sans-serif: Tipografías modernas y limpias sin remates, ideales para lectura en pantallas (ej. Arial, Helvetica, Inter).
  • monospace: Cada carácter tiene exactamente el mismo ancho, fundamental para mostrar código de programación.

Propiedades Esenciales de Fuente y Texto

Propiedad Valores Comunes Efecto Visual
font-size 16px, 1rem, 1.25rem Define el tamaño del texto. Se recomienda rem para accesibilidad.
font-weight 400 (normal), 600 (semibold), 700 (bold) Controla el grosor o peso del trazo tipográfico.
line-height 1.5, 1.6, 1.75 Espacio vertical entre líneas de texto. Un valor entre 1.5 y 1.7 mejora drásticamente la lectura.
text-align left, center, right, justify Alineación horizontal del contenido textual dentro de su caja contenedora.
text-transform uppercase, lowercase, capitalize Transforma mayúsculas y minúsculas sin modificar el HTML original.
letter-spacing 0.05em, 1px, -0.5px Espaciado horizontal entre caracteres (tracking).
text-shadow 2px 2px 4px rgba(0,0,0,0.2) Aplica sombras proyectadas al texto para contraste y relieve.

Truncado Elegante con Puntos Suspensivos

Para evitar que títulos largos o descripciones rompan la maqueta, podemos forzar un corte limpio con puntos suspensivos: 

.texto-recortado {
  white-space: nowrap;      /* Impide el salto de línea */
  overflow: hidden;         /* Oculta lo que desborde */
  text-overflow: ellipsis;  /* Agrega '...' al final */
}

⚡ Composición Tipográfica Profesional

Aprende cómo la combinación de pesos, interlineado y espaciado de letras jerarquiza la información visualmente:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Tipografía y Texto CSS3</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f8fafc;
      padding: 30px;
      color: #1e293b;
    }

    .articulo-tipografico {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 30px;
      max-width: 540px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .categoria {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #2563eb;
      margin-bottom: 8px;
    }

    .titulo-principal {
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.25;
      color: #0f172a;
      margin-top: 0;
      margin-bottom: 12px;
      letter-spacing: -0.02em;
    }

    .lead {
      font-size: 1.1rem;
      line-height: 1.5;
      color: #475569;
      margin-bottom: 16px;
      font-weight: 500;
    }

    .cuerpo-texto {
      font-size: 0.95rem;
      line-height: 1.7;
      color: #64748b;
      margin-bottom: 20px;
    }

    .cita-destacada {
      border-left: 4px solid #3b82f6;
      padding-left: 16px;
      margin: 16px 0;
      font-style: italic;
      color: #334155;
    }

    .texto-truncado {
      background: #f1f5f9;
      padding: 8px 12px;
      border-radius: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 0.85rem;
      color: #64748b;
    }
  </style>
</head>
<body>

  <div class="articulo-tipografico">
    <div class="categoria">Kilopolis Editorial · CSS3</div>
    <h1 class="titulo-principal">La Importancia de la Tipografía en la Web</h1>
    <p class="lead">
      El 95% de la información en la web consiste en texto escrito. Diseñar con buena tipografía es diseñar para las personas.
    </p>
    <div class="cita-destacada">
      «El buen diseño tipográfico es invisible: permite que el mensaje fluya sin fatiga visual.»
    </div>
    <p class="cuerpo-texto">
      Ajustar el interlineado a 1.6 y elegir tamaños escalables con unidades relativas garantiza que tus lectores disfruten de una experiencia fluida tanto en dispositivos móviles como en monitores de escritorio.
    </p>
    
    <div class="texto-truncado" title="Este texto es extremadamente largo y se recorta automáticamente con puntos suspensivos para no quebrar la tarjeta.">
      Texto de prueba muy largo que se recorta automáticamente con text-overflow: ellipsis...
    </div>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de CSS3, Flexbox y Grid y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.