{"id":29933,"date":"2026-10-11T16:44:40","date_gmt":"2026-10-11T14:44:40","guid":{"rendered":"https:\/\/ingenio.la\/blog\/?p=29933"},"modified":"2026-10-06T18:04:10","modified_gmt":"2026-10-06T16:04:10","slug":"anatomia-tipografica","status":"publish","type":"post","link":"https:\/\/ingenio.la\/blog\/anatomia-tipografica\/","title":{"rendered":"Anatom\u00eda tipogr\u00e1fica: las partes de la letra y qu\u00e9 decide cada una"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Elegir una tipograf\u00eda por c\u00f3mo luce el nombre de la marca escrito en grande es el camino m\u00e1s corto a descubrir, tres meses despu\u00e9s, que los n\u00fameros no cuadran, que la \u00d1 sale de otra fuente y que en el m\u00f3vil hay que entornar los ojos. La anatom\u00eda tipogr\u00e1fica<\/strong> es el vocabulario que permite ver esos problemas antes.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Las gu\u00edas del tema suelen quedarse en el diccionario: aqu\u00ed el asta, aqu\u00ed el remate, aqu\u00ed la altura x. Est\u00e1 bien como referencia y no ayuda a decidir nada, porque no dice qu\u00e9 cambia cada parte cuando la letra se usa de verdad.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Cada pieza de la letra tiene una consecuencia medible en pantalla y en papel. Eso es lo que vale aprender.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Qu\u00e9 es la anatom\u00eda tipogr\u00e1fica y para qu\u00e9 sirve saberla<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

La anatom\u00eda tipogr\u00e1fica es el conjunto de partes que componen un car\u00e1cter y los nombres con los que se las distingue. Naci\u00f3 como herramienta de los dise\u00f1adores de tipos, que necesitaban hablar con precisi\u00f3n de trazos que el resto de la gente percibe como \u00abla letra\u00bb y nada m\u00e1s.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Para quien no dise\u00f1a fuentes sino que las elige, su utilidad es otra: convierte una impresi\u00f3n vaga en un criterio. \u00abEsta no se lee bien\u00bb no se puede corregir; \u00abesta tiene la altura x muy baja y el ojo cerrado, as\u00ed que a 14 p\u00edxeles la c y la e se van a confundir\u00bb s\u00ed se puede, porque dice exactamente qu\u00e9 buscar en la alternativa.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Es la capa que falta debajo de las decisiones de dise\u00f1o web<\/a> que ya se toman todos los d\u00edas. Un art\u00edculo sobre qu\u00e9 fuente usar explica el qu\u00e9; la anatom\u00eda explica el por qu\u00e9, y el por qu\u00e9 es lo que se puede aplicar a la fuente siguiente.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Las partes que deciden si un texto se lee o se adivina<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

De la media docena de nombres que circulan, cinco tienen consecuencias pr\u00e1cticas y el resto es vocabulario de especialista.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Altura x: la medida que explica por qu\u00e9 dos fuentes del mismo tama\u00f1o se ven distintas<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

La altura x es la distancia entre la l\u00ednea de base y el alto de las min\u00fasculas sin trazos que suban, como la propia x. Es la medida que m\u00e1s pesa en la legibilidad a cuerpo peque\u00f1o, y la raz\u00f3n de un fen\u00f3meno que desconcierta a mucha gente: dos tipograf\u00edas puestas al mismo tama\u00f1o en puntos pueden parecer de tama\u00f1os muy distintos.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

La consecuencia es directa. Si un texto se ve peque\u00f1o en el m\u00f3vil, subir el cuerpo lo agranda todo, incluidos los t\u00edtulos, y desordena la p\u00e1gina. Cambiar a una fuente de altura x mayor arregla la legibilidad sin tocar la jerarqu\u00eda.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Ascendentes y descendentes: lo que fija el interlineado m\u00ednimo<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Los ascendentes son los trazos que suben por encima de la altura x, como en la l o la h. Los descendentes bajan de la l\u00ednea de base, como en la p o la g. Cuanto m\u00e1s largos, m\u00e1s aire necesita el texto entre l\u00edneas.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Con descendentes largas, un interlineado ajustado hace que la g de una l\u00ednea roce la h de la siguiente. Se ve como suciedad antes de verse como un error, y es el motivo m\u00e1s com\u00fan de que un bloque de texto \u00abse sienta apretado\u00bb sin que nadie sepa decir por qu\u00e9.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

El ojo y la apertura: por qu\u00e9 a tama\u00f1o peque\u00f1o la c parece una e<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

El ojo es el hueco interior de letras como la o, la a o la e. La apertura es cu\u00e1nto se abre ese hueco al exterior en letras como la c o la propia e. Las fuentes geom\u00e9tricas muy cerradas, que lucen elegantes en un titular, confunden la c con la e y la a con la o en cuanto el tama\u00f1o baja.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Por eso una tipograf\u00eda puede ser excelente para una portada y mala para un formulario, una tabla de precios o una factura. Es el mismo razonamiento que ordena la jerarqu\u00eda visual<\/a> de una p\u00e1gina: la fuente del titular y la del cuerpo resuelven problemas distintos y rara vez la misma sirve bien para los dos.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Astas y contraste: la trampa de los trazos finos<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

El asta es el trazo principal que define la letra y marca su grosor. El contraste es la diferencia entre los trazos gruesos y los finos dentro de un mismo car\u00e1cter.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Mucho contraste da sensaci\u00f3n de refinamiento y desaparece al reducir: el trazo fino se adelgaza hasta romperse o hasta que el navegador deja de dibujarlo. Es la explicaci\u00f3n de un problema muy frecuente con los logotipos de marcas<\/a>: el que luce impecable en la pantalla de presentaci\u00f3n se convierte en una mancha gris en un favicon de 16 p\u00edxeles, bordado en una camiseta o grabado en un bol\u00edgrafo.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Remates: para qu\u00e9 sirven y cu\u00e1ndo estorban<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

El remate, o serifa, es el trazo terminal del asta. No es indispensable para que la letra funcione, pero aporta car\u00e1cter y ayuda al ojo a seguir la l\u00ednea en p\u00e1rrafos largos sobre papel, que es para lo que se invent\u00f3.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

En pantalla peque\u00f1a los remates finos se empastan o desaparecen, y a eso se reduce buena parte del viejo debate entre fuentes con y sin remate. Los conceptos b\u00e1sicos de tipograf\u00eda<\/a> aplicados a la web parten justo de esa restricci\u00f3n.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

C\u00f3mo probar una fuente antes de adoptarla<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

La prueba que todo el mundo hace es escribir el nombre de la marca en grande, y es la que menos informa. Estas cinco cuestan diez minutos y descartan casi todo lo que iba a fallar.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Escribe el nombre de la marca con sus tildes y con \u00d1 si las lleva<\/strong>. Muchas fuentes gratuitas tienen el juego de caracteres incompleto para el espa\u00f1ol: la tilde sale descolocada, la \u00d1 se sustituye por la de otra fuente o directamente no aparece. Es el fallo m\u00e1s caro y el m\u00e1s f\u00e1cil de detectar, y casi ninguna gu\u00eda escrita en ingl\u00e9s lo menciona.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Escribe Il1 y O0 seguidos<\/strong>. Si la I may\u00fascula, la l min\u00fascula y el uno son indistinguibles, la fuente no sirve para c\u00f3digos, referencias de producto ni n\u00fameros de factura.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Pon el mismo p\u00e1rrafo a 14 p\u00edxeles y a 60<\/strong>. Una fuente que solo funciona en uno de los dos tama\u00f1os obliga a tener dos, lo que es una decisi\u00f3n leg\u00edtima, pero conviene tomarla a prop\u00f3sito y no descubrirla al maquetar.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

M\u00edralo en gris medio sobre blanco<\/strong>, no en negro puro. Casi ning\u00fan texto real se compone en negro absoluto, y el contraste bajo es donde los trazos finos se rinden.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Y escribe una cifra con separadores<\/strong>, del tipo 1.250,00. Algunas fuentes alinean mal los n\u00fameros o les dan anchos distintos, y una tabla de precios con columnas que bailan se nota desde la otra punta de la oficina.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Donde se rompe una tipograf\u00eda que parec\u00eda perfecta<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Los sitios donde una fuente falla casi nunca son los que se revisan al elegirla. El favicon, el sello en una factura impresa, el asunto de un correo que el cliente lee en la lista de su bandeja, el r\u00f3tulo de un veh\u00edculo visto a veinte metros, el bordado de un uniforme. En todos ellos la letra aparece muy peque\u00f1a, muy reducida o reproducida por un medio que no dibuja trazos finos.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

La regla que se saca de ah\u00ed es simple: una tipograf\u00eda se elige por su peor uso previsible, no por el mejor. El titular de la portada va a verse bien con casi cualquiera; el n\u00famero de tel\u00e9fono en una tarjeta, no.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

La anatom\u00eda no elige la fuente. Lo que hace es descartar las que no iban a aguantar, y eso es m\u00e1s \u00fatil, porque la elecci\u00f3n final siempre tiene una parte de criterio est\u00e9tico que ning\u00fan nombre t\u00e9cnico resuelve. Si de las cinco pruebas solo vas a hacer una, escribe el nombre de tu marca con tildes y \u00d1 a 14 p\u00edxeles en gris medio. Lo que sobreviva a eso ya es una conversaci\u00f3n sobre gusto.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Preguntas frecuentes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\u00bfQu\u00e9 es la anatom\u00eda tipogr\u00e1fica? <\/div><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

El conjunto de partes que componen una letra y los nombres con que se distinguen: asta, remate, ojo, altura x, ascendentes y descendentes, entre otras. Sirve para describir con precisi\u00f3n por qu\u00e9 una fuente funciona o no en un uso concreto.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t

\n\t\t\t\t\n\t\t\t\t\t
\u00bfQu\u00e9 es la altura x y por qu\u00e9 importa? <\/div><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Es la distancia entre la l\u00ednea de base y el alto de las min\u00fasculas sin trazos ascendentes, como la x. Es la medida que m\u00e1s influye en la legibilidad a tama\u00f1o peque\u00f1o, y explica que dos fuentes del mismo cuerpo en puntos se vean de tama\u00f1os distintos.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t

\n\t\t\t\t\n\t\t\t\t\t
\u00bfCu\u00e1l es la diferencia entre asta y remate? <\/div><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

El asta es el trazo principal que define la letra y marca su grosor. El remate, o serifa, es el trazo terminal con que ese asta acaba: es ornamental y no todas las fuentes lo tienen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t

\n\t\t\t\t\n\t\t\t\t\t
\u00bfLas fuentes con remate se leen peor en pantalla? <\/div><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

No por el remate en s\u00ed, sino por su grosor. Los remates finos se empastan o desaparecen en pantallas peque\u00f1as y con poco contraste; los robustos funcionan bien. Importa m\u00e1s el contraste entre trazos que la presencia de serifa.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t

\n\t\t\t\t\n\t\t\t\t\t
\u00bfC\u00f3mo s\u00e9 si una fuente gratuita sirve para espa\u00f1ol? <\/div><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Escribiendo las tildes, la di\u00e9resis y la \u00d1 antes de adoptarla, en may\u00fascula y en min\u00fascula. Muchas fuentes gratuitas tienen el juego de caracteres incompleto y sustituyen esos signos por los de otra fuente.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Elegir una tipograf\u00eda por c\u00f3mo luce el nombre de la marca escrito en grande es el camino m\u00e1s corto a descubrir, tres meses despu\u00e9s, que los n\u00fameros no cuadran, que la \u00d1 sale de otra fuente y que en el m\u00f3vil hay que entornar los ojos. La anatom\u00eda tipogr\u00e1fica es el vocabulario que permite ver […]<\/p>\n","protected":false},"author":1,"featured_media":30326,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-29933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"lang":"es","translations":{"es":29933},"pll_sync_post":{},"_links":{"self":[{"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/posts\/29933","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/comments?post=29933"}],"version-history":[{"count":9,"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/posts\/29933\/revisions"}],"predecessor-version":[{"id":30328,"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/posts\/29933\/revisions\/30328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/media\/30326"}],"wp:attachment":[{"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/media?parent=29933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/categories?post=29933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/tags?post=29933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}