Tipografía para interfaces: fuentes de sistema, fuentes variables y escalas para UI

Cuando diseñamos la web de una marca, la tipografía suele ser el gran protagonista: titulares grandes, un cuerpo de lectura cuidado, quizá una fuente con mucho carácter. Pero cuando ese mismo cliente nos pide después su área privada, su app o su panel de gestión, la tipografía cambia de papel. Ahora tiene que funcionar a 12 píxeles en una etiqueta, alinear cifras en una tabla, caber en un botón en alemán y seguir leyéndose cuando una persona mayor amplía el texto al 200 % desde los ajustes de su móvil.

Me pasa a menudo: una fuente preciosa en una portada se vuelve torpe en una interfaz. Los números bailan, la «l» minúscula y la «I» mayúscula son idénticas, el semibold no existe y el archivo pesa lo suyo. No es que la fuente sea mala; es que se diseñó para otro trabajo.

En esta guía nos centramos en la tipografía de interfaces: cómo elegir la fuente (de sistema, propia o variable), cómo montar una escala pensada para UI y cómo cargarla bien. Si buscas los fundamentos de legibilidad en páginas de lectura (medida de línea, interlineado, escalas fluidas con clamp()), los tienes en nuestra guía de tipografía web y legibilidad.

01Lo que la tipografía de una interfaz tiene que resolver

Una interfaz no se lee de corrido: se escanea, se busca, se compara, se pulsa. Eso cambia las prioridades al elegir y configurar una fuente:

• →Tamaños pequeños. Etiquetas, metadatos, ayudas, pestañas. La fuente tiene que mantener la forma a 12 o 13 px.
• →Mucha información junta. Paneles, listados y formularios donde conviven varios niveles de jerarquía en poco espacio.
• →Números. Precios, fechas, horas, cantidades, referencias. Tienen que distinguirse bien y alinearse en columnas.
• →Caracteres ambiguos. En un código de reserva o en una contraseña, la «I», la «l» y el «1», o la «O» y el «0», tienen que diferenciarse.
• →Idiomas y longitudes. Los textos traducidos crecen: el alemán o el francés suelen ocupar bastante más que el inglés, y el español también se alarga respecto al inglés en botones y etiquetas.
• →Texto ampliable. Los sistemas permiten aumentar el tamaño de letra, y WCAG pide en su criterio 1.4.4 que el texto pueda ampliarse hasta el 200 % sin perder contenido ni funciones.

Con esta lista delante, la elección de la fuente deja de ser solo estética y pasa a ser también técnica.

02Fuentes de sistema: rápidas, nativas y muy bien hechas

Las fuentes de sistema son las que ya vienen con el dispositivo: San Francisco en Apple, Segoe UI (y su versión variable) en Windows, Roboto en la mayoría de Android. Son tipografías diseñadas específicamente para pantalla por equipos enormes, con años de ajuste fino, muchos idiomas, cifras tabulares y versiones ópticas para tamaños pequeños y grandes.

Usarlas tiene ventajas evidentes: cero bytes de descarga, aspecto nativo en cada dispositivo y ningún salto de diseño al cargar. Por eso son la elección natural en herramientas internas, paneles de administración y productos donde la familiaridad y la velocidad pesan más que la expresión de marca. GitHub, por ejemplo, ha usado durante años una pila de fuentes de sistema en su interfaz.

En CSS, la forma moderna de pedirlas es sencilla:

:root {
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
}
body { font-family: var(--font-ui); }
code, .ref { font-family: var(--font-mono); }

La contrapartida es que la interfaz se ve ligeramente distinta en cada sistema y que la marca pierde una herramienta de expresión. En nuestros proyectos lo resolvemos a menudo con un reparto: fuente de sistema para el cuerpo de la interfaz y la fuente de marca solo en titulares, pantallas de bienvenida y momentos con más presencia.

03Elegir una fuente propia para UI: criterios que funcionan

Cuando la marca pide una tipografía propia en toda la interfaz, la elegimos con una lista de comprobación muy concreta. Antes de enamorarnos de una fuente, la probamos en una pantalla real con datos reales.

