Unidad 

TIPOGRAFÍA
 Historia
 Anatomía de la letra
 Clasificación 
 Variables
 Alineaciones
 E
Espaciado
i d
 Legibilidad
 Retórica tipográfica
 Tipografía digital 

Historia del alfabeto

ALFABETO
GRIEGO
1000 a.C.

ALFABETO
ROMANO
113 a.C.
Pág: 2

1
 Manuscritos Iluminados

APARECIERON LAS MINÚSCULAS. 
476 d.C. CAPITULARES ILUMINADAS CON IMÁGENES.
Pág: 3

La imprenta

BASADA EN UNA TÉCNICA INVENTADA POR LOS CHINOS
1455 d.C.
Pág: 4

2
 Historia de la tipografía
 Las tipografías se 
clasifican a través de 
estilos por su forma y 
también por el momento 
en el que fueron 
diseñadas. 
 Los primeros tipos 
móviles creados en 
Alemania por Johannes 
Gutenberg que imitaban 
la escritura manuscrita de
la escritura manuscrita de 
la Edad Media. 

BIBLIA DE 42 LÍNEAS  DE 
GUTENBERG  CON  TIPOS MÓVILES
1455 d.C.
Pág: 5

Anatomía de la letra

HUMANISTAS
1500 d.C.

Pág: 6

3
 Conceptos generales
 Tipografía, es la técnica de crear y componer tipos 
para comunicar un mensaje. Se ocupa del estudio 
y
y clasificación de las distintas fuentes tipográficas.
p g

 Tipo, es el diseño de una letra determinada.

 Fuente tipográfica, es la que se define como estilo 
o apariencia de un grupo completo de caracteres, 
números y signos, regidos por características 
comunes.

 Familia tipográfica, es el conjunto de tipos basado 
en una misma fuente, con algunas variaciones (por 
ejemplo grosor o anchura) pero manteniendo 
características comunes. Se parecen entre sí pero 
tienen rasgos propios.

Pág: 7

Anatomía de la letra

» Líneas de referencia y proporciones
» Partes de la letra
» Contorno y modulación

Pág: 8

4
 Anatomía de la letra

Líneas de referencia y proporciones

Rebaba

Originalmente se llamó cuerpo tipográfico a la altura 
del tipo de metal en los sistemas de impresión, hoy 
llamamos cuerpo tipográfico a la cara de la letra más el 
espacio adicional para evitar que se toquen los 
caracteres de dos líneas consecutivas.

Para medios impresos el cuerpo se mide en puntos (pt)
Para medios digitales el cuerpo se mide en píxeles (px)
Pág: 9

Anatomía de la letra

Partes de la letra

 Los términos usados para describir las partes de las letras se asemejan a las 
partes de nuestro cuerpo. Así las letras tienen brazos, piernas, ojos, entre otros.

Pág: 10

5
 Clasificación tipográfica
» Serif
• Romanas antiguas o geraldas (1)
• Romanas de transición
Romanas de transición (2)
• Romanas modernas (3)
• Egipcias (4)
» Sans serif (5)
• Grotescas
• Geométricas
• Humanistas
» Manuscritas, Fantasía y Experimentales
Manuscritas Fantasía y Experimentales
(1)                           (2)                            (3)                          (4)                            (5)

Pág: 11

Clasificación tipográfica

Existen cinco elementos puntuales, sirven para clasificar e identificar a las 
diferentes las familias tipográficas:

» La presencia o ausencia del serif o remate.
» La forma del serif.
» La relación curva o recta entre bastones y serifs.
» La uniformidad o variabilidad del grosor del trazo.
» La dirección del eje de engrosamiento.

De acuerdo con esto podemos hacer un análisis y reconocer a los dos grandes 
grupos fundamentales:

» Serif
» Sans Serif

Pág: 12

6
 Clasificación tipográfica

Serif: Romanas Antiguas o Geraldas 1460
Garamond, Caslon, Trajan

 Tienen serif agudos y base ancha.

Tienen serif agudos y base ancha
 Trazos variables, ascendentes finos y descendentes gruesos.
 Espaciado amplio.
 La dirección del eje de engrosamiento es oblicua.
 Tipógrafos destacados Aldus Manutius y Claude Garamond.

Pág: 13

Clasificación tipográfica

Serif: Romanas de Transición 1760
Baskerville, Times, Century

 Tienen
Tienen serif
serif mucho más agudos que las antiguas.
mucho más agudos que las antiguas
 Trazos variables con una a entre finos y gruesos. 
 La dirección del eje de engrosamiento es oblicua pero más cerca del eje 
horizontal.
 Tipógrafos destacados John Baskerville, Stanley Morison (Times).

