7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Typography

La Guía Definitiva de Tipografía Básica

Scroll to top
Read Time: 18 mins

Spanish (Español) translation by Itzel Alvarez (you can also view the original English article)

Aprende los términos esenciales del mundo de la tipografía. En este artículo aclararemos algunos términos mal usados, mencionaremos algunas cifras y símbolos y explicaremos un poco de terminología indispensable de la composición.

En el mundo de la tipografía y el diseño hay innumerables términos que los diseñadores principiantes necesitan saber. Por lo general, algunos de esos términos se confunden o son mal usados. En esta Guía Definitiva de Tipografía Básica he reunido algunos términos esenciales que necesitas saber. Revisaremos algunos términos básicos mal entendidos, como el tipo de letra y la fuente y sus diferencias. También abordaré los diferentes tipos de archivos de fuentes, explicaré los diferentes tipos de cifras y símbolos, y explicaré algunos detalles esenciales de composición.

Tipo de letra vs. Fuente

Uno de los errores más comunes al hablar sobre el tipo es mezclar los términos "tipo de letra" y "fuente". Lo que distingue a esos términos puede ser un tanto confuso, así que hablemos de sus diferentes significados.

Un tipo de letra es un grupo de carácteres que comparten un ADN común. Por ejemplo, Alegreya Sans es un tipo de letra diferente a Rockwell Std.

Una fuente es un conjunto particular de glifos dentro de un tipo de fuente. Por ejemplo, la Franklin Gothic URW Light de 12 pts. es una fuente diferente a la Franklin Gothic URW Light de 14 pts. Se usaría la misma definición si tratara de diferentes pesos: la Franklin Gothic URW Light de 12 pts es diferente a la Franklin Gothic URW Book de 18 pts.

Durante varios siglos los textos se preparaban a mano de manera individual, y cada letra era una pieza pequeña de metal fundido. Cada letra era almacenada en un cajón tipográfigo de madera con compartimientos pequeños. Un cajón tipográfico específico podría contener un alfabeto completo y otros glifos del mismo tamaño. Por lo tanto, el término "fuente" tenía un significado muy específico, distinto al de "tipo de fuente".

En nuestros días esos dos términos suelen ser usados de manera intercambiable, pero siempre es bueno saber las diferencias entre ambos. La mejor analogía es la de los álbumes y las canciones. Los tipos de fuente son los diferentes álbumes, y las fuentes son las canciones el en álbum.

Typeface and font differencesTypeface and font differencesTypeface and font differences

Estilos de Fuente

Cuando se inventó el tipo de letra, todas las fuentes se diseñaban como romanas. No fue hasta principios del siglo 16 que se introdujeron las fuentes itálicas. Al ser provenientes de Italia, las itálicas eran un grupo separado en la clasificación tipográfica, similar a los serifs y sans serifs. A principios del siglo 18 las fundidoras comenzaron a emparejar el diseño romano e itálico. Las itálicas se usan para hacer énfasis en puntos importantes de un bloque de texto.

  • Las itálicas o itálicas auténticas son tipos de letra inclinada con una fuerte influencia de la caligrafía. Su anatomía inclinada imita el movimiento orgánico de las letras cursivas. La itálicas que están diseñadas específicamente para sus fuentes romanas correspondientes tienen una forma similar, exceptuando algunos carácteres. Las letras minúsculas como la a, f y g tienden a cambiar de manera considerable cuando se diseñan como itálicas.
  • Las fuentes inclinadas tienen un estilo menos caligráfico en comparación con las itálicas. Ninguno de los glifos en fuentes inclinadas pasan por una transformación a cursiva. Algunos glifos pueden estar ligeramente inclinados, mientras que otros pasan por correcciones rigurosas para mantener el mismo estilo que sus contrapartes romanas. Cuando se incluyen en un bloque de texto, las fuentes inclinadas no contrastan lo suficiente con sus contrapartes romanas.
Font StylesFont StylesFont Styles

Pesos de Fuente

A finales del siglo 19 y principios del 20, Morris Fuller Benton fue uno de los que proponían la creación de grandes familias tipográficas. La idea era que los carácteres dentro de una familia compartirían un ADN común, con ligeras distinciones.

Los pesos de fuente más comunes que puedes encontrar en un tipo de letra son el Regular y Negrita. Algunos tipos de letra como Neue Haas Unica incluyen pesos amplios. Este tipo de letra incluye múltiples pesos como ultra ligero, fino, ligero, regular, medio, negrita, pesado, negro y extra negro. La ventaja de tener tal variedad de pesos en una sola fuente es la posibilidad de crear una jerarquía en un diseño de página.