1. 01Altura de x generosa. Las minúsculas altas se leen mejor en tamaños pequeños.
2. 02Aperturas abiertas. Letras como la «a», la «e» o la «c» con huecos amplios no se cierran en pantalla.
3. 03Caracteres diferenciados. «Il1», «O0», «rn» y «m» distinguibles a 12 px.
4. 04Cifras tabulares disponibles y, si es posible, cero con barra o punto como alternativa.
5. 05Gama de pesos útil. Al menos regular, medium y semibold; el salto de regular a bold suele ser demasiado brusco para la jerarquía de una interfaz.
6. 06Cobertura de idiomas. Español completo, por supuesto, y los idiomas a los que se vaya a traducir el producto.
7. 07Licencia que cubra web y app. Las licencias de escritorio, web y aplicación móvil suelen ser distintas.

Algunas familias que cumplen bien y que usamos o recomendamos a menudo: Inter, creada por Rasmus Andersson específicamente para interfaces; IBM Plex Sans, con mucho carácter técnico; Source Sans 3, de Adobe; Roboto Flex, muy completa en ejes variables; y Atkinson Hyperlegible, desarrollada por el Braille Institute pensando en personas con baja visión. Todas son de licencia abierta y tienen versión variable.

04Fuentes variables: una familia entera en un archivo

Una fuente variable incluye en un solo archivo todo el recorrido de uno o varios ejes de diseño. En lugar de descargar un archivo para el regular, otro para el medium y otro para el bold, se descarga uno que contiene todos los pesos intermedios. Los ejes más habituales están registrados en el estándar OpenType:

Para interfaces, dos ventajas destacan. La primera es el tamaño óptico: con font-optical-sizing: auto, el navegador ajusta el dibujo de la letra al tamaño en que se muestra, más robusta y espaciada en las etiquetas pequeñas y más fina y elegante en los titulares. La segunda es la jerarquía matizada: un peso 450 en el cuerpo sobre fondo oscuro, que compensa el efecto de «adelgazamiento» del texto claro, o un 550 para botones, valores que no existen en las fuentes estáticas.

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
body { font-family: "Inter", var(--font-ui); font-optical-sizing: auto; }
.btn { font-weight: 550; }
@media (prefers-color-scheme: dark) { body { font-weight: 430; } }

Una recomendación práctica: usa las propiedades estándar (font-weight, font-stretch, font-style) siempre que puedas, y reserva font-variation-settings para ejes personalizados. Las propiedades estándar se heredan y combinan mejor y evitan sorpresas cuando un componente sobrescribe a otro.

05Una escala tipográfica pensada para UI

Las escalas editoriales suelen usar saltos amplios entre tamaños (proporciones de 1,25 o más) para crear contraste dramático entre titulares y texto. En una interfaz, con muchos niveles conviviendo en poco espacio, funcionan mejor saltos más contenidos y una escala con nombres por función, no por tamaño. Material Design 3 organiza la suya en cinco roles (Display, Headline, Title, Body y Label) y Apple, con Dynamic Type, en estilos como Large Title, Headline, Body, Footnote o Caption, con un cuerpo de 17 puntos por defecto en iPhone.

En nuestros proyectos solemos partir de una escala de este tipo, que luego ajustamos a la fuente y a la marca:

Unos cuantos principios que acompañan a la escala:

• →Interlineados en múltiplos de 4. Encajan con un sistema de espaciado de 8 puntos y facilitan alinear texto con iconos y contenedores.
• →Pocos tamaños. Entre seis y ocho estilos cubren casi cualquier producto. Si aparece la necesidad de un noveno, a menudo se resuelve con peso o color.
• →Jerarquía con peso y color además del tamaño. En una interfaz densa, un gris más suave para lo secundario y un semibold para lo principal ordenan más que subir dos puntos.
• →Tracking ajustado por tamaño. Ligeramente abierto en tamaños pequeños y en mayúsculas, ligeramente cerrado en titulares grandes. Las fuentes con tamaño óptico lo hacen solas.
• →Escala como tokens. Definida en design tokens compartidos entre Figma y código, para que diseño y desarrollo hablen el mismo idioma.

06Detalles OpenType, accesibilidad y carga

Rasgos OpenType que ayudan en interfaces

Muchas fuentes de interfaz incluyen alternativas que se activan con CSS y que resuelven problemas concretos:

• →font-variant-numeric: tabular-nums para cifras del mismo ancho en tablas, contadores y relojes. Lo explicamos con detalle en la guía de diseño de tablas de datos.
• →font-variant-numeric: slashed-zero para distinguir el cero de la «O» en códigos.
• →font-feature-settings: "case" para que guiones y paréntesis se centren con las mayúsculas en etiquetas en caja alta.
• →Alternativas estilísticas (ss01, ss02…) que algunas fuentes ofrecen, como una «l» con cola o una «a» de un solo piso.

Texto que crece sin romper nada

En iOS y Android, cada vez más personas usan tamaños de letra aumentados desde los ajustes. En web, el equivalente es el zoom del navegador y el tamaño de letra por defecto. Para que la interfaz lo acompañe:

1. 01Define los tamaños en rem en web, y usa los estilos de texto del sistema en apps nativas, para respetar la preferencia del usuario.
2. 02Deja que los contenedores crezcan en altura: botones y filas con altura mínima, no fija.
3. 03Permite que las etiquetas pasen a dos líneas o que la disposición cambie de horizontal a vertical cuando no caben.
4. 04Comprueba que se puede aplicar el espaciado de texto que pide el criterio 1.4.12 de WCAG (interlineado de 1,5, espacio entre letras de 0,12 y entre palabras de 0,16 veces el tamaño) sin que nada se corte.

Cargar la fuente sin saltos

Una fuente web que llega tarde provoca un parpadeo de texto o un salto de diseño que empeora el CLS, uno de los Core Web Vitals, cuyo umbral bueno es 0,1 o menos. Lo que funciona:

• →Servir la fuente en WOFF2, desde tu propio dominio y con solo los subconjuntos de caracteres necesarios.
• →Precargar el archivo principal con <link rel="preload" as="font" type="font/woff2" crossorigin>.
• →Usar font-display: swap u optional según si prima la marca o la estabilidad.
• →Ajustar la fuente de reserva con size-adjust y ascent-override en un @font-face alternativo, para que ocupe lo mismo que la definitiva y el cambio no mueva nada.

07Ejemplo resuelto: el panel de una empresa de logística

Una empresa de logística de la provincia nos pidió unificar la imagen de su web y de su panel de seguimiento de envíos. Su tipografía corporativa era una geométrica con mucho carácter, preciosa en titulares, pero con cifras proporcionales, un solo peso intermedio y una «I» y una «l» idénticas. Así lo resolvimos:

1. 01Reparto de papeles. La fuente corporativa se quedó en la web pública y en los titulares del panel. Para el cuerpo de la interfaz elegimos Inter en versión variable, por su altura de x, sus cifras tabulares y su cero con barra.
2. 02Escala de siete estilos como la de la tabla, con body-sm a 14 px como tamaño por defecto en las tablas de envíos.
3. 03Códigos de seguimiento con la variante de cero con barra activada y una monoespaciada como alternativa en la vista de detalle.
4. 04Pesos intermedios: 450 para el cuerpo en el modo oscuro que usa el turno de noche del almacén, 550 en botones y pestañas.
5. 05Carga optimizada: un único archivo WOFF2 variable con subconjunto latino, precargado, y una fuente de reserva ajustada para evitar saltos.
6. 06Prueba con texto al 200 % en móvil, donde ajustamos tres botones que se cortaban y una fila de filtros que pasó a desplazarse en horizontal.

El panel ganó legibilidad y, curiosamente, se percibió más «de la marca» que antes, porque la fuente corporativa aparecía ahora solo en los momentos donde brillaba.

08Letras que trabajan y que también hablan

La tipografía de una interfaz es la voz de un producto en cada etiqueta, cada botón y cada cifra. Elegirla bien, configurarla con cuidado y cargarla con mimo hace que la gente lea sin esfuerzo y trabaje con confianza, aunque nunca se pare a pensar en ella. Y cuando la marca tiene una tipografía con personalidad, encontrarle su sitio dentro del producto es una de las decisiones más bonitas del proyecto; hablamos de ello en la importancia de la tipografía en una marca.

En SIMA trabajamos la tipografía como parte del sistema de cada marca, de la identidad a la interfaz, dentro de nuestros proyectos de diseño web y experiencia digital. Si tu web, tu app o tu panel necesitan una tipografía que trabaje mejor, escríbenos y la buscamos juntos.