ELEMENTOS

DEL DISEÑO

Tipografía

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO

¿Qué es La fuente es el medio fisico utilizado para crear un tipo de

una fuente? letra, por ejemplo, una máquina de escribir, un estarcido,
las matrices de una imprenta o un código PostScript.

¿Qué es un Un tipo de letra es un conjunto de caracteres, letras,

números, símbolos y signos de puntuación que
tipo de comparten un diseño característico. A continuación se
letra? muestran algunos tipos de letra producidos con los
"moldes de galleta" arriba mencionados (izquierda): una
máquina de escribir, un estarcido, una imprenta y un
código PostScript.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Anatomía Los caracteres tipográficos presentan múltiples formas y
atributos, y para describirlos se emplean diferentes
de los tipos términos, similares a los utilizados para describir las
distintas partes del cuerpo.

Ápice Brazo
Punca que se forma en Asta horizontal abierta
la parte superior de en uno o ambos
algunos caracceres, extremos, como en la
fomo en la "A* Es el "T* y la "F". o bien el
punto de encuentro asta ascendente
entre la ascendente de la "R'»la"y"
derecha e izquierda. También llamada
"barra

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Anatomía Los caracteres tipográficos presentan múltiples formas y
atributos, y para describirlos se emplean diferentes
de los tipos términos, similares a los utilizados para describir las
distintas partes del cuerpo.

Astas
ascendentes y Uña o
descendentes gancho
Remate, gracia o scrita
El asca ascendente es puntiaguda.
la parte de la letra que
sobresale por encima
de la altura de la x,
mientras que la
descendente es la que
se prolonga por debajo
de la línea de base.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Anatomía Los caracteres tipográficos presentan múltiples formas y
atributos, y para describirlos se emplean diferentes
de los tipos términos, similares a los utilizados para describir las
distintas partes del cuerpo.

Panza o
Beak
anillo
Nombre que reciben Parte del carácter que
en inglés los remates, encierra el espacio en
terifas o eracias al final blanco de lecras
de los brazos. circulares
como la "O° y la "e*.
La panza puede ser
abierca o cerrada.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Anatomía Los caracteres tipográficos presentan múltiples formas y
atributos, y para describirlos se emplean diferentes
de los tipos términos, similares a los utilizados para describir las
distintas partes del cuerpo.

Cartela o
Barbilla
apólige
Terminal angular
Forma de transición de la "G*
que conecta el palo
con el remate.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Anatomía Los caracteres tipográficos presentan múltiples formas y
atributos, y para describirlos se emplean diferentes
de los tipos términos, similares a los utilizados para describir las
distintas partes del cuerpo.

Blanco interno Travesaño

Contraforma o Trazo horizontal
contrapunzón que cruza por
Espacio interno de la algún punto el asta
panza de algunas letras, central. También se
como la "" y la "g** denomina "*asta
transversal"

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Anatomía Los caracteres tipográficos presentan múltiples formas y
atributos, y para describirlos se emplean diferentes
de los tipos términos, similares a los utilizados para describir las
distintas partes del cuerpo.

Perfil o filete Cruz

Línea horizontal de los Punto interior en el
caracteres "A", "H". «T° que se cruzan dos
"e' "F" y "t que cruza el astas angulares.
palo central. También se
denomina *barra

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Anatomía Los caracteres tipográficos presentan múltiples formas y
atributos, y para describirlos se emplean diferentes
de los tipos términos, similares a los utilizados para describir las
distintas partes del cuerpo.

Pierna Ligadura
Asa descendente
Barra transveraal o
inferior de uma letra. En
brazo que se
ocasiones se emplea
proyecca v cruza
este término para
dos lecras para
describir la cola de
unirlas.
la*Q*

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Anatomía Los caracteres tipográficos presentan múltiples formas y
atributos, y para describirlos se emplean diferentes
de los tipos términos, similares a los utilizados para describir las
distintas partes del cuerpo.

Gota, lágrima o
Oreja
botón
Pequeña asta que se
Asta terminal decorativa
extiende a la derecha
en la parte superior de
del anillo de la "g" o que
caracteres tales como la
sobresale del palo de
"a*y la "f"
letras como la "f* y “r”.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Anatomía Los caracteres tipográficos presentan múltiples formas y
atributos, y para describirlos se emplean diferentes
de los tipos términos, similares a los utilizados para describir las
distintas partes del cuerpo.