font weightsfont weightsfont weights

Tipos de Archivos de Fuente

Seamos realistas: cuando descargas o instalas una fuente, te quedas con la duda de si has usado el archivo correcto. A todos nos ha pasado y nos hemos preguntado cuál es la verdadera diferencia entre los archivos. Así que hablemos de los tipos de archivos de fuente:

  • Los archivos PostScript (.pfb, .pfm, .lwnf, .ffil) fueron desarrollados por Adobe a mediados de los 80's. Una computadora necesitaría dos archivos separados: uno para la visualización en pantalla y otro para la impresión. El archivo PostScript no es multiplataforma, se necesitaban archivos diferentes para las computadoras Mac y Windows. Esto se convirtió en un problema al manejar archivos de diferentes sistemas operativos. El archivo podía contener 200 glifos como máximo.
  • Los archivos TrueType Font (.ttf) fueron desarrollados tanto por Apple como por Microsoft a principios de los 90's. Este tipo de archivos convierte el contorno de cada carácter mediante un proceso de "hinting" para lograr un mayor nivel de legibilidad en dispositivos de baja resolución. Incorporar el hinting en la fuente tomaba bastante tiempo, y no todas las fuentes aprovechan la tecnología. Un solo archivo contiene datos de pantalla y de impresión, y hasta 65,000 glifos.
  • Los archivos OpenType Font (.otf) fueron desarrollados por Adobe y Microsoft a finales de los 90's. Estas fuentes soportan Unicode, lo que significa que el archivo OpenType puede contener más de 65,000 glifos. Anteriormente, los tipos de letra con múltiples idiomas tenían un archivo separado; las fuentes OpenType pueden alojarlos en un solo archivo, incluyendo swashes, estilos de número, pictogramas y más. Este tipo de archivo es multiplataforma: el mismo archivo puede usarse en computadoras Mac y Windiws.
Font file typesFont file typesFont file types

Cifras, Signos y Símbolos

Cifras de Estilo Antiguo, Ojo Medio, Proporcionales y Tabulares

Quizá hayas notado que algunos números se colocan de diferente manera dependiendo del tipo de letra. Cada estilo de número tiene un uso específico que puede hacer más fácil su diseño. Las cifras de ojo medio y de estilo antiguo tienen diferentes alineaciones de base. Las figuras tabulares y proporcionales tienen diferentes anchuras, y si se usan en líneas múltiples los números podrían no estar alineados. Échemosle un vistazo a los diferentes estilos de cifras y cuándo debes usarlos:

  • Las Cifras de Ojo Medio son por lo regular las cifras por default que encuentras el un tipo de letra. Los números se colocan en la misma base que el resto de los caracteres. Esas cifras se ven geniales al lado de letras mayúsculas porque la altura tiende a ser similar, sino es la misma.
  • Las Cifras de Estilo Antiguo o de no ojo medio son números que se extienden hacia arriba o abajo de la base—de manera similar a los ascendentes y descendentes en las letras. Este estilo se ve genial si lo usas en el párrafo de un texto. Visualmente, la variedad en las combinaciones de altura se ve bonita con las letras mayúsculas y minúsculas.
Lining and old style figuresLining and old style figuresLining and old style figures
  • La Cifras Tabulares tienen una anchura fija, parecido a las fuentes monoespaciadas. Este estilo de cifra es perfecto si estás planeando componer tablas, gráficos o listas numeradas, pues se alinean de manera vertical sin necesidad de interletrar. Evita usar este estilo en bloque de texto ya que la anchura uniforme se verá como cifras apenas interletradas.
  • Las Cifras Proporcionales son lo opuesto a las tabulares—esos números tienen diferentes anchuras dependiendo de su forma. Por lo tanto, los números no se alinean de manera vertical. Usa este estilo de cifra en el cuerpo del texto ya que armonizan de manera orgánica para los lectores.
Tabular and proportional figuresTabular and proportional figuresTabular and proportional figures

Superíndice y Subíndice

