Tipografía de interfaz

1) El papel de la tipografía en el producto

• acelera la exploración y reduce la carga cognitiva,
• forma la jerarquía y ayuda a navegar en el estado,
• aumenta la conversión (CTA, formularios) y reduce los errores,
• hace que la interfaz sea accesible y resistente a la localización.

2) Parámetros básicos

Kegl (texto principal): 16-18 px por escritorio, 15-16 px por móvil.
Intervalo entre líneas (line-height): 1. 45–1. 6 para el texto, 1. 2–1. 35 para los titulares.
Longitud de la cadena (medida): 45-80 caracteres; 36-60 en los saidbars.
Intervalo entre letras (tracking): 0-1% para texto sin formato; para la cápsula - + 2-4%.
Contraste (WCAG): texto sin formato ≥ 4. 5:1, grande/gordo ≥ 3:1.
Registro: evite TODO CAPS permanente; utilice para etiquetas/chips, compensar tracking.

3) Jerarquía y escala de dimensiones

Recomendamos un enfoque modular: 8-pt grilla + escala tipográfica.

• Display: 40/48 (LH 1. 15)
• H1: 32/40 (1. 25)
• H2: 24/32 (1. 25)
• H3: 20/28 (1. 3)
• H4: 18/26 (1. 4)
• Body/L: 18/28 (1. 55)
• Body/M: 16/26 (1. 55)
• Body/S: 14/22 (1. 5)
• Caption: 12/18 (1. 5)
• Mono/UI: 12–14/18–20

• Entre los niveles vecinos hay un paso notable (mínimo 12-16%).
• La jerarquía se construye mediante una combinación de tamaño, peso, interiorismo, color (teniendo en cuenta el contraste) y distancias a bloques adyacentes.

4) Captación, línea de base y óptica

Alinee los elementos con la altura de los encabezados (conveniente con los iconos).
Mantenga la línea de base del texto con un paso de 4/8-pt: los ritmos lisos simplifican la lectura.
Sangría óptica: los encabezados sobre el bloque son más grandes que debajo (por ejemplo, + 4-8 px arriba).

5) Tipografías y fuentes variables

Conjunto mínimo: Regular, Medio, SemiBold (Bold opcional).
No utilice Ultra-Light/Thin en UI.

• Cuerpo: 420-470 (ópticamente más liso que 400).
• UI labels: 500–550.
• Headers/CTA: 600–650.
• Cuando se reduce el kegl - aumentar ligeramente el peso (compensación).
• Desactive las ligaduras decorativas en los números UI; mantenga las ligaduras estándar para el cirílico/el latín.

6) Números, tablas y datavis

Incluye figuras tabulares (dígitos monoenlaces) para sumas, coeficientes, temporizadores, calificaciones.
Signos +/ − - siempre visibles y con suficiente contraste; resaltar valores negativos no sólo con el color (icono/flecha/negrita).
Para valores monetarios, utilice un espacio estrecho como separador de descarga delgado (o formato local).
En tablas, alinee en un punto decimal; para las columnas mono - fuente mono-shire.
Los gráficos de firma de los ejes ≥ 12 px (móvil) y ≥ 13-14 px (escritorio), LH 1. 3; leyendas ≥ 4. 5:1 al fondo.

7) Formularios, entradas, mensajes

Etiquetas 12-14 px, LH 1. 3–1. 4, regulador o medio.
Placeholder no debe ser «seré del aire» - objetivo 3:1 al fondo, visualmente diferente del texto.
Errores/éxito/texto help 12-14 px; no confíe únicamente en el color (icono/texto).

8) Tema oscuro/ligero

En el tema oscuro, evitar el # FFF en el # 000: elevar el fondo a L≈0. 14–0. 18, y reducir el texto a L≈0. 9 - menos deslumbramiento.
El interior en dark puede ser en + 0. 05 más alto para la comodidad.
Enlaces/acentos en dark: reduzca la saturación y aumente la luz en 0. 02–0. 04.

9) Localización y multilingüismo

Elija familias con soporte completo de cirílico/latín/griego, signos de acento y monedas.
RTL: espejo de iconos/alineaciones, pero no números y latinas; pruebe las transferencias.
Los autoperenós ('hyphens: auto') sólo se incluyen en zonas de contenido largo; en los botones UI - impedir la transferencia.
Para turcos/azerbaiyanos, compruebe los formularios «İ/ı».
Para georgiano y tailandés, aumente el kegl básico en 1 px (características de inscripción).

10) Accesibilidad (A11y)

