Type system

Sistema de tipografía para UI

Cuatro sistemas tipográficos pensados para producto digital: jerarquía clara, tamaños razonables y estilos fáciles de explicar en clase. La idea es que puedas copiar el sistema entero o adaptarlo a tu propio proyecto.

Cómo usarlo

Un sistema sencillo para no improvisar

La tipografía en producto digital funciona mejor cuando hay pocas decisiones y muy claras: una forma de escribir títulos, otra para el cuerpo de texto, otra para etiquetas de interfaz y, si hace falta, una para código o números.

• Define siempre un estilo de display o H1 bien visible: tamaño generoso, buen contraste, poco texto por línea.

• Para el cuerpo de texto, usa tamaños mínimos de 16 px en pantalla y evita combinaciones con poco contraste.

• Los labels de UI (botones, chips, menús) pueden ir un punto más pequeños, pero con buen tracking y en mayúsculas suaves si encaja con la marca.

• Si usas mono o números para datos, mantenlos visibles y con suficiente espacio entre caracteres.

Detalle docente: puedes usar estos sistemas para que el alumnado entienda la idea de “escala tipográfica” sin tener que inventarse tamaños desde cero en cada proyecto.

Sistemas listos

Cuatro combinaciones que puedes copiar

Cada tarjeta describe un sistema completo: cómo escribir títulos, párrafos, etiquetas y, cuando aplica, código o números. Adáptalo a la familia tipográfica que estés usando.

System Sans UI

Familia sugerida: system-ui / Inter Uso: producto general, dashboards, apps

Sistema muy neutro basado en la tipografía del sistema. Funciona bien para casi cualquier proyecto digital y reduce problemas de rendimiento y carga.

Display / H1

KIT UX UI – Accesible by default

Tamaño: 32–40 px Peso: 700 Tracking: -0.04em

Body / párrafos

El cuerpo de texto va en una sans limpia, tamaño cómodo (16–18 px) y un interlineado generoso para mejorar la lectura en bloques más largos.

Tamaño: 16–18 px Peso: 400–500 Interlineado: 1.5–1.7

UI labels

PRIMARY SECONDARY DISABLED

Tamaño: 12–14 px Mayúsculas suaves Tracking: 0.08–0.12em

Metrics / código

12 342 · 98% conversion · 03:27 min

Tamaño: 13–15 px Mono o tabular

Clean Sans + Sans

Familias sugeridas: Poppins / Inter / Nunito Uso: landings, producto friendly

Combina una sans algo más expresiva para títulos con una sans neutra para cuerpo. Ideal para productos con tono cercano, educativo o “startup friendly”.

Display / H1

Diseño limpio, jerarquía clara.

Tamaño: 36–44 px Peso: 600–700 Case: Sentence case

Body / párrafos

Para el cuerpo, usa una sans más neutra que contraste ligeramente con los títulos. Esto ayuda a separar “voz de marca” de “texto utilitario”.

Tamaño: 16–18 px Peso: 400 Interlineado: 1.6

UI labels

CTA PRIMARY VER DETALLES

Tamaño: 13–14 px Peso: 600 Tracking alto

Notas / microcopy

Mensajes de error, ayudas y notas de formulario con un tono más humano y tamaño un punto menor que el cuerpo, pero siempre legible.

Tamaño: 14–15 px Color algo más suave

Editorial Serif

Familias sugeridas: Playfair / Georgia + Sans Uso: proyectos más editoriales

Títulos en serif con personalidad y cuerpo en sans para mantener la legibilidad. Funciona bien para proyectos con tono editorial, cultura, educación o marca cuidada.

Display / H1 serif

Diseño que se puede leer.

Tamaño: 34–42 px Peso: 600 Serif solo en títulos

Body / párrafos sans

El cuerpo se mantiene en sans para evitar cansancio visual en pantallas. Deja que la serif marque los momentos clave y la sans sostenga la lectura.

Tamaño: 16–18 px Peso: 400 Interlineado: 1.6–1.7

Subtítulos / H2

Subtítulos que conectan bloques de contenido.

Tamaño: 22–26 px Peso: 600

Citas / destacados

“Los destacados pueden usar serif o cursiva suave para romper el ritmo de lectura y resaltar ideas importantes.”

Tamaño: 16–18 px Espaciado extra arriba/abajo

Mono Tech

Familias sugeridas: System sans + monospace Uso: producto técnico, datos, dev

Sistema para productos donde los números, el código o las métricas son protagonistas. Mezcla una sans neutra con una mono visible para datos.

Display / métricas

98.4% · 12 394 usuarios

Tamaño: 28–34 px Peso: 600 Mono para números

Body / descripción

El cuerpo sigue en sans, explicando qué significan los datos sin competir con las cifras. Texto claro, frases cortas, estructura directa.

Tamaño: 15–17 px Peso: 400–500

Código / logs

GET /api/users · 200 OK
POST /login · 401 UNAUTHORIZED

Tamaño: 13–15 px Interlineado: 1.4–1.5

UI labels

RUN QUERY EXPORT CSV VIEW LOGS

Tamaño: 12–13 px Peso: 600 Mayúsculas + tracking