Las cifras de superíndice y subíndice son versiones más pequeñas de numerales de tamaño completo. Por lo general se usan en notas al pie y notas al final, centavos de los precios, fracciones diagonales y notaciones químicas. Estas cifras no siempre se incluyen en un tipo de letra, pero softwares como InDesign tienen la opción de crear una cifra falsa. Se dice que las cifras diseñadas adecuadamente tienen una relación de armonía visual en términos de peso y proporción.

  • Los superíndices o cifras superiores pueden alinearse con mayúsculas (se usa principalmente para numeradores estándar) o ir ligeramente por encima (para fórmulas matemáticas). Algunos tipos de letra incluirán ambas o sólo una de éstas.
  • Los subíndices o cifras inferiores pueden estar alineados a la línea de base (se usa para los denominadores) o debajo de ella (para fórmulas químicas).
Superscript and subscriptsSuperscript and subscriptsSuperscript and subscripts

Mayúsculas Pequeñas

Las mayúsculas pequeñas son formas de letra mayúscula que son más pequeñas que las mayúsculas normales. A menudo tienen la misma altura que las minúsculas o son ligeramente más altas, así lucen visiblemente armoniosas. Si buscas resaltar texto en lugar de usar negritas o itálicas, puedes usar las mayúsculas pequeñas.

Sin embargo, hoy en día muchas mayúsculas pequeñas son generadas por computadora, así que presta atención al usarlas. Se dice que las mayúsculas pequeñas bien diseñadas complementan específicamente el peso y la proporción de la letra. Evita usar el botón de Mayúsculas Pequeñas de InDesign, pues sólo generará una forma reducida proporcionalmente de una letra mayúscula. Éstas tienden a verse demasiado claras, mal espaciadas y estrechas.

Small capsSmall capsSmall caps

Ligaduras: Estándares y Opcionales

Quizá te hayas encontrado con esos carácteres elegantes antes y no lo notaste. La palabra "ligaduras" viene del latín ligare, que significa atar. Las ligaduras unen dos o más letras en un solo carácter para ayudar con el interletraje o por propósitos decorativos. Veámos los detalles:

  • Las ligaduras estándar ayudan con el onterletraje cuando algunos carácteres ocupan el espacio horizontal de los siguientes. Por ejemplo, la letra f tiende a ocupar más espacio por su terminación en gancho. La superposición aumenta a ambos lados con las fuentes itálicas. Las ligaduras típicas del inglés incluyen combinaciones de letras como fi, fl, ffi y ffl. Dependiendo del idioma, las ligaduras pueden ser diferentes.
  • Las ligaduras opcionales o decorativas no ayudan necesariamente con el interletraje, sino que son características estilísticas de un tipo de letra. El estilo de ligadura tiene una apariencia caligráfica y puede añadir personalidad a los carácteres. Las combinaciones de letras como ct, sp y st tienen un estilo de conexión específica entre carácteres.
LigaturesLigaturesLigatures

Guiones y Rayas

Los guiones y guiones largos son signos de puntuación que a menudo se malentienden y se usan mal. Aunque parezcan similares, la diferencia en su largo tiene funciones específicas. Esos tres carácteres son trazos horizontales que pueden tener características específicas para ajustarse a un tipo de letra.

  • El guión es un signo usado para componer una palabra, también se usa al final de una línea para dividir una palabra. Los guiones se usan por lo general para separar dígitos de números telefónicos o unir palabras compuestas como "costo-beneficio".
  • La raya corta es más larga que el guión y su anchura suele coincidir con la de la N mayúscula. Se usa para indicar un período de tiempo, reemplazando a menudo las preposiciones "a" o "por".
  • La raya larga es el carácter más largo, y su longitud suele coincidir con la de la M mayúscula. Se usa a menudo en lugar de comas, paréntesis o dos puntos. Las rayas largas también se usan para indicar una fuerte rotura en la estructura de una oración o un cambio de pensamiento o énfasis. La máquinas de escribir no incluyen la raya larga (sólo los guiones), así que algunos escritores han usado dos guiones en lugar de una raya larga. Hay que tener en cuenta que esto es tipográficamente incorrecto.
Hyphens and dashesHyphens and dashesHyphens and dashes

Ampersand

Uno de los carácteres más elegantes en un tipo de letra es el ampersand. Este símbolo es una representación estilizada de "et", que en latín significa "y". Los diseñadores a menudo aprovechan la oportunidad para diseñar ampersands como una manera de presumir, ya que puede ser un símbolo que contiene mucho carácter y personalidad. En inglés es común sustituir la palabra "and" por el ampersand en ciertos casos: encabezados, títulos, marcas o al conectar palabras de una lista. En inglés se usa moderadamente o se omite en texto, ya que el texto puede parecer más largo a los normales.

AmpersandAmpersandAmpersand

Símbolos Legales (™ ® ©)

