Skip to main content

Tipografía, color y composición visual

Tipografía como estructura, no como adorno​

La tipografía no sirve para “embellecer” una interfaz. Sirve para ordenar información en el tiempo: qué se lee primero, qué después y qué puede ignorarse.

En Tailwind, la tipografía no se define por estilos aislados, sino por escalas. Cada tamaño, peso y espaciado existe dentro de un sistema finito.

Leer es recorrer una jerarquía.

Si la jerarquía no es clara, el texto falla aunque sea bonito.

Decisiones tipográficas fundamentales:

  • Tamaño (text-*) define prioridad.
  • Peso (font-*) define énfasis relativo.
  • Altura de línea (leading-*) define ritmo.
  • Tracking (tracking-*) define densidad.

Error común: Ajustar tamaños “a ojo” hasta que encajen visualmente. Eso rompe la coherencia global.

Escalas tipográficas y ritmo vertical​

Tailwind propone una escala tipográfica pensada para saltos consistentes, no para valores arbitrarios.

Ejemplo mental de jerarquía mínima:

  • Título principal
  • Subtítulo
  • Texto base
  • Texto secundario / meta

El ritmo vertical no depende solo del tamaño del texto, sino de la relación entre:

  • Tamaño de fuente
  • Altura de línea
  • Margen vertical entre bloques

El espacio entre líneas es tan importante como las líneas.

Problema habitual:

  • Texto “apelmazado” por usar el mismo leading en todo.
  • Saltos visuales bruscos entre bloques por márgenes incoherentes.

Color como sistema de significado​

El color no se usa para decorar, se usa para codificar información.

En Tailwind, los colores están organizados en paletas con intensidad progresiva. Cada número representa un nivel de énfasis, no un color distinto.

Funciones típicas del color:

  • Jerarquía (qué destaca)
  • Estado (activo, inactivo, error)
  • Separación (fondos, bordes)
  • Lectura (contraste)

Un color sin función es ruido visual.

Errores frecuentes:

  • Usar demasiados colores “principales”.
  • Usar intensidades altas para texto largo.
  • No distinguir entre color de fondo y color semántico.

Contraste y legibilidad real​

La legibilidad no es subjetiva. Depende de relaciones físicas entre:

  • Color de texto
  • Color de fondo
  • Tamaño de fuente
  • Peso tipográfico

En interfaces reales:

  • El texto principal rara vez es negro puro.
  • Los fondos rara vez son blanco puro.
  • El contraste se modula según jerarquía.

Problema típico:

  • Texto secundario demasiado claro.
  • Estados deshabilitados ilegibles.
  • Uso de color como único indicador de estado.

Composición visual y jerarquía espacial​

La composición no es alineación perfecta. Es relación entre bloques.

Tres decisiones gobiernan la composición:

  • Alineación
  • Espaciado
  • Proporción

Tailwind obliga a declarar estas decisiones explícitamente mediante:

  • gap
  • padding
  • margin
  • max-w

La composición es el arte de decir “hasta aquí” a cada bloque.

Errores habituales:

  • Interfaces “planas” sin puntos de anclaje visual.
  • Todo parece igual de importante.
  • Falta de respiración entre secciones.

Uso consciente de sombras y bordes​

Sombras y bordes no existen para “dar estilo”, sino para:

  • Separar planos
  • Indicar elevación
  • Delimitar regiones

En Tailwind, estos elementos son discretos por diseño. Si se exageran, el sistema se rompe.

Buenas prácticas:

  • Bordes para estructura.
  • Sombras suaves para elevación puntual.
  • Nunca mezclar demasiados niveles de profundidad.

Estados visuales coherentes​

Un elemento no existe solo en reposo. Existe en estados.

Estados mínimos:

  • Normal
  • Hover
  • Focus
  • Active
  • Disabled

El error más común es diseñar solo el estado normal.

Una interfaz se juzga en interacción, no en captura estática.

Problemas típicos:

  • Hover demasiado agresivo.
  • Focus eliminado.
  • Estados activos indistinguibles.

Errores frecuentes al empezar con tipografía y color​

  • “Todo se ve igual”: falta de jerarquía.
  • “Uso colores fuertes para destacar”: abuso de énfasis.
  • “No leo bien en pantallas grandes”: ancho y leading mal calibrados.
  • “Se ve bien en Figma, mal en navegador”: decisiones no trasladadas al sistema real.

Este módulo introduce el segundo pilar tras el layout: una interfaz no se sostiene solo por su estructura, sino por cómo guía la lectura y la atención.