You are on page 1of 167

Tipografa: Arte de imprimir.

Conjunto de tcnicas y
procedimientos de impresin en relieve (mediante tipos
y grabados de metal). Las operaciones de composicin
de textos y caracteres mbiles en relieve.
Coneixement de la lletra
La forma de la Lletra
V+H
Traos Verticals
i Horitzontals
V+I
Traos Verticals
i Inclinats
I
Traos inclinats
H+I
Traos Horitzontals
i Inclinats
V+C
Traos Verticals
i Curvilinis
H+C
Traos Horitzontals
i Curvilinis
E F H I L T
M N K Y
V W X
Z A
B D G J P R U
C O Q S
f i j l t
k
v w x y
z
a b d g h m n p q r u
c e o s
Coneixement de la lletra
Parts de la lletra
Mdpx
Alada X / Ull Mig
Linia Base
Alada del Descendent
Alada de lAscendent
Alada de la Majscula
cos
Ascendent
Descendent
Coneixement de la lletra
Parts de la lletra
Coll
Hombro
Asta
Transversal
Esper
Serifa
Peu
Remat
Asta
Muntant
Ganxo
Terminal
Ull interior Ull inferior
Coneixement de la lletra
Parts de la lletra
Vrtex
Bra
Cua
Panxa
Travesser
Orella
Llgrima Ungla
La familia tipogrca es una coleccin de fuentes con un diseo comn.
Una fuente es un conjunto completo de letras, nmeros, signos de puntua-
cin y smbolos.
Una buena fuente de texto incluir:
Familia tipogrca
- caja alta y caja baja
- redondas y cursivas
- versalitas
- nmeros alineados
- signos de puntuacin
- diacrticos
- ligaduras
- signos pi
- smbolos
Una fuente completa incluye...
, ; : . . ! ?
Cona PuhLo y cona Dos puhLos PuhLo PuhLos Suspehsivos Adniracioh hLerrogahLe
- -
Guioh Guioh h Guioh n
`` ( ) | { ( )
Conillas sinples Conillas dobles GuillaneLs ParehLesis CorcheLes Llaves
Una fuente completa incluye...
Arroba @
Derechos de auLor
RegisLrado
Marca RegisLrada
Grados
Lspacio I
Paragrafo
Seccioh
Dolar S
Libra
Yeh
Luro C
Se utiliza para describir los caracteres verticales o rectos diferentes
de las cursivas.
Es el estilo bsico de las letras de caja baja.
Redondas
Redonda Cursiva
Cursiva o itlica
Deriva de la escritura manuscrita que se empleaba en Italia en el s.xv.
Se empez a utilizar junto con la redonda en el s.xvii, para diferenciar infor-
macin diversa (para notas, leyendas y citas). En el s.xix se empieza a utilizar
para destacar palabras y frases extrangeras.
La cursiva debe reejar la uidez de la escritura a mano, con los comienzos y
nales de cada asta, brazo o cola curvndose desde el carcter anterior hacia
el siguiente.
aen
aen
Itlica autntica Itlica falsa inclinada
manualmente en el ordenador
aen
Redonda
Ligaduras
Las ligaduras son parejas o trios de caracteres (especialmente diseados)
unidos entre ellos para formar una unidad.
Debido a que el trazo de la f invade el espacio del siguiente caracter,
determindas secuencias de letras como f i o f l pueden crear una solapacin
de caracteres... Las ligaduras lo evitan:
f i
Sin ligar Ligaduras
Versalitas
Son letras de caja alta pero de la misma altura de la x de las de caja baja.
Las encontramos en fuentes con remate y estan especialmente diseadas
para parecer del mismo tamao y grosor que los caracteres de caja baja.
Mantienen las mismas proporciones del resto de caracteres de la fuente.
Versalita
autntica
Versalita falsa
Apreciable cambio
de proporciones
M mM mx
La familia tipogrca
Todo esto en una gama de quizs 4 o 5 grosores y 2 o 3 anchuras diferentes
En total, ms de 1.000 caracteres...
La familia tipogrca es una coleccin de fuentes con un diseo comn.
Negrita Fina
Estrecha Ancha
Opciones de grosor o peso
La terminologa ms comn para designar las distintas opciones de peso
es la inglesa. Las ms comunes: light, roman, medium, bold y extrabold o black.
Thin Light
Roman Medium
Bold Heavy
Black Extrablack
Aa
Aa
Los comienzos fueron en 1924 . A partir de 1928
empiezan a fabricar proyectores de 35 m.m.sonoros.
Fue la empresa pionera en fabricar todo el proyector
completo. Durante la guerra Civil cesan en su
actividad pero la reinician con fuerza en 1940,
instalando sus aparatos en todas las provincias.Como
tenan una red muy importante de distribucin
Los comienzos fueron en 1924 . A partir de
1928 empiezan a fabricar proyectores de 35
m.m.sonoros. Fue la empresa pionera en
fabricar todo el proyector completo. Durante
la guerra Civil cesan en su actividad, pero
la reinician con fuerza en 1940,instalando
sus aparatos en todas las provincias.Como
Coneixement de la lletra
Classificaci bsica
Los comienzos fueron en 1924 . A partir de 1928
empiezan a fabricar proyectores de 35 m.m.sonoros.
Fue la empresa pionera en fabricar todo el proyector
completo. Durante la guerra Civil cesan en su
actividad pero la reinician con fuerza en 1940,
instalando sus aparatos en todas las provincias.Como
tenan una red muy importante de distribucin
Los comienzos fueron en 1924 . A partir de
1928 empiezan a fabricar proyectores de 35
m.m.sonoros. Fue la empresa pionera en
fabricar todo el proyector completo. Durante
la guerra Civil cesan en su actividad, pero
la reinician con fuerza en 1940,instalando
sus aparatos en todas las provincias.Como
Serifa
Pal Sec
Clasificacin de los tipos*

Humanistas o Venecianas Lineales Humanistas
Garaldas o Antiguas Lineales Geomtricas
Transicionales Talladas o Incisas
Didonas o Modernas Script Caligrcas
Egipcias o Mecnicas Script Manuales
Lineales Grotescas Decorativas
Lineales Neo Grotescas Gticas


* De Maximilien Vox, adaptada por la ATypI (Asociacin Tipogrca Internacional)
en el ao 1962.
Presentan la inuencia de la escritura humanista con plumilla ancha (inclinada a 30 grados).
La caja alta deriva de las capitales romanas.
Principales caractersticas
Barra inclinada en la e de caja baja.
Acentuada inclinacin hacia la izquierda del eje de la letra.
Contraste pobre y gradual entre los trazos gruesos y nos.
El serif o remate de base es triangulado.
El serif o remate de las ascendentes de caja baja es oblicuo.
Las contraformas interiores son muy pequeas.
Clasificacin de los tipos
Humanistas o Venecianas
Centaur MT
Clssiques 24
El nombre se forma por la combinacin de Garamond y Aldus.
Siguen manteniendo la inuencia de la escritura humanista con plumilla ancha.
Principales caractersticas
La barra transversal de la e de caja baja es recta.
Modulacin inclinada menos acusada que las Humanistas.
Mayor contraste entre los trazos gruesos y nos que las Humanistas.
El serif o remate de base es triangulado.
El serif o remate de las ascendentes de caja baja es oblicuo.
Las contraformas interiores son muy pequeas.
Caja alta ms corta que las ascendentes de caja baja.
Clasificacin de los tipos
Garaldas o Antiguas (Old Face, Old Style)
Adobe Garamond
Clssiques 36
Reciben este nombre porque tienen caracteres que muestran la transicin entre los romanos
antiguos (o Garaldas) y los romanos modernos (o Didonas).
Principales caractersticas
Eje de modulacin casi vertical.
An mayor contraste entre los trazos gruesos y nos que las Garaldas.
El serif o remate de base es triangulado pero ms no.
El remate de las ascendentes de caja baja son ligeramente oblicuos tendiendo a horizontales.
Las contraformas interiores son un poco ms abiertas.
Caja alta de la misma altura que las ascendentes de caja baja.
Clasificacin de los tipos
Transicionales
Adobe Caslon
Clssiques 45
El nombre se forma por la combinacin de Didot y Bodoni.
Estos tipos fueron posibles gracias a la mejora de las tcnicas de impresin y de la calidad
del papel (s.XVIII)
Principales caractersticas
Eje de modulacin vertical.
Contraste entre los trazos gruesos y nos muy marcado.
El serif o remate de base es de entrega recta o ligeramente curvados.
El remate de las ascendentes de caja baja son horizontales o ligeramente curvados.
Clasificacin de los tipos
Didonas o Modernas
Bauer Bodoni
Clssiques 62
Se llaman mecnicas porque aparecen con la Revolucin Industrial (s. XIX) y egipcias por el gusto por lo
egipcio que haba en aquella poca.
Principales caractersticas
Eje de modulacin vertical.
El contraste entre los trazos gruesos y nos casi es uniforme.
Potentes remates terminales cuadrangulares o acartelados.
La entrega de las bases es un ngulo recto.
Los terminales de los ascendentes de caja baja son horizontales.
Lo habitual es una gran altura x.
La g de caja baja prcticamente no desciende.
Clasificacin de los tipos
Egipcias o Mecnicas
Stymie
Los tipos lineales son los tipos sans serif (sin remates, lineales o de palo seco). Las grotescas
son de los primeros tipos en aparecer en esta categora. Se llaman grotescas extraas porque
sorprendieron mucho en el momento de su aparicin.
Principales caractersticas
Eje de modulacin vertical.
Cierto contraste en los trazos curvos.
El nal de los trazos curvos es oblicuo.
La g de caja baja est construida en dos niveles.
Clasificacin de los tipos
Lineales Grotescas
Franklin Gothic
Aportacions del SXX 88
Aportacions del SXX 89
Basadas en las Grotescas pero rediseadas con ajuste de las proporciones.
Acostumbran a ser familias con una serie muy amplia.
Principales caractersticas
Grosor de trazo casi uniforme.
Contraste menos marcado que en las Grotescas.
El nal de los trazos curvos es normalmente recto.
La g de caja baja presenta el ojal abierto, es una cola.
Clasificacin de los tipos
Lineales Neogrotescas
Helvetica
Aportacions del SXX 116
Se llaman geromtricas porque estn construidas a partir de formas geomtricas simples
como el crculo y el rectngulo.
Principales caractersticas
Carecen de modulacin y el grosor del trazo es constante.
El nal de los trazos curvos es normalmente recto.
La g de caja baja presenta el ojal abierto, es una cola.
Normalmente presentan una a de caja baja no ascendente.
Clasificacin de los tipos
Lineales Geomtricas
Futura
Aportacions del SXX 98
Se llaman Humanistas porque sus raices retornan a las inscripciones romanas y tambin
a la escritura manual de caja baja de los humanistas del Renacimiento (S. XV y XVI).
Principales caractersticas
Los grosores de los trazos no son uniformes.
El nal de los trazos curvos es normalmente recto.
La a y la g de caja baja son ascendentes y descendentes respectivamente.
La g de caja baja presenta el ojal cerrado.
Clasificacin de los tipos
Lineales Humanistas
Gill Sans
Optima
Aportacions del SXX 109
AGRDE
Se llaman as porque en lugar de tener una base caligrca, estos tipos sugieren ms la letra
cincelada que la escrita, inspirndose con frecuencia en las inscripciones romanas.
Hay alfabetos diseados slo en caja alta.
Principales caractersticas
Tanto las cajas altas como las bajas tienen unas terminaciones ms puntiagudas.
El nal de los trazos presentan un ensanchamiento triangular.
Contraste poco acusado entre trazos.
Clasificacin de los tipos
Talladas o incisas
Albertus
Quina lletra he de triar? 16
Principales caractersticas
Los tipos script son tipos basados en los originales dibujados a mano. Dentro de este grupo
distinguimos las caligrcas que estn inspiradas en la escritura manual caligrca.
Aunque las cursivas se basan en un tipo de escritura no se consideran dentro de este grupo ya que
han pasado a designar un tipo de letra de ojo inclinado que se asocia siempre a su versin romana
o vertical.
Clasificacin de los tipos
Script Caligrficas
Snell Roundhand
...
.
Sudtipos proudly introduces

Principales caractersticas
Los script manuales son los tipos que estn basados en originales dibujados a mano, bien sea con
pincel, lpiz u otros utensilios, pero que no representan ningn tipo de escritura.
Clasificacin de los tipos
Script Manuales
Flood
Tekton
Principales caractersticas
Son tipos que se inspiran muchas veces en las artes decorativas. En ellos predominan las
formas caprichosas o particulares, y tienen una nalidad ms decorativa que funcional.
Clasificacin de los tipos
Decorativas
Cooper Black
Totally Ghotic
Totally
Altres tipus del SXX 153
Altres tipus del SXX 158
Altres tipus del SXX 162
Principales caractersticas
Son tipos que se inspiran en la escritura gtica.
Clasificacin de los tipos
Gticas
Duc de Berry
Cmo se crea una Tipografa Digital
O cmo introducirse al diseo de tipogrfico mediante FontLab
UnosTiposDuros - Valencia - CampusParty 2010
Cmo se crea una tipografa Digital
Antes de dibujar: Efectos pticos, las formas base
Cmo se crea una tipografa Digital
Antes de dibujar: Efectos pticos, el espacio Gromenauer
Cmo se crea una tipografa Digital
Antes de dibujar: Efectos pticos, horizontales y verticales, anchos desiguales
66 PX
66 PX
Cmo se crea una tipografa Digital
Antes de dibujar: Efectos pticos, Tamao de las verticales Vs curvas
Cmo se crea una tipografa Digital
Antes de dibujar: Efectos pticos, un ejemplo prctico
Cmo se crea una tipografa Digital
Dibujando tipos: Intenta repetir siempre los mismos anchos
Ancho blanco
interno curbas
Ancho blanco
interno rectas
Ancho horizontales
redondeadas
Ancho unin asta
y horizontales
Ancho redondeadas
Ancho asta
Cmo se crea una tipografa Digital
Dibujando tipos: los mdulos nos aportan coherencia
Asta
Blanco
Interno
Hombro
Remates
Asta
ascen.
Asta
descen.
Cmo se crea una tipografa Digital
Dibujando tipos: Como crear famlias tipogrficas
El ancho de las astas y los blancos internos, son inversamente proporcionales
Cmo se crea una tipografa Digital
Dibujando tipos: Encuentra viejas tipografas olvidadas o crea las tuyas!
Cmo se crea una tipografa Digital
Las tipografas se miden con puntos
Configuracin en Illustrator y FreeHand
Illustrator FreeHand
Cmo se crea una tipografa Digital
Sita los caracteres en las lneas maestras para definir la mtrica
Lneas Gromenauer
1000
PUNTOS
LNEA BASE
ALTURA X
ALTURA MAYSCULAS
SOBREDIMENSIN
DESCENDENTE
ASCENDENTE
Cmo se crea una tipografa Digital
Dibujado vectorial siguiendo los principios de la ortogonalidad
Bien
Cmo se crea una tipografa Digital
Mal
Calcla la mtrica de la fuente
1000
PUNTOS
LNEA BASE
ALTURA X
ALTURA MAYSCULAS
SOBREDIMENSIN
DESCENDENTE
ASCENDENTE
Descendentes
-256 puntos
Altura x
348 puntos
Altura
maysculas
544 puntos
Ascendentes
744
Cmo se crea una tipografa Digital
Programas de edicin tipogrfica
Fontlab Fontographer Glyphs
schriftgestaltung.de
fontlab.com
Cmo se crea una tipografa Digital
Codificacin de la fuente:
Configuramos que conjun-
to de caracteres contiene la
fuente y el orden que apare-
cen en la rejilla
Yo me siento cmodo con el
MacOS Roman
Haz doble clic
en la casilla
de cualquier
carcter
FontLab: Crear un archivo de fuente
File > New
Cmo se crea una tipografa Digital
Definiendo la mtrica de la fuente en FontLab
File > Font Info > Metrics and Dimensions > Key dimensions
Cmo se crea una tipografa Digital
FontLab: las capas de la ventana de los carcteres
Cmo se crea una tipografa Digital
Outline
Metrics
Guides
Mask
Es la capa principal, donde ira el dibujo de los caracteres
En esta capa definimos las lineas maestras globales de la tipografa,
y el espaciado particular de cada carcter
Permite poner guas para alinear los caracteres con exactitud, las
guas pueden ser especficas de cada glifo o globales para todos
Funciona a modo de papel cebolla, los trazados de esta capa no son
visibles, pero sirven para calcar en la capa Outline
FontLab: la paleta Editing Layers
Window > Panels > Editing Layers
Cmo se crea una tipografa Digital
Trasladar la mtrica a FontLab
Dibujado, y copiado de las lneas maestras
Dibujar unas pequeas lneas en
cada una de las lneas maestras de
la fuente, seleccionarlas todas y
copiarlas
Truquillo!
Haz la linea de la linea base un poco ms
ancha, te ayudar a no confundirte
1000
PUNTOS
Cmo se crea una tipografa Digital
Copia y pega las guas maestras en la capa Mask
Ajusta tu linea
base con la linea
base de FontLab
Selecciona la capa
Mask y pega las
lineas maestras.
Comprovar la mtrica en FontLab
Cmo se crea una tipografa Digital
Trasladar la mtrica a FontLab
Selecciona la capa Metrics y ajusta las lineas maestras de FontLab
Cmo se crea una tipografa Digital
Trasladar la mtrica a FontLab
Selecciona la capa Guides y coloca las lineas Gromenauer
Sita el cursor sobre
las guas, accede al
men contextual
y elige la opcin
Convert to global
Observareis que las lneas
cambian de color azul a
rojo
Arrastra desde las barras para
crear las lineas
File > New
Cmo se crea una tipografa Digital
Pegar los trazados de Illustrator o Freehand
Pega el carcter en la capa Outline del carcter correspondiente
Si la contraforma
aparece en negro,
seleccinala con un
doble clic, y elige en
el men contextual
la opcin Reverse
Contours
Una vez pegado,
arrstralo hasta que
coincida con su po-
sicin con las lineas
maestras
Cmo se crea una tipografa Digital
Pega el resto de caracteres de la fuente
Cmo se crea una tipografa Digital
El espaciado
Window > New Metrics Window
Es tan importante
un buen espaciado
como el diseo de la
tipo
Debemos estar en el
modo de mtrica par
dar los valores
Nombre del carcter
Anchura (en puntos)
Prosa izquierda
Prosa derecha
Cmo se crea una tipografa Digital
1.
Espaciamos la n
teniendo en cuenta
que la prosa dere-
cha ser algo infe-
rior a la izquierda
ya que la primera
tiene mas blanco en
el arco
El espaciado
Espaciando las minsculas
Cmo se crea una tipografa Digital
El espaciado
Espaciando las minsculas
2.
Espaciamos la o
dando los mismos
valores en las pro-
sas izquierda y de-
recha
Recuerda igualar los
blancos internos y
los externos!
Cmo se crea una tipografa Digital
El espaciado
Espaciando las minsculas
3
Comprobamos que
los dos caracteres
combinados tienen
buen ritmo, si es
necesario, hay que
refinar el espaciado
Cmo se crea una tipografa Digital
El espaciado
Vincular a las formas bsicas al resto de caracteres
con la misma mtrica
20
35
34
a
h
o
v
c
j
q
x
f
m
t
b
i
p
w
e
l
s
z
d
k
r
y
g
n
u
Ajuste manual
del espaciado
Cmo se crea una tipografa Digital
El espaciado
Completar y refinar el espaciado colocando
todos los caracteres entre dos n
Cmo se crea una tipografa Digital
El espaciado
Las maysculas: Repetir el proceso con las letras H y O
46
39
A
H
O
V
C
J
Q
X
F
M
T
B
I
P
W
E
L
S
Z
D
K
R
Y
G
N
U
Ajuste manual
del espaciado
Cmo se crea una tipografa Digital
El espaciado
Completar y refinar el espaciado colocando
todos los caracteres entre dos H
Cmo se crea una tipografa Digital
El espaciado
Utiliza la n y la H para espaciar el resto de caracteres
Cmo se crea una tipografa Digital
Creacin de los caracteres acentuados
Es bueno empezar rellenando las casillas madre de las tildes y acentos
Cmo se crea una tipografa Digital
Creacin de los caracteres acentuados
Haz doble click encima de
las casillas de los caracteres
acentuados
Despus abre la ven-
tana del carcter, y
ajusta la tilde o acento
a la forma de la letra.
Nunca al reves, ya que
variaramos la mtrica
heredada!
Cmo se crea una tipografa Digital
Los Pares de Kerning
Selecciona la opcin de kerning en la ventana de Metrics
Ajusta el espaciado
entre pares de letras
manualmente mediante
el desplazador, o nu-
mricamente.
Cmo se crea una tipografa Digital
Las Classes para automatizar los pares de kerning
Windows > Panels > Classes
Si queremos hacer la
classe de la A debe-
mos escribir _A: y
darle a Accept
Cmo se crea una tipografa Digital
Las Classes para automatizar los pares de kerning
Arrastrar en este espacio el carcter
madre, en este caso la A desde la
rejilla de caracteres
Seleccionando estas casillas definimos si
los pares de kerning afectan a la prosa
derecha, izquierda o ambas
Cmo se crea una tipografa Digital
Las Classes para automatizar los pares de kerning
Arrastra el resto de caracteres asociados a la celda
Seleccin de kerning en la prosa izquierda
Caracteres asociados a la Classe
Ahora debemos ir creando las
Classes hasta completar el
proceso
Cmo se crea una tipografa Digital
Las Classes para automatizar los pares de kerning
Podemos mezclar mas de un carcter diferente, la forma es la que manda
Cmo se crea una tipografa Digital
Las Classes para automatizar los pares de kerning
La ventana de mtrica antes de usar las Classes de kerning
Cmo se crea una tipografa Digital
Las Classes para automatizar los pares de kerning
Tools > Kerning Assistance
Pulsa el botn Expand para generar los
nuevos pares de kerning
Cmo se crea una tipografa Digital
Las Classes para automatizar los pares de kerning
Selecciona esta configuracin y
dale al botn Expand
Cmo se crea una tipografa Digital
Las Classes para automatizar los pares de kerning
Resultados de la expansin de los pares de Kerning
Cmo se crea una tipografa Digital
Optimizando los trazados de la fuente
( Edit > Slect All ) Selecciona todos los caracteres de la rejilla y...
1 - Contour > Correct connections
2 - Contour > Close Open Contours
3 - Contour > Paths > Set PS Direction
4 - Tools > Hint & guides > Autohinting
Cmo se crea una tipografa Digital
Configuracin de la fuente antes de su exportacin
File > Font Info
Avanza y retrocede por las
pantallas de configuracin
2 - Pulsa sobre el diamante, y con-
fa en el para la configuracin de la
fuente.
Continua hacia adelante con la flecha dere-
cha superior
1 - Rellena estas casillas con la si-
guiente informacin de la fuente:
Nombre de la fuente
Peso
Anchura
Estilo
Cmo se crea una tipografa Digital
Configuracin de la fuente antes de su exportacin
Sigue avanzando a golpes de Diamante en caso que los haya.
Que la fuerza
te acompae!
Cmo se crea una tipografa Digital
Creacin de los archivos tipogrficos
File > Generate Font
1 - Elige el formato de la fuente
2 - Genera, instala la
fuente, y tsatela en
un editor de texto
3 - Si algo no funcio-
na, mtete en este
berenjenal
Cmo se crea una tipografa Digital
FontLab es un programa real-
mente complejo, de momento
solo hemos visto la punta del
iceberg
Aun te queda aprender...
Acciones
Interpolaciones de fuentes
Macros
Programacin Open Type
Multiple Masters
Hinting...
Parece mucho pero eso solo es el principio
Cmo se crea una tipografa Digital
Learn Lontlab Fast
By Leslie Cabarga
www.logofontandlettering.com/
Manual oficial de FontLab
http://www.FontLab.com
Quieres profundizar mas sobre el programa...
Necesitaras un buen nivel de ingls!
www.emigre.com
www.fontshop.com
www.houseindustries.com
www.underware.nl
www.t26.com
www.adobe.com/type
www.fontbureau.com
www.linotype.com
www.sudtipos.com
www.typography.com
www.itcfonts.com
www.letterror.com
www.astramat.com
www.emtype.net
www.typeculture.com
www.typebase.com
www.typophile.com
www.myfonts.com
www.ilovetypography.com
typetester.maratz.com
letritas.blogspot.com
www.proyectodemo.cl
www.typographykicksass.com
www.typotour.it
www.bancomicsans.com
www.killerfonts.com
www.typeradio.org

You might also like