Los símbolos de marca, registro y derecho de autor son símbolos importantes cuando diseñas una identidad de marca. Ayudan a proteger el trabajo creativo contra el plagio. Visualmente, estos símbolos se usan a menudo en tamaños pequeños para que luzcan claros pero modestos ya que acompañan a un logo.

Los diseñadores prefieren usar símbolos serif con fuentes serif, y símbolos sans con logos sans. Se acepta el uso de un símbolo sans con un logo serif, pues se puede leer mejor en un tamaño de punto menor.

Si usas los símbolos ™ o ® en el tamaño del texto, colócalos a menos de la mitad de la altura de la x del texto. Mientras que el texto se hace más grande, los símbolos deben reducirse en tamaño para una apariencia clara. El símbolo © debe coincidir con la altura de la x o la altura de la mayúscula en el texto.

Legal symbols trademark register and copyrightLegal symbols trademark register and copyrightLegal symbols trademark register and copyright

Tipografía Detallada

Legibilidad

La legibilidad se refiere a la anatomía del tipo de letra y el ADN común que los carácteres comparten. Está relacionado con la capacidad del lector para diferenciar una letra de otra. Hay varios elementos que contribuyen a un tipo de letra legible, tales como la altura de la x, la anchura del carácter, la altura, contadores, serifs, contraste del trazo, etc.

LegibilityLegibilityLegibility

La facilidad para leer

La facilidad para leer se refiere a qué tan claro y facil es leer las palabras de un bloque texto. Muchos diseñadores pasan años perfeccionando el arte de la composición ya que ayuda a darle forma a la página de manera cohesiva y clara. La composición se orienta mucho por los detalles, y en ella debe haber una mezcla de factores de legibilidad y facilidad para leer. Los diseñadores pueden tomar decisiones para que un tipo de letra sea más fácil de leer en una página, dependiendo de su ADN. El tamaño de fuente, la longitud de la línea y el espacio, por mencionar algunos, forman parte de los elementos que necesitan ser considerados para hacer un texto legible.

ReadabilityReadabilityReadability

Tamaño

La fuente de 12 pts. se ha convertido en la regla para el texto de un documento. Desafortunadamente, no es el tamaño más cómodo de leer en textos largos. Muchos libros, periódicos y revistas se imprimen en menos de 12 pts. Esto no es sólo por motivos estéticos, también puede ser costoso imprimirlos a 12 pts.

Si bien cada tipo de letra se ve diferente a 12 pts., intenta imprimir algo en ese tamaño y léelo. Redúcelo a 10 pts., puede parecer insignificante, pero el texto puede verse elegante en ese tamaño. No temas aumentar o reducir 0.25 o 0.5 pts., pues esto puede hacer una gran diferencia. Todo está en los detalles. Dependiendo del tipo de producto final, quizá necesites ajustarlo. Por ejemplo, las tarjetas de presentación suelen hacerse a 7 u 8 pts.

SizeSizeSize

Longitud de línea

La longitud de línea es la anchura de una columna donde se coloca el tipo, y suele medirse por el número de carácteres en una sola línea.

Dependiendo del tamaño del texto, la longitud de una línea fácil de leer puede variar. Para un texto, una longitud de línea entre 45 y 75 carácteres es ideal. Mientras aumentas el tamaño de una fuente, necesitarás incrementar la longitud de línea. Las líneas más estrechas son adecuadas para un texto pequeño, pues los ojos del lector no necesitarán alejarse tanto para comenzar la siguiente línea. Para textos más largos, elije columnas más anchas, así los lectores no necesitarán pasar tan seguido a la siguiente línea.

Line lengthLine lengthLine length

Interlineado

El interlineado, también llamado espacio entre líneas, es un espacio vertical entre cada línea de texto y se mide de base a base.

Dependiendo del tipo de letra que uses, podrías necesitar más o menos interlineado. Los tipos de letra más oscuros necesitan más interlineado porque tienden a hacer que la página luzca más oscura y necesitan más espacio libre. Como regla general, añade 2 pts al tamaño final del texto. Vigila los ascendentes y descendentes ya que pueden tocarse entre líneas.

LeadingLeadingLeading

Espacio entre letras

También conocido como tracking, el espacio entre letras añade espacio horizontal entre carácteres. Los carácteres en minúscula requieren algo de espacio entre ellos en textos largos para arreglar márgenes irregulares, huérfanas y viudas. Las líneas de las mayúsculas necesitan espacio para añadir más "aire" entre los carácteres. No hay una regla que indique qué tanto espacio entre letras debas añadir, pero intenta encontrar un buen balance.

