Typography Glossary

La línea invisible sobre la que descansan la mayoría de las letras; los descendentes se extienden por debajo de la línea base.

La altura de las letras minúsculas (como la 'x') medida desde la línea base; es un factor clave en el tamaño percibido de la fuente y su legibilidad.

La parte de una letra minúscula que se extiende por encima de la altura de x, como en 'b', 'd', 'h', 'k', 'l'.

La parte de una letra que se extiende por debajo de la línea base, como en 'g', 'j', 'p', 'q', 'y'.

La altura de una letra mayúscula medida desde la línea base hasta la parte superior de mayúsculas planas como 'H' o 'I'.

La diferencia entre las partes más gruesas y más delgadas de los trazos de una letra; las fuentes de alto contraste (como Didot) tienen una variación dramática.

Dos o más letras combinadas en un solo glifo, como 'fi' o 'fl'; son comunes en fuentes serif y fuentes para código (p. ej., Fira Code).

La representación visual individual de un carácter; un mismo carácter puede tener múltiples glifos (p. ej., la 'a' en redonda e itálica).

El espacio cerrado o parcialmente cerrado dentro de letras como 'o', 'e', 'p'; las contraformas abiertas (como en 'c') se denominan aperturas.

El trazo curvo que crea una contraforma cerrada en letras como 'b', 'd', 'p', 'q'; su forma varía ampliamente entre las familias tipográficas.

El trazo vertical principal de una letra, como el palo vertical en 'l', 'b', 'd'; es el trazo más grueso en la mayoría de los diseños tipográficos.

Cualquier línea que forma parte de una letra —vertical, horizontal, diagonal o curva—; el contraste de trazos define gran parte del carácter de una tipografía.

El extremo de un trazo que no tiene serifa; puede tener forma de bola, pico, lágrima o plana; el estilo del terminal es un identificador clave en la clasificación tipográfica.

El trazo horizontal en letras como 'A', 'H', 'e', 'f'; su posición relativa a la altura de x afecta la legibilidad.

Un trazo extendido y decorativo en una letra, común en fuentes itálicas y de display; añade elegancia y carácter a los títulos.

La abertura de una contraforma parcialmente cerrada en letras como 'c', 'e', 's'; las aperturas más amplias generalmente mejoran la legibilidad en tamaños pequeños.

Un pequeño trazo decorativo añadido al extremo de los trazos principales de una letra; las fuentes con serifa (como Times New Roman) las tienen, las sans-serif no.

Una tipografía sin serifas — 'sans' significa 'sin' en francés; tiene una apariencia limpia y moderna, popular en el diseño digital.

Una tipografía en la que cada carácter ocupa el mismo ancho horizontal; indispensable para editores de código y datos tabulares.

El diseño global de un conjunto de caracteres — la creación artística; a menudo se confunde con 'fuente', que es una instancia específica de tamaño, peso y estilo de una familia tipográfica.

Una instancia específica de una familia tipográfica en un peso, tamaño y estilo determinados; por ejemplo, 'Inter Bold 16px' es una fuente, mientras que 'Inter' es la familia tipográfica.

Tipografías diseñadas para usarse en tamaños grandes — títulos, carteles, logotipos; no están optimizadas para la legibilidad en texto corrido a tamaños pequeños.

Tipografías basadas en escritura manual conectada y fluida; van desde estilos caligráficos formales hasta scripts de pincel informales.

Tipografías con serifas rectangulares gruesas y macizas; tienen una fuerte presencia visual para titulares, elementos de interfaz y branding.

Una tipografía en la que cada carácter tiene un ancho diferente según su forma — la 'w' es más ancha que la 'i'; es el comportamiento predeterminado de la mayoría de las fuentes.

Estilo sans-serif refinado de los años 50 con trazos uniformes y apariencia neutra; es el estilo dominante en el diseño de interfaces modernas.

Tipografías sans-serif construidas sobre formas geométricas — círculos, rectángulos, triángulos; son limpias y modernas, pero pueden resultar frías en tamaños pequeños.

Tipografías sans-serif inspiradas en la escritura manual del Renacimiento, con variación orgánica en los trazos; son más cálidas y legibles que los estilos geométricos.

El ajuste del espacio entre pares de letras individuales para lograr un espaciado visualmente consistente.

