En que nos ayuda la tipografía en diseño gráfico

1. UD TIPOGRAFÍA
Historia de la tipografía impresa y digital

2. SEMANA 1

3. Presentación del
docente: experiencia
y expectativas
Fuente: freepik.es
Presentación del sílabo, metodología y evaluación de la UD

4. ¿Cuál es tu expectativa de esta
unidad didáctica?
Descríbelo de manera breve.
Fuente: freepik.es
Presentación del sílabo, metodología y evaluación de la UD

5. Sumilla
La unidad didáctica Tipografía tiene carácter teórico-
práctico. A través de ella se busca que el estudiante sea
capaz de elaborar mensajes visuales, empleando
elementos tipográficos en el plano bidimensional y de
acuerdo con los parámetros de la sintaxis visual,
aplicados a la tipografía.
La unidad didáctica es fundamental porque permitirá al
estudiante observar la cultura tipográfica de su
entorno, diseñar y evaluar la cantidad de estímulos
necesarios dentro de mensajes escritos (fundamento
de legibilidad).
Explicación del Sílabo

6. Explicación del Sílabo
Elementos de
competencias
(capacidades)
Elaborar mensajes visuales, empleando
elementos tipográficos en el plano
bidimensional y de acuerdo con los
parámetros de la sintaxis visual, aplicados
a la tipografía.

7. Indicadores de logro (IL1, 2, 3 y 4)
IL1
• Identifica
tipografías y la
anatomía de
estas a partir de
la clasificación
de estilos
tipográficos
(comprensión
de la estructura
del signo
tipográfico y su
uso en el
entorno).
IL2
• Combina fuentes
tipográficas,
aplicando criterios
semánticos y de
legibilidad, para
componer textos
reales y de ficción
de acuerdo a los
criterios de
variables,
alineamiento y
espaciado.
IL3
• Diseña palabras y
frases a partir de
trazos caligráficos
y las técnicas
libres del
"lettering"
(rotulado o
dibujado),
considerando
espaciados e
incorporación de
elementos no
alfabéticos al
Lettering.
IL4
• Elabora una
palabra
Semántica y una
composición
tipográfica a
partir de la
combinación de
fuentes, el
significado del
mensaje y
criterios de
composición.
Explicación del Sílabo

8. • La metodología de aprendizaje será el portafolio de evidencias
• Para la evaluación se utilizarán rúbricas.
• A lo largo de la Unidad Didáctica se realizarán 4 evidencias correspondientes a cada
actividad de aprendizaje (AA):
Explicación del Sílabo
AA1
Evidencia 1
Selecciona 3 fuentes
tipográficas y aplica
diferentes estilos, donde
identifica las siguientes
partes: astas, travesaños,
hombros, serifas, colas y
ápices. Ambos ejercicios
son sustentados y
argumentados en un
párrafo.
AA2
Evidencia 2
Presenta 3 propuestas
diferentes donde el título,
párrafo y lista de datos
presenta diferencia de
jerarquía para tres tipos de
textos: descripción de
producto, artículo
periodístico y texto de
ficción (novela).
AA3
Evidencia 3
Presenta el análisis de 3
fotos de afiches tipográficos
de su entorno y propone 3
nuevas propuestas digitales
haciendo el uso correcto de
la caligrafía y lettering
aplicados al marketing de
empresas. Este proyecto se
sustenta y argumenta en el
portafolio indicando el
proceso de desarrollo.
AA4
Evidencia 4
Selecciona una palabra y
refuerza su significado a partir
de trazos caligráficos y
técnicas libres del "lettering".
Realiza un afiche tipográfico
con título, párrafo y lista de
datos que presentan
jerarquización y refuerzo
semántico. Ambas propuestas
deben estar sustentadas en
su portafolio.
Explicación del Sílabo

9. Metodología: Portafolio de evidencias
¿En qué consiste
esta metodología?
Consiste en “una colección de trabajos del estudiante
que nos cuenta la historia de sus esfuerzos, su progreso
y logros en un área determinada. Esta colección debe
incluir la participación del estudiante en la selección del
contenido del portafolio, las guías para la selección, los
criterios para juzgar méritos y la prueba de su
autorreflexión“.
(Arter y Spandel, 1992 en Centro para la excelencia
docente de la Universidad del Norte de Colombia, s.f.)
PROPÓSITO
Elaborar grupal o
individualmente evidencias
de su proceso de
aprendizaje las que
coleccionarán en un
portafolio virtual y les
permitirán la autoreflexión y
motivará su
autoaprendizaje.

