Glosario tipográfico

The invisible line on which most letters sit. Descenders extend below the baseline.

The height of lowercase letters (like 'x') measured from the baseline. A key factor in perceived font size and readability.

The part of a lowercase letter that extends above the x-height, as in 'b', 'd', 'h', 'k', 'l'.

The part of a letter that extends below the baseline, as in 'g', 'j', 'p', 'q', 'y'.

The height of a capital letter measured from the baseline to the top of flat capitals like 'H' or 'I'.

The difference between the thickest and thinnest parts of a letter's strokes. High-contrast fonts (like Didot) have dramatic variation.

Two or more letters combined into a single glyph, like 'fi' or 'fl'. Common in serif fonts and coding fonts (e.g., Fira Code).

A single visual representation of a character. One character can have multiple glyphs (e.g., regular and italic 'a').

The enclosed or partially enclosed space within letters like 'o', 'e', 'p'. Open counters (as in 'c') are called apertures.

The curved stroke creating an enclosed counter in letters like 'b', 'd', 'p', 'q'. The shape varies widely between typefaces.

The main vertical stroke of a letter, such as the upright in 'l', 'b', 'd'. The heaviest stroke in most typeface designs.

Any line that forms part of a letter — vertical, horizontal, diagonal, or curved. Stroke contrast defines much of a typeface's character.

The end of a stroke that doesn't have a serif — can be ball, beak, teardrop, or flat shaped. Terminal style is a key identifier of type classification.

The horizontal stroke in letters like 'A', 'H', 'e', 'f'. Its position relative to the x-height affects readability.

An extended, decorative stroke on a letter, common in italic and display fonts. Adds elegance and flair to headings.

The opening of a partially enclosed counter in letters like 'c', 'e', 's'. Wider apertures generally improve readability at small sizes.

A small decorative stroke added to the end of a letter's main strokes. Serif fonts (like Times New Roman) have these; sans-serif fonts don't.

A typeface without serifs — 'sans' means 'without' in French. Clean, modern appearance popular in digital design.

A typeface where every character occupies the same horizontal width. Essential for code editors and tabular data.

The overall design of a set of characters — the artistic creation. Often confused with 'font', which is a specific size/weight/style of a typeface.

Una instancia específica de un tipo de letra en un peso, tamaño y estilo determinados. Por ejemplo, «Inter Bold 16px» es una fuente; «Inter» es el tipo de letra.

Tipos de letra diseñados para su uso en tamaños grandes: titulares, carteles, logos. No optimizados para la legibilidad de texto de cuerpo en tamaños pequeños.

Tipos de letra basados en escritura manual conectada y fluida. Van desde estilos caligráficos formales hasta scripts de pincel informales.

Tipos de letra serif con remates gruesos y rectangulares en forma de bloque. Fuerte presencia visual para titulares, elementos de interfaz y branding.

Un tipo de letra en el que cada carácter tiene un ancho diferente según su forma —la «w» es más ancha que la «i»—. El comportamiento predeterminado de la mayoría de las fuentes.

Estilo sans-serif refinado de la década de 1950 con trazos uniformes y apariencia neutral. El estilo dominante en el diseño de interfaces modernas.

Tipos de letra sans-serif construidos sobre formas geométricas: círculos, rectángulos, triángulos. Limpios y modernos, pero pueden resultar fríos en tamaños pequeños.

Tipos de letra sans-serif inspirados en la escritura manual del Renacimiento, con variación orgánica de trazo. Más cálidos y legibles que los estilos geométricos.

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

El ajuste uniforme del espaciado a lo largo de todo un rango de caracteres, a diferencia del kerning, que se dirige a pares específicos.

La distancia vertical entre líneas de texto, medida de línea de base a línea de base. Recibe su nombre 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. La base para el dimensionamiento 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 le da a los elementos y al texto espacio para respirar. Crítico para la legibilidad y la jerarquía visual.

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

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

El grosor de los trazos de los caracteres, que va típicamente de 100 (Thin) a 900 (Black). Regular es 400, Bold es 700.

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

Un único archivo de fuente que contiene todo un rango de pesos, anchos u otras variaciones. Reduce las solicitudes HTTP y el tamaño de archivo.

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

Instructions embedded in a font that improve its rendering at small sizes on low-resolution screens by aligning outlines to the pixel grid.

Smoothing the jagged edges of rendered text by blending edge pixels. CSS: -webkit-font-smoothing: antialiased.

The most common open-source font license. Allows free use, modification, and redistribution. All Google Fonts use OFL or Apache 2.0.

Web Open Font Format 2.0 — Brotli-compressed, the most efficient font format for the web. ~30% smaller than WOFF, supported by all modern browsers.

