Wensity Tipografía

¿Qué hace Wensity Tipografía?

La tipografía hace la mayor parte del trabajo en una interfaz. Hazlo bien y una página sencilla parece diseñada; hazlo mal y ni el color ni el movimiento lo salvan. Este skill te brinda un sistema para configurar una vez y reglas para aplicar en todas partes.

Los valores a continuación son valores predeterminados. Si el proyecto ya tiene un sistema tipográfico, consérvalo y mejora cómo se usa. Reemplázalo solo cuando te lo pidan.

1. Elegir familias

• Una familia suele ser suficiente. Una buena sans con un rango de pesos real cubre displays, encabezados, cuerpo e interfaz. Agrega una segunda familia solo para un rol que la primera no pueda cumplir: una sans display con carácter para una página de marketing, o una monoespaciada para código y datos.
• Solo sans: ni serif ni cursiva. Encabezados, cuerpo, citas y pies de foto se colocan todos en posición vertical con sans. Un título serif o una línea en cursiva se lee como un disfraz de plantilla en un producto web, así que omite ambos incluso en blogs, documentación y páginas de lujo; transmite el tono con peso, tamaño y espaciado.
• Nunca más de dos familias más una monoespaciada. Una tercera familia de texto se lee como indecisión.
• Elige para el tema, no por costumbre. No pongas la misma tipografía en todos los proyectos. Pregunta cómo se vería el mundo del producto en papel o en hardware, luego elige una tipografía con ese carácter:

El producto se siente como	Busca	Ejemplos gratuitos
una herramienta precisa (herramientas dev, datos, infra)	una grotesca apretada, mono para datos	Geist, Switzer, Onest; Geist Mono, JetBrains Mono
dinero o salud tranquilos (finanzas, seguros, clínicas)	una neo-grotesca o sans humanista estable	Inter, Public Sans, Source Sans 3
consumidor amigable (redes sociales, comida, viajes, educación)	una sans geométrica o humanista más redondeada	Plus Jakarta Sans, Figtree, Nunito Sans, DM Sans
una marca segura o página de marketing de startup	una sans con personalidad en tamaños display	General Sans, Manrope, Bricolage Grotesque, Space Grotesk
lectura y publicación (docs, blogs, revistas)	una sans tranquila con un corte de texto verdadero, títulos apretados en la misma familia	Inter, Satoshi, Source Sans 3
moda, editorial o lujo	una sans display refinada, grande y apretada, solo títulos	Satoshi, General Sans, Clash Grotesk

• Verifica que la tipografía pueda hacer el trabajo: los pesos que necesitas (generalmente 400, 500, 600), cifras tabulares, buena puntuación, los idiomas que usas, y una versión variable si usas varios pesos.

2. Definir roles, no tamaños

Nombra el texto por su función. Los componentes usan nombres de roles; solo la definición del rol contiene valores en píxeles. Siete roles cubren casi cualquier interfaz:

Rol	Usado para	Página de marketing	Interfaz de app
display	titular hero, uno por página	48 a 80px, peso 600, interlineado 0.95 a 1.05, tracking -0.03em a -0.04em	raramente usado
title	encabezados de página y sección	32 a 44px, peso 600, interlineado 1.1, tracking -0.02em	20 a 24px, peso 600, interlineado 1.25, tracking -0.01em
heading	encabezados de tarjetas, paneles y subsecciones	20 a 24px, peso 600, interlineado 1.25, tracking -0.01em	15 a 16px, peso 600, interlineado 1.4
body	párrafos	16 a 18px, peso 400, interlineado 1.55 a 1.65	14 a 15px, peso 400, interlineado 1.5
label	botones, inputs, navegación, encabezados de tabla	14 a 15px, peso 500, interlineado 1.3	13 a 14px, peso 500, interlineado 1.3
caption	texto de ayuda, metadatos, marcas de tiempo	13 a 14px, peso 400, interlineado 1.45	12 a 13px, peso 400, interlineado 1.4
code	código en línea, bloques de código, IDs	0.9em del texto circundante, mono	igual