10. Metodología: Portafolio de Evidencias

11. El repositorio y el Portafolio personal
Estilo de leyenda para repositorio:
Estilo CVS Todo separado por comas (,)
1. Autor: Grupo o estudiante
(Letra, promedio y semestre),
2. Estilo, o caligrafía, o lettering,
3. Donde lo consiguieron: web,
o foto lugar, o tipografía digital)
Ejemplo de leyenda oficial para repositorio.
B, 1, 21-1, Sans Serif, Foto de
diccionario en casa.
Imagen 1. Elaboración propia.
Metodología: Portafolio de Evidencias

12. Evaluación
Evidencia Nombre/ Descripción
Actividad de
aprendizaje
Indicador Peso Semana
E1
Selecciona 3 fuentes tipográficas y aplica diferentes estilos, donde
identifica las siguientes partes: astas, travesaños, hombros,
serifas, colas y ápices. Ambos ejercicios son sustentados y
argumentados en un párrafo. 1 IL1 15% 2
E2
Presenta 3 propuestas diferentes donde el título, párrafo y lista
de datos presenta diferencia de jerarquía para tres tipos de
textos: descripción de producto, artículo periodístico y texto de
ficción (novela).
2 IL2 20% 4
E3
Presenta el análisis de 3 fotos de afiches tipográficos de su
entorno y propone 3 nuevas propuestas digitales haciendo el uso
correcto de la caligrafía y lettering aplicados al marketing de
empresas. Este proyecto se sustenta y argumenta en el portafolio
indicando el proceso de desarrollo.
3 IL3 30% 6
E4
Selecciona una palabra y refuerza su significado a partir de trazos
caligráficos y técnicas libres del "lettering". Realiza un afiche
tipográfico con título, párrafo y lista de datos que presentan
jerarquización y refuerzo semántico. Ambas propuestas deben
estar sustentadas en su portafolio.
4 IL4
35%
8
Participación activa** (PA) 2,3 y 4 IL2, IL3 e IL4 3,5 y 7

13. CONECTEMOS
01
Su nombre y personalidad…
…tipográfica
ACTIVIDAD:
Presentación del estudiante. El docente comparte una
variedad de ejemplos de diseño tipográfico. Y les pide a los
estudiantes que dibujen su nombre en una hoja de papel bond
en un estilo que los represente. Pueden usar colores. Los
estudiantes escribirán su nombre con el estilo y tipo de letra
que más les guste y luego verbalmente explicarán por qué.
Fuente: Grand Matter Studio - Póster
tipográfico de Toby Triumph.

14. CONECTEMOS
01

15. Esta semana trabajaremos lo siguiente:
• Historia de la tipografía
• Escritura
• La tipografía
• La tipografía digital
• Casas tipográficas
Logro de la sesión: Al finalizar la sesión, los estudiantes identificarán los
diferentes estilos tipográficos tomando en cuenta diferentes datos sobre la
historia de la tipografía y los tipos de escritura.
01 CONECTEMOS

16. CONECTEMOS
01
Reflexión libre:
¿Qué opinas de las letras dentro del diseño gráfico
y la necesidad de saber trabajarlas en tu carrera?

17. Historia de la tipografía

18. La escritura es el hito que separa la
prehistoria de la historia.
...El nacimiento de la proto-escritura del siglo
IV a.C (edad de bronce), conformada por
ideogramas y pictogramas en la escritura
cuneiforme en la antigua Sumeria en
Mesopotamia; la escritura jeroglífica en
Egipto, la escritura Lineal a y b en Grecia...JE
Gómez Ospina - 2020 -
repository.libertadores.edu.co
Historia de la tipografía
CONSTRUYAMOS
02
Cita: Rescatado de: https://repository.libertadores.edu.co/bitstream/handle/11371/2949/G%c3%b3mez_Edisson%20_2013.pdf?sequence=1&isAllowed=y
Imagen 1: Scrittura Cuneiforme. Recuperado de https://miobook.raffaellodigitale.it/progetti/129/risorse/4-antropologico/PHOTOGALLERY/17-scrittura-cuneiforme/scrittura-
cuneiforme.html
Escritura cuneiforme

19. La escritura