Pág: 14

7
 Clasificación tipográfica

Serif: Romanas Modernas 1780
Bauer Bodoni, Didi

 Tienen serif lineal con marcados ángulos con los bastones.

Tienen serif lineal con marcados ángulos con los bastones
 Trazos variables con una abrupta diferencia entre finos y gruesos. 
 La dirección del eje de engrosamiento es horizontal.
 Son producto de la Revolución Industrial.
 Tipógrafos destacados: Giambattista Bodoni, Fermín Didot.

Pág: 15

Clasificación tipográfica

Slab serif: Mecanas 1815
Rockwell, Clarendon

 El
El serif
serif es tan grueso como los bastones.
es tan grueso como los bastones
 Puede ser cuadrado (Lubalin Graph, Robotik) o bien redondo (Cooper Black).
 Las relaciones entre serif y bastón pueden ser angulares (Memphis) o bien 
curvas (Clarendon).
 La dirección del eje de engrosamiento es normalmente horizontal.
 Tipógrafos destacados: Vincent Figgins (Rockwell), Robert Besley (Clarendon).

Pág: 16

8
 Clasificación tipográfica

Sans serif: Grotescas 1957
Akzidenz‐Grotesk, Helvética, Univers y Franklin Gothic.

 No tienen serifs
No tienen serifs.
 Trazos uniformes, con variaciones de compensación óptica.
 La dirección del eje de engrosamiento es generalmente horizontal.
 Tipógrafos destacados: Max Miedinger (Helvetica), Adrian Frutiger (Univers).

Pág: 17

Clasificación tipográfica

Sans serif: Geométricas 1920
Futura, Eurostile, Avenir.

 Basados
Basados en formas y estructuras geométricas, normalmente monolíneas.
en formas y estructuras geométricas normalmente monolíneas
 Nacen a partir de 1920 como consecuencia de las vanguardias europeas y la 
Bauhaus.
 Tipógrafos destacados: Paul Renner (Futura), Adrian Frutiger (Avenir).

Pág: 18

9
 Clasificación tipográfica

Sans serif: Humanísticas 1916
Gill Sans.

 Basadas
Basadas en las proporciones de las romanas, con un ligero contraste en sus serifs.
en las proporciones de las romanas con un ligero contraste en sus serifs
 Edward Johnston, calígrafo relevante de la época con su creó el tipo para el Metro 
de Londres en 1916.
 Tipógrafos destacados: Edward Johnston (London Underground), Eric Gill que 
tomó la tipografía creada por Johnston para diseñar la Gill Sans.

Pág: 19

Clasificación tipográfica

Manuscritas, Fantasía y Experimentales fin siglo XX
Mistral, Comic Sans, Curlz, etc.

 No pertenecen a ninguna clasificación exacta

No pertenecen a ninguna clasificación exacta.
 No se recomienda su uso en largos bloques de texto.
 Trazos y estructuras diversas.
 Una tipografía de fantasía puede bajar la calidad del diseño de forma dramática.

Pág: 20

10
 Variables
» Variables de peso
» Variables de estructura
» Variables de ancho
» Familia sistema

Pág: 21

Variables

Variables de peso

 Fina, regular, negrita.
 Las letras, pueden llegar a tener variaciones en el grosor de su trazo.
 Hay familias tipográficas que cuentan con todas esas variaciones y otras que 
no. Las negritas normalmente se usan para sobresaltar o dar énfasis a alguna 
parte del texto.

Pág: 22

11
 Variables

Variables de ancho

 Las condensadas son la versión estrechada de una familia tipográfica, las 
expandidas son la versión ensanchada de una familia tipográfica.
 Es ideal utilizar tipografías condensadas para ahorrar espacio, aunque puede 
resultar cansador al leer textos muy largos.

Pág: 23

Variables

Variables de estructura

 Itálicas, cursiva y versalitas.
 Se llama cursiva o itálica a todo estilo de escritura en el que las letras están 
inclinadas.
 Versalita es una variación que no tiene minúsculas, sino que son las mismas 
mayúsculas que se adaptan a la altura de “x” con proporciones ligeramente 
distintas.




Pág: 24

12
 Familia sistema
Univers (1957)
Adrian Frutiger diseño un 
sistema de numeración
sistema de numeración 
para diferenciar los 21 
pesos y anchuras de la 
Univers, aunque después 
se utilizó para catalogar la 
Frutiger, Avenir, Helvetica
Neue entre otras.

Pág: 25

Alineaciones

 La alineación del texto es un paso importante para 
mantener también una buena legibilidad. 
 El texto puede alinearse de cinco formas distintas: 
» alineado a la izquierda, 
» alineado a la derecha, 
» justificado, 
» centrado o 
» asimétrico.

Pág: 26

13
 Espaciado
1. Entre letras. 5. Medianiles (diseño editorial).
2. Entre palabras. 6. Márgenes (diseño editorial).
3. Entre líneas. 7. Sangrías.
4
4. E t
Entre párrafos.
á f
6
1
2 5
7

Pág: 27

Legibilidad

 La legibilidad es el conjunto de características 
tipográficas y lingüísticas del texto escrito que 
permiten leerlo y comprenderlo con facilidad.
l l d l f ld d
 Por ejemplo: un título, un párrafo o una señal 
de stop, deben ser reconocible al instante.
 Para hacer legible el trabajo, tendremos que 
tener en cuenta otros aspectos como:
» estilo de la familia tipográfica:
• forma de las letras,
• espaciados.
» el tamaño o cuerpo tipográfico,
» la longitud de la línea, 
» el interlineado. 

Pág: 28

14
 Retórica tipográfica

 Los caracteres pueden transmitir no sólo información textual, sino también 
múltiples emociones y sensaciones a través de su forma. 
 La elección de un tipo de letra nunca es arbitraria y requiere un ejercicio de los 
conceptos e ideas que se le quieren transmitir. 
 Un mismo texto compuesto con diferentes tipos produce sensaciones 
diferentes, aunque digan exactamente lo mismo. 

Pág: 29

silencio!

Pág: 30

15
Pág: 31

Tipografía digital

 Condicionantes que influyen sobre la tipografía digital
» Tecnología que utiliza el usuario para previsualizarla: 
• Hardware o gadget (PC, MAC, Celular, tableta digital, proyector, etc)
• Sistema operativo (OS).
• Navegador utilizado (en caso de la web)

» Capacidad de la familia eligida por el diseñador para adaptarse a estas 
circunstancias. 

VECTORE ANTIALIASING  PIXELADO

S O SUAVIZADO
Pág: 32

16
 La tipografía en la web

 El uso de las hojas de estilo en cascada (CSS) revolucionó el diseño tipográfico 
web y permitió lograr diseños similares independientemente de los sistemas 
operativos (OS) o los navegadores web.
( ) l d b
 Las familias tipográficas más utilizadas en la web son:

Arial
Times New Roman
g
Georgia
Verdana Web‐safe fonts son fuentes que se 
encuentran disponibles en la mayoría de 
Trebuchet los ordenadores y nos permiten leer 
cualquier sitio web en cualquier
Courier New navegador de internet.

Pág: 33

Formatos tipográficos digitales
 Son archivos independientes que se instalan en un determinado directorio del 
sistema operativo para que estén disponibles en todos los programas que usan 
caracteres.
 Los formatos de tipografía digital más comunes son:
Los formatos de tipografía digital más comunes son:
» TTF (TrueType Font): diferentes según el OS (Microsoft y Apple).
» PostScript de Adobe:  utilizado en medios impresos y archivos PDF.
» OTF (OpenType Font): precede al TTF y son multiplataforma (desde Windows 
Vista y OS de Mac).

 Formatos del mañana para la web para utilizar cualquier familia tipográfica en 
cualquier navegador:
» EOT (Embedded OpenType): utilizado por Internet Explorer.
» WOFF (Web Open Font Format): desarrollado por Mozilla
( b ) d ll d ll y en camino para ser 
el estandar.

Pág: 34

17
 Referencias: libros y links

» Diseño Digital. Javier Royo. Paidós ISBN 84‐493‐1550‐6

» http://www.ideocentro.com/recursos.php?id=31&estudio_diseno_web_ideocent
ro=Tipografia
» http://www.typographia.com.ar/typo1/?p=1419
» http://rienzie.com/30‐tipografias‐serif‐y‐sans‐serif‐para‐tus‐trabajos
h // / f f f b
» http://es.wikipedia.org/wiki/Tipograf%C3%ADa
» http://es.wikipedia.org/wiki/Tipo_de_letra
» http://letritas.blogspot.com/2008/09/sensibilidad‐tipogrfica.html
» http://andreubalius.blogspot.com/2010/03/tipografia‐en‐pantalla‐hacia‐
una.html

» Recursos
• http://es.letrag.com/visualizador.php
• http://www.smashingmagazine.com/2010/05/06/50‐helpful‐typography‐
tools‐and‐resources/
• http://www.squidspot.com/Periodic_Table_of_Typefaces/Periodic_Table_of_
Typefaces_large.jpg
• http://www.typographicposters.com/

Pág: 35 UNSL | Introducción al Diseño Gráfico | Ivan Pianciola (DG) | ipianciola@unsl.edu.ar | http://bit.ly/unsldg

18