Removing unused characters from a font file to reduce download size. For example, loading only Latin characters instead of the full Unicode range.

CSS descriptor in @font-face that specifies which Unicode characters to download from a font file, enabling automatic subsetting by the browser.

CSS property to control OpenType features — ligatures, small caps, tabular numbers, stylistic alternates. Use font-variant for simpler cases.

JavaScript API (document.fonts) for programmatic font loading control — check if fonts are loaded, preload specific fonts, and respond to load events.

CSS property to control variable font axes directly — weight, width, slant, and custom axes. Lower-level than font-weight/font-stretch.

The practice of selecting two or more complementary fonts to use together in a design. Usually combines a heading font with a body font.

A harmonious progression of font sizes based on a ratio (e.g., 1.25, 1.333, 1.5). Creates visual hierarchy and consistency.

The visual organization of text using size, weight, color, and spacing to guide readers through content in order of importance.

Adjusting letterform details based on the intended display size. Small text needs more spacing and heavier strokes; large text can be more refined.

Typography that adapts to different screen sizes — using media queries, viewport units, or CSS clamp() for fluid scaling.

Consistent spacing pattern that aligns text baselines and element spacing to a baseline grid. Creates visual harmony on the page.

A sequence of harmonious numbers based on a ratio (e.g., 1.25 minor third, 1.333 perfect fourth, 1.618 golden ratio) used to set type sizes.

The overall visual density or texture of a block of text on a page — affected by font weight, size, line-height, and letter-spacing.

Typography that scales smoothly between minimum and maximum sizes using CSS clamp() — no breakpoint jumps needed.

The CSS property controlling the distance between lines of text. Typically set to 1.5 or 150% for body text readability.

The CSS property for adjusting spacing between all characters. Positive values spread letters apart; negative values bring them closer.

A CSS at-rule that allows web designers to specify custom fonts for their web pages. The foundation of web typography.

An ordered list of fonts in CSS font-family, providing fallbacks if the preferred font is unavailable. E.g., 'Inter, system-ui, sans-serif'.

A font pre-installed on the operating system. Using system fonts (system-ui stack) eliminates download time but sacrifices brand consistency.

Flash of Unstyled Text — when a fallback font briefly appears before the web font loads. Mitigated by font-display: swap.

Flash of Invisible Text — when text is hidden until the web font loads. Worse than FOUT for user experience. Prevented by font-display: swap.

A CSS descriptor that controls how a web font is displayed during loading. Values: auto, block, swap, fallback, optional.

Root em — a CSS unit relative to the root element's font size (usually 16px). More predictable than em for consistent sizing.

Google's free, open-source font library with 1,900+ families. The largest collection of freely-licensed web fonts, served via a global CDN.

Using <link rel="preload" as="font"> to prioritize font downloads, reducing FOUT/FOIT and improving Largest Contentful Paint (LCP).

Cumulative Layout Shift caused by font loading — text reflows when web font replaces fallback due to different metrics. A Core Web Vital issue.

CSS property controlling text rendering quality: auto, optimizeSpeed, optimizeLegibility, geometricPrecision. Affects kerning and ligatures.

How easily individual characters can be distinguished from each other — an intrinsic quality of the typeface design itself.

How comfortably extended text can be read in longer passages — affected by font choice, size, line-height, measure, and color contrast.

Typography practices ensuring content is usable by everyone — sufficient contrast, scalable text, clear hierarchy, and appropriate font choices.

Web Content Accessibility Guidelines as applied to text — minimum contrast ratios (4.5:1 AA, 7:1 AAA), resizable text, and no images of text.

Fonts designed for improved readability for dyslexic readers — with unambiguous letterforms, generous spacing, and weighted bottoms to anchor letters.

The luminance ratio between foreground text and background color. WCAG requires 4.5:1 for normal text (AA) and 7:1 for enhanced (AAA).

Johannes Gutenberg invented movable type printing around 1440, enabling mass production of books and democratizing access to written knowledge.

The iconic neo-grotesque typeface designed by Max Miedinger in 1957. Defined modern graphic design and remains the world's most recognized font.

The geometric sans-serif designed by Paul Renner in 1927, embodying Bauhaus modernism. Its influence is seen in Poppins, Montserrat, and Raleway.

El influyente tipo de letra old-style de Claude Garamond (~1530). Uno de los diseños tipográficos más antiguos todavía en uso activo, casi 500 años después.

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

El Estilo Tipográfico Internacional (años 1950 en adelante) enfatizaba las retículas, las maquetaciones asimétricas y los tipos de letra sans-serif. Helvetica fue su emblema.