Tipografía y Kerning

Una herramienta que te permite optimizar tu tipografía

Elegir bien la tipografía es clave en una interfaz digital. No solo define la identidad visual de un producto, sino que impacta directamente en la legibilidad, la accesibilidad y la experiencia del usuario. Un buen sistema tipográfico equilibra estética y funcionalidad, asegurando que cada palabra se lea sin esfuerzo en cualquier dispositivo y contexto de uso.

letter-spacing

Usá valores entre -0.01em y 0.02em en cuerpo de texto.

letter-spacing: 0em
font-kerning: normal
ligatures: on
text-rendering: auto

Sin fuente cargada

Importá una fuente desde Google Fonts para ver la comparación de pares kerneados.

Los pares kerneados son combinaciones de letras donde el espacio
  óptico requiere ajuste. Ejemplos comunes:

    AV  AW  AT  AY  — A seguida de diagonales
    To  Ty  Te  Tu  — T mayúscula + minúsculas
    WA  We  Wo     — diagonales con curvas
    fi  fl  ffi    — ligaduras (resueltas con font-variant-ligatures)

Con font-kerning: normal el navegador aplica las tablas embebidas
en la fuente. La diferencia visual depende de la calidad tipográfica.

Cómo elegir una tipografía para pantallas digitales

Elegir una tipografía para interfaces digitales no es solo una decisión estética. La legibilidad en pantalla depende de cómo fue diseñada la fuente: su anatomía, el peso de sus trazos, la altura de sus contadores y cómo se comporta a diferentes tamaños y densidades de píxeles.

Anatomía de la tipografía

Cada glifo tiene partes que afectan directamente la legibilidad en pantalla:

Altura x

Altura de las minúsculas. Una altura x alta mejora la legibilidad a tamaños pequeños, ya que las letras ocupan más píxeles verticales.

Contadores

Espacios cerrados o abiertos dentro de letras como a, e, o, d. Contadores abiertos facilitan la distinguibilidad entre glifos similares.

Ascendentes

Parte de las letras que supera la altura x (b, d, f, h, k, l). Deben ser proporcionales para no crear saltos visuales incómodos.

Descendentes

Parte que desciende por debajo de la línea base (g, j, p, q, y). Un descendente demasiado corto choca con la línea siguiente.

Trazos

Trazos verticales principales. En pantallas de baja densidad, trazos demasiado delgados desaparecen o se ven irregulares.

Serifas

Terminaciones de los trazos. Las serifas finas se pierden en baja resolución; las de contraste alto generan aliasing.

Rasgos clave para pantalla

Altura x alta: letras como la "o" ocupan más píxeles, mejorando la legibilidad en tamaños de cuerpo.
Contraste moderado: demasiado contraste entre trazos gruesos y finos genera artefactos en baja densidad de píxeles.
Aberturas amplias: letras como c, e, s con espacios abiertos se distinguen mejor a baja resolución.
Proporción consistente: letras de ancho similar (monoespaciadas o con proporción humanista estable) reducen la carga cognitiva.
Hinting completo: fuentes bien hintadas renderizan correctamente en tamaños pequeños sin depender de antialiasing del sistema.
Soporte multi-idioma: glyphs para acentos, eñes y caracteres especiales son esenciales para contenido en español.

Por dispositivo

Desktop (≥1024px) — Mayor densidad de píxeles por pulgada. Admite tipografías con mayor contraste y serifas más detalladas. Tamaños de cuerpo entre 16px y 18px. El kerning y las ligaduras se renderizan con precisión. Espaciado entre líneas de 1.4 a 1.7.

Tablet (768px–1024px) — Densidad intermedia. Funcionan fuentes con altura x alta y contraste moderado. Tamaños de cuerpo entre 16px y 17px. El letter-spacing debe ser ligeramente más generoso que en desktop para compensar la menor densidad. Evitar fuentes con serifas demasiado finas.

Móvil (≤480px) — Menor densidad física. Fuentes sans-serif con altura x alta, contadores abiertos y bajo contraste son ideales. Tamaños de cuerpo mínimo 16px para evitar zoom del navegador. line-height de 1.5 a 1.7. Evitar pesos lighter que 400 en cuerpo de texto. El letter-spacing debe ser neutro o ligeramente positivo.

Cómo funciona

Kerning Explorer te permite experimentar con propiedades tipográficas de CSS en tiempo real. Cargá una fuente desde Google Fonts o un archivo local, y ajustá los controles del panel izquierdo para ver los cambios al instante en el preview.

Elementos preview

Los tres elementos (h1, h2, p) se muestran simultáneamente. Seleccioná cuál editar con el selector "Elemento activo". El elemento seleccionado es el que responde a los controles del sidebar. Podés editar el texto directamente haciendo click en él.

Atajos de teclado

1: Seleccionar h1
2: Seleccionar h2
3: Seleccionar párrafo
K: Toggle font-kerning
L: Toggle ligaduras
R: Toggle text-rendering
N: Toggle oldstyle-nums
S: Compartir URL
Z: Restablecer todo
Esc: Cerrar panel (móvil)

Consejos

El valor de letter-spacing ideal para cuerpo de texto está entre -0.01em y 0.02em.
font-kerning solo funciona con fuentes que incluyan tablas de kerning.
text-rendering: optimizeLegibility es recomendado solo para titulares, no para textos largos.
Podés compartir tu configuración con el botón "Compartir" — se genera una URL con todos los parámetros.