Tipografia_for_dummies

Text Material Preview

Tipografía
I. Orígenes de la Tipografía
Génesis
La tipografía tiene muy antiguos orígenes, que están 
relacionados con la caligrafía y los manuscritos, que ya 
eran usados antes del año 2500 A.C.
En occidente el alfabeto romano fue evolucionando y, en 
el siglo X, en el monasterio de St. Gall, en Suiza, se 
desarrolló un nuevo tipo de letra comprimida y angulosa, 
la letra gótica
Frankia
Minúscula carolingia
A finales del siglo VIII, Carlomagno decide impulsar una 
recuperación de la antigua cultura clásica. Entre sus 
preocupaciones estaba la restauración y preservación de los 
textos clásicos. Fue en este entorno cuando apareció una nueva 
forma de caligrafía, la minúscula carolingia, que pretendía ser 
universal y legible. La influencia del nuevo tipo de escritura ha 
llegado hasta nuestros días, al influir en el trazado de muchas 
tipografías modernas
Roma
Mayúscula cuadrada romana
La escritura romana más antigua, a juzgar por las inscripciones, 
estaba compuesta enteramente de letras capitales. La variante 
más formal de ellas era una letra mayúscula que actualmente 
denominamos “capital cuadrada” o simplemente “capital romana”, 
usada fundamentalmente para inscripciones en monumentos,
por lo que es también conocida como scriptura monumentalis
Capital rústica: "De bello Actiaco", escrito entre el 
año 31 y 79 d.C.
Escritura capital cuadrada elegante S. I-VI D..C. 
Adaptación para uso librario de la escritura capital 
cuadrada monumental
Gutenberg
Posteriormente con el invento de la imprenta, en la época del 
renacimiento, la tipografía tomo una especial relevancia. En esta 
época Johanes Gutenberg imprimió su biblia de 42 líneas utilizando 
sin embargo, caracteres del periodo gótico.
Ya hacia el año de 1500 d.C. la imprenta se había difundido 
masivamente y la técnica tuvo tanta aceptación que en Europa ya 
existían alrededor de 1.100 imprentas instaladas y en 
funcionamiento. 
El tipo móvil
Los primeros tipos móviles construidos por Gutenberg eran de 
madera, pero duraban poco, dado que al presionar sobre el 
papel se aplastaban con facilidad.
Atento a esto, Gutenberg, gran orfebre trabajador de piezas de 
plata, pronto diseñó y produjo los primeros tipos metálicos con 
una aleación de plomo y estaño, que se comenzaron a utilizar 
alrededor de 1450.
El diseño de los primeros tipos móviles estaba inspirado en los 
primeros caracteres góticos de los manuscritos. 
Anatomía del Tipo Móvil
Temporada de Imprenta
En 1486, Erhard Ratdolt publicó el primer catálogo de tipos 
que se haya producido (con fuentes romanas, griegas y 
capitales ornamentadas). Y 10 años después el célebre 
Aldo Manuzio, fundador de la imprenta Aldina en Venecia, 
trabajó con Francesco Griffo de Bologna grabando 
diferentes tipos romanos, griegos, hebreos y los primeros 
itálicos para las ediciones aldinas
Germania
En los países germanos el estilo de letra más 
usado era la fraktur (aunque el tipo utilizado en 
la primera Biblia de Gutenberg fue «textura»).3 
A diferencia de Alemania, en el sur de Europa 
la costumbre en la Edad Media era utilizar la 
minúscula carolingia junto a las mayúsculas 
cuadradas romanas adaptadas de las 
inscripciones que se encontraban en las ruinas 
del Imperio romano, por tal razón, este estilo 
de escritura, sirvió de modelo a los primeros 
impresores italianos, para crear las familias 
tipográficas clásicas o con serifas (también 
llamados "gavilanes" o "remates").
Italia
 El primer tipo de letra con serifas apareció en el año de 1465, más tarde, 
