tipografia digital.pdf
167
-
Upload
carmen-bretones -
Category
Documents
-
view
162 -
download
13
Transcript of tipografia digital.pdf
Tipografía: Arte de imprimir. Conjunto de técnicas y procedimientos de impresión en relieve (mediante tipos y grabados de metal). Las operaciones de composición de textos y caracteres móbiles en relieve.
Coneixement de la lletraLa forma de la Lletra
V+HTraços Verticalsi Horitzontals
V+ITraços Verticalsi Inclinats
ITraços inclinats
H+ITraços Horitzontalsi Inclinats
V+CTraços Verticalsi Curvilinis
H+CTraços Horitzontalsi 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 lletraParts de la lletra
Mdpx Alçada X / Ull Mig
Linia Base
Alçada del Descendent
Alçada de l’AscendentAlçada de la Majúscula
cos
Ascendent Descendent
Coneixement de la lletraParts de la lletra
Coll
Hombro
AstaTransversal
EsperóSerifaPeuRemat
AstaMuntant
Ganxo
Terminal
Ull interior Ull inferior
Coneixement de la lletraParts de la lletra
Vèrtex
Braç
Cua
Panxa
Travesser
Orella
LlàgrimaUngla
La familia tipográfi ca es una colección de fuentes con un diseño común.
Una fuente es un conjunto completo de letras, números, signos de puntua-ción y símbolos.
Una buena fuente de texto incluirá:
Familia tipográfi ca
- caja alta y caja baja- redondas y cursivas- versalitas- números alineados- signos de puntuación
- diacríticos- ligaduras- signos pi- símbolos
Una fuente completa incluye...
Una fuente completa incluye...
Se utiliza para describir los caracteres verticales o “rectos” diferentes de las cursivas.
Es el estilo básico de las letras de caja baja.
Redondas
Redonda Cursiva
Cursiva o itálica
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-mación diversa (para notas, leyendas y citas). En el s.xix se empieza a utilizar para destacar palabras y frases extrangeras.
La cursiva debe refl ejar la fl uidez de la escritura a mano, con los comienzos y fi nales de cada asta, brazo o cola curvándose desde el carácter anterior hacia el siguiente.
aen aenItálica auténtica Itálica falsa inclinada
manualmente en el ordenador
aenRedonda
Ligaduras
Las ligaduras son parejas o trios de caracteres (especialmente diseñados) 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 solapación de caracteres... Las ligaduras lo evitan:
f i fi fl Δ ß 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 diseñadas para parecer del mismo tamaño y grosor que los caracteres de caja baja.
Mantienen las mismas proporciones del resto de caracteres de la fuente.
Versalita auténtica
Versalita falsaApreciable cambio de proporciones
M mM mx
La familia tipográfi ca
Todo esto en una gama de quizás 4 o 5 grosores y 2 o 3 anchuras diferentes
En total, más de 1.000 caracteres...
La familia tipográfi ca es una colección de fuentes con un diseño común.
Negrita Fina
Estrecha Ancha
Opciones de grosor o peso
La terminología más común para designar las distintas opciones de peso es la inglesa. Las más 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
tenían una red muy importante de distribución
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 lletraClassificació bàsica
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
tenían una red muy importante de distribución
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
Clasificación de los tipos*
Humanistas o Venecianas Lineales Humanistas Garaldas o Antiguas Lineales Geométricas Transicionales Talladas o Incisas Didonas o Modernas Script Caligráficas Egipcias o Mecánicas Script Manuales Lineales Grotescas Decorativas Lineales Neo Grotescas Góticas
* De Maximilien Vox, adaptada por la ATypI (Asociación Tipográfica Internacional)
en el año 1962.
Presentan la influencia de la escritura humanista con plumilla ancha (inclinada a 30 grados).
La caja alta deriva de las capitales romanas.
Principales características
Barra inclinada en la “e” de caja baja.
Acentuada inclinación hacia la izquierda del eje de la letra.
Contraste pobre y gradual entre los trazos gruesos y finos.
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 pequeñas.
Clasificación de los tipos
Humanistas o Venecianas
Centaur MT
Clàssiques24
El nombre se forma por la combinación de Garamond y Aldus.
Siguen manteniendo la influencia de la escritura humanista con plumilla ancha.
Principales características
La barra transversal de la “e” de caja baja es recta.
Modulación inclinada menos acusada que las Humanistas.
Mayor contraste entre los trazos gruesos y finos 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 pequeñas.
Caja alta más corta que las ascendentes de caja baja.
Clasificación de los tipos
Garaldas o Antiguas (Old Face, Old Style)
Adobe Garamond
Clàssiques36
Reciben este nombre porque tienen caracteres que muestran la transición entre los romanos
antiguos (o Garaldas) y los romanos modernos (o Didonas).
Principales características
Eje de modulación casi vertical.
Aún mayor contraste entre los trazos gruesos y finos que las Garaldas.
El serif o remate de base es triangulado pero más fino.
El remate de las ascendentes de caja baja son ligeramente oblicuos tendiendo a horizontales.
Las contraformas interiores son un poco más abiertas.
Caja alta de la misma altura que las ascendentes de caja baja.
Clasificación de los tipos
Transicionales
Adobe Caslon
Clàssiques45
El nombre se forma por la combinación de Didot y Bodoni.
Estos tipos fueron posibles gracias a la mejora de las técnicas de impresión y de la calidad
del papel (s.XVIII)
Principales características
Eje de modulación vertical.
Contraste entre los trazos gruesos y finos 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.
Clasificación de los tipos
Didonas o Modernas
Bauer Bodoni
Clàssiques62
Se llaman mecánicas porque aparecen con la Revolución Industrial (s. XIX) y egipcias por el gusto por lo
egipcio que había en aquella época.
Principales características
Eje de modulación vertical.
El contraste entre los trazos gruesos y finos 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 prácticamente no desciende.
Clasificación de los tipos
Egipcias o Mecánicas
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 categoría. Se llaman grotescas –extrañas– porque
sorprendieron mucho en el momento de su aparición.
Principales características
Eje de modulación vertical.
Cierto contraste en los trazos curvos.
El final de los trazos curvos es oblicuo.
La “g” de caja baja está construida en dos niveles.
Clasificación de los tipos
Lineales Grotescas
Franklin Gothic
Aportacions del SXX88
Aportacions del SXX89
Basadas en las Grotescas pero rediseñadas con ajuste de las proporciones.
Acostumbran a ser familias con una serie muy amplia.
Principales características
Grosor de trazo casi uniforme.
Contraste menos marcado que en las Grotescas.
El final de los trazos curvos es normalmente recto.
La “g” de caja baja presenta el ojal abierto, es una cola.
Clasificación de los tipos
Lineales Neogrotescas
Helvetica
Aportacions del SXX116
Se llaman gerométricas porque están construidas a partir de formas geométricas simples
como el círculo y el rectángulo.
Principales características
Carecen de modulación y el grosor del trazo es constante.
El final 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.
Clasificación de los tipos
Lineales Geométricas
Futura
Aportacions del SXX98
Se llaman Humanistas porque sus raices retornan a las inscripciones romanas y también
a la escritura manual de caja baja de los humanistas del Renacimiento (S. XV y XVI).
Principales características
Los grosores de los trazos no son uniformes.
El final 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.
Clasificación de los tipos
Lineales Humanistas
Gill Sans
Optima
Aportacions del SXX109
AGRDESe llaman así porque en lugar de tener una base caligráfica, estos tipos sugieren más la letra
cincelada que la escrita, inspirándose con frecuencia en las inscripciones romanas.
Hay alfabetos diseñados sólo en caja alta.
Principales características
Tanto las cajas altas como las bajas tienen unas terminaciones más puntiagudas.
El final de los trazos presentan un ensanchamiento triangular.
Contraste poco acusado entre trazos.
Clasificación de los tipos
Talladas o incisas
Albertus
Quina lletra he de triar?16
Principales características
Los tipos script son tipos basados en los originales dibujados a mano. Dentro de este grupo
distinguimos las caligráficas que están inspiradas en la escritura manual caligráfica.
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 versión romana
o vertical.
Clasificación de los tipos
Script Caligráficas
Snell Roundhand
BurguesyVscript
Sudtipos proudly introduces
Principales características
Los script manuales son los tipos que están basados en originales dibujados a mano, bien sea con
pincel, lápiz u otros utensilios, pero que no representan ningún tipo de escritura.
Clasificación de los tipos
Script Manuales
Flood
Tekton
Principales características
Son tipos que se inspiran muchas veces en las artes decorativas. En ellos predominan las
formas caprichosas o particulares, y tienen una finalidad más decorativa que funcional.
Clasificación de los tipos
Decorativas
Cooper Black
Totally GhoticTotally
Altres tipus del SXX153
Altres tipus del SXX158
Altres tipus del SXX162
Principales características
Son tipos que se inspiran en la escritura gótica.
Clasificación de los tipos
Góticas
Duc de Berry
Cómo se crea una Tipografía DigitalO cómo introducirse al diseño de tipográfico mediante FontLab
UnosTiposDuros - Valencia - CampusParty 2010
Cómo se crea una tipografía Digital
Antes de dibujar: Efectos ópticos, las formas base
Cómo se crea una tipografía Digital
Antes de dibujar: Efectos ópticos, el espacio Gromenauer
Cómo se crea una tipografía Digital
Antes de dibujar: Efectos ópticos, horizontales y verticales, anchos desiguales
66 PX
66 PX
Cómo se crea una tipografía Digital
Antes de dibujar: Efectos ópticos, Tamaño de las verticales Vs curvas
Cómo se crea una tipografía Digital
Antes de dibujar: Efectos ópticos, un ejemplo práctico
Cómo se crea una tipografía Digital
Dibujando tipos: Intenta repetir siempre los mismos anchos
Ancho blanco interno curbas
Ancho blanco interno rectas
Ancho horizontalesredondeadas
Ancho unión astay horizontales
Ancho redondeadas
Ancho asta
Cómo se crea una tipografía Digital
Dibujando tipos: los módulos nos aportan coherencia
Asta
Blanco Interno
Hombro
Remates
Astaascen.
Astadescen.
Cómo se crea una tipografía Digital
Dibujando tipos: Como crear famílias tipográficas
El ancho de las astas y los blancos internos, son inversamente proporcionales
Cómo se crea una tipografía Digital
Dibujando tipos: Encuentra viejas tipografías olvidadas o crea las tuyas!
Cómo se crea una tipografía Digital
Las tipografías se miden con puntos
Configuración en Illustrator y FreeHand
Illustrator FreeHand
Cómo se crea una tipografía Digital
Sitúa los caracteres en las líneas maestras para definir la métrica
Líneas “Gromenauer”
1000PUNTOS
LÍNEA BASE
ALTURA X
ALTURA MAYÚSCULAS
SOBREDIMENSIÓN
DESCENDENTE
ASCENDENTE
Cómo se crea una tipografía Digital
Dibujado vectorial siguiendo los principios de la ortogonalidad
Bien
Cómo se crea una tipografía Digital
Mal
Calcúla la métrica de la fuente
1000PUNTOS
LÍNEA BASE
ALTURA X
ALTURA MAYÚSCULAS
SOBREDIMENSIÓN
DESCENDENTE
ASCENDENTE
Descendentes-256 puntos
Altura “x”348 puntos
Alturamayúsculas544 puntos
Ascendentes744
Cómo se crea una tipografía Digital
Programas de edición tipográfica
Fontlab Fontographer Glyphs
schriftgestaltung.defontlab.com
Cómo se crea una tipografía Digital
Codificación de la fuente:
Configuramos que conjun-to de caracteres contiene la fuente y el orden que apare-cen en la rejilla
Yo me siento cómodo con el “MacOS Roman”
Haz doble clic en la casilla de cualquier carácter
FontLab: Crear un archivo de fuente
File > New
Cómo se crea una tipografía Digital
Definiendo la métrica de la fuente en FontLab
File > Font Info > Metrics and Dimensions > Key dimensions
Cómo se crea una tipografía Digital
FontLab: las capas de la ventana de los carácteres
Cómo se crea una tipografía 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 tipografía, y el espaciado particular de cada carácter
Permite poner guías para alinear los caracteres con exactitud, las guías pueden ser específicas 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
Cómo se crea una tipografía Digital
Trasladar la métrica a FontLab
Dibujado, y copiado de las líneas maestras
Dibujar unas pequeñas líneas en cada una de las líneas maestras de la fuente, seleccionarlas todas y copiarlas
Truquillo!Haz la linea de la linea base un poco más ancha, te ayudará a no confundirte
1000PUNTOS
Cómo se crea una tipografía Digital
Copia y pega las guías 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 métrica en FontLab
Cómo se crea una tipografía Digital
Trasladar la métrica a FontLab
Selecciona la capa “Metrics” y ajusta las lineas maestras de FontLab
Cómo se crea una tipografía Digital
Trasladar la métrica a FontLab
Selecciona la capa “Guides” y coloca las lineas Gromenauer
Sitúa el cursor sobre las guías, accede al menú contextual y elige la opción “Convert to global”
Observareis que las líneas cambian de color azul a rojo
Arrastra desde las barras para crear las lineas
File > New
Cómo se crea una tipografía Digital
Pegar los trazados de Illustrator o Freehand
Pega el carácter en la capa “Outline” del carácter correspondiente
Si la contraforma aparece en negro, selecciónala con un doble clic, y elige en el menú contextual la opción “Reverse Contours”
Una vez pegado, arrástralo hasta que coincida con su po-sición con las lineas
maestras
Cómo se crea una tipografía Digital
Pega el resto de caracteres de la fuente
Cómo se crea una tipografía Digital
El espaciado
Window > New Metrics Window
Es tan importante un buen espaciado como el diseño de la tipo
Debemos estar en el modo de métrica par dar los valores
Nombre del carácterAnchura (en puntos)Prosa izquierdaProsa derecha
Cómo se crea una tipografía 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 minúsculas
Cómo se crea una tipografía Digital
El espaciado
Espaciando las minúsculas
2.Espaciamos la “o” dando los mismos valores en las pro-sas izquierda y de-recha
Recuerda igualar los blancos internos y los externos!
Cómo se crea una tipografía Digital
El espaciado
Espaciando las minúsculas
3Comprobamos que los dos caracteres combinados tienen buen ritmo, si es necesario, hay que refinar el espaciado
Cómo se crea una tipografía Digital
El espaciado
Vincular a las formas básicas al resto de caracterescon la misma métrica
20
35
34
ahov
cjqx
fmt
bipw
elsz
dkry
gnu
Ajuste manual del espaciado
Cómo se crea una tipografía Digital
El espaciado
Completar y refinar el espaciado colocando todos los caracteres entre dos “n”
Cómo se crea una tipografía Digital
El espaciado
Las mayúsculas: Repetir el proceso con las letras “H” y “O”
46
39 AHOV
CJQX
FMT
BIPW
ELSZ
DKRY
GNU
Ajuste manual del espaciado
Cómo se crea una tipografía Digital
El espaciado
Completar y refinar el espaciado colocando todos los caracteres entre dos “H”
Cómo se crea una tipografía Digital
El espaciado
Utiliza la “n” y la “H” para espaciar el resto de caracteres
Cómo se crea una tipografía Digital
Creación de los caracteres acentuados
Es bueno empezar rellenando las casillas madre de las tildes y acentos
Cómo se crea una tipografía Digital
Creación de los caracteres acentuados
Haz doble click encima de las casillas de los caracteres acentuados
Después abre la ven-tana del carácter, y ajusta la tilde o acento a la forma de la letra. Nunca al reves, ya que variaríamos la métrica heredada!
Cómo se crea una tipografía Digital
Los Pares de Kerning
Selecciona la opción de kerning en la ventana de “Metrics”
Ajusta el espaciado entre pares de letras
manualmente mediante el desplazador, o nu-
méricamente.
Cómo se crea una tipografía 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”
Cómo se crea una tipografía Digital
Las “Classes” para automatizar los pares de kerning
Arrastrar en este espacio el carácter 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
Cómo se crea una tipografía Digital
Las “Classes” para automatizar los pares de kerning
Arrastra el resto de caracteres asociados a la celda
Selección de kerning en la prosa izquierda
Caracteres asociados a la “Classe”
Ahora debemos ir creando las “Classes” hasta completar el proceso
Cómo se crea una tipografía Digital
Las “Classes” para automatizar los pares de kerning
Podemos mezclar mas de un carácter diferente, la forma es la que manda
Cómo se crea una tipografía Digital
Las “Classes” para automatizar los pares de kerning
La ventana de métrica antes de usar las “Classes” de kerning
Cómo se crea una tipografía Digital
Las “Classes” para automatizar los pares de kerning
Tools > Kerning Assistance
Pulsa el botón “Expand” para generar los nuevos pares de kerning
Cómo se crea una tipografía Digital
Las “Classes” para automatizar los pares de kerning
Selecciona esta configuración y dale al botón Expand
Cómo se crea una tipografía Digital
Las “Classes” para automatizar los pares de kerning
Resultados de la expansión de los pares de Kerning
Cómo se crea una tipografía 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
Cómo se crea una tipografía Digital
Configuración de la fuente antes de su exportación
File > Font Info
Avanza y retrocede por las pantallas de configuración
2 - Pulsa sobre el diamante, y con-fía en el para la configuración de la fuente.
Continua hacia adelante con la flecha dere-cha superior
1 - Rellena estas casillas con la si-guiente información de la fuente:
• Nombre de la fuente• Peso• Anchura• Estilo
Cómo se crea una tipografía Digital
Configuración de la fuente antes de su exportación
Sigue avanzando a golpes de “Diamante” en caso que los haya.
Que la fuerza te acompañe!
Cómo se crea una tipografía Digital
Creación de los archivos tipográficos
File > Generate Font
1 - Elige el formato de la fuente
2 - Genera, instala la fuente, y tésatela en un editor de texto
3 - Si algo no funcio-na, métete en este berenjenal
Cómo se crea una tipografía 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
Programación Open Type
Multiple Masters
Hinting...
Parece mucho pero eso solo es el principio
Cómo se crea una tipografía Digital
Learn Lontlab FastBy Leslie Cabargawww.logofontandlettering.com/
Manual oficial de FontLab
http://www.FontLab.com
Quieres profundizar mas sobre el programa...
Necesitaras un buen nivel de inglés!
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
