Você está na página 1de 70

Cmo se crea una Tipografa Digital

O cmo introducirse al diseo tipogrfico mediante FontLab


www.unostiposduros.com
Cmo se crea una tipografa Digital

Antes de dibujar: Efectos pticos, las formas base

2
Cmo se crea una tipografa Digital

Antes de dibujar: Efectos pticos, el espacio Gromenauer

3
Cmo se crea una tipografa Digital

Antes de dibujar: Efectos pticos, horizontales y verticales, anchos desiguales

66 PX

66 PX

4
Cmo se crea una tipografa Digital

Antes de dibujar: Efectos pticos, Tamao de las verticales Vs curvas

5
Cmo se crea una tipografa Digital

Antes de dibujar: Efectos pticos, un ejemplo prctico

6
Cmo se crea una tipografa Digital

Dibujando tipos: Intenta repetir siempre los mismos anchos

Ancho blanco
interno curvas

Ancho blanco
interno rectas

Ancho redondeadas

Ancho asta

Ancho horizontales
redondeadas

Ancho unin asta


y horizontales

7
Cmo se crea una tipografa Digital

Dibujando tipos: los mdulos nos aportan coherencia

Asta
ascen.

Asta Remates

Asta
descen.

Blanco
Interno

Hombro

8
Cmo se crea una tipografa Digital

Dibujando tipos: Como crear familias tipogrficas


El ancho de las astas y los blancos internos, son inversamente proporcionales

9
Cmo se crea una tipografa Digital
Dibujando tipos: Encuentra viejas tipografas olvidadas o crea las tuyas!

10
Cmo se crea una tipografa Digital

Las tipografas se miden con puntos


Configuracin en Illustrator y FreeHand

Illustrator FreeHand

11
Cmo se crea una tipografa Digital

Sita los caracteres en las lneas maestras para definir la mtrica

ASCENDENTE

SOBREDIMENSIN

ALTURA MAYSCULAS

ALTURA X

1000
PUNTOS

LNEA BASE

DESCENDENTE

Lneas Gromenauer

12
Cmo se crea una tipografa Digital

Dibujo vectorial siguiendo los principios de la ortogonalidad

Bien Mal

13
Cmo se crea una tipografa Digital

Calcula la mtrica de la fuente

ASCENDENTE
Ascendentes
744

SOBREDIMENSIN

ALTURA MAYSCULAS
Altura
maysculas
544 puntos

ALTURA X
Altura x
348 puntos 1000
PUNTOS

LNEA BASE
Descendentes
-256 puntos

DESCENDENTE

14
Cmo se crea una tipografa Digital

Programas de edicin tipogrfica

Fontlab Fontographer Glyphs


fontlab.com schriftgestaltung.de

15
Cmo se crea una tipografa Digital

FontLab: Crear un archivo de fuente

File > New

Codificacin de la fuente:
Configuramos que conjunto de
caracteres contiene la fuente
y el orden que aparecen en la
rejilla
Yo me siento cmodo con el
MacOS Roman

Haz doble clic


en la casilla
de cualquier
carcter

16
Cmo se crea una tipografa Digital

FontLab: las capas de la ventana de los caracteres

17
Cmo se crea una tipografa Digital

FontLab: la paleta Editing Layers

Window > Panels > Editing Layers

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

Metrics
En esta capa definimos las lneas maestras globales de la tipografa, y
el espaciado particular de cada carcter

Guides
Permite poner guas para alnear los caracteres con exactitud, las guas
pueden ser especficas 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

18
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

1000
PUNTOS

Truco!
Haz la lnea de la lnea base un poco ms
ancha, te ayudar a no confundirte

19
Cmo se crea una tipografa Digital

Comprobar la mtrica en FontLab

Copia y pega las guas maestras en la capa Mask

1. Selecciona la capa
Mask y pega las
lneas maestras.

2. Ajusta tu lnea
base con la lnea
base de FontLab