El ajuste uniforme del espaciado en un rango completo de caracteres, a diferencia del kerning que actúa sobre pares específicos.

La distancia vertical entre líneas de texto, medida de línea base a línea base; su nombre proviene de las tiras de plomo usadas en la imprenta tipográfica.

Una unidad tipográfica igual al tamaño de fuente actual; en CSS, 1em equivale al tamaño de fuente del elemento padre; es la base para el dimensionado relativo.

La propiedad CSS que controla la distancia entre palabras — el valor predeterminado está definido por el ancho del carácter de espacio de la fuente.

El espacio vacío intencional en un diseño que da margen para respirar al texto y los elementos; es fundamental para la legibilidad y la jerarquía visual.

La longitud de una línea de texto, típicamente entre 45 y 75 caracteres para una legibilidad óptima; una medida demasiado larga o corta reduce la comodidad de lectura.

Un grupo de fuentes relacionadas que comparten el mismo diseño básico pero varían en peso, anchura o estilo; en CSS, la propiedad font-family especifica las fuentes preferidas.

El grosor de los trazos de los caracteres, que generalmente va de 100 (Thin) a 900 (Black); Regular es 400 y Bold es 700.

Una fuente diseñada o licenciada específicamente para su uso en sitios web, cargada mediante CSS @font-face o servicios como Google Fonts.

Un único archivo de fuente que contiene una gama completa de pesos, anchos u otras variaciones; reduce las peticiones HTTP y el tamaño de los archivos.

Un formato de fuente desarrollado por Microsoft y Adobe que admite funciones tipográficas avanzadas como ligaduras, alternativas y ejes variables.

Instrucciones integradas en una fuente que mejoran su representación en tamaños pequeños en pantallas de baja resolución, alineando los contornos a la cuadrícula de píxeles.

El suavizado de los bordes dentados del texto renderizado mediante la mezcla de píxeles en los bordes; en CSS: -webkit-font-smoothing: antialiased.

La licencia de fuente de código abierto más común; permite el uso, modificación y redistribución gratuitos; todas las fuentes de Google usan OFL o Apache 2.0.

Web Open Font Format 2.0 — comprimido con Brotli, es el formato de fuente más eficiente para la web; aproximadamente un 30% más pequeño que WOFF y compatible con todos los navegadores modernos.

La eliminación de caracteres no utilizados de un archivo de fuente para reducir el tamaño de descarga; por ejemplo, cargar solo caracteres latinos en lugar del rango Unicode completo.

Descriptor CSS en @font-face que especifica qué caracteres Unicode descargar de un archivo de fuente, permitiendo el subsetting automático por parte del navegador.

Propiedad CSS para controlar las funciones OpenType — ligaduras, versalitas, números tabulares, alternativas estilísticas; se recomienda usar font-variant para casos más sencillos.

API de JavaScript (document.fonts) para el control programático de la carga de fuentes — permite verificar si las fuentes están cargadas, precargarlas y responder a eventos de carga.

Propiedad CSS para controlar directamente los ejes de las fuentes variables — peso, anchura, inclinación y ejes personalizados; es de nivel más bajo que font-weight y font-stretch.

La práctica de seleccionar dos o más fuentes complementarias para usarlas juntas en un diseño; generalmente combina una fuente para títulos con una fuente para texto corrido.

Una progresión armoniosa de tamaños de fuente basada en una razón (p. ej., 1.25, 1.333, 1.5); crea jerarquía visual y coherencia.

La organización visual del texto mediante tamaño, peso, color y espaciado para guiar a los lectores a través del contenido en orden de importancia.

El ajuste de los detalles de las letras según el tamaño de visualización previsto; el texto pequeño necesita más espaciado y trazos más gruesos, mientras que el texto grande puede ser más refinado.

Tipografía que se adapta a diferentes tamaños de pantalla — usando media queries, unidades de viewport o CSS clamp() para un escalado fluido.

Un patrón de espaciado consistente que alinea las líneas base del texto y el espaciado de los elementos a una cuadrícula base; crea armonía visual en la página.

Una secuencia de números armoniosos basada en una razón (p. ej., 1.25 tercera menor, 1.333 cuarta justa, 1.618 proporción áurea) utilizada para definir los tamaños tipográficos.

La densidad o textura visual general de un bloque de texto en una página — influenciada por el peso, tamaño, interlineado y espaciado de la fuente.