Reglas para la escala:

• Los pasos deben ser obvios. Los roles vecinos difieren al menos en un 20% en tamaño, o en un paso de tamaño más un paso de peso (14px 500 label sobre 13px 400 caption está bien; 15px 400 junto a 16px 400 haciendo diferentes trabajos no lo está).
• Una proporción ayuda, pero la tabla gana. Las páginas de marketing se adaptan a una proporción de 1.25 a 1.333 entre pasos; la interfaz de app densa se adapta a 1.125 a 1.2. Redondea a píxeles enteros.
• Máximo tres pesos: regular (400), medium (500) para etiquetas, semibold (600) para encabezados y display. La jerarquía también proviene del tamaño, color y espacio, por lo que no necesita cinco pesos. Si 600 se ve demasiado pesado para una línea display grande, usa 500 para display en lugar de agregar un cuarto peso.
• Tamaño fluido solo para display y title en páginas de marketing: font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem). Mantén el cuerpo y el texto de la interfaz fijos para que los diseños densos sigan siendo predecibles.
• Piso de texto de cuerpo: 16px en páginas de marketing y lectura, 14px en interfaz de app densa. El texto de input es de 16px en móvil, o Safari de iOS amplía la página cuando el campo está enfocado.

En Tailwind CSS v4, define los roles una vez (reemplaza los nombres de familia por los que hayas elegido):

@theme {
  --text-display: clamp(2.75rem, 1.6rem + 4.2vw, 5rem);
  --text-display--line-height: 1;
  --text-display--letter-spacing: -0.035em;
  --text-display--font-weight: 600;

  --text-title: 2.25rem;
  --text-title--line-height: 1.1;
  --text-title--letter-spacing: -0.02em;
  --text-title--font-weight: 600;

  --text-heading: 1.25rem;
  --text-heading--line-height: 1.3;
  --text-heading--letter-spacing: -0.01em;
  --text-heading--font-weight: 600;

  --text-body: 1rem;
  --text-body--line-height: 1.6;

  --text-label: 0.875rem;
  --text-label--line-height: 1.3;
  --text-label--font-weight: 500;

  --text-caption: 0.8125rem;
  --text-caption--line-height: 1.45;
}

Luego usa text-display, text-title, text-body en el marcado en lugar de text-[44px] o una cadena de text-4xl leading-tight tracking-tight. En Tailwind v3 coloca los mismos valores bajo theme.extend.fontSize como [size, { lineHeight, letterSpacing, fontWeight }] tuplas.

3. Interlineado y espaciado entre letras

• El interlineado disminuye a medida que el tamaño aumenta. Display 0.95 a 1.05, títulos 1.1 a 1.2, cuerpo 1.5 a 1.65, etiquetas 1.2 a 1.35. Un titular de 64px con interlineado 1.5 se desmorona en líneas separadas.
• Tracking apretado para texto grande, ninguno para cuerpo. Display -0.03em a -0.04em, títulos -0.02em, encabezados -0.01em, cuerpo y etiquetas 0. No aprietes más de -0.05em; las letras comienzan a tocarse. Ajusta a ojo para la tipografía que elegiste.
• Sin tracking positivo en texto de cuerpo en minúsculas y de interfaz. El tracking positivo solo ayuda al texto en mayúsculas, y el texto en mayúsculas debería ser raro (consulta la sección 6).
• Líneas anchas necesitan más interlineado. Si el texto del cuerpo se acerca a los 75 caracteres, usa interlineado 1.6 o más; a 50 caracteres, 1.5 es suficiente.
• El texto claro sobre fondos oscuros se ve más pesado y apretado. En temas oscuros agrega aproximadamente 0.05 al interlineado del cuerpo.

4. Medida y saltos de línea

• Texto del cuerpo: 60 a 75 caracteres por línea. Establece max-width: 65ch en párrafos, no en toda la página. Los pies de foto y el texto de ayuda pueden ser más estrechos.
• Titulares display: aproximadamente 12 a 20 caracteres por línea. Un titular que cruza una pantalla de 1440px en una línea no tiene forma. Restríngelo con max-width en ch o un ancho de contenedor.
• Equilibra encabezados, ajusta párrafos de forma bonita:

h1, h2, h3, .text-display, .text-title { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

Ambos son progresivos: los navegadores antiguos los ignoran. balance nivela las líneas de los titulares; pretty evita que una sola palabra quede sola en la última línea de un párrafo.

• Haz saltos manuales solo entre frases, y verifícalos en cada ancho en el que se renderice el texto. Un <br> que termina a media línea en un teléfono es peor que el ajuste predeterminado. Prefiere max-width sobre <br>.
• Palabras largas y URL en contenido de usuario necesitan overflow-wrap: anywhere en su contenedor, o empujan el diseño hacia los lados en móvil.
• La truncación es el último recurso. Trunca etiquetas de una sola línea en interfaz apretada (truncate en Tailwind). Si la parte oculta importa, haz que el texto completo sea accesible por teclado y táctil (un tooltip en un elemento enfocable, una fila expandible, una vista de detalle); solo un atributo title no es suficiente. Nunca trunques el texto del cuerpo ni nada que el usuario deba leer para actuar.
• Bloques de varias líneas (line-clamp-2): mantén el interlineado en 1.3 o más en el texto truncado para que los descendentes (g, y, p) no se corten. No agregues relleno inferior dentro del recorte; muestra la parte superior de la siguiente línea.

5. Color de texto y contraste

• Tres colores de texto son suficientes: primario (encabezados y cuerpo), secundario (texto de apoyo, pies de foto, marcadores de posición), y deshabilitado. Defínelos como tokens. Evita crear un cuarto bajando la opacidad sobre la marcha.
• Suelos de contraste (WCAG 2.2 AA): 4.5:1 para cuerpo y texto pequeño, 3:1 para texto de 24px en adelante (o 18.66px en negrita). El texto secundario y el texto de marcador de posición también necesitan 4.5:1. Solo el texto en controles deshabilitados está exento.
• En fondos oscuros usa off-white, no blanco puro, para texto largo (aproximadamente 90 a 94% de luminosidad). El blanco puro sobre casi negro deslumbra.
• En superficies de color o teñidas, tiñe el texto secundario hacia el tono de la superficie en lugar de usar un gris neutro, que se ve sucio sobre el color.

6. Qué evitar

• Cejas y patadas: etiquetas pequeñas en mayúsculas con espaciado de letras sobre un encabezado ("FUNCIONES", "POR QUÉ NOSOTROS", "CÓMO FUNCIONA"). No las uses. Son la señal más clara de interfaz de plantilla. Si un encabezado necesita contexto, escribe un mejor encabezado.
• Etiquetas en mayúsculas en general, incluyendo pequeños encabezados de sección en barras laterales, paneles de configuración, tarjetas, pies de página y controles de demostración. El caso de oración se lee más rápido; dale a un encabezado pequeño peso (500 o 600) y el color de texto secundario en su lugar. Reserva las mayúsculas para abreviaturas genuinas (API, URL).
• Texto degradado y una palabra de color en un titular. El énfasis proviene del tamaño, el peso y la colocación, no de la pintura.
• Cursiva, en cualquier lugar. Usa peso para énfasis, y coloca las citas en posición vertical con una regla o un tamaño mayor a su lado.
• Tipografías serif. Tanto las serif display como las serif de texto se leen como un disfraz en un producto web. Elige una sans con carácter en su lugar.
• Monoespaciado como decoración. Mono es para código, datos, IDs, teclas del teclado y números en columnas. Las etiquetas mono en una página de marketing son un disfraz.
• Párrafos centrados de más de dos líneas. Centra solo titulares cortos y CTA de una sola línea.
• Texto justificado en la web. Sin separación silábica crea ríos de espacio en blanco.
• Subrayados para cualquier cosa que no sean enlaces.

7. Números, código y datos

• Cifras tabulares en cualquier cosa que se alinee o actualice: tablas, precios, temporizadores, contadores, estadísticas. font-variant-numeric: tabular-nums; (Tailwind tabular-nums). Sin ello, un número de conteo tiembla lateralmente a medida que cambian los anchos de los dígitos.
• Cero con barra para IDs y códigos donde 0 y O pueden confundirse: font-variant-numeric: tabular-nums slashed-zero;.
• Alinea los números al final de las celdas de la tabla (text-align: end) para que los decimales se alineen. Las columnas de texto se alinean al inicio.
• Código: monoespaciado a aproximadamente 0.9em del texto circundante para que su altura-x coincida. El código en línea obtiene un fondo sutil y 0.2em de relleno horizontal, sin borde. Los bloques de código obtienen interlineado aproximadamente 1.6 y desplazamiento horizontal, nunca ajuste que rompa la sangría.
• Teclas del teclado (<kbd>) en la tipografía mono al tamaño de caption.

8. Enlaces

Subraya los enlaces dentro del texto corrido; solo el color falla para los lectores con daltonismo. Limítalo a la prosa para que las listas de navegación y los botones no estén subrayados (.prose es lo que envuelve tu artículo o contenido extenso):

:where(p, td, dd, figcaption, blockquote) a,
:where(.prose, article) li a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

La navegación, los botones y los enlaces de tarjetas no necesitan subrayados; su posición ya indica que son interactivos.

9. Cargar fuentes sin desplazamiento de diseño

• Next.js: usa next/font (next/font/google o next/font/local). Aloja automáticamente, precarga y genera un fallback con métricas coincidentes, por lo que la página no salta cuando llega la fuente. Exponla como una variable CSS y mapea la fuente del tema a ella con @theme inline (para que la variable se lea donde se usa, no se resuelva una vez en :root):

// app/layout.tsx
import { Onest } from "next/font/google";
const sans = Onest({ subsets: ["latin"], variable: "--font-brand", display: "swap" });
// <html lang="en" className={sans.variable}>

@theme inline {
  --font-sans: var(--font-brand), ui-sans-serif, system-ui, sans-serif;
}

• Tamaño óptico: una tipografía con un eje opsz (Inter, Roboto Flex, Fraunces) solo lo obtiene si lo cargas: Inter({ subsets: ["latin"], axes: ["opsz"] }). Mantén font-optical-sizing: auto para que el texto pequeño obtenga el corte más robusto y el texto grande el más fino.
• En otros lugares: auto-aloja WOFF2, font-display: swap, precarga solo el uno o dos archivos utilizados above the fold, y establece size-adjust, ascent-override y descent-override en una tipografía fallback local para que el intercambio no desplace el diseño.
• Carga solo lo que usas. Prefiere un archivo de fuente variable sobre seis pesos estáticos. Reduce al subconjunto de los scripts que usas.

10. Detalles de renderizado

• -webkit-font-smoothing: antialiased en temas oscuros hace que el texto claro se vea menos hinchado en macOS. Deja los temas claros con el valor predeterminado.
• Establece ::selection al tono de la marca y mantenlo legible. El azul predeterminado del navegador es una señal de que la página no se terminó.
• Usa puntuación real en el texto: comillas curvas (“ ” ‘ ’), el carácter de puntos suspensivos (…), y el signo de multiplicación (×) en dimensiones.
• Respeta la configuración del usuario: dimensiona el texto en rem, nunca bloquees el zoom, y verifica que el texto aún encaje al 200% del tamaño del texto y con un espaciado de letras y líneas más grande.

11. Verifica antes de terminar

• Cada estilo de texto proviene de un rol nombrado; sin tamaños de píxel sueltos.
• Los roles vecinos son claramente diferentes en tamaño, o tamaño más peso.
• Máximo dos familias más mono, máximo tres pesos, todos cargados.
• Texto del cuerpo 16px (14px interfaz densa), inputs 16px en móvil.
• Párrafos limitados a aproximadamente 65ch; líneas display aproximadamente 12 a 20 caracteres.
• Encabezados equilibrados, párrafos ajustados de forma bonita.
• Sin cejas, sin texto degradado, sin color.