tipógrafos e impresores de la talla de Nicolas Jenson y Aldo Manucio 
perfeccionaron estas primeras fundiciones, volviéndolas más estilizadas y 
refinadas además de incluir un nuevo estilo de letra que se llamó 
«bastardilla», el cual fue tomado de la caligrafía cancilleresca de la época; 
actualmente a este estilo de letra se le llama «itálica» (por el país de 
procedencia) o «cursiva», y es utilizado para resaltar en un texto palabras 
escogidas por el editor, extranjerismos y citas.
A estos primeros tipos romanos, clásicos o con serifa, se les dio el nombre 
de estilo veneciano, pues las principales imprentas italianas que los 
producían se habían establecido en la ciudad de Venecia.
En Francia, cabe destacar al tipógrafo e impresor Claude Garamond, que 
creó entre las décadas de 1530 y 1550 una familia tipográfica francesa 
basada en el estilo veneciano, que con el tiempo se convirtió en el 
estándar de su época y otras posteriores.
Perspectivas
Microtipografía o tipografía del detalle:
El término Mikrotypografie (‘microtipografía’) se aplicó por primera vez en un discurso dado en la Sociedad Tipográfica de Múnich. 
Se ha generalizado desde entonces en la literatura especializada. No obstante, se puede sustituir asimismo por una palabra 
inglesa, Detailtypografie («tipografía del detalle»). Comprende los siguientes rubros: la letra, el espacio entre letras, la palabra, el 
espacio entre las palabras, el interlineado y la columna.1 Tiene tres importantes funciones: el peso visual, el interletrado y el 
interlineado.
Macrotipografía:
La macrotipografía se centra en el tipo de letra, el estilo de la letra y en el cuerpo de la letra.
Tipografía de edición:
Reúne las cuestiones tipográficas relacionadas con las familias, el tamaño de las letras, los espacios entre las letras y las palabras; 
intertipo e interlínea y la medida de línea y columna o caja, es decir aquellas unidades que conceden un carácter normativo 
Tipografía creativa:
Esta contempla la comunicación como una metáfora visual, donde el texto no sólo tiene una funcionalidad lingüística, y donde a 
veces, se representa de forma gráfica, como si se tratara de una imagen
Anatomía
II. Orígenes del Diseño Tipográfico
Anatomía
El vocabulario usado para la descripción de las diferentes partes de una letra, se compone de una serie de términos 
acuñados desde hace mucho tiempo y que se asemejan a los usados para describir las partes de nuestro cuerpo. Así 
las letras tienen brazos, piernas, ojos, y otras partes como cola y asta de las que afortunadamente nosotros carecemos 
(la mayoría).
De todas formas, creemos que debido a las tradiciones del oficio en los diferentes paises, no hemos visto todavía que 
la descripción de las partes de una letra coincidan de forma unánime en los libros sobre tipografía y diseño. En todo 
caso, los terminos que aquí se muestran constituyen un buen bajage para comprender y conocer las distintas partes 
de una letra, y han sido en cierta medida consensuados a partir de las fuentes consultadas.
Typo’s Anatomy
https://www.unostiposduros.com/anatomia-de-la-letra/
Tamaño de los caracteres
Signos de Puntuación
Glifos / Glyphs
Variables de la Tipografía
I. Familia tipográfica
Las Familias Tipográficas
Las familias tipográficas presentan en su diseño una serie 
de variables, o deformaciones proyectivas, que permiten 
al diseñador obtener diversas soluciones de diseño, con 
respecto al ritmo, al color y a las jerarquías del texto.
Las variables de un diseño tipográfico se pueden agrupar 
en tres conjuntos básicos, según las variaciones en el 
peso (variable de tono), en la amplitud del ancho de la 
letra (variable de proporción) y la inclinación del eje 
vertical (variable de inclinación).
https://tiposformales.com/2010/09/11/variables-de-fami
lia/
Una familia tipográfica es un grupo de signos escriturales que comparten 
rasgos de diseño comunes, conformando todas ellas una unidad tipográfica. 
Los miembros de una familia (los tipos) se parecen entre si, pero también 
tienen rasgos propios.
Las familias tipográficas también son conocidas con el nombre de familias de 
fuentes (del francés antiguo fondre, correspondiente en español a derretir o 
verter, refiriéndose al tipo hecho de metal fundido). Una fuente puede ser 
metal, película fotográfica, o medio electrónico.
Existen multitud de familias tipográficas. Algunas de ellas tienen más de 
quinientos años, otras surgieron en la gran explosión creativade los siglos 
XIX y XX, otras son el resultado de la aplicación de los ordenadores a la 
imprenta y al diseño gráfico digital y otras han sido creadas explícitamente 
para su presentación en la pantalla de los monitores, impulsadas en gran 
parte por la web. 
Las Familias Tipográficas
Pregunta quién, adivina quién
Pregunta quién, adivina quién
Who are you?
1470 Romanas humanistas o venecianas
● Trazo gradual de contraste ligero. El 
eje de modulación es oblicuo y muy 
inclinado.
● Remates gruesos y cortos, oblicuos 
en las ascendentes.
● Poca o nula diferencia entre la altura 
de mayúsculas y la altura de astas 
ascendentes.
● Barra de la «e» inclinada.
Who are you?
1490 Romanas antiguas
● Trazo gradual de contraste medio y 
eje de modulación oblicuo.
● Remates ligeros y filosos, oblicuos 
en las ascendentes y en los apoyos 
de minúsculas.
● Altura de mayúsculas menor que la 
altura de ascendentes.
● Barra de la «e» horizontal.
Who are you?
1690 Romanas de transición
● Trazo gradual de contraste entre 
medio y alto. El eje de modulación es 
vertical o casi vertical.
● Remates ligeros, poco oblicuos u 
horizontales en las ascendentes y 
apoyos de minúsculas.
● Altura de mayúsculas menor que la 
altura de ascendentes.
Who are you?
1780 Romanas modernas 
● Trazo gradual de contraste alto y eje 
de modulación vertical.
● Remates filiformes.
Who are you?
1810 Mecánicas o egipcias 
● Trazo uniforme (o gradual de escaso 
contraste y eje de modulación 
vertical).
● Remates rectos, del mismo (o casi el 
mismo) ancho que el trazo.
● Altura de x grande.
Who are you?
1810 Sans serif grotescas
● Trazo uniforme o con un leve 
contraste entre finos y gruesos (de 
modulación vertical).
● Altura de x grande.
● Ligera cuadratura en las curvas.
Who are you?
1920 Sans serif geométricas
● Trazo uniforme.
● Estructuras sintéticas basadas en 
figuras geométricas simples.
● Muchas veces la «a» no tiene lazo 
ascendente.
Who are you?
1920 Sans serif humanísticas
● Trazo uniforme o levemente gradual.
● Basadas en estructuras clásicas.
● La «a» tiene lazo ascendente.
● Generalmente la «g» tiene cola 
cerrada y oreja.
Who are you?
1930 Híbridas o glíficas
● Trazo gradual.
● Basadas en estructuras clásicas.
● Los remates son triangulares y se 
inspiran en las letras cinceladas sobre 
piedra.
Who are you?
1985 Electrónicas
● El trazo y los espacios entre letras 
están basados en el píxel para 
funcionar en pantalla. Cada tamaño 
necesita de un dibujo específico.
Who are you?
Tipografía Proporción y
espaciado
Reciben el nombre de letra o carácter tipográfico cada uno de los signos 
empleados en la representación de fonemas en la escritura. 
Se conoce como tipos a los diversos modelos de letra que habitualmente 
llevan el nombre de su creador y de la fundición que en su día se encargó de 
difundirlo. 
A estos nombres normalmente se el añade la serie, por ejemplo, Franklin 
Gothic negrita o Bauer Bodoni cursiva; la forma del ojo, ya sea redonda o 
cursiva; el dibujo, fina, negrita o seminegra; y el espesor: normal, estrecha o 
ancha.
Anatomía 2.0
Tipos de patín
http://www.oert.org/tipografia-y-proporciones/
Alineación Tipográfica
Kerning, Tracking, Interlineado, Alineación 
Cada glifo —así es como llamamos a los caracteres que forman un alfabeto tipográfico— 
está inscrito en un rectángulo invisible llamado tipo, que sirve para colocar las letras en la 
secuencia y distancias correctas. 
Dado que en el alfabeto romano cada carácter tiene una medida distinta (piensa en el 
espacio que ocupa una i y una m, por ejemplo) y que no solemos ligar las letras (las 
dejamos ligeramente separadas unas de otras) los programas necesitan saber qué hueco 
deben preparar para el dibujo (glifo) correspondiente o dicho de otra manera, dónde 
colocar el cursor después de pintar la letra. 
Esta distancia en lenguaje técnico se conoce como advance width aunque 
tradicionalmente le llamamos grueso.
Definiendo el 
Interlineado/Leading
El origen del interlineado lo 
encontramos, como la mayoría 
de cosas de tipografía, en los 
tipos móviles de plomo, la 
imprenta de Gutenberg. En este 
tipo de impresión se le llama 
interlínea a la regleta de plomo 
que se insertaba entre las líneas 
de texto para espaciarlas. En 
aquel momento era impensable 
el interlineado negativo.
 Los tipómetros nos ayudarán en 