TrackingTrackingTracking

Interletraje

Ya sabes que al espacio entre carácteres de una palabra también se le llama tracking; ahora, al espacio entre una combinación de dos carácteres se le llama interletraje o kerning.

La mayoría de los tipos de letra contienen pares interletrados creados cuidadosamente por un diseñador. Hay muchas combinaciones diferentes y algunas no son interletradas de forma predeterminada. No hay una regla matemática para el interletraje: tus ojos son la mejor guía. El objetivo del interletraje es lograr una distancia equitativa entre el par, así la palabra completa tendrá un balance entre espacios. Los carácteres con trazos diagonales son difíciles de interletrar por el espacio que ya hacen.

KerningKerningKerning

Alineación Tipográfica

La alineación tipográfica se refiere a la posición del texto en una página y es una de las primeras decisiones que tomarás al comenzar un proyecto. Cada estilo de alineación tiene diferentes usos y sus propios desafíos para lograr que el texto sea fácil de leer.

Los cuatro estilos principales de alineación son:

  • Alineación a la Izquierda: si estás componiendo grandes cantidades de texto, el interlineado a la izquierda es una buena opción para los idiomas que se leen de izquierda a derecha. Intenta usar la separación silábica con guión para lograr un margen irregular agradable en el lado derecho (hablaremos sobre los márgenes irregulares en la siguiente sección).
  • Alineación al Centro: Usa la alineación al centro para textos más pequeños, como títulos, invitaciones formales y texto introductorio. Evita usarlo en textos largos, ya que puede hacer más difícil la lectura por los bordes irregulares.
  • Alineación a la Derecha: Este estilo es común en los idiomas que se leen de derecha a izquierda, como el hebreo y el persa. Usa este estilo en pocas líneas a la vez cuando sea necesario, como en frases o citas, barras laterales y notas.
  • Justificado: El texto justificado está alineado a ambos lados de manera simultánea. Este estilo es más común en libros y periódicos, esto para ahorrar espacio y encajar tantos carácteres como sea posible en una línea. Usa la separación silábica con guión con este estilo para evitar espacios grandes entre palabras.
Typographic alignmentTypographic alignmentTypographic alignment

Márgenes irregulares y ríos

El borde desigual al final de una línea con alineación a la izquierda (margen irregular derecho), alineación a la derecha (margen irregular izquierdo) o centrado se le llama "margen irregular". Cuando establezcas el tipo, presta atención a la forma del borde irregular, pues a veces pueden ser distractores si no se ajustan de forma adecuada. Puedes corregir márgenes irregulares al romper líneas donde sea necesario o al separar silábicamente una palabra. Un buen margen va de adentro hacia afuera a intervalos ligeros.

RagsRagsRags

Los ríos son espacios grandes entre palabras, aparecen por lo general en textos justificados. Usa una combicación de espacio entre letras y separación silábica con guión para eliminar los ríos. Un espaciado entre letras ligeramente estrecho te permitirá poner más carácteres en una línea, mientras que la separación silábica cortará las palabras donde sea necesario.

RiversRiversRivers

Huérfanas y Viudas

Las huérfanas son líneas aisladas que aparecen cuando un párrafo comienza en la última línea de una columna o página. Una viuda es la última línea de un párrafo que aparece al principio de la siguiente columna o página.

Ambos casos generan un espacio blanco excesivo alrededor de las líneas de texto. Para deshacerte de este problema, edita el texto donde sea necesario. Si editarlo no es una opción, intenta componer los párrafos anteriores minuciosamente. La tipografía se basa en los detalles, y es importante crear una buena experiencia de lectura dentro de un formato claro y organizado.

Orphans and widowsOrphans and widowsOrphans and widows

¡Eso es todo!

En este artículo, te hemos mostrado los términos más esenciales de tipografía. Aclaramos algunas palabras mal usadas, mencionamos las cifras y símbolos y explicamos algunos términos indispensables de composición.

Es importante aprender qué hacer y qué no hacer en la tipografía. Entenderás por qué algunos tipos de letra funcionan en un tamaño pequeño o por qué un texto es fácil de leer en una columna amplia. A pesar de que esta guía contiene reglas, creo que las reglas se hicieron para romperse, así que experimenta cosas fuera de lo común. Ya que hayas dominado, practicado y aplicado lo básico, ¡te invito a que te aloques y explores nuevos horizontes!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.