20
Cmo se crea una tipografa Digital

Trasladar la mtrica a FontLab


Selecciona la capa Metrics y ajusta las lneas maestras de FontLab

21
Cmo se crea una tipografa Digital

Trasladar la mtrica a FontLab


Selecciona la capa Guides y coloca las lneas 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 lneas

22
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
posicin con las
lneas maestras

23
Cmo se crea una tipografa Digital

Trasladar la mtrica a FontLab


Comprobamos que coincide la mtrica en:
File > Font Info > Metrics and dimensions > Key dimensions

24
Cmo se crea una tipografa Digital

Trasladar la mtrica a FontLab


Configurando los espacios Gromenauer: File > Font Info > Hinting Settings
Configuracin para un
espacio Gromenauer de 11 puntos

Crea, elimina y varia los


valores de los espacios

Visualiza la posicin de los


espacios Gromenauer en:
View > Show layers > Alignament Zones

25
Cmo se crea una tipografa Digital

Pega el resto de caracteres de la fuente

26
Cmo se crea una tipografa Digital

El espaciado
Window > New Metrics Window

Debemos estar en
el modo de mtrica
para dar los valores

Nombre del carcter


Anchura (en puntos)
Prosa izquierda
Prosa derecha

Es tan importante
un buen espaciado
como el diseo de la
tipo

27
Cmo se crea una tipografa Digital

El espaciado
Espaciando las minsculas

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

28
Cmo se crea una tipografa Digital

El espaciado

Espaciando las minsculas

2.
Espaciamos la o
dando los mismos
valores en las prosas
izquierda y derecha

Recuerda igualar los


blancos internos y
los externos!

29
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

30
Cmo se crea una tipografa Digital

El espaciado

Vincular a las formas bsicas al resto de caracteres


con la misma mtrica

20 a b c d e f g
h i j k l m n
o p q r s t u
35

34
v w x y z Ajuste manual
del espaciado

31
Cmo se crea una tipografa Digital
El espaciado

Completar y refinar el espaciado colocando todos los


caracteres entre dos n

32
Cmo se crea una tipografa Digital

El espaciado
Las maysculas: Repetir el proceso con las letras H y O

39
A B C D E F G
46 H I J K L M N
O P Q R S T U
V W X Y Z Ajuste manual
del espaciado

33
Cmo se crea una tipografa Digital

El espaciado
Completar y refinar el espaciado colocando
todos los caracteres entre dos H

34
Cmo se crea una tipografa Digital

El espaciado
Utiliza la n y la H para espaciar el resto de caracteres

35
Cmo se crea una tipografa Digital

Creacin de los caracteres acentuados


Es bueno empezar rellenando las casillas madre de las tildes y acentos

36
Cmo se crea una tipografa Digital

Creacin de los caracteres acentuados

Haz doble clic encima de las Despus abre la ventana


del carcter, y ajusta la
casillas de los caracteres
tilde o acento a la forma
acentuados de la letra. Nunca al
reves, ya que variaramos
la mtrica heredada!

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

38
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
debemos escribir _A:
y darle a Accept

39
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

40
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

41
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

42
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

43
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

44
Cmo se crea una tipografa Digital

Las Classes para automatizar los pares de kerning

Selecciona esta configuracin y


dale al botn Expand

45
Cmo se crea una tipografa Digital

Las Classes para automatizar los pares de kerning


Resultados de la expansin de los pares de Kerning

46
Cmo se crea una tipografa Digital

Programacin en OpenType
El refinamiento tipogrfico por excelencia

47
Cmo se crea una tipografa Digital

Programacin en OpenType, cmo crearla


Cada funcionalidad tiene un sufijo asignado

Ms informacin en este bonito manual (en ingls) > www.adobe.com/type/browser/pdfs/OTGuide.pdf 48


Cmo se crea una tipografa Digital

Programacin en OpenType, cmo crearla


Paso 1: Aadir nuevos caracteres a la fuente