Cuello Bucle
Asta que une dos partes
de la letra, como los Anillo que forma la cola
anillos de una "g" de dos de una “g” de dos
niveles. niveles.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Anatomía Los caracteres tipográficos presentan múltiples formas y
atributos, y para describirlos se emplean diferentes
de los tipos términos, similares a los utilizados para describir las
distintas partes del cuerpo.

Serifa, remate Hombro o

o gracia arco
Pequeño trazo al final
Asta curvada que
del asta vercical
conduce, por ejemplo,
principal q
hacia la pierna de una
horizontal
“h” o una “n”.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Anatomía Los caracteres tipográficos presentan múltiples formas y
atributos, y para describirlos se emplean diferentes
de los tipos términos, similares a los utilizados para describir las
distintas partes del cuerpo.

Palo Inclinación
Asta vertical o diagonal Orientación de un
principal de una letra. carácter curvado.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Anatomía Los caracteres tipográficos presentan múltiples formas y
atributos, y para describirlos se emplean diferentes
de los tipos términos, similares a los utilizados para describir las
distintas partes del cuerpo.

Espolón Espina
Terminal del palo de Asta curvilinea que se traza
una letra redondeada de izquierda a derecha en la
“S” y en la “s”.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Anatomía Los caracteres tipográficos presentan múltiples formas y
atributos, y para describirlos se emplean diferentes
de los tipos términos, similares a los utilizados para describir las
distintas partes del cuerpo.

Curva, rizo o
Cola
floreado
Trazo curvo y El asta descendiente de la
prolongado de entrada “Q”, la “K” y la “R”.
o de salida. Las de la “g”, “j”, “p”, “q” e “y”
también se llaman “colas”, al
igual que el bucle de la “g”..

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Anatomía Los caracteres tipográficos presentan múltiples formas y
atributos, y para describirlos se emplean diferentes
de los tipos términos, similares a los utilizados para describir las
distintas partes del cuerpo.

Terminal Vértice
Parte final de un asta, El
Ángulo que se forma en la
terminal puede ser un
parte inferior de la letra, en el
ángulo agudo o bien
punto donde convergen el
tener forma
asta derecha e izquierda,
acampanada, convexa
como en el caso de la “M”.
cóncava o redondeada.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Familias Una familia tipográfica agrupa todas las variaciones
posibles de un tipo de letra o de fuente específica, esto es,
Tipográficas los diferentes grosores, anchos y cursivas.

Entre las familias tipográficas está en la Univers, la Times

de Roman y la Gramont. Muchas familias reciben el
nombre de su creador o de la publicación en la que se
emplearon por primera vez.

Romana o Cursiva o
romanilla itálica
Carácter de corte básico El dibujo de una cursiva
cuyo nombre deriva de las pura se traza alrededor de
inscripciones de los un eje angulado. Por regla
monumentos romanos. general, esta letra se diseña
También se llama para los tipos con serifa,
"redonda" o "redondilla' mientìs que la letra oblicua
aunque en ocasiones ésta es la versión inclinada de
es ligeramente más fina los tipos sin remate, y no un
que la romanilla. carácter de nuevo trazo.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO
Familias Una familia tipográfica agrupa todas las variaciones
posibles de un tipo de letra o de fuente específica, esto es,
Tipográficas los diferentes grosores, anchos y cursivas.

Entre las familias tipográficas está en la Univers, la Times

de Roman y la Gramont. Muchas familias reciben el
nombre de su creador o de la publicación en la que se
emplearon por primera vez.

Fina
Versión más fina o ligera
del carácter romano. En la
rejilla de Frutiger (véase la
página 84), se asignan los
números más bajos a las
letras más finas.
Negrita
Negrita, negrilla, mediana,
semi negra; negra o super
negra, todos estos términos
hacen referencia a un tipo
de letra con un trazo más
ancho que el de la romana.
En la refilla de Frutiger, los
caracteres más gruesos
tienen los números más
altos

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO Muchas familias tipográficas incluyen versiones
Condensada
condensadas y extendidas de sus tipos, lo que
y extendida proporciona una flexibilidad adicional a la hora de realizar
la composición.