20. Imagen 2: Cartel: Quiet Piktogramm Kostenloses Stock Bild, rescatado
de:https://www.publicdomainpictures.net/
La escritura
Sistema de representación gráfica de un idioma, por
medio de signos trazados o grabados sobre un
soporte. En tal sentido, la escritura es un modo
gráfico específicamente humano de conservar y
transmitir información.
Tipos de escritura
Pictográfica - Ideográfica - Alfabética.
CONSTRUYAMOS
02
Cartel con los tres tipos de escritura

21. PICTOGRAMA
Elemento gráfico que
describe una acción o serie
de acciones mediante
referencias o pistas visuales.
CONSTRUYAMOS
02
IDEOGRAMA
Elemento gráfico que
representa una idea o un
concepto.
ALFABETO
Sistema de escritura formado
por signos (llamados letras)
que en general representan
fonemas.

22. Escritura pictográfica
Imagen 3: Composición basada en: 1.- upload.wikimedia.org/wikipedia/commons/7/7c/Zebu_silhouette.svg : commons.wikimedia.org
2.- faculty.evansville.edu/rl29/art315-316/type1-1a.html 3.- pixabay.com/de/vectors/piktogramm-schwimmbad-schwimmen-2026956/
CONSTRUYAMOS
02

23. Viento
Chino
contemporáneo
Reciclaje
CONSTRUYAMOS
02
Escritura ideográfica
Imagen 4: Composición basada en: 1.- commons.wikimedia.org/wiki/File:Recycle-91.png 2.-
upload.wikimedia.org/wikipedia/commons/2/23/%E9%A2%A8-order.gif Imagen 5. Comparative
evolution from pictograms to abstract shapes, in cuneiform, Egyptian and Chinese characters.
Rescatado de: en.wikipedia.org
Del pictograma
a lo abstracto

24. 1200 a.C. Fenicios
crean alfabeto Fonético (A)
1000 a.C. Grecia (Alpha)
origen de “Latinos”
5000 a.C.
Buey (Aleph)
Escritura alfabética
Pictográfica – Ideográfica
CONSTRUYAMOS
02
Imagen 6: Elaboración propia

25. CONSTRUYAMOS
02
Imagen 7. Historia de la Escritura: El
primer alfabeto. Recuperado de:
https://www.youtube.com/watch?v=
z8XuI_y_BqY
Caligrafía con plumas
artesanales.
Video: Historia de la Escritura: El primer alfabeto.
https://www.youtube.com/watch?v=z8XuI_y_BqY

26. La tipografía

27. Tipografía:
esta palabra procede de la
unión de tres componentes:
“tipos” que significa molde,
“graphos” que puede
traducirse como “escribir o
grabar” e “ia” que es
equivalente a “cualidad o
acción”. Basado en Wikipedia.
La tipografía
Definición etimológica
CONSTRUYAMOS
02
Imagen 8: tipo de la familia. rescatado de: https://es.wikipedia.org/wiki/Tipo_de_letra
Tipo/molde de ligadura fi

28. CONSTRUYAMOS
02
Parece una justa ironía el que los
primeros impresores con tipos
móviles hayan tenido ellos
mismos que emigrar de sus
ciudades alemanas hacia otras
comarcas,dado lo amenazante
de su invención. Para la Iglesia los
artistas negros representaronun
riesgo doble:
Avance del conocimiento

29. CONSTRUYAMOS
02
Político-ideológico por pretender imprimir
versiones “no oficiales” de la Biblia
Político-sindical ya que los scriptoria de los
monasterios podían perder gran parte de su
“mercado editorial”.
Consolo, C. p.19

30. Preguntas libres para reflexionar
¿Creen ustedes que con esta tecnología
se ha democratizado el conocimiento?
¿Antes el conocimiento lo tenían solo algunos?
CONSTRUYAMOS
02

31. CONSTRUYAMOS
02
Impresión usando madera / woodblock
printing.
Evolución de la imprenta: Los tipos móviles
Imagen 9: Woodblock Pinting, imagen de news.com recuperado de: sutori.com/story/block-printing-history--4R3xc764vG3HqAyLhZxKncxC
Imagen 10: Metal movable type. Foto tomada por Willy Heidelbach recuperada de Wikipedia bajo licencia CC.
Tipos móviles de metal para imprenta.

32. CONSTRUYAMOS
02
Línea de
tiempo
de la
imprenta
Fuente: Web

33. CONSTRUYAMOS
02
Imagen 11. Historia de la Escritura: Y
la escritura cambió el mundo.
Recuperado de:
https://www.youtube.com/watch?v=
kMH5hmXhMNs&t=1s
Importancia del tipo de
papel para la impresión
tipográfica y la escritura
caligráfica.
Video: Historia de la Escritura: Y la escritura cambió el mundo.
https://www.youtube.com/watch?v=kMH5hmXhMNs&t=1s