1. Seleccionamos en el men:
Glyphs > Generate Glyphs

2. Introducimos la lista de nuevos caracteres


separados entre ellos por un espacio o una
coma.
En este caso aadimos la extensin .sc
para identificarlas como versalitas.
Por ejemplo el carcter a terminara
llamndose a.sc

3. Dale al Botn OK para generar las nuevas


casillas de los caracteres

49
Cmo se crea una tipografa Digital

Programacin en OpenType, cmo crearla


Paso 1: Aadir nuevos caracteres a la fuente

Se han generado los nuevos caracteres.

Ahora solo hay que substituir las formas


heredaras de los caracteres de caja baja, por
nuestras versalitas.

Recuerda que llegado a este punto, se debe


espaciar correctamente los nuevos caracteres y
posteriormente afrontar los pares de kerning

Repetimos el proceso para los nuevos caracteres


de las funcionalidades que deseemos aadir

50
Cmo se crea una tipografa Digital

Programacin en OpenType, cmo crearla


Paso 2: Programando la sustitucin de caracteres

2. Sustituye el valor xxxx 3. Aade las lneas que


por el sufijo de la sean necesarias con los
funcionalidad OpenType, caracteres originales y los
en este caso smpc que los sustituyen
correspondiente a
las versalitas

Nombre del Nombre del


carcter carcter a
original sustituir

1. Dale al botn de
ms para crear una
nueva funcionalidad

51
Cmo se crea una tipografa Digital

Programacin en OpenType, cmo crearla


Paso 3: Previsualizacin de los Resultados

1. Dale al botn de compilar

Si hay algn error de programacin,


se abrir la paleta Ouput
indicando su origen
2. Dale al botn de open
sample panel para abrir
el previsualizador de
resultados

52
Cmo se crea una tipografa Digital

Programacin en OpenType, cmo crearla


Paso 3: Previsualizacin de los Resultados

2. Escribe el texto de origen

1. Selecciona
el sufijo de la
funcionalidad a
previsualizar

3. Visualiza el
origen y el
resultado final de
la funcionalidad
OpenType

53
Cmo se crea una tipografa Digital

Programacin en OpenType, cmo crearla

En esta casilla nos aparece el


resultado final de los caracteres
resultantes, podemos seleccionarlos
y copiarlos para previsualizarlos en
la ventana de mtrica.

MUY TIL para trabajar los pares de


kerning de los nuevos caracteres

54
Cmo se crea una tipografa Digital

Interpolacin de fuentes
Cmo crear rpidamente tipografas a partir de los pesos extremos

Es MUY importante que los caracteres de los extremos


tengan el mismo nmero de nodos y el mismo tipo de
manejadores (curva, vrtice, etc..)

Light Pesos intermedios Black

55
Cmo se crea una tipografa Digital

Interpolacin de fuentes
Primer paso: Abrimos en Fontlab las 2 fuentes con los pesos extremos

Light Black
>> <<

56
Cmo se crea una tipografa Digital

Interpolacin de fuentes
Paso 2: ir al men principal y elegir; Tools > Blend Fonts

Selecciona la fuente Light

Selecciona la fuente Black

Elegimos la opcin Multiple


Master

Esta opcin aade nodos a los


caracteres con un nmero
diferente de nodos o con
manejadores con configuracin Le damos al OK
diferente. para generar el archivo

57
Cmo se crea una tipografa Digital

Interpolacin de fuentes
Paso 3: Fontlab nos crea un archivo con la informacin de las 2 fuentes

Los caracteres que no


estn marcados de color
verde no son compatibles
entre ellos, REVISA que
el numero de nodos y la
Los carcteres marcados configuracin de los
con el color verde manejadores sea igual
son compatibles entre
ellos en el nmero de
nodos y configuracin de
los manejadores

Guarda el nuevo
archivo si todo va bien

58
Cmo se crea una tipografa Digital