Los tipos condensados son los tipos extendidos son

más estrechos que los más anchos que la letra
caracteres romanos, y son romana, y suelen utilizarse
útiles para los casos en los como titulares para rellenar
que escasea el espacio. todo el espacio.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO Sistemas de La clasificación de los tipos tiene como objetivo ordenar
de un modo lógico la gran plétora de tipos de letra
clasificación existentes.
de los tipos
Los sistemas de clasificación ayudan a los diseñadores a
tomar decisiones tipográficas más racionales y a
comprender mejor los tipos.

Con serifa Sin serifa

Los caracteres con serifa
presentan pequeños trazos Las fuentes sin remate o
al final de sus astas gracia se denominan
verticales u horizontales "sans serif" o "sin serifa".
que guían al ojo por las Estas fuentes -más
líneas del texto y facilitan la modernas que las
lectura. Las fuentes con anteriores-, presentan
serifa suelen ser las más menos variaciones en sus
antiguas y tradicionales, si rasgos, una mayor altura de
bien es cierto que en la la x v una menor
actualidad siguen inclinación en los trazos
produciéndose nuevas redondeados.
fuentes con remate.
Ésta es la Helvetica Neue
Esta es la letra Bembo

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

 ELEMENTOS
DEL DISEÑO Clasificación El sistema de clasificación de los tipos de McCormack se
basa en 5 categorías básicas, descritas a continuación.
Simple de Pese a su valor instructivo, este sistema no establece
los Grupos ninguna diferencia entre las fuentes con serif y sin serif, el
principal rasgo distintivo de las fuentes.

Block Roman
Se basan en el
ornamentado estilo de Los tipos "roman" se
escritura que predominaba caracterizan por su
en la Edad Media. En la interletrado de medidas
actualidad, este tipo de proporcionadas y por sus
letra resulta, además de remates. Sus orígenes se
anticuado, farragoso y de remontan a los
difícil lectura cuando se bajorrelieves romanos. Es el
encuentra en grandes tipo de letra más legible y
bloques de texto. más utilizado en cuerpos
de texto. En el ejemplo se
También se denomina muestra
“blackletter","gothic"',"olden
English”, "black" y "broken" la fuente Book Antiqua.

La letra del ejemplo es la

Wittenberger Fraktur MT.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

 ELEMENTOS
DEL DISEÑO
Gothic
A diferencia de los tipos
"roman". los tipos "gochic" no
presentan remates decorativos.
Sus trazos sencillos y elegantes
son idóneos para los titulares,
pero difíciles de leer en pasajes
largos. A pesar de ello, se han
desarrollado con éxito diversos
tipos góticos para ser utilizados
en el cuerpo de texto de los
periódicos.
Estos tipos también reciben el
nombre de "sans serif o
"lineale**
La letra de la
imagen es la Grotesque MT.
Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico
Clasificación
Simple de
los Grupos
Script
Los tipos script imitan el
estilo de la letra
manuscrita, y sus
caracteres impresos
parecen estar ligados entre
sí. Y, al igual que sucede
con la letra manuscrita,
algunas variantes son más
fáciles de leer que otras.
En la imagen aparece una
muestra de la fuente
Isadora.
ELEMENTOS
Clasificación
DEL DISEÑO Simple de
los Grupos

Gothic
Los tipos graphic contienen
caracteres que podrían ser
calificados como imágenes.

Esta categoría abarca la mas

diversa variedad de estilos. A
menudo se diseñan para
usos y fines específicos, y
tienen la capacidad de crear
un vínculo con la imagen
propiamente dicha.

La letra del ejemplo es la

Trixie Cameo.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO

Color

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO Blanco y El negro, el más oscuro de los colores concebibles, se aplica con
suma eficacia a una superficie, porque borra aquello que la cubria
Negro originalmente.

El blanco, el más claro de los colores concebibles, también es opaco,

pero debe aplicarse en espesor si se desea cubrir una superficie.