esta labor, ya que incluye 
diversos sistemas métricos.
Apuntes sobre el Interlineado/Leading
Cuando el interlineado es del mismo tamaño que el cuerpo de la letra nos encontramos con textos macizos, 
normalmente difíciles de leer. Aunque encontramos más o menos dificultad dependiendo en gran medida de la 
altura de la x de la tipografía en cuestión. 
Por norma general creemos que el interlineado adecuado para una cómoda lectura suele ser un 20% mayor 
que el cuerpo (que es el interlineado por defecto en la mayoría de programas de autoedición). Es decir, contra 
mayor es la letra, más espaciado es el interlineado. También nos encontramos con tipos de letra con trazos 
gruesos, que también requerirían un mayor interlineado. 
Digamos que el interlineado lo utilizamos para que el texto no se nos aparezca como una mancha demasiado 
sólida en la página, para evitar que el lector se asuste ante la visión de tanta letra a primera vista. El mejor 
consejo es probar distintos interlineados en pruebas de impresión y consultar a terceros hasta dar con el 
espaciado que más cómodo resulte a los ojos del lector objetivo.x 
Tracking
El tracking afecta al espaciado entre letras 
(set) o palabras y se utiliza para alterar la 
densidad visual del texto, actuando 
globalmente sobre toda la tipografía. Como 
regla general, cuanto más grande sea el 
cuerpo más apretado deberá ser el track. Un 
set (número o valor) uniforme nos 
proporcionará un color homogéneo del texto 
y una mayor legibilidad.
En el ejemplo, seguimos con Times 14 puntos 
y hemos variado el set en -10 en el primero, 
sin modificar en el segundo y +10 en el último. 
Aunque pueda parecerlo, el interlineado no 
ha sido modificado.
Kerning
Cuando diseñas una tipografía no sólo tienes que dibujar cada glifo en su casilla 
correspondiente sino que debes darle una posición dentro del tipo, marcando el 
límite anterior y posterior con sendas líneas verticales. 
Debes encontrar el espacio correcto para que el carácter que estás diseñando no 
rompa el ritmo del texto. Pero algunas parejas de letras no terminan de llevarse 
bien y hay que crear excepciones a la regla, indicándole al programa que en ciertos 
pares (de kerning) hay que añadir o sustraer cierta cantidad de espacio, 
manteniendo las demás combinaciones intactas. 
De hecho podríamos definir kerning como la operación de aplicar tracking a una 
pareja de glifos de una tipografía.
Kerning vs Tracking
Conviene no confundir el kerning con el tracking, que es el 
espaciado medio entre letras. 
El kerning sólo se refiere al espacio entre pares de letras, lo 
podemos entender como un “espaciado excepcional”. El 
kerning existe debido a que ciertas combinaciones de letras 
dejan demasiado, o demasiado poco, espacio entre ellas. 
Esto hace que se pierda algo de legibilidad, sobre todo 
porque el ojo tiende a centrarse en las cosas que no se 
espera, como en este caso sería un error tipográfico; algo así 
como lo que sucede en algunas ocasiones con el texto 
justificado.
Alineado
El texto puede alinearse de cuatro formas: 
a la izquierda, a la derecha, justificado y 
centrado. El alineado a la izquierda es el 
más natural y dado que las líneas 
terminan en diferentes puntos, hacen la 
lectura más legible, al contrario que la 
alineación a la derecha.
El texto justificado, es decir, alineado a 
derecha e izquierda, es estéticamente 
agradable siempre que el espacio entre 
letras y palabras sea uniforme y evitemos 
los típicos huecos llamados 'ríos'. Las 
alineación centrada otorga al texto una 
apariencia muy formal pero debe evitarse 
para textos largos.Alineado
El texto alineado a la 
izquierda también llamado 
bandera derecha, es el más 
natural y recomendable para 
textos largos. Crea una letra y 
un espacio entre palabras 
muy uniforme, y dado que las 
líneas terminan en diferentes 
puntos, el lector es capaz de 
localizar fácilmente cada 
nueva línea, pues nuestra 
manera de escribir, de 
izquierda a derecha, obliga al 
lector a buscar el inicio de 
cada línea tipográfica a la 
izquierda, por esa razón es la 
forma de alineación que 
resulta más legible.
La alineación a la derecha 
va en sentido contrario a 
nuestra escritura por tal 
razón es difícil para el lector 
encontrar la nueva línea. Este 
método es adecuado para 
textos que no sean muy 
extenso, pero no para 
grandes bloques porque no 
permiten una lectura fluida.
El texto justificado (alineado 
a derecha e izquierda) puede 
ser muy legible si se asegura 
que el espacio entre letras y 
palabras sea uniforme y no 
queden los molestos hucos 
llamados “ríos” que 
interrumpen el curso del 
texto.
Las alineaciones centradas 
dan al texto una apariencia 
muy formal y son adecuadas 
cuando se usan 
mínimamente. Pero debe 
evitarse configurar textos 
demasiado largos con este 
modelo, ya que no son aptos 
para lecturas extensas.
Las alineaciones asimétricas o libres son usadas cuando el diseñador desea romper el texto en 
unidades de pensamiento con cierta lógica, o para dar a la página un aspecto más expresivo. 
Obviamente la configuración de grandes cantidades de texto de esta manera acaba por cansar 
al lector.
Usando la tipografía
I. ¿Cómo combinarlas?
“Tienes que saber las reglas antes de quebrarlas.”
Reglas para combinar tipografías
1. Elegir Fuentes Complementarias
-Personalidad o ánimo, Serio o casual, Elegante 
o alegre.
Lo ideal es considerar que la personalidad de la 
tipografía vaya conforme al diseño.
Definir si se busca Complemento o Contraste
Evitar que se “peleen” por la atención del 
usuario
2. Establece una jerarquía visual
Los formatos de publicación tradicionales, es decir, 
periódicos y revistas, brindan buenos ejemplos de 
cómo se le aplica una jerarquía visual a las fuentes, 
pues ellos combinan las fuentes de tal manera que, 
visualmente, se ve una separación entre los 
elementos textuales, como títulos, subtítulos, cuerpo 
del texto y pies de foto. Otras cualidades, tales como 
el tamaño, grosor (también conocido como “peso”) y 
espaciado (incluyendo interlineado, que es el espacio 
entre las líneas y el interletraje o espacio entre las 
letras) contribuyen a la forma en la que el ojo debería 
navegar por la página y el texto que debería llamar 
primero la atención.
Primero 
lees esto
Luego lees esto
Y al final esto
3. Considera el contexto
El lugar en donde aparecerá tu diseño debería 
ayudarte a determinar las fuentes que se usarán en el 
proyecto, pues el texto se debería poder leer con 
facilidad en el tamaño que se mostrará, y cuando la 
tipografía es pequeña, la claridad es especialmente 
importante, como en el siguiente ejemplo que se ve 
cómo el texto está todo en mayúsculas y hay un 
espacio considerable entre las letras, dos decisiones 
que hacen todo más legible.
4. Combina Serif con Sans Serif
Cabe destacar que en el mundo de la tipografía, 
existe una discusión sobre qué es mejor para la 
legibilidad, si las fuentes serif o sans serif. Para textos 
muy largos, se dice que las fuentes serif son más 
fáciles al ojo y aumentan la velocidad de lectura, 
especialmente en textos impresos (aunque 
obviamente esto depende de las características de la 
fuente específica). Por otro lado, las fuentes sans serif, 
debido a sus letras sencillas que se ven más claras en 
varias resoluciones, se usan en textos online/en 
pantallas.
5. Si eliges contraste
El contraste se puede obtener de varias formas, 
incluyendo mediante el estilo, tamaño, peso, 
espaciado y color, entre otras. 
Las diferencias crean roles distintos para cada fuente, 
permitiendo que cada una tenga una función y se 
destaque individualmente.
6. Aléjate del conflicto
Al combinar fuentes, lo que quieres es contraste, no 
conflicto, o sea, que solo porque dos fuentes sean 
diferentes no quiere decir que automáticamente se 
vayan a ver bien juntas. Generalmente hablando, es 
más probable que las tipografías que compartan 
ciertas cualidades, como que tengan proporciones 
similares o que las letras minúsculas tengan la misma 
altura (lo que se conoce como “altura de la x”), se vean 
más equilibradas, incluso si su aspecto general es 
distinto.
7. Evita juntar fuentes muy similares
Contrariamente a la regla 5, elegir fuentes que sean 
muy similares (es decir, que no tengan mucho 
contraste) es un problema, porque te costará 
establecer una jerarquía, pues las fuentes no se 
pueden distinguir visualmente una de la otra y 
cualquier diferencia que sea visible se puede ver más 
como un error que una elección.
8. Utiliza fuentes de la misma familia
Nunca te irá mal usando tipografías de la misma 
familia, pues fueron creadas para trabajar juntas. 
Busca familias de fuentes que tengan un rango de 
opciones (estilos, letras o pesos diferentes) y así 
tendrás suficientes variaciones para tus propósitos.
Cuando juntes fuentes que vengan de la misma 
familia, tienes que planificar con cuidado ciertas 
cosas, como lo es el crear contraste, variar el peso de 
la fuente (ligera, regular, negrita), su tamaño y las 
letras (mayúsculas o minúsculas). 
9. Limita el número de fuentes
Quizás hayas escuchado que deberías solo usar dos o 
tres fuentes para un proyecto. En ciertas situaciones 
(ej.: diseños editoriales de revistas), esa es una regla 
general, pero no es una que se deba seguir al pie de 
la letra.
Algunos proyectos requerirán que las combinaciones 
de las fuentes sean más elaboradas, como si 
estuvieras replicando un aspecto específico, ej.: un 
diseño elegante de la época victoriana o en los casos 
que se necesite una estética decorativa. Lo 
importante es que, si eliges una variedad de fuentes, 
el efecto sea de armonía y no de conflicto.
9. Limita el número de fuentes
Sin embargo, como con cualquier elemento de 
diseño, puede ser que te excedas con la selección de 
tipografías. Para evitar esto, puedes darle a cada 
fuente un rol o propósito específico en el diseño: si ves 
que no puedes hacer esto con alguna de tus 
selecciones, elimínala.
10.
Practica
¡Practica mucho!
a. Combina fuentes de la misma 
clase
Si no es de tu agrado combinar distintas 
tipografías en una misma pieza, puedes 
combinar las fuentes de la misma 
clasificación tipográfica. Así, puedes lograr 
un buen contraste sin desviar el contenido 
de su estilo
Otros puntos a tener en cuenta
b. Cómo aplicar/ generar contraste
Al utilizar tipografías similares puedes 
crear contraste al aplicar distintos estilos 
como negrita, cursiva, mayúscula o 
minúscula.
Otros puntos a tener en cuenta
La fuente League Gothic tiene un 
distintivo estilo condensado que tiene 
similitudes con la fuente Archivo Narrow 
pero contrasta bien con la forma redonda 
de la fuente Kollektif, actuando como una 
buena barrera entre el título y el cuerpo 
de texto.
Crea composiciones interesantes usando 
formas, fotos y elementos. 
El color es un elemento crucial para unir 
los elementos de tu diseño. Aquí actúa 
como una separación de las fotos 
desaturadas y hace que el título cobre 
vida. La colocación alineada de la línea 
guía gruesa debajo del título forma un 
ancla y separa el cuerpo de texto del 
título.
Cartelera
Aplicaciones
Aquí el color de texto se ha 
deshecho para complementar 
la composición y los colores en 
la imagen de fondo. 
Comunicarse con técnicas 
visuales como esta le da más 
simbolismo a tus diseños. 
El texto ha sido colocado para 
delinear la forma de la bailarina 
en la imagen, guiando al ojo 
para leer el diseño como si 
fuese una historia
Deportivo/activo
Aplicaciones
No temas usar una sola 
tipografía en toda tu marca. 
Encontrar fuentes como LibreBaskerville que tengan 
variantes de estilo es una 
manera inteligente para crear 
matices sin complicar 
demasiado tus diseños. Esta 
tipografía es una serif clásica 
que se aplica a la perfección 
como título y cuerpo de texto 
de fácil lectura.
e-Application
Aplicaciones
No tienes porqué usar fuentes 
completamente diferentes para 
producir un efecto dramático; 
puedes usar versiones ligeras y 
en negrita de la misma familia de 
fuentes para tener versatilidad. 
Lora tiene curvas limpias que la 
hacen una tipografía muy 
elegante y sofisticada. 
El efecto generado al utilizar la 
forma cursiva y la regular al 
mismo tiempo es encantador y 
femenino.
Sofisticado
Aplicaciones
Aplicaciones
Esta combinación tiene similitudes 
con las combinaciones que 
encontrarías en periódicos y 
publicaciones. Open Sans Extra Bold 
llama la atención de tu audiencia, 
como lo haría un encabezado.
Estas tipografías son robustas y 
rectas. 
La ligera fuente Cooper Hewitt 
aplicada en mayúsculas es un 
estupendo subtítulo contrastante o 
un marcador de capítulo, así como la 
fácilmente legible PT Sans para el 
cuerpo de texto. Estas tipografías 
están bien equilibradas y crean un 
estilo sólido bien presentado
Primera plana
Con arcos y curvas sólidas, 
Cooper Hewitt es una tipografía 
clásica con variaciones excelentes 
para usarse para separar tus 
títulos, subtítulos y cuerpo de 
texto, respectivamente.
Encontrar espacios geométricos 
contrastantes en tu imagen de 
fondo es una estupenda manera 
para colocar el texto. Oscurece un 
poco tu imagen para mejorar la 
legibilidad.
Galería de Arte
Aplicaciones
Roboto Condensed es una tipografía 
sans serif con un ritmo de lectura 
sans serif, lo que la hace una 
elección ideal para el cuerpo de 
texto. Cuando se aplica en negrita, la 
fuente queda bastante bien para un 
título. La altura extendida de la x de la 
tipografía mejora el ya bien 
condensado efecto de la fuente.
Los títulos y subtítulos no tienen 
porqué estar en orden, razón por la 
que usamos la escala y el tamaño 
para diferenciarlos.
Tecnología
Aplicaciones
La fuente Bodoni es una conocida 
tipografía clásica para títulos en 
revistas. Massimo Vignelli declaró que 
‘Bodoni es una de las tipografías más 
elegantes que se haya diseñado’. La 
aplicación de Bodoni combinada con 
el contraste de Montserrat es 
sofisticada y contemporánea.
Encontrar formas dentro de tu imagen 
de fondo es una técnica inteligente 
para contener tu texto. Asegúrate de 
que el color de tu texto contraste con 
el color que se encuentre detrás ya 
que podría haber detalles en tu 
imagen que harían que el texto 
resultara difícil de leer.
Fashion
Aplicaciones
Usar una fuente serif para el 
cuerpo de texto facilita la lectura 
de la información más densa.
Crear columnas es una 
estupenda manera para 
contener tu texto. Se ha 
demostrado que las líneas de 
texto más cortas son más fáciles 
de leer, así que cuando tu cuerpo 
de texto se vea limitado, intenta 
reducir el ancho de tu espacio de 
texto.
Publicación de Diseño
Aplicaciones
Para amplificar una tipografía 
como Oswald, utiliza un color 
contrastante detrás de las 
secciones de texto. No solo la 
hará resaltar sino que también 
mejorará la jerarquía entre tu 
título, subtítulo y cuerpo de 
texto. La alineación es bastante 
importante, así que asegúrate de 
colocar estos bloques 
deliberadamente. Para crear un 
estilo monocromático sólido, usa 
elementos blancos y negros 
agrupados con una imagen 
desaturada.
Forma y Función
Aplicaciones
La fuente Cinzel se considera 
contemporánea, aunque se 
inspiró en el estilo romano 
clásico. Con los delicados trazos 
de la fuente Quattrocento y las 
curvas de la fuente Lora, esta es 
una delicada combinación, ideal 
para usarse en títulos o 
invitaciones.
Esta aplicación es un estilo más 
tradicional y anticipado. 
Encontrar palabras que tengan 
una longitud o ancho similar 
creará una buena forma para la 
composición de tu diseño.
Hotel Feelin
Aplicaciones
Tanto la Source Sans Pro como la 
Open Sans son tipografías con el 
propósito de funcionar bien en 
interfaces de usuario. Los boletines 
y reportes en línea necesitan 
combinaciones limpias y fáciles de 
leer que definan claramente el 
título, el subtítulo y el cuerpo de 
texto para que los lectores puedan 
analizar e identificar lo que quieren 
leer.
Reseña
Aplicaciones
Cálculo Tipográfico
Proporción
1. f. Disposición, conformidad o correspondencia debida de las partes 
de una cosa con el todo o entre cosas relacionadas entre sí.
2. f. Mayor o menor dimensión de una cosa.
3. f. Mat. Igualdad de dos razones. Proporción aritmética, geométrica.
 