Interpolacin de fuentes
Paso 4: Previsualzar los resultados antes de generar los pesos

1. Elige el
icono de la
mano en la
ventana de
mtrica
2. Abre la ventana Axsis en:
> Window > Panels > Axis

3. Previsualiza
los resultados

59
Cmo se crea una tipografa Digital

Interpolacin de fuentes
Paso 5: generando pesos; Tools > Multiple Master > Generate instance

Los valores inferiores a 0 y


Varia el valor de la superiores a 1000, nos
interpolacin para permiten adelgazar o
modificar el peso de la engordar nuestras fuentes,
pero precisan una REVISIN
fuente y dale al botn OK PROFUNDA de los trazados
generados

Los valores entre o y 1000


nos permiten crear nuevos
pesos con formas fiables

El valor 0 corresponde El valor 1000 corresponde


al master de la Light al master de la Black 60
Cmo se crea una tipografa Digital

El Universo Multiple Master


Cmo trabajar en el

1 2 3
Light Black 1 Regular Condensed
condensed condensed
2 Demibold Condensed

3 Bold Condensed

4 Regular Light

5 Regular
4 5 6 7 8
Regular 6 Demibold

7 Bold

8 Black

9 Regular Extended

9 10 11 10 Demibold Extended
Light Black
Extended Extended 11 Bold Extended
Regular Demibold Bold

61
Cmo se crea una tipografa Digital

El Universo Multiple Master


Como acceder, y modificar los carcteres de los masters

1. Abre la ventana Axis en:


> Window > Panels > Masters

Estos son los nombres de nuestros masters.


El Wt0 pertenece a la versin Light
El Wt1 pertenece a la versin Black

La lnea de color
Con los botones de seleccin nica, elegimos el
negro, pertenece
master dnde queremos modificar lo siguiente:
al master que esta
seleccionado, > Dibujo de los Trazados
en este caso la > Espaciado o mtrica de los caracteres
Light > Pares de Kerning

Las casillas de seleccin mltiple, nos permiten


visualizar las formas de los diversos Masters

62
Cmo se crea una tipografa Digital

El Universo Multiple Master


Consideraciones a tener en cuenta antes de interpolar fuentes

1 - Deben estar perfectamente espaciadas

2 - Deben incluir todos los pares de kerning

Master A Pesos intermedios Master B

Las fuentes resultantes heredan la mtrica y la


media de los pares de kerning de las de
los extremos

63
Cmo se crea una tipografa Digital

Optimizando los trazados de la fuente antes de su exportacin


( Edit > Slect All ) Selecciona todos los caracteres de la rejilla y...

1 - Glyph > Decompose


2 - Contour > Transform > Merge contours
3 - Contour > Close Open Contours
4 - Contour > Correct connections
5 - Contour > Paths > Set PS Direction
6 - Tools > Hint & guides > Autohinting

64
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

1 - Rellena estas casillas con la


siguiente informacin de la fuente:

Nombre de la fuente
Peso
Anchura
Estilo

2 - Pulsa sobre el diamante, y confa


en el para la configuracin de la
fuente cuando tengas dudas.

Continua hacia adelante con la flecha derecha


superior

65
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!

66
Cmo se crea una tipografa Digital

Creacin de los archivos tipogrficos


File > Generate Font

3 - Si algo no funciona,
mtete en este
berenjenal

2 - Genera, instala la
fuente, y testala en
1 - Elige el formato de la fuente un editor de texto

67
Cmo se crea una tipografa 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
Macros
Programacin
avanzada en OpenType
Hinting...

68
Cmo se crea una tipografa Digital

Quieres profundizar mas sobre el programa...

Necesitaras un buen nivel de ingls!

Learn Lontlab Fast Manual oficial de FontLab


By Leslie Cabarga
www.logofontandlettering.com/ http://www.FontLab.com

69
Cmo se crea una tipografa Digital

FIN
www.unostiposduros.com

70