Sin embargo, el blanco es ideal como superficie para recibir colores,

porque puede mostrar las manchas más tenues y no distorsiona los
colores, aunque los oscurece ligeramente.

Ni el negro ni el blanco pueden producirse mediante una mezcla

de otros pigmentos.

El negro y el blanco, utilizados juntos, crean el contraste de tonos

más acentuado con un máximo de legibilidad y economía de
medios.

Son ideales, en consecuencia, para esbozar, dibujar, escribir e

imprimir.

En la mayor parte de los casos, el negro constituye la marca y el

blanco la superficie, de acuerdo con la tendencia a entender las
formas negras como espacios positivos y las formas blancas como
espacios negativos.

Como estamos acostumbrados a las imágenes negras sobre fondos

blancos, la inversión de esos dos colores sugiere irrealidad, y crea a
veces un diseño denso o pesado.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

 ELEMENTOS
Tramas en
DEL DISEÑO
Una textura uniforme puede
realizarse con negro sobre
blanco o blanco sobre negro,
obteniéndose una trama que
será clara u oscura, según la
proporción de las áreas negras
respecto a las blancas en la
combinación.
Blanco y
Negro
El mismo efecto también puede
lograrse con finos trazos en negro
y blanco consistentes en
ordenaciones regulares de planos,
líneas o puntos. En la figura, los
elementos negros y blancos se
mezclan ópticamente y se
perciben como gris.
Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico
 ELEMENTOS Transiciones
DEL DISEÑO tonales con
negro y
blanco

Una retícula en negro y blanco,

Aunque pueden lograrse
consistente en líneas o puntos,
ilusiones de volumen y
puede mostrar un cambio
profundidad con negro y
gradual en la densidad,
blanco, mediante tramas, se
aclarando u oscureciendo
obtienen efectos ilusorios
sutilmente la retícula de una
mucho mejores haciendo
parte a otra (fig. 82).
variar las densidades y creando
áreas complicadas de
Una textura en negro y blanco,
transiciones tonales.
que no por necesidad ha de
ser tan regular como una
retícula, puede producir un
efecto similar.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO

Leyes de la
percepción: Gestalt

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO

Semejanza: Donde interviene la similitud por alguna de

Leyes de la sus características físicas o conceptuales.
Gestalt que
encontramos Continuidad: Los detalles que mantienen un patrón o
dirección tienden a agruparse, como parte de un modelo.
en diseño Percibir elementos continuos aunque estos estén
interrumpidos entre sí.

Cierre: Las formas cerradas y acabadas son más estables

visualmente, lo que hace que tendamos a cerrar y a
completar con nuestra imaginación las formas percibidas
buscando la mejor organización posible.

Proximidad: Los elementos y figuras que están más

próximos tienden a verse como una unidad y a aislarse de
otros. Las figuras o los puntos que están más próximos se
reúnen en unidades aunque todos sean iguales.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO Figura y fondo: Establece el hecho de que el cerebro no
puede interpretar un objeto como figura o fondo al
mismo tiempo.
Leyes de la
Gestalt que Figura: es un elemento que existe en un espacio o campo
destacándose en su interrelación con otros elementos.
encontramos
en diseño Fondo: Todo aquello que no es figura, es la parte del
campo que contiene elementos interrelacionados que
sostienen a la figura que por su contraste tienden a
desaparecer.

Simetría y Orden: Los estímulos ambiguos tienden a

analizarse de la manera más simple. Los elementos son
organizados en figuras lo más simétricas, regulares y
estables que sea posible.

Simplicidad: Afirma que el individuo tiende a organizar

sus campos preceptúales en rasgos simples y regulares.

Experiencia: Este principio se basa en como percibimos el

mundo de acuerdo a nuestras experiencias.

Leyes Combinadas : A veces las Leyes Gestalt se pueden

combinar para obtener efectos aún más creativos.

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO

Semejanza

Continuidad

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO

Cierre

Proximidad

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO

Figura Fondo

Proximidad

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO

Simplicidad

Proximidad

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico

ELEMENTOS
DEL DISEÑO

Leyes
Combinadas

Introducción Al Diseño Digital / Fundamentos De Diseño Gráfico