Sección Áurea
A este sistema de proporciones se le han atribuido cualidades mágicas. Se ha 
utilizado reiteradamente en las artes y la arquitectura de todos los tiempos, pero 
aparece también en progresiones naturales como nervaduras de hojas, ramas de 
árboles, caracoles, etc. El número de oro o áureo es el irracional 1,61803…, cociente 
de (1 + raíz de 5) / 2.
Número de caracteres
por línea
Emil Ruder dice que una línea de 50 a 60 letras es fácil 
de leer. Para Robert Bringhurst, en las composiciones a 
una sola columna, el renglón ideal contiene 66 
caracteres, con un mínimo de 45 y un máximo de 75. En 
las composiciones a más de una columna el rango varía 
de 45 a 60 caracteres. Admite líneas largas de 85 o 90 
caracteres si el texto está muy bien compuesto, con 
amplias interlíneas o cuando se trata de información 
auxiliar como notas a pie de página.
 
Factor tipográfico
El factor tipográfico es el número de caracteres que 
entran en una cierta unidad de medida, en ocasiones 
la medida que se toma es una pulgada, el cual 
multiplicado por el ancho de la caja nos da una 
aproximación de cuántos caracteres entrarán por línea 
incluyendo los espacios.
Esto nos es de gran ayuda ya que nos permite 
relacionar el factor tipográfico de una determinada 
familia y su cuerpo (rendimiento) para poder lograr 
valores confortables en la lectura.
Variables Tipográficas
Inclinación 
Si las va ria bles de eje mo difi can la in cli na ción de la le tra, 
se cam bia la es truc tu ra y sur ge una al te ra ción en el rit mo. 
Al gu nas ve ces tam bién pue de afec tar el co lor.
Peso 
Las va ria bles de pe so afec tan al tra zo de los sig nos, lo 
cual pue de dar lu gar a pe que ñas mo dificaciones es 
truc tu ra les.
Versalitas
son al fa be tos con es truc tu ras de ma yús cu las, pe ro que 
man tie nen la al tu ra de los sig nos de ca ja ba ja. 
Nos ser vi mos de es ta op ción, por ejem plo, si ne ce si ta mos 
uti li zar ma yús cu las y no que re mos ge ne rar irre gu la ri da des 
en el co lor del tex to..
Ancho 
En las va ria bles de an cho, se pro du ce un cam bio en la 
es truc tu ra de la le tra tal que so la men te se mo difican las 
pro por cio nes, aun que el tra zo no va ría. Se al te ra el ren 
di mien to (en pri mer lu gar) y tam bién el co lor del tex to.
Variables Tipográficas
Sistema de medición
Antecedentes del 
sistema
Fournier tomó el tipo de letra mas 
pequeño que se usaba en ese entonces 
llamado nomparela y lo dividió en seis 
partes, a cada una le dio el nombre de 
punto y a la medida de 12 puntos, la 
llamó cícero. (1737)
Equivalencia con el 
sistema métrico 
decimal
El punto tipográfico de Didot (1760), equivale 
a 1/72 de pulgada francesa. Lo que equivale 
en el Sistema Métrico Decimal a: 
Punto Didot = 0.0376 cm
Cícero Didot = 0.4512 cm
El sistema angloamericano (1878) llamado 
Sistema Pica, se basa en la pulgada inglesa, 
que es equivalente a 2.54 cm. En el Sistema 
decimal es:
1 punto = 0.0352 cm
1 pica = 0.4233 cm
1 punto = 0.0350 cm
1 cícero = 0.420 cm
Sistema tipográfico de 
medidas
El Sistema Tipográfico es un sistema propio llamado 
duodecimal, por la relación que existe entre la unidad mínima 
de medida, el punto y la unidad superior, la pica, que consta de 
12 puntos.
Cuadratín
El cuadratín es la unidad de medidade los 
espacios en blanco y es un cuadrado que 
corresponde al cuerpo del tipo (digamos 
12 × 12 puntos). Cada cuerpo tiene su 
propio cuadratín. El cuadratín se puede 
subdividir horizontalmente en medio 
cuadratín—también llamado espacio 
ene—, un tercio de cuadratín o un cuarto 
de cuadratín.
Guías base
Para las siguientes líneas, sirve tomar en cuenta que la altura de las 
mayúsculas (cap height) representa el 70% del cuerpo del tipo; eso 
significaría que la línea de las mayúsculas estaría más o menos hacia las 
700 unidades. Las altura de las minúsculas (x-height), por su parte, 
representa un 70% de la altura de las mayúsculas o la mitad del cuerpo 
del tipo, lo que colocaría la línea de las minúsculas más o menos hacia 
las 500 unidades. La línea de las descendentes puede coincidir con la 
base del espacio eme. La línea de las ascendentes puede coincidir o no 
con la altura de las mayúsculas. La línea vertical a la izquierda del 
espacio eme representa el origen y la línea de la derecha el ancho por 
omisión de la letra M.
True Type & Open Type
El espacio de trabajo presenta una 
retícula. El formato TrueType divide 
el espacio eme en 1024 o 2048 
unidades por lado; OpenType, por su 
parte, lo divide en 1000 unidades. 
Aunque el espacio no queda limitado 
por este número de unidades, sí 
funciona como base de un sistema 
de coordenadas que sirve para 
construir, de manera más precisa y 
homogénea, el conjunto de los 
caracteres.
Quadratín
Es la caja de construcción de la letra. Es una medida 
tipográfica que equivale a un cuadrado perfecto; la M 
es la que se adapta de manera perfecta a esta 
medida.
Quadratín
Los términos de CAJA ALTA y CAJA BAJA se 
originaron al inicio del desarrollo de la tipografía, 
cuando tenían a cada letra individual y guardaban 
las mayúsculas o de caja alta en la parte superior y 
las minúsculas o de caja baja en la parte inferior.
Estructura Tipográfica
Estructura
Ancho de los Caracteres
Para visualizar más claramente las estructuras clásicas 
y las relaciones que soporta cada letra, las 
analizaremos dentro de módulos construidos según el 
ancho y alto de una letra redonda (la «O» que puede 
inscribirse, en el caso de las romanas clásicas, en un 
cuadrado) y de una letra angosta (la «E» que en este 
caso es igual a la mitad del ancho de la «O»).
Para las romanas clásicas la forma contenedora 
cuadrada deriva de la proporción de la «O». El 
segundo contenedor está formado por dos cuadrados 
con lado igual a la mitad del anterior.
Estructura
Ancho de los Caracteres
Las redondas: C, D, G, O, Q. Derivan estructuralmente de un 
círculo y, como el resto de las estructuras romanas, 
presentan correcciones ópticas. En este caso, las curvas 
superiores e inferiores sobrepasan ligeramente la línea de 
base. La «O» y la «Q» son tan anchas como altas, la «C», la 
«G» y la «D» son ligeramente más angostas que altas.
Estructura
Las anchas: 
M, W. Superan el ancho del módulo, es decir, son 
más anchas que la «O», y son las más anchas del 
alfabeto.
Estructura
Las rectangulares: 
H, U, N, T, A, V, Z. El ancho de estos signos es 
aproximadamente el del rectángulo definido por la 
intersección del círculo con las diagonales del 
cuadrado. Como estas letras solo comparten el 
ancho, más adelante las analizaremos 
conformando grupos con más características 
comunes.
Estructura
Las angostas 1: B, E, L, F, P, R, S. Su ancho es 
aproximadamente la mitad de su altura.
Estructura
Las angostas 2: 
I, J, K, Y. También son angostas, pero no 
comparten el ancho con las anteriores ni entre 
ellas. La «I» es la más angosta, le sigue la «J» y la 
«Y» y la «K» superan ligeramente el ancho del 
módulo angosto.
A, V, W, M: están emparentadas por un vértice 
central, construido a partir de un ángulo similar. La 
punta de dichos vértices supera, por la corrección 
óptica, la línea de altura o de apoyo, según la letra. 
El ancho de la «A» y de la «V» es de 3/4 de la 
altura. El travesaño de la «A» se ubica por debajo 
del centro geométrico para darle más estabilidad y 
compensar sus contraformas.
Parentesco Morfológico
O, Q, C, D, G: son las que derivan del círculo. La «O» y la 
«Q» se visualizan como círculos, la cola de la Q, en este 
caso, es larga y curva, pero puede variar de forma y 
tamaño. El ancho de la «C», la «G» y la «D» es de 
aproximadamente 7/8 de la altura.
La «G» presenta un bastón ascendente más bien corto, 
que no supera el centro geométrico, el que remata en un 
«codo», hacia el interior de la letra. Este elemento no 
está siempre presente.
La «D» está contenida arriba y abajo por trazos 
horizontales, que le otorgan buen apoyo.
Estas letras tienen además un ancho similar.
Parentesco Morfológico
E, F, L: el ancho es aproximadamente la mitad de la 
altura. En la «E» y la «F» el bastón central se ubica 
por arriba del centro geométrico. Están construidas 
por verticales y horizontales.
Parentesco Morfológico
B, P, R: presentan «bucles» en su estructura. La «B» 
tiene dos, el superior más pequeño que el inferior. 
La parte superior tiene un ancho equivalente a la 
mitad de la altura, la inferior lo supera ligeramente.
La «P» y la «R» tienen una estructura común, con 
un ancho cercano a la mitad de la altura. La «P», en 
este caso, no tiene unión del bucle con el asta. Esta 
característica no se presenta en todas las familias 
tipográficas. La cola de la «R» le otorga apoyo a la 
letra, el ancho total es de 3/4 de la altura.
Parentesco Morfológico
X, Y, K: concentran el encuentro de los trazos en un punto 
medio. En la «X» y la «K» se produce en el centro óptico, 
ligeramente por arriba del geométrico. La «K» tiene dos 
trazos diagonales, uno ascendente y otro descendente, 
con ángulos similares. La diagonal superior alcanza un 
ancho igual a 2/3 de la altura, mientras que la inferior a 
3/4 de la misma. Los brazos de la «Y» se encuentran por 
debajo del centro geométrico, para que la contraforma 
interior sea más amplia. El ángulo es similar al de la «X».
Parentesco Morfológico
H, I, J, T: la «I» funciona como módulo constructivo de las 
otras tres. La «J» se extiende, en este caso, con una 
curva suave por debajo de la línea de apoyo, 1/3 de la 
altura. Comparte la característica de descender de la 
línea de base solo con la «Q». La «H» es sólida y estable. 
El travesaño está ubicado por encima del centro 
geométrico, para que la contraforma inferior pueda 
sostener a la superior. El ancho es aproximadamente de 
3/4 de la altura. La «T» tiene el asta como eje de simetría 
del travesaño. Su ancho es similar al de la «H».
Parentesco Morfológico
S: es una letra compleja. Está formada por una curva 
y contracurva de desarrollo angosto.
La curva inferior proviene de un círculo de mayor 
tamaño que el superior, para soportarlo y darle 
mejor apoyo. Es inestable. Su ancho es 
aproximadamente la mitad de la altura. Comparte el 
tipo de curvas con el resto de los signos circulares.
Parentesco Morfológico
N: es bastante ancha, ocupa 3/4 de la altura. La 
diagonal divide las contraformas internas en espacios 
aproximadamente iguales, al igual que los ángulos. Los 
vértices exceden la altura y la línea de base por la 
corrección óptica.
U: también es inestable al apoyarse en una curva que 
excede ligeramente la línea de base. Su ancho es 
aproximadamente 3/4 de la altura.
Z: Es sólida y estable ya que el bastón de apoyo es 
algo más largo que el superior, con un vértice que 
supera levemente la caja.
Parentesco Morfológico
¿Cómo manejar el grado de peso?
«Desde Gutenberg la tipografía ha trabajado con 
reglas fijas que se aplican a la configuración de 
obras impresas. 
Las reglas tipográficas se refieren no solo a las 
distancias entre letras y entre palabras, al 
interlineado, al tipo de letra, etc., sino también al 
establecimiento de las proporciones de la mancha, 
de las columnas, de los márgenes y de los formatos 
de página. »
 Josef Müller-Brockmann
