Curso de Diseño Gráfico
CLASE 9
Temas
Tipografía
CLASE 9
Indice
ASPECTO HISTÓRICO.....................................................................................1
Conceptos..................................................................................................2
Desarrollo histórico de la escritura.............................................................2
Estructura de la letra..................................................................................2
Partes de una letra.....................................................................................3
Clasificación tipográfica..............................................................................4
Variables visuales.......................................................................................6
Fuentes y familias tipográficas...................................................................9
Medidas tipográficas.................................................................................10
Tipografía en Illustrator..............................................................................19
CLASE 9
ASPECTO HISTÓRICO
Trataremos de comprender a la tipografía no sólo como uno de los elementos más signifi-
cativos de la gráfica, sino como una de las primitivas necesidades del hombre: entender,
hacerse entender y perdurar más allá de los tiempos.
La tipografía es el fiel reflejo de una épo-
ca. Por ello la evolución del diseño de las
mismas responde a proyecciones tecno-
lógicas y artísticas. El signo tipográfico
ha sido miembro activo de los cambios
culturales del hombre.
La temprana asociación entre las letras y
la forma humana y sus movimientos ha
ejercido cierta influencia en el pensa-
miento creativo.
Estas similitudes estructurales, que
tienen su origen en las leyes de la natu-
raleza, liberan a las letras de su bidimen-
sionalidad y las pone en movimiento
haciéndolas participar activamente den-
tro de la composición.
Desde sus orígenes los caracteres han
sufrido una constante transformación,
de lo antiguo a lo moderno, de lo sobrio a
lo exagerado, de lo orgánico a lo sinté-
tico. Durante este proceso han recibido
infinidad de aportaciones, muchas veces
dependiendo del contexto histórico, polí-
tico, económico y social del que forma-
ban parte.
Es gracias a estas características que
podemos clasificar las diferentes tipo-
grafías.
Curso de Diseño Gráfico 1
CLASE 9
Conceptos
Letra: signo; representación gráfica del lenguaje hablado. Evolución de la escritura.
Tipografía: es el arte de diseñar letras y componer texto de tal modo que puedan leerse
de un modo fácil, eficaz y agradable.
Es el estudio de la letra, a partir de la definición del tipo móvil de impresión.
Es el análisis de la letra (forma y tipo de impresión).
La tipografía es el conjunto de características visuales de las letras y números de un
texto, tales como su diseño, su forma y su tamaño.
Desarrollo histórico de la escritura
Medio por el que se ha valido el hombre para comunicar sus ideas y retenerlas en forma
un tanto permanente.
Esquema de síntesis:
DESARROLLO DE LA ESCRITURA
PICTOGRAMAS
MUTACIÓN A UNA FORMA ALFABÉTICA
VARIACIONES DEL ALFABETO
Estructura de la letra
Es esa señal o marca que se imprime, transfiere, pinta o esculpe y viene a ser la unidad
fundamental del lenguaje escrito, que en tipografía es una unidad portadora de una
forma y estilo singular.
Los caracteres pueden presentarse en: Capitales, minúsculas, números, Versalitas,
Ligaduras, Símbolos.
Cada uno de ellos con sus formas bien definidas, permiten asociarlos a una fuente o a
una familia y éstas a su vez clasificarlas dentro de esa gran magnitud de formas.
2 Curso de Diseño Gráfico
CLASE 9
Partes de una letra
No existe una nomenclatura específica para designar las partes de una letra. Estos
son los términos más actuales y más comunes, pero existen también otros que de-
penden del tipo o que bien pueden definirse a sí mismos.
Asta: Rasgo principal de la letra que la define como su forma o parte más esencial.
Astas montantes: Son las astas principales u oblicuas de una letra, tales como la “L,B,V”
Anillo: Es el asta curva cerrada que forman las letras “b, p y o”
Brazo: Parte terminal que se proyecta horizontalmente o hacia arriba y que no se
encuentra incluida dentro del carácter, tal como ocurre en las letras “E, K o L”
Cola: Asta oblícua colgante en dirección descendente que forman algunas letras como la
“R o K”.
Ascendente: Asta que contiene la letra de caja baja y que sobresale por encima de la
altura de caja baja, las letras tales como: “b, d y k”.
Descendente: Asta de la letra de caja baja que se encuentra por debajo de la línea base,
como ocurre con la letra “p” o “g”
Línea base: línea sobre la que se apoya la altura.
Oreja: Es la terminación o terminal que se añade a algunas letras como “g” o “r”
Ojo: El espacio en blanco que queda en el interior de las letras.
Rebaba: El espacio entre el carácter y el borde del mismo.
Serif, trazo terminal, remate o gracia: trazo de remate de un asta, brazo o cola.
Curso de Diseño Gráfico 3
CLASE 9
Las letras tienen una pauta, la cual se desarrolla entre 4 lineas:
1. Línea superior de letras de rasgo ascendentes.
2. Línea superior de altura X.
3. Línea inferior de altura X.
4. Línea inferior de letras de rasgo descendentes.
Lla distancia que existe entre la primera línea y la última línea se llama cuerpo del tipo.
Clasificación tipográfica
Hay cinco elementos que nos sirven para clasificar a 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:
ŸTipografías con serif
ŸTipografías sans serif o de palo seco
4 Curso de Diseño Gráfico
CLASE 9
El patin serif, gracia o remate, es un trazo muy importante en la definición de los
diferentes estilos, ha evolucionado formalmente de una época a otra y constituye un
elemento muy importante en la legibilidad y grado de lectura de la letra.
Tipos de patines: 1 2
1. Mixtiforme
2. Filiforme 3 4
3. Rectiforme
4. Cuadrangular
Colas, ápices o puntas
• Gota
• Botón
• Bandera
• Pico o gancho (ápice)
Las tipografías serif se clasifican en:
ŸRomanas Antiguas
ŸRomanas de Transición
ŸRomanas Modernas
ŸEgipcias
Curso de Diseño Gráfico 5
CLASE 9
Variables visuales
Amplitud. (hace referencia a la
extensión de la letra).
Los caracteres pueden modificar su
forma normal estrechándose o alar-
gándose, obteniéndose letras ex-
tracondensadas, condensadas,
normales, extendidas y extraexten-
didas.
6 Curso de Diseño Gráfico
CLASE 9
Forma: relativo a la estructura
Los caracteres delimitan con sus perfiles una superficie bien precisa; la imagen de
las letras nace en efecto de la equilibrada relación entre "blancos" y "negros", esto
es, de la exacta definición tanto de la forma cuanto de la contraforma o superficie
de fondo.
En cada alfabeto, la letra O, la L y la V son las letras determinantes: su contorno
encierra por cierto los tres espacios fundamentales sobre los cuales se estructuran
todos los otros signos. Las tres superficies simples son, respectivamente, las del
círculo, del cuadrado y del triángulo.
Tamaño: definido por altura / cuerpo
El cuerpo es una medida que define la proporción del caracter. Cuando decimos
cuerpo 10 nos referimos a 10 puntos.
El cuerpo se mide en puntos tipográficos si está referido a los caracteres movibles
tradicionales, en este caso la dimensión relevada es aquella vertical del entero
bloquecito tipográfico (caracter + espalda superior e inferior).
Curso de Diseño Gráfico 7
CLASE 9
El uso de la fotocomposición y de la computadora, brindando la posibilidad de variar las
dimensiones de las letras, ha sustituido las medidas en puntos tipográficos por aquellas
en milímetros; en este caso la dimensión considerada es la de la altura de la mayúscula.
Tono: modifica grosor de bastón Una letra normal tiene el grosor de los rasgos principales
igual al 15% de la medida de su altura.
Las letras pueden cambiar su valor de intensidad afinando el espesor, volviéndose con
ello más claras, o espesándolo para aumentar el negro pleno y "hacer más mancha" Se
reconocen varias variables de intensidad (depende si la familia tipográfica soporta las
mismas), estas van desde light, medium, bold y black.
Las letras pueden cambiar su valor de intensidad afinando el espesor, volviéndose con
ello más claras (delgadas) o más espesas (gruesas), obteniéndose letras ultra light, light,
normal, semi bold, bold, extrabold.
8 Curso de Diseño Gráfico
CLASE 9
Inclinación: (hace referencia a la inclinación de los ejes de la letra).
Las letras pueden ser derechas (redondas) o inclinadas11 (cursivas).
Fuentes y familias tipográficas
Los términos tipografía y fuentes a menudo se confunden como sinónimos; sin embargo,
la tipografía es el diseño de caracteres unificados por propiedades visuales uniformes,
mientras que la fuente es el juego completo de caracteres en cualquier diseño, cuerpo y
estilo; estos caracteres incluyen letras en caja alta y baja, numerales, versalitas, fraccio-
nes, ligaduras, símbolos y grafismos, entre otros.
En iguales circunstancias familia y fuente tipográfica son mencionados como un mismo
término, sin embargo una familia tipográfica es un grupo de tipografías unidas por
características similares. Los caracteres de una familia se parecen entre sí, pero también
tienen rasgos propios. Las tipografías de cada familia tienen distintos grosores y anchos.
Fuente tipográfica es la que se define como estilo o apariencia de un grupo completo de
caracteres, números y signos, regidos por unas características comunes.
Familia tipográfica significa un conjunto de tipos basado en una misma fuente, con
algunas variaciones, como por ej. en el grosor y anchura, pero manteniendo caracterís-
ticas comunes. Los miembros que integran una familia se parecen entre sí pero tienen
rasgos propios.
Curso de Diseño Gráfico 9
CLASE 9
Medidas tipográficas
Letra: Signo; representación gráfica del lenguaje hablado. Se mide en puntos.
Tamaño de la letra: Se le denomina cuerpo, se mide en puntos y va desde la alineación
superior a la alineación inferior. Esto es tomando la ascendente y la descendente.
Línea: Conjunto de palabras acomodadas una después de la otra en forma horizontal.
Interlínea: Espacio entre una línea y otra, y se mide en puntos a partir de la descendente
de una línea a la ascendente de la siguiente línea.
Profundidad: (longitud de línea), es el número de líneas de una columna. Se puede medir
en picas o puntos, según el número de líneas y la fuerza del tipo (por ej. si se tienen 30
línea de 10/12, son 360 pt. O 30 picas).
Justificación: Ancho de una columna tipográfica que delimita el largo de una línea, y se
mide en picas.
10 Curso de Diseño Gráfico
CLASE 9
Referente a la disposición horizontal del texto, sin importar el tamaño de las líneas, la
forma de alinear éste puede ser: alineado o justificado, a la derecha, a la izquierda,
centrado.
Referente a la disposición horizontal Referente a la disposición horizontal
del texto, sin importar el tamaño de las del texto, sin importar el tamaño de las
líneas, la forma de alinear éste puede líneas, la forma de alinear éste puede
ser: alineado o justificado, a la ser: alineado o justificado, a la
derecha, a la izquierda, en bloque, derecha, a la izquierda, en bloque,
centrado o en piña e irregular. centrado o en piña e irregular.
Izquierda Derecha
Referente a la disposición horizontal Referente a la disposición horizontal del
del texto, sin importar el tamaño de las texto, sin importar el tamaño de las
líneas, la forma de alinear éste puede líneas, la forma de alinear éste puede
ser: alineado o justificado, a la ser: alineado o justificado, a la derecha, a
derecha, a la izquierda, en bloque, la izquierda, en bloque, centrado o en
centrado o en piña e irregular. piña e irregular.
Centro Justificado
Curso de Diseño Gráfico 11
CLASE 9
El tracking afecta al espaciado entre letras o palabras y se utiliza para alterar la densidad
visual del texto, actuando globalmente sobre toda la tipografía. Como regla general,
cuanto más grande sea el cuerpo más apretado deberá ser el track. Un set uniforme nos
proporcionará un color homogéneo del texto y una mayor legibilidad.
palabra palabra
Este es un ejemplo de poco Este es un ejemplo de MUCHO
tracking en un párrafo. tracking en un párrafo.
El kerning es similar al tracking sólo que se aplica a determinados pares de caracteres
para mejorar su legibilidad. Tanto el track como el kern se miden en unidades relativas al
tamaño en puntos de los caracteres.
La separación se produce principalmente por la forma de las letras provocando que se
quede demasiado espacio entre una letra y otra. Generalmente la separación debe ser
óptica y no mecánica.
TA TA
Páginas web relativas a la Tipografía
[Link]
[Link]
[Link]
[Link]
[Link]
12 Curso de Diseño Gráfico
CLASE 9
EJEMPLOS DE DISEÑO CON TIPOGRAFÍAS
La tipografía como forma
Curso de Diseño Gráfico 13
CLASE 9
14 Curso de Diseño Gráfico
CLASE 9
EJERCICIO: realizar 3 figuras distintas con letras.
Curso de Diseño Gráfico 15
CLASE 9
EJEMPLOS DE POSTERS SOLO CON TIPOGRAFIA
16 Curso de Diseño Gráfico
CLASE 9
Curso de Diseño Gráfico 17
CLASE 9
EJERCICIO: realizar 1 poster con tipografía como protagonista
sobre un grupo de música a elección y otro poster sobre una
película a elección.
BIBLIOGRAFÍA
Ruary McLean, “Manual de tipografía”.
Adrian Frutiger, “Type and Sign Symbol”.
David Brier, “Great Type and Lettering Designs”.
Revista TipoGráfica.
Revista MacInArea.
Revista Upper & Lower Case.
R. Carter, D. Ben, Ph. Meggs, “Typographic Design: Form and Comunication”.
Jorge Frascara, “Diseño Gráfico y Comunicación”.
18 Curso de Diseño Gráfico
CLASE 9
Tipografía en Illustrator
Las funciones de texto son uno de los aspectos más importantes de Adobe Illustrator.
Se pueden añadir una sola línea de texto a la ilustración, crear columnas y filas de texto,
hacer que el texto adopte una forma o siga un trazado, y trabajar con formas de letras
como si fuesen objetos gráficos.
Las fuentes y los ajustes disponibles en Illustrator para interlineado, kerning y espaciado
antes y después de los párrafos son algunas de las opciones con las que cuenta para
modificar el aspecto del texto de la ilustración.
Con la primera opción, si se hace click en la hoja, se puede escribir texto de corrido.
Si se hace click, se mantiene apretado y se arrastra, se hace una caja de texto.
Curso de Diseño Gráfico 19
CLASE 9
Para hacer cajas de texto con formas, realizar primero el objeto, luego seleccionar la
segunda herramienta de texto, acercarse al borde de la figura y hacer click.
20 Curso de Diseño Gráfico
CLASE 9
Para realizar texto en una forma específica, dibujar primero la línea (con cualquier opción
de Illustrator) y seleccionar la tercera herramienta de texto y hacer click sobre el dibujo.
Para texto vertical seleccionar la cuarta herramienta:
Para un área de texto vertical:
Para rodear una figura en forma vertical:
Curso de Diseño Gráfico 21
CLASE 9
Información general del panel Carácter
Ventana > Texto > Carácter
Panel Carácter
A. Fuente
B. Estilo de fuente
C. Tamaño de fuente
D. Kerning
E. Escala horizontal
F. Desplazamiento vertical
G. Interlineado
H. Tracking
I. Escala vertical
J. Rotación de caracteres
K. Idioma
A. Fuente B. Estilo de fuente C. Tamaño de fuente D. Alineación a la izquierda
E. Alineación al centro F. Alineación a la derecha
Panel Párrafo (para cambiar alineación)
A. Alineación y justificación
B. Sangría izquierda
C. Sangría izquierda en primera línea
D. Espacio antes del párrafo
E. Separación de sílabas
F. Sangría derecha
G. Espacio después del párrafo
20 Curso de Diseño Gráfico
CLASE 9
Convertir texto en contornos
Se puede convertir texto en un conjunto de trazados compuestos, o contornos, que se
pueden editar y manipular al igual que cualquier otro objeto gráfico.
El texto como contorno resulta de utilidad a la hora de cambiar la apariencia de un texto
grande en pantalla, pero raramente lo son para el cuerpo u otro texto de tamaño
pequeño.
La información sobre el contorno de las fuentes procede de los archivos de fuentes
instalados en el sistema. Al crear contornos a partir del texto, los caracteres se convierten
a sus posiciones actuales; conservan todo el formato gráfico como su trazo y relleno.
Cuando se lleva el original de la pieza gráfica diseñada a la imprenta, se debe convertir el
texto en contornos o curvas, ya que la imprenta podría no tener la fuente.
Para pasar texto a curvas, se selecciona el texto, botón derecho del mouse y click en
CREAR CONTORNOS.
texto normal
texto convertido
Curso de Diseño Gráfico 21