Contraste de texto: ver § 2.
Estilos de enfoque - visibles sin color: underline, marco, sombra, desplazamiento.
El tamaño de fuente se escala en el sistema (compatibilidad con tamaño de texto de OS).
No codifique el significado sólo a través del color/peso - agregue firmas e iconos explícitos.

11) Descarga de fuentes y performance

Objetivos: minimizar los bloqueos, proporcionar un FOUT predecible y un CLS estable.

Subconjuntos (subset): latín, cirílico, dígitos/caracteres - archivos individuales.
Formatos: 'woff2' (principal), 'woff' como fallback.
'font-display: swap' (o 'optional' para familias menores).

html
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Inter-UI-subset. woff2">

Fuente variable en lugar de 3-4 estática - a menudo más rentable en peso.
Presupuesto: ≤ 150-200 KB en total en un camino crítico (después de gzip/brotli).
Render: evite las múltiples sombras/máscaras en el texto; utilice los efectos del sistema de forma económica.

12) Tokens tipográficos (sistema de diseño)

type. scale.{role}     # h1, h2, body, caption, mono type. weight.{role}    # regular, medium, semibold type. leading.{role}    # line-height type. tracking.{role}   # letter-spacing type. feature. numeric   # tabular, lining

json
{
"type": {
"family": { "ui": "InterVariable", "mono": "JetBrainsMonoVariable" },
"scale": { "h1": 32, "h2": 24, "h3": 20, "body": 16, "caption": 12 },
"leading": { "h1": 40, "h2": 32, "h3": 28, "body": 26, "caption": 18 },
"weight": { "body": 450, "label": 520, "cta": 620 },
"numeric": { "figures": "tabular", "zeros": "slashed" }
}
}

css
:root {
--font-ui: "InterVariable", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: "JetBrainsMonoVariable", ui-monospace, SFMono-Regular, Menlo, monospace;

--fs-h1: 32px; --lh-h1: 40px; --w-h1: 600;
--fs-h2: 24px; --lh-h2: 32px; --w-h2: 600;
--fs-h3: 20px; --lh-h3: 28px; --w-h3: 550;
--fs-body: 16px; --lh-body: 26px; --w-body: 450;
--fs-caption: 12px; --lh-caption: 18px; --w-caption: 450;

--tracking-caps: 0. 04em;
--tracking-default: 0em;
}
.u-num {
font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

13) Verstka y ritmo

Módulo vertical de 8 pt; distancias entre párrafos = 1 × del paso básico.
Listas: la sangría del marcador está alineada con la línea de base del texto.
Botones y márgenes: las alturas son múltiples de la línea de la cuadrícula base (por ejemplo, 40/48/56 px).

14) Especificidad de iGaming (taller)

Coeficientes/probabilidades, balances, temporizadores - use los dígitos tabular, monosalud en columnas críticas.
Líderes/calificaciones: alineación por categorías, formato de moneda única, «↑/↓» explícito.
Notificaciones responsables (18 +, límites, riesgos) - mínimo AAA por contraste, no utilizar TODO CAPS.
Pancartas promocionales: texto solo en dados/overley con control de contraste.

15) Anti-patrones

Light/Thin en pequeños cegles.
Texto gris sobre un fondo de color sin comprobar el contraste.
Dos o más auriculares «para la belleza».
Líneas largas (> 90 caracteres) y líneas ajustadas de alto <1. 35.
Números de anchura proporcional en tablas/sumas «galopantes».
Transferencias forzadas en botones/etiquetas.

16) Lista de cheques con rugido

CHitaemost

• Body 16-18 px; LH ≥ 1. 45.
• Longitud de la cadena 45-80 caracteres.

Jerarquía

• Escala escalonada ≥ 12%; las sangrías están alineadas con la cuadrícula.

Números/tablas

• Números tabulares para cantidades/coeficientes; alineación decimal.

Disponibilidad

• Se ha logrado el contraste de WCAG; los estilos focus son visibles sin color.

Performance

• Subset/woff2; `font-display: swap`; Presupuesto ≤ 200 KB.

Localización

• Soporte cirílico/latino/RTL; se han comprobado las transferencias/diacrítica.

17) A/B y métricas

Prueba: Kegl Body ± 1 px, escalón de la escala de títulos, peso CTA, interiorismo.
Mida: tiempo de lectura, depth scroll, CTR CTA, errores de formulario, CLS (estabilidad del texto).

Resumen breve

Tipografía - esqueleto de interfaz. Establecer una escala predecible, mantener el contraste y el ritmo, utilizar fuentes variables y números tabulares, optimizar la carga. Entonces la IU se leerá rápidamente, funcionará de manera estable y escalará bajo temas e idiomas.