Tipografía que escala de forma continua entre tamaños mínimo y máximo usando CSS clamp() — sin saltos de breakpoint.

La propiedad CSS que controla la distancia entre líneas de texto; normalmente se establece en 1.5 o 150% para una legibilidad óptima en texto corrido.

La propiedad CSS para ajustar el espaciado entre todos los caracteres; los valores positivos separan las letras y los negativos las acercan.

Una regla arroba de CSS que permite a los diseñadores web especificar fuentes personalizadas para sus páginas; es la base de la tipografía web.

Una lista ordenada de fuentes en la propiedad CSS font-family, que proporciona alternativas si la fuente preferida no está disponible; p. ej., 'Inter, system-ui, sans-serif'.

Una fuente preinstalada en el sistema operativo; el uso de fuentes del sistema (pila system-ui) elimina el tiempo de descarga, pero sacrifica la coherencia de marca.

Flash of Unstyled Text — cuando una fuente de reserva aparece brevemente antes de que se cargue la fuente web; se mitiga con font-display: swap.

Flash of Invisible Text — cuando el texto se oculta hasta que se carga la fuente web; es peor que el FOUT para la experiencia del usuario y se previene con font-display: swap.

Un descriptor CSS que controla cómo se muestra una fuente web durante la carga; sus valores son: auto, block, swap, fallback y optional.

Root em — una unidad CSS relativa al tamaño de fuente del elemento raíz (normalmente 16px); es más predecible que el em para un dimensionado consistente.

La biblioteca de fuentes gratuitas y de código abierto de Google con más de 1.900 familias; es la mayor colección de fuentes web con licencia libre, servida a través de una CDN global.

El uso de link rel="preload" as="font" para priorizar las descargas de fuentes, reduciendo el FOUT/FOIT y mejorando el Largest Contentful Paint (LCP).

Cambio Acumulativo de Diseño causado por la carga de fuentes — el texto se redistribuye cuando la fuente web reemplaza a la de reserva debido a métricas diferentes; es un problema de Core Web Vitals.

Propiedad CSS que controla la calidad del renderizado del texto: auto, optimizeSpeed, optimizeLegibility, geometricPrecision; afecta al kerning y las ligaduras.

La facilidad con la que los caracteres individuales pueden distinguirse entre sí — una cualidad intrínseca del diseño de la propia tipografía.

La comodidad con la que un texto extenso puede leerse en pasajes largos — influenciada por la elección de fuente, el tamaño, el interlineado, la medida de línea y el contraste de color.

Prácticas tipográficas que garantizan que el contenido sea usable por todos — contraste suficiente, texto escalable, jerarquía clara y elecciones de fuente apropiadas.

Las Pautas de Accesibilidad para el Contenido Web aplicadas al texto — ratios de contraste mínimos (4.5:1 AA, 7:1 AAA), texto redimensionable y ausencia de imágenes de texto.

Fuentes diseñadas para mejorar la legibilidad en lectores con dislexia — con formas de letra inequívocas, espaciado generoso y bases reforzadas que anclan las letras.

La relación de luminancia entre el color del texto y el color de fondo; las WCAG exigen 4.5:1 para texto normal (AA) y 7:1 para nivel mejorado (AAA).

Johannes Gutenberg inventó la imprenta de tipos móviles hacia 1440, posibilitando la producción masiva de libros y democratizando el acceso al conocimiento escrito.

La icónica tipografía neo-grotesca diseñada por Max Miedinger en 1957; definió el diseño gráfico moderno y sigue siendo la fuente más reconocida del mundo.

La sans-serif geométrica diseñada por Paul Renner en 1927, que encarna el modernismo de la Bauhaus; su influencia se aprecia en Poppins, Montserrat y Raleway.

La influyente tipografía serif de estilo antiguo de Claude Garamond (~1530); uno de los diseños tipográficos más antiguos que aún se utiliza activamente, casi 500 años después.

La escuela Bauhaus (1919–1933) revolucionó la tipografía con formas geométricas, preferencia por las sans-serif y el principio de que la forma sigue a la función.

El Estilo Tipográfico Internacional (años 50 en adelante) enfatizó las retículas, las composiciones asimétricas y las tipografías sans-serif; Helvetica fue su máximo exponente.