Bibliografía
http://guindo.pntic.mec.es/jmag0042/escritura_capital.pdfhttp://guindo.pntic.mec.es/jmag0042/escritura_carolina.pdf
http://www.cabovolo.com/2009/09/la-minuscula-carolingia-una-letra-para.html
http://www.designishistory.com/design/early-typographers/
https://www.canva.com/es_mx/aprende/
https://inkbotdesign.com/font-combinations/
http://www.oert.org/tipografia-y-proporciones/
http://www.oert.org/diseno-y-operaciones-morfologicas-con-tipografia-2/
https://www.259west.com/2016/03/learning-brush-lettering-tips-and-resources/
http://www.dicecomunicacion.com/blog/cuadratin-y-diseno-de-tipografia/
http://mitipomj.blogspot.com/2015/12/43-introduccion-la-tipometria.html
https://hispaprint.com/blog/impresion/la-impresion-tipografica/
Lettering
Caligrafía
La caligrafía es el arte de escribir con letra artística y correctamente formada usando 
herramientas caligráficas. Es la manera natural en la que se escriben las letras. No se 
modifican después de escribirlas como ocurre con el lettering. Con uno o dos trazos se 
forma la letra y aunque no es un estilo libre, los trazos no son exactamente iguales.
El lettering es el 
arte de dibujar 
letras
Hand lettering
El hand lettering, es el tipo de lettering más libre 
que hay. Da igual el estilo de dibujo y el material 
que uses. Los mezcla todos.
Brush lettering
El brush lettering es el tipo de lettering que utiliza 
el pincel como herramienta para hacer letras de una 
manera similar a la caligrafía. Se dibuja cada una de 
las letras y se liga a la siguiente.
Chalk lettering
El chalk lettering es el tipo de lettering que utiliza 
como “lienzo” una pizarra y cómo su herramienta 
principal la tiza o los rotuladores de tiza líquida
Lettering digital
Lo que diferencia este tipo de lettering de los demás 
son los materiales que se utilizan para dibujar. Ni 
plumas, ni pinceles, ni rotuladores ¡ni nada! Cambia 
el papel por un lienzo digital y el lápiz por una 
tableta gráfica o ratón.
¿Cómo empezar con el lettering?
Transparencia
Usa papel calca o 
una caja de luz
Traza guías, para el 
interlineado, interletrado, 
márgenes
Retícula
Usa el papel adecuado, con 
la técnica adecuada, ya que 
el resultado puede variar
Canson
Strathmore Watercolor
Arches
Fabriano
El Papel
El lettering se ejercita
Practíca
El equilibrio es muy 
importante en las 
composiciones de 
lettering
Al revés
Nunca es necesario 
derrochar en material
KISS
Guarda tus trabajos para 
seguir mejorando y medir
tu avance
Documenta tu progreso
Estudia las letras y encuentra 
cuál estilo te gusta. Hazlo tuyo.
Sigue aprendiendo
Proyectos lettering
Entiende cuál es el impacto específico 
de algún estilo para replicarlo y 
mejorarlo.
Sigue aprendiendo
No te concentres en los 
demás, concentrate en tí
Proceso
Investiga métodos 
creativos
Juega