34. Reflexión libre:
● ¿Qué características sociales y tecnológicas intervinieron en esta
historia?
● ¿Creen que hubo cambios en la cultura y la tecnología que apoyaron la
construcción de cada máquina?
● ¿Cómo creen que impacta esto en el desarrollo del diseño gráfico?
CONSTRUYAMOS
02

35. La tipografía digital

36. Tipografía digital
La tipografía digital comprende a un conjunto de dibujos de
tipo vectorial que representan letras y números. Estos pueden
escalarse y redimensionarse sin que la calidad de dichos
dibujos se reduzca.
CONSTRUYAMOS
02
Fuente: Autor desconocido está bajo licencia CC
BY-SA-NC
Imagen 12. El texto suavizado utiliza
píxeles de tono medio, ya sea en gris
(arriba) o en color (abajo), además del
negro para crear la ilusión de caracteres
con contornos suaves. Recuperado de
https://creativepro.com/state-e-book-
typography/

37. CONSTRUYAMOS
02
Video: Biografía Susan Kare.
https://www.youtube.com/watch?v=sniCbS16E9c
Susan Kare y la revolución
del diseño gráfico para
sistemas operativos.

38. Casas tipográficas
CONSTRUYAMOS
02
A las casas tipográficas se les denomina también fundidoras de fuentes:
El concepto de fundición se ha reinterpretado para representar a distribuidoras o
estudios donde se venden y/o crean fuentes. Es decir, en el salto de lo mecánico a lo
digital se ha manteniendo la denominación. Desde el metal a las pantallas. (Sleepydays, 2018)
¿Qué casas tipográficas puedo visitar?
Cuando quieras elegir una buena tipografía e ir a la segura, elige primero las mejores
“casas” tipográficas. Como por ejemplo: Hoefler&Co. (DAVO GTZ, s.f.)

39. CONSTRUYAMOS
02
Imagen 12, 13, 14. Jonathan Hoefler: Typeface Design. Recuperado de:
https://www.netflix.com/watch/80237098?trackId=255824129&tctx=0%2C0%2C
e324b441-401a-4266-9ef5-cdb6eb8e90c4-75186504%2Ce324b441-401a-4266-
9ef5-cdb6eb8e90c4-75186504%7C2
Video: Jonathan Hoefler: Diseño tipográfico.
Disponible en Netflix. (Serie Documental Abstract: El arte del diseño).

40. CONSTRUYAMOS
02
Existen muchas páginas para
descargar fuentes. Pero lo
recomendable es buscar páginas
como Google Fonts que otorga
licencias de uso y presenta familias
tipográficas completas con
bastantes variables que son las que
un diseñador profesional necesita
para trabajar.

41. Actividad
aplicativa 1
I Shoot the Serif
Poner el ojo en el Serif/Serifa
1. Jugar en línea: El docente comparte el juego,
(www.tothepoint.co.uk/us/fun/i-shot-the-serif)
los estudiantes jugarán en nivel JUNIOR
2. Los estudiantes anotarán su puntaje y realizarán
comentarios a través de un padlet.

42. Actividad Aplicativa 1
Diviértete apuntando y disparando a las letras con serifa de esta tabla de objetivos.
El estudiante que hace el menor tiempo es el ganador.

43. Actividad
aplicativa 2
1. Sans Serif en grupo. Los estudiantes se unen en grupo y
cada participante toma una foto de una San Serif que
puedan encontrar en su casa.
1. Luego la suben al repositorio y le colocan leyenda
estandarizada.
Estilo de leyenda
para repositorio:
Autor: Grupo (Letra), promedio (IL1) y semestre(21-1),
Estilo: Sin Serif, Objeto fotografiado* y donde o web.
Ejemplo:
José Diaz, IL1, 21-1, Sans Serif, Foto diccionario en mi
casa.
*Cada grupo debe tener como mínimo el 50% de su entrega con fotos originales.

44. Actividad Aplicativa 2
Ejemplos:
Adolfo Cuba,
IL1, 21-1,
Sans Serif,
Foto de caja
de zapatillas
en mi casa.
María Huamaní, IL1, 21-1, Sans Serif,
Foto de portarretrato en mi casa.

45. Respuesta individual
¿Qué le transmite la letra de la foto?
¿Por qué cree que esa letra fue usada en ese producto?
CONSTRUYAMOS
02

46. Avance de la
evidencia AA1
¿En qué consiste?
El estudiante selecciona 3 fuentes tipográficas y aplica
diferentes estilos, donde identifica las siguientes partes:
astas, travesaños, hombros, serifas, colas y ápices.
Ambos ejercicios son sustentados y argumentados en
un párrafo.
Fuente: Esta foto de Autor desconocido está bajo licencia CC BY-SA-NC

47. Avance de la Actividad de Aprendizaje (AA1)
1. Revisamos los lineamientos
CONSTRUYAMOS
02
2. Revisamos la rúbrica de evaluación
Esta foto de Autor desconocido está bajo licencia CC BY-NC-ND Esta foto de Autor desconocido está bajo licencia CC BY-NC

48. Presentamos nuestros avances de la AA1
CONSTRUYAMOS
02
Esta foto de Autor desconocido está bajo licencia CC BY-NC-ND

49. REFLEXIONEMOS
03
Respondemos las siguientes preguntas:
• ¿Qué hemos aprendido?
• ¿Qué significa la palabra tipografía?
• ¿Existe una clasificación para esta tipografía?
• ¿Qué podemos concluir acerca del uso y la
personalidad de la tipografía paloseco sin serif?
Imagen 15. Pregunta. Freepik.
https://www.freepik.es/home

50. CONECTEMOS
01
Reflexión final:
Luego de todo lo aprendido en esta sesión…
¿Qué opinión te merece, ahora, el universo de las letras dentro del diseño gráfico
y la necesidad de saber trabajarlas en tu carrera?

51. REFERENCIAS
04
Bibliografía:
• Historia de la tipografía: (avance del conocimiento): CONSOLO, C. (2013). Tipografía en Latinoamérica:
Orígenes e identidad. Sao Paulo, Brasil. Blucher.: La herencia europea, p.19.
• Clasificación: solo de las Sans Serif vs Old Style, J, (año). Phyco Typo, País, editorial. p.43.
• Clasificación completa: WILLIAMS, R, (2004) The Non-Designer's Design Book, California, PeachPit Press.
Recuperado de: https://diegopiovesan.files.wordpress.com/2010/07/livro_-_the_non-designers_desi.pdf
• Personalidad tipográfica: Personalidad Tipográfica, p.20 recuperado de:
http://repositorio.utn.edu.ec/bitstream/123456789/8055/1/05%20FECYT%203329%20TRABAJO%20DE%2
0GRADO.pdf
• Historia de la tipografía: (avance del conocimiento): CONSOLO, C. (2013). Tipografía en Latinoamérica:
Orígenes e identidad. Sao Paulo, Brasil. Blucher.: La herencia europea, p.19.
• Ferrer A., Gomez D., (2013). Escritura y tipografía. Universitat Oberta de Catalunya.

52. REFERENCIAS
04
Otros recursos:
• WGBH Educational Foundation (Producción). (23 de septiembre de 2020). De la A a la Z: el primer
alfabeto. (Temporada 47. Episodio 1). [Episodio de serie documental] En
https://www.pbs.org/wgbh/nova/series/a-to-z/
• WGBH Educational Foundation (Producción). (23 de septiembre de 2020). De la A a la Z: cómo la escritura
cambió el mundo. (Temporada 47. Episodio 2). [Episodio de serie documental] En
https://www.pbs.org/wgbh/nova/series/a-to-z/
• Dadich S., Neville M., O’Connor D., (2019). Jonathan Hoefler: Diseño tipográfico (Temporada 2. Episodio 6).
[Serie]. Netflix. Dadich S., Neville M., O’Connor D., (2019). Jonathan Hoefler: Diseño tipográfico
(Temporada 2. Episodio 6). [Serie]. Netflix.
https://www.netflix.com/watch/80237098?trackId=255824129&tctx=0%2C0%2Ce324b441-401a-4266-
9ef5-cdb6eb8e90c4-75186504%2Ce324b441-401a-4266-9ef5-cdb6eb8e90c4-
75186504%7C2%2Cunknown%2C%2C%2CtitlesResults%2C%2CVideo%3A80057883%2CdetailsPagePlayButt
on
• Instalar fuentes de Googlefont (paso a paso): https://estudioka.es/como-instalar-tipografias-gratuitas-de-
google-fonts/
• Juego I shoot the Serif: https://www.tothepoint.co.uk/us/fun/i-shot-the-serif/

53. ¡Gracias!