Conferencia de UTD en la Campus Party

Page 1


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 lletra La forma de la Lletra

V+H Traços Verticals i Horitzontals

V+I Traços Verticals i Inclinats

I Traços inclinats

H+I Traços Horitzontals i Inclinats

V+C Traços Verticals i Curvilinis

H+C Traços Horitzontals i Curvilinis

EFHILT

fijlt

MNKY

k

VWX

vwxy

ZA

z

BDGJPRU

abdghmnpqru

COQS

ceos


Coneixement de la lletra Parts de la lletra

cos

Mdpx

Alçada de l’Ascendent Alçada de la Majúscula

Alçada X / Ull Mig Linia Base Alçada del Descendent





Coneixement de la lletra Parts de la lletra

Asta Muntant

Asta Transversal

Serifa Peu Remat

Esper贸

Coll

Ganxo

Hombro

Terminal

Ascendent

Descendent

Ull interior

Ull inferior


Coneixement de la lletra Parts de la lletra

Vèrtex

Panxa

Braç

Travesser

Cua

Orella

Ungla

Llàgrima


Familia tipográfica

La familia tipográfica es una colección de fuentes con un diseño común. Una fuente es un conjunto completo de letras, números, signos de puntuación y símbolos. Una buena fuente de texto incluirá:

- 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...

" 1 0 $ ¾ ¶ µ5 9ecW

Fkdje o YecW

:ei fkdjei

Fkdje

Fkdjei Ikif[di_lei

7Zc_hWY_ d

?dj[hhe]Wdj[

# Ä Å =k_ d

=k_ d d

=k_ d c

ÈÉ ÆÇ ¼½ Q S q s 9ec_bbWi i_cfb[i

9ec_bbWi ZeXb[i =k_bbWc[ji FWh dj[i_i 9ehY^[j[i BbWl[i


Una fuente completa incluye...

7hheXW

6

FWh|]hW\e

:[h[Y^ei Z[ Wkjeh

I[YY_ d

H[]_ijhWZe

: bWh

CWhYW H[]_ijhWZW

B_XhW

=hWZei

O[d

©

;ifWY_e

;khe

Ï


Redondas

Se utiliza para describir los caracteres verticales o “rectos” diferentes de las cursivas. Es el estilo básico de las letras de caja baja.

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 información diversa (para notas, leyendas y citas). En el s.xix se empieza a utilizar para destacar palabras y frases extrangeras. La cursiva debe reflejar la fluidez de la escritura a mano, con los comienzos y finales de cada asta, brazo o cola curvándose desde el carácter anterior hacia el siguiente.

aen aen aen Redonda

Itálica auténtica

Itálica falsa inclinada manualmente en el ordenador


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:

fi

fiflΔß

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.

M mM mx Versalita Versalita falsa autĂŠntica Apreciable cambio de proporciones


La familia tipográfica

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áfica 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



Coneixement de la lletra Classificació bàsica Serifa

Aa

Los comienzos fueron en 1924 . A partir de 1928

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

Fue la empresa pionera en fabricar todo el proyector

actividad pero la reinician con fuerza en 1940,

completo. Durante la guerra Civil cesan en su

tenían una red muy importante de distribución

empiezan a fabricar proyectores de 35 m.m.sonoros. completo. Durante la guerra Civil cesan en su instalando sus aparatos en todas las provincias.Como

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

Pal Sec

Aa

Los comienzos fueron en 1924 . A partir de

Los comienzos fueron en 1924 . A partir de

1928 empiezan a fabricar proyectores de 35

m.m.sonoros. Fue la empresa pionera en

m.m.sonoros. Fue la empresa pionera en

la guerra Civil cesan en su actividad, pero

fabricar todo el proyector completo. Durante

sus aparatos en todas las provincias.Como

la guerra Civil cesan en su actividad, pero la reinician con fuerza en 1940,instalando sus aparatos en todas las provincias.Como

1928 empiezan a fabricar proyectores de 35 fabricar todo el proyector completo. Durante la reinician con fuerza en 1940,instalando






Clasificación de los tipos* Humanistas o Venecianas Garaldas o Antiguas Transicionales Didonas o Modernas Egipcias o Mecánicas Lineales Grotescas Lineales Neo Grotescas

Lineales Humanistas Lineales Geométricas Talladas o Incisas Script Caligráficas Script Manuales Decorativas Góticas

* De Maximilien Vox, adaptada por la ATypI (Asociación Tipográfica Internacional) en el año 1962.


Clasificación de los tipos

Humanistas o Venecianas

Centaur MT

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.


24

Clàssiques



Clasificación de los tipos

Garaldas o Antiguas (Old Face, Old Style)

Adobe Garamond

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.


36

Clàssiques



Clasificación de los tipos

Transicionales

Adobe Caslon

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.


45

Clàssiques



Clasificación de los tipos

Didonas o Modernas

Bauer Bodoni

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.


62

Clàssiques




Clasificación de los tipos

Egipcias o Mecánicas

Stymie

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

Lineales Grotescas

Franklin Gothic

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.




88

Aportacions del SXX


89

Aportacions del SXX


Clasificación de los tipos

Lineales Neogrotescas

Helvetica

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.


116

Aportacions del SXX



Clasificación de los tipos

Lineales Geométricas

Futura

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.


98

Aportacions del SXX


Clasificación de los tipos

Lineales Humanistas

Gill Sans

Optima

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.


109

Aportacions del SXX



Clasificación de los tipos

Talladas o incisas

AGRDE

Albertus

Se 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.



16

Quina lletra he de triar?


Clasificación de los tipos

Script Caligráficas

Snell Roundhand

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.


 Sudtipos proudly introduces

Burguesy Vscript


Clasificación de los tipos

Script Manuales

Flood

Tekton

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

Decorativas

Totally 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.

Cooper Black

Totally Ghotic


153

Altres tipus del SXX


158

Altres tipus del SXX


162

Altres tipus del SXX



Clasificaci贸n de los tipos

G贸ticas

Duc de Berry

Principales caracter铆sticas Son tipos que se inspiran en la escritura g贸tica.



Cómo se crea una Tipografía Digital O 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 redondeadas

Ancho asta Ancho horizontales redondeadas Ancho uni贸n asta y horizontales


C贸mo se crea una tipograf铆a Digital Dibujando tipos: los m贸dulos nos aportan coherencia

Asta ascen.

Asta

Remates

Asta descen.

Blanco Interno Hombro


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

ASCENDENTE

SOBREDIMENSIÓN ALTURA MAYÚSCULAS

ALTURA X 1000 PUNTOS

LÍNEA BASE

DESCENDENTE

Líneas “Gromenauer”


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 Calcúla la métrica de la fuente

ASCENDENTE

Ascendentes 744

SOBREDIMENSIÓN ALTURA MAYÚSCULAS

Altura mayúsculas 544 puntos

ALTURA X Altura “x” 348 puntos

1000 PUNTOS

LÍNEA BASE Descendentes -256 puntos

DESCENDENTE


C贸mo se crea una tipograf铆a Digital Programas de edici贸n tipogr谩fica

Fontlab fontlab.com

Fontographer

Glyphs schriftgestaltung.de


Cómo se crea una tipografía Digital FontLab: Crear un archivo de fuente File > New

Codificación de la fuente: Configuramos que conjunto de caracteres contiene la fuente y el orden que aparecen en la rejilla Yo me siento cómodo con el “MacOS Roman”

Haz doble clic en la casilla de cualquier carácter


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 FontLab: la paleta “Editing Layers” Window > Panels > Editing Layers

Outline Es la capa principal, donde ira el dibujo de los caracteres

Metrics En esta capa definimos las lineas maestras globales de la tipografía, y el espaciado particular de cada carácter

Guides Permite poner guías para alinear los caracteres con exactitud, las guías pueden ser específicas de cada glifo o globales para todos

Mask Funciona a modo de papel cebolla, los trazados de esta capa no son visibles, pero sirven para calcar en la capa “Outline”


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

1000 PUNTOS

Truquillo! Haz la linea de la linea base un poco más ancha, te ayudará a no confundirte


Cómo se crea una tipografía Digital Comprovar la métrica en FontLab Copia y pega las guías maestras en la capa “Mask”

Selecciona la capa “Mask” y pega las lineas maestras.

Ajusta tu linea base con la linea base de 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 posició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 Debemos estar en el modo de métrica par dar los valores

Nombre del carácter Anchura (en puntos) Prosa izquierda Prosa derecha

Es tan importante un buen espaciado como el diseño de la tipo


Cómo se crea una tipografía Digital El espaciado Espaciando las minúsculas 1. Espaciamos la “n” teniendo en cuenta que la prosa derecha será algo inferior a la izquierda ya que la primera tiene mas blanco en el “arco”


Cómo se crea una tipografía Digital El espaciado Espaciando las minúsculas 2. Espaciamos la “o” dando los mismos valores en las prosas izquierda y derecha Recuerda igualar los blancos internos y los externos!


Cómo se crea una tipografía Digital El espaciado Espaciando las minúsculas 3 Comprobamos 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 caracteres con la misma métrica

20

35

34

a h o v

b i p w

c j q x

d k r y

e f g l m n s t u z

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”

39

46

A H O V

B I P W

C J Q X

D K R Y

E F G L M N S T U Z

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 ventana 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 numé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” debemos 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

1 - Rellena estas casillas con la siguiente información de la fuente: • • • •

Nombre de la fuente Peso Anchura Estilo

2 - Pulsa sobre el diamante, y confía en el para la configuración de la fuente. Continua hacia adelante con la flecha derecha superior


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

3 - Si algo no funciona, métete en este berenjenal

1 - Elige el formato de la fuente

2 - Genera, instala la fuente, y tésatela en un editor de texto


C贸mo se crea una tipograf铆a Digital Parece mucho pero eso solo es el principio FontLab es un programa realmente 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...


Cómo se crea una tipografía Digital Quieres profundizar mas sobre el programa... Necesitaras un buen nivel de inglés!

Learn Lontlab Fast By Leslie Cabarga

Manual oficial de FontLab

www.logofontandlettering.com/

http://www.FontLab.com



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



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.