Está en la página 1de 110

Tipografía Digital

TIPOGRAFÍA DIGITAL

CARRERA DE DISEÑO GRÁFICO

2

CIBERTEC

TIPOGRAFÍA DIGITAL

3

Índice
Presentación
Red de contenidos

5
7

Unidad de Aprendizaje 1

EVOLUCIÓN DEL ALFABETO – MORFOLOGÍA TIPOGRÁFICA: ANATOMÍA –
VARIABLES TIPOGRÁFICA
1.1 Tema 1 : Definición y concepciones
1.1.1 : Introducción a la tipografía
1.1.2 : Su importancia como recurso principal del Diseño Gráfico
1.1.3 : Historia y evolución de la Tipografía hasta nuestros días
1.2 Tema 2
1.2.1
1.2.2
1.2.3

:
:
:
:

Anatomía de la letra
El alfabeto, letras altas y bajas
El tamaño y el puntaje de las letras
Partes y secciones de las letras

1.3 Tema 3 : Morfología tipográfica
1.3.1 : Familias tipográficas
1.3.2 : Medidas tipográficas

9
11
11
13
14
19
19
21
22
29
29
34

Unidad de Aprendizaje 2

CONNOTACIÓN Y COMPOSICIONES TIPOGRÁFICAS
2.1 Tema 4 : Interpretación tipográfica
2.1.1 : Denotación y connotación tipográfica
2.1.2 : Connotación con variables tipográficas
2.1.3 : Legibilidad
2.2 Tema 5
2.2.1
2.2.2
2.2.3
2.2.4

:
:
:
:
:

Composición tipográfica
Composición con tipografías
Contraste
Forma contraforma
Herramientas de texto en Adobe Illustrator

43
45
45
51
54
61
61
66
68
69

Unidad de Aprendizaje 3

TIPOGRAFÍA PARA WEB Y MEDIOS DIGITALES
3.1 Tema 6 : Tipografía para web
3.1.1 : Legibilidad de la lectura para web
3.1.2 : Amenidad de la lectura para web
3.1.3 : Tipografía para web
3.1.4 : Estructuras de jerarquías en la web
3.1.5 : EMS para tipografía web
3.1.6 : Lista de comprobación de legibilidad
3.2 Tema 7
3.2.1
3.2.2
3.2.3
3.2.4

CIBERTEC

:
:
:
:
:

Recursos estilísticos para web
Interlineado
Interletrado o tracking
Kerning
Herramientas de texto en Adobe Illustrator

77
79
79
81
83
84
85
85
87
87
87
88
88

CARRERA DE DISEÑO GRÁFICO

TIPOGRAFÍA DIGITAL

4

Unidad de Aprendizaje 4

EXPRESIVIDAD TIPOGRÁFICA ARTÍSTICA
4.1 Tema 8 : Refuerzo semántico
4.1.1 : Letra por imagen
4.1.2 : Verbo en acción
4.2 Tema 9 : Expresividad tipográfica creativa
4.2.1 : Abstracción, síntesis tipográfica
4.2.2 : Construcción de imágenes con signos escriturales

CARRERA DE DISEÑO GRÁFICO

93
95
100
101
103
103
108

CIBERTEC

TIPOGRAFÍA DIGITAL

5

Presentación
El curso de Tipografía Digital pertenece a la línea de herramientas de diseño y se dicta
en la carrera de Diseño Gráfico. Ofrece al alumno los conocimientos complementarios
para elegir y usar adecuadamente familias tipográficas en la composición de nuevas
piezas gráficas, partiendo de la consigna principal de la “legibilidad”, además de la
connotación, el balance, la estética, la armonía y por sobretodo su funcionalidad al
comunicar un concepto. También, podrá desarrollar un alfabeto original con las
herramientas impartidas. El curso se desarrolla a través de lecciones teóricas
(conceptos) y prácticas en el laboratorio con el desarrollo de proyectos gráficos que
involucrarán una constante participación del alumnado.
El curso fomenta la atención y comprensión de los fundamentos morfológicos de la
tipografía y una aplicación práctica para el desarrollo de los elementos gráficos para su
posterior aplicación en medios de prensa, publicidad y web, llegando a crear su propio
alfabeto y piezas tipográficas.
Al término del curso, el alumno diseña tipografías y compone textos artísticos a mano
alzada y con software de diseño, tomando en consideración criterios de forma y
significado partiendo de un concepto que se requiere comunicar.

CIBERTEC

CARRERA DE DISEÑO GRÁFICO

TIPOGRAFÍA DIGITAL

CARRERA DE DISEÑO GRÁFICO

6

CIBERTEC

TIPOGRAFÍA DIGITAL 7 Red de contenidos TIPOGRAFÍA DIGITAL UNIDAD 1 Definición y concepciones Anatomía de la letra UNIDAD 2 UNIDAD 3 UNIDAD 4 Morfología tipográfica Interpretación tipográfica Composición tipográfica Tipografía para web tipográfica Recursos estilísticos para web Refuerzo semántico CIBERTEC Expresividad tipográfica creativa CARRERA DE DISEÑO GRÁFICO .

TIPOGRAFÍA DIGITAL CARRERA DE DISEÑO GRÁFICO 8 CIBERTEC .

el alumno reconoce identifica y diferencia las diferentes formas tipográficas su aplicación e intención en el mensaje. 1.1.1 Tema 1 1.TIPOGRAFÍA DIGITAL 9 UNIDAD 1 EVOLUCIÓN DEL ALFABETO – MORFOLOGÍA TIPOGRÁFICA: ANATOMÍA – VARIABLES TIPOGRÁFICA LOGRO DE LA UNIDAD DE APRENDIZAJE Al término de la unidad. letras bajas.2. letras altas.1 1.1. 1.2 Tema 2 1.  Generan un alfabeto del entorno.1. Historia y evolución de la Tipografía hasta nuestros días.2. ACTIVIDADES PROPUESTAS Los alumnos realizan las siguientes acciones:  Desarrollan una firma personal en clase.3. Su importancia como recurso principal del Diseño Gráfico. CIBERTEC CARRERA DE DISEÑO GRÁFICO . 1.3 Tema 3 : Morfología (forma) tipográfica 1.1 : Familias tipográficas. Partes y secciones de las letras.3 : : : : Anatomía de la letra El alfabeto. TEMARIO 1.  Construyen tipografías en láminas con boceto estructural en papel milimetrado.2 1.2 1. El tamaño y el puntaje de las letras.2.1 1.3 : : : : Definición y concepciones Introducción a la tipografía.3.2 : Medidas tipográficas.

TIPOGRAFÍA DIGITAL CARRERA DE DISEÑO GRÁFICO 10 CIBERTEC .

1. ya sean estas dispuestas en líneas o en bloques sobre la página. sin por ello pretender estandarizar los resultados obtenidos. otros trabajan en cualquiera. Concepción morfológica Donde el tipo tiene su propio lenguaje y personalidad. Por lo que podríamos decir inicialmente que tipografía es el arte de imprimir caracteres. muchos solo se dedican a una de ellas. dependerá el resultado del diseño. la disposición de los textos. el dinero y las condiciones técnicas con las que se cuenten. las letras.1. debe y puede realizar.1. seleccionando el papel. En la actualidad con la palabra tipografía se pretende englobar o encerrar muchas actividades que partieron de un origen común y luego se ramificaron. refiriéndose a la utilización de los tipos para lograr la impresión gráfica. DEFINICIÓN Y CONCEPCIONES 1. teniendo presente la forma final del producto.1. De la concepción que se tenga para realizar el trabajo tipográfico. 1. el formato y claro está la manera de llevar el boceto o manuscrito a ser un arte final o forma reproducible.1. Dentro de cada una de ellas existen diferencias significativas. podemos clasificar dentro de tres grandes grupos: Concepción morfológica. podemos incluir el conocimiento de los diferentes sistemas para imprimir. la jerarquización de la información. es decir. el diseño de la página se hace enalteciendo los valores del carácter. el manejo de las tintas. incluso su acabado final. utilizando para ello tipos móviles. la longitud de la línea dentro del formato. En un concepto más general podemos decir que la tipografía es una disciplina que reproduce de una forma óptima un mensaje. Introducción a la Tipografía Luego de que Johannes Gutenberg. claro está. En ese concepto se debe matizar que la tipografía para poder obtener un producto final. la decisión debe estar sujeta al objetivo de dicho problema. que encierra el diseño y la forma de organizar las palabras y oraciones.1. se le llamo a ese arte. Por lo que podríamos decir que la tipografía es la disciplina que permite reproducir un mensaje mediante la palabra impresa. por las diferentes partes en las que la tipografía se ha ramificado. y dentro de cada uno de ellos. Y con ello también estaríamos limitando dicha labor. los cuales. el CIBERTEC CARRERA DE DISEÑO GRÁFICO . creativa y estructural. la tinta y el sistema de impresión. nombre con el que se designa a la persona que desempeña dicha actividad. de las clases de papel. tipografía. utilizando para ello las diferentes modalidades de reproducción de la actualidad. dentro del quehacer tipográfico encontramos vertientes que apuntan a los diferentes usos que hacemos de ella. la selección de la familia de caracteres. Es por ello que el concepto de tipografía actual debe englobar dichas ramificaciones. Dentro de esas condiciones. creara los tipos móviles y los medios para imprimirlos. el formato. pretende involucrar la fuerza o la delicadeza.TIPOGRAFÍA DIGITAL 11 1. debe prever inicialmente las limitaciones que imponen el tiempo. las ventajas y desventajas que ofrece. sin embargo es importante tener presente las diferencias en el quehacer tipográfico actual. para tal fin. por lo que tiene que manejar aspectos como: el tamaño de la página impresa. Ahora bien. Pero estaríamos dejando por fuera muchas de los aspectos que un tipógrafo.

Figura 1.Concepción Morfológica Fuente. ya en conjunción o incluso con otros elementos gráficos.. para transmitir una información o una idea de la manera más creativa posible.html 1..wordpress.2. para atribuirle otra connotación.Tomado de https://tipografiaune. transformando. es decir. servirse del tipo vinculando su pasado y su reputación.Concepción Creativa Fuente. Concepción creativa Donde cada carácter es utilizado como imagen.TIPOGRAFÍA DIGITAL 12 estilo y la gracia que emana dicha forma tipográfica..10pixeles.com/tag/tipografia/ CARRERA DE DISEÑO GRÁFICO CIBERTEC .. desvincular al tipo de su relación formal inherente. cambiando. es decir.1. ya sean utilizados por si solos.com/2012/09/inspiracion-y-tipografia. Figura 2.Tomado de http://www.1. deformando.

Concepción estructural El mensaje debe llegar al lector. el diseño debe partir de una correcta selección en los aspectos técnicos. clasificación y estructuración. los tipos móviles y sus principales protagonistas. Al tener presente la forma. En este trabajo revisaremos los aspectos más resaltantes del advenimiento de la escritura.Esquema de una instancia Oracle Fuente. Los diferentes capítulos cuyos contenidos están muy lejos de pretender ser una enciclopedia sobre el tema. en él está presente una jerarquía. sí están preparados para ofrecer información básica. en cuyo discurrir surge la impresión. que permitan un desplazamiento del ojo entre los párrafos. es probable llevar a buen fin cualquier proyecto gráfico que se plantee.Tomado de http://www. la selección del interlineado. la legibilidad. los pie de páginas. el peso de la mancha. los ideogramas y los fonogramas. estableciendo niveles para los títulos de los capítulos. índices. así como también la incorporación de la tecnología y su constante evolución. con lo cual se ingresa a la historia de la letra y la comunicación gráfica.1. que permiten evitar interrupciones de cualquier tipo.3. Figura 3. ya sea muy evidente o no. la cual previamente se originó a partir de un lógico proceso de investigación. la relación con el formato y su entorno. folios. el valor. las notas. con la única interrupción del paso de la hoja. CIBERTEC CARRERA DE DISEÑO GRÁFICO . es decir. legibilidad.. los subtítulos.TIPOGRAFÍA DIGITAL 13 1. como fueron los pictogramas.com/archives/9229 1.1.. sin olvidarse que tenemos que comunicar el trabajo del autor y no el nuestro. nos permitirá ganar habilidad y destreza al momento de componer con caracteres.1. que han llevado a la tipografía a catalogarse en la actualidad como una verdadera ciencia.2. el peso visual de los caracteres y la relación entre ascendentes y descendentes. entre el medio y el escritor.creativanewsletter. el contraste. con transparencia. Su importancia como recurso principal del Diseño Gráfico Conocer desde la generalidad hasta los más elementales detalles de la tipografía. escudriñando en sus antecedentes. los resultados en los sistemas o medios por el cual se reproducirán.

en latín. este último usado en Occidente a partir del siglo XIV. en los espacios en blanco que dejaba el copista.1. De ahí su sinónimo. 1. vitela o papel.2. a mediados del siglo XV. con los que se imprimían tejidos. Tuvieron una destacada labor en la difusión de los libros hasta la aparición de la imprenta de tipos móviles en el mundo occidental.1468) la invención de los tipos CARRERA DE DISEÑO GRÁFICO CIBERTEC .000 a 5. método muy laborioso ya que se necesitaban de 4. también sobre la anatomía. Los Copistas Pero las primeras personas en desarrollar una copia de un texto original teniendo en cuenta la tipografía utilizada en el mismo fueron los copistas. Escribían un manuscrito en un periodo de varios meses de trabajo. También es importante reseñar que en Europa se comenzó a imprimir utilizando para ello bloques de madera grabados. donde se utilizaban signos sueltos. Persia y Asia Central. Estos primeros impresores obtenían juegos de naipes y estampas de santos. 1. 1. Los copistas eran personas que reproducían los libros a mano. la más habitual en estas ilustraciones). Historia y evolución de la Tipografía hasta nuestros días Inicialmente debemos enmarcar la palabra tipografía.1. Las herramientas que más utilizaban los copistas eran: penna (la pluma o péñola). La técnica empleada a través de muchos años era sujetar la péñola con la mano derecha y el raspador con la izquierda. Después el libro debía ser ilustrado por los iluminadores que posteriormente eran los encargados de dibujar las miniaturas e iniciales miniadas (de minium. Un copista con años de experiencia era capaz de escribir de dos a tres folios por día. aspectos sobre composición de los párrafos. amanuense. desperfectos) del pergamino. utilizando para ello piezas móviles intercambiables y reutilizables. Japón.1. es originario de la india.3. rasorium o cultellum (raspador) y atramentum (tinta).TIPOGRAFÍA DIGITAL 14 Dentro de estas páginas encontraremos los datos más importantes sobre las medidas utilizadas en tipografía.000 signos diferentes para lograr una composición y su posterior impresión. Este proceso les servía para corregir los errores en la escritura y para subsanar las irregularidades (arrugas. como el arte de imprimir caracteres. desde mucho antes del año 1400. Los Tipos Móviles Debemos atribuirle a un Orfebre perteneciente a la familia burguesa de Gensfleisch de Maguncia llamado Johannes Gutenberg (1398 . en las cuales las imágenes y los textos eran grabados en una única pieza. se hace referencia sobre la importancia de diferenciar los medios con los que se trabaja actualmente. haciendo énfasis en separar la tipografía tradicional. como se clasifican las familias. Algunos autores afirman que la impresión con bloques grabados.3. que eran elaborados con barro cocido desde el siglo XI. En un capítulo titulado manual contra digital. estos eran pequeños y tenían patrones que se repetían en todo el tejido. presentación y variaciones del carácter.1.3. sustancia que producía el color rojo de la tinta. que luego eran transferidos al papel por presión. teniendo en cuenta sólo lo que se refiere a la escritura del libro. De esta actividad se encuentran precedentes en China. De allí paso a Egipto. de los procesos digitales.

1. quién era copista y dibujante de iniciales en París y se cree que había trabajado previamente con Gutenberg. antimonio y estaño. La tinta utilizada para imprimir los bloques de madera. por lo que incluso realizo una preparación de la tinta. tenía más de 24 prensas. y no servía con los tipos de metal.TIPOGRAFÍA DIGITAL 15 móviles. continúa durante un largo período. El colofón dice "Impreso por Alberto Durero". Personajes influenciadores de estilos Anton Koberger (1440 . Para ello necesitaba un metal que fundiera con facilidad.3. para poder transferir la tinta al papel. se difundió por toda Europa el artilugio de Gutenberg. Schöffer fundió sus propios tipos. Orfebre de oficio. con muchas ilustraciones. Los caracteres de Gutenberg fueron una perfecta imitación del estilo de los escribas alemanes. las iniciales CIBERTEC CARRERA DE DISEÑO GRÁFICO . tomo posesión del material de la imprenta y en asociación con el alemán Peter Schöffer. La aleación utilizada desde entonces está compuesta de plomo. una letra cuadrada. quién mantenía una querella con el arzobispo. que fluyera por toda la matriz. Después de idear la forma de tallar los bloques en relieve para obtener punzones de cada carácter. Por ello. logran editar varios volúmenes. que se podían combinar. Con estas habilidades fundió caracteres metálicos individuales. escribe tres libros en uno de ellos. operadas por más de 100 oficiales. rápidamente. Luego de la muerte de Fust. en el que se utilizaban caracteres móviles confeccionados en arcilla cocida y sujetos por una forma de hierro o los bloques de madera grabados. Sus ediciones se enmarcan dentro de los incunables.3. entre ellas 15 biblias. Originario de Nuremberg. artista gráfico y pintor. se refiere a la forma de las letras. Johann Fust quién fuera el capitalista mayoritario del proyecto de Gutenberg. varias librerías y una red de comercialización en toda Europa. por lo que no se sabe si el también participo en dicha obra. Según muchos autores el impresor más importante de Alemania y toda Europa.1513). para formar palabras. los impresores al igual que casi todos los pobladores tuvieron que emigrar. para la impresión se utilizaron tipos de Koberger. incluso copió y perfeccionó las ligaduras y los caracteres con terminaciones especiales. hasta el histórico saqueo de Maguncia ocasionado por el conde Adolfo de Nassau. que eran elaboradas bajo su petición y altas exigencias. esas modificaciones se mantuvieron con muy pocas variaciones por más de cuatrocientos años. Viajo en dos oportunidades a Venecia.1. con sus conocimientos en metales y a una inversión de más de diez años y grandes sumas de dinero. que luego de impresas se podían reutilizar. ofrecía mucha humedad. se estima que imprimió más de 200 ediciones. logro mejorar el antiguo sistema para imprimir. donde conoce el renacimiento italiano y la teoría de la pintura y al regresar. sabía cómo fundir objetos metálicos y estampar en ellas letras o imágenes. que contando 27 años de edad. Hacia el año 1470. quién era su padrino. muy compacta. también requería que luego de enfriarse ofreciera una dureza que pudiera soportar la presión ejercida y así su posterior utilización. publica "El Apocalipsis" en latín y alemán. en tamaños amplios. Por lo que.1528). Alberto Durero (1471 . Con 15 grabados en madera de su puño. por ser tinta de agua ligera extraída del encino. que luego sobre metales más blandos formaría el molde o la matriz. Imprimió con tipos góticos propios. con su versión de las revelaciones de San Juan. en la que usaba una mezcla de aceite de linaza y de pigmentos de la pintura de óleo. Para la impresión modifico prensas existentes para la elaboración del vino y del papel.

le proponen hacerse cargo de la imprenta oficial del Duque de Parma. John Baskerville (1706 . En 1742 imprime dos muestrarios de su trabajo y seguidamente su famoso "Manuel Typographique". estudioso del griego y del latín. que cambio su arte de grabar culatas. los cuales invadieron todas las imprentas inglesas. Diseñador de tipos y grabador de troqueles. que en 1490 comenzó actividades como impresor y editor en Venecia. Fue uno de los pocos en la historia capaz de tallar. hijo de un impresor de escasos recursos.TIPOGRAFÍA DIGITAL 16 romanas. Con la ayuda de Griffo (Francesco de Bologna). Ofrecía un sistema modular para construir los caracteres partiendo de unidades matemáticas. Francés. los trazos marcaban un alto contraste. sus tipos eran altamente legibles y firmes lo que los hacia agradables. diseñó y talló una nueva familia construyó una nueva prensa. impresor y grabador. Se alejó de la idea de ser impresor y se concentró toda su vida a perfeccionar sus matrices. convirtiéndose en el impresor privado de la corte.1766). en donde intenta establecer sus medidas tipográficas. Maestro. existe una lenta transición entre los trazos terminales. Sus tipos eran cada vez más rígidos. Willian Caslon (1692 . que vendía a los impresores moldes listos para su utilización. Italiano. calígrafo.1768). editor. Admirador de Willian Caslon. Paso su vida diseñando y tallando tipos con los que se ganaba la vida. escritor. Pierre S. Fournier el Joven (1712 . Inglaterra. Cerca del año 1720. quién diseño tipos de forma independiente para los impresores. Sus caracteres eran más anchos. Sus romanas eran más estrechas y las cursivas muy legibles. se inicia como diseñador y fundidor de tipos. donde tallaba bloques de madera. Sus tipos los diseño alejándose levemente de la modulación oblicua. Imprimió una edición de cinco volúmenes de las obras de Aristóteles. Aldo Manuncio (1450 . ligeramente inclinada hacia la derecha y la llama cursiva. introdujo los caracteres griegos tallados y tomo incluso sus numerosas abreviaturas. estos marcan el final del diseño de tipos de estilo antiguo. Hombre dedicado a la armería. Entre sus modelos encontramos caracteres que se siguen usando en la actualidad. también copia la cursiva manuscrita humanística. En 1430 estableció una fundición de tipos. por la talla de punzones para tipos de encuadernar. los trazos tenían un marcado contraste. fundir e imprimir tipos. O como también se hacía llamar Aldus Pius Manutius.1813). grabador y diseñador de tipos. el contraste entre los trazos se acentuaban. que fueron inspiradas por el trabajo de Griffo. decide realizar los caracteres CARRERA DE DISEÑO GRÁFICO CIBERTEC . lo que contribuyo en el desarrollo del alfabeto. francés. fabricaba sus propias tintas. una variedad de la romana.1515). Claude Garamond (1480 . Giambattista Bodoni (1740 . al retornar a su casa cumpliendo 28 años de edad. Con una idea muy geométrica y matemática. Realizo 56 ediciones en su imprenta de Birminham. nacido de familia de impresores. con instrucciones precisas para su construcción. En el siglo XVIII el tamaño de los tipos era arbitrario y cada fundidora tenía sus propias medidas. trabajo como dibujante para su hermano en una fundición llamada "Le Be". contrariamente a la época en donde se imitaba los caracteres de la Romain du Roi. Su versión del abecedario romano fue tan extraordinaria que permitió la impresión de libros extremadamente legibles. que logro viajar a Roma y aprender el troquelado.1561). mandaba a elaborar los papeles bajo sus propias especificaciones y luego de imprimir prensaba el papel entre planchas de cobre calientes para producir un efecto especial.1775).

si pulía la piedra y dibujaba sobre ella con una tinta grasa con cera. el cual hereda de su padre la fundición de tipos. que consistía en fundir el duplicado de una superficie impresa en relieve. al que denomino litografía. espaciados entre las líneas y una gran importancia al blanco. Sus impresiones marcaron una pauta. logrando una asombrosa regularidad y belleza.1834). jabón y negro de humo. segundo hijo de Francois Ambroise Didot. Se dio cuenta que algunas piedras calcáreas tenían afinidad tanto por el agua como por la grasa. grandes márgenes. caracteres idénticos solo que en una versión delgada y otra gruesa. Francés. Entre sus inventos encontramos el estereotipado.1804). diseño sencillo y elegante. idénticos. Quién en 1775 mejoró el sistema del punto tipométrico de Fournier y propuesto uno que lleva su nombre. salvo donde estaba el dibujo. al espacio sin imprimir. En 1798 en Alemania. por ende. descubrió un procedimiento de impresión. Diseñó lo que se conoce como romana moderna con una modulación perpendicular a la línea y los terminales son filiformes.TIPOGRAFÍA DIGITAL 17 con rasgos característicos. Francois Ambroise Didot (1730 . estos tipos fueron rápidamente copiados e imitados en toda Europa. que al mojarla y entintarla. CIBERTEC CARRERA DE DISEÑO GRÁFICO . Logrando unificar nombrando las fuentes por sus tamaños del cuerpo de metal en puntos. lo dibujado se fijaba a la superficie y la recubría con una solución de goma más ácido. para producir una matriz. adoptando como base el "pied du roi" dividido en 12 pulgadas francesas. el agua repelía la tinta. para todas las formas.1836). Firmin Didot (1764 . Diseño entre otros tipos "Maigre" y "Gras". Alois Senefelder (1771 .

TIPOGRAFÍA DIGITAL CARRERA DE DISEÑO GRÁFICO 18 CIBERTEC .

solo nos ofrecen una presentación.271). esos caracteres unidos en una sola pieza o tipo. incluso muchas veces incompletas. Minúsculas Llamamos así a los caracteres que parten de las formas minúsculas carolingias. en algunos caracteres como el caso de la b. h. d. dificultando así la lectura de todo un renglón compuesto. Los caracteres en mayúsculas se deben utilizar para identificar el comienzo de un párrafo. letras altas y bajas. 2000. sobrenombres. para identificar nombres propios. personificaciones.2. que entre ellos podemos mencionar los signos de puntuación. en tamaño como en movimiento. y. El Alfabeto. cuerpos celestiales. las cuales ofrecen la posibilidad de echar mano de todos estos símbolos.TIPOGRAFÍA DIGITAL 19 1. etc. más sus respectivos símbolos adicionales. los cuales permitirán armar una oración o frase.1. Estos caracteres no tienen diferencia en el tamaño y mantienen un aspecto homogéneo. l. etc. O en los caracteres g. sucesos históricos. lo que las hace ver en su totalidad muy semejantes. sus rasgos ascendentes rebasan la línea media hasta encontrarse con la línea de los ascendentes. hacen que sean rápidamente identificables como piezas individuales dentro del conjunto. frases y párrafos. manejo de los diversos signos tipográficos. con excepción el caso de la J y la Q. que se realizaban con el propósito de mejorar la prosa en pares de acoplamiento difícil o para aligerar la composición. las cuales se dibujan partiendo de una línea base y extendiéndose hasta la línea media. 1. después de un punto o equivalente.2. al igual que pasa con las mayúsculas.1. por supuesto que de todos ellos hacemos uso. que sus rasgos descendentes rebasan la línea base hasta toparse con la línea de los descendentes." (De Buen. ANATOMÍA DE LA LETRA 1. Ideales para componer oraciones. como el caso de los caracteres sin acentos o privado de números. p. con sus respectivas vocales y letras acentuadas. CIBERTEC CARRERA DE DISEÑO GRÁFICO . k. aumentando así la velocidad de lectura de todo el párrafo. al presentar una diferencia tan marcada. Así como encontramos fuentes que dentro de su especialización.. negrillas. versalitas. que en algunas familias tienen rasgos que sobresalen a la línea base. f. en otras fuentes más elaboradas versalitas y en casi todos los casos encontramos un juego de símbolos. dioses.. respetando en la composición la ortografía y la ortotipografía.1. ". j. t. q. En un juego de fuentes encontramos mayúsculas y minúsculas. numerales. Tipos de Caracteres Mayúsculas Llamamos así a los caracteres que parten de las formas romanas en las capitalis “monumentalis”. las reglas ortotipográficas hablan del correcto uso de las cursivas. p.2. incluso de las ligaduras. Hoy en día encontramos fuentes especializadas. estas se dibujan tomando como origen la línea base y se extienden hasta la línea de las mayúsculas. Los caracteres presentan un juego completo de minúsculas.

Existen caracteres redondos con ángulos que varían de 2 a 7 grados en su relación vertical. todos los signos misceláneos. el punto. extrafina. cuyas formas mayúsculas son adaptadas en trazo y peso. permitiendo escribir a renglón seguido.TIPOGRAFÍA DIGITAL 20 Versalitas Llamamos así a los caracteres que parten de las mayúsculas. también los signos monetarios. los dos puntos. bastardilla y en honor a su creador aldinas. Los valores pueden designarse en el siguiente orden ultrafina. Por su orientación Los caracteres pueden ser derechos o inclinados. sin mayores alteraciones. regular. Todos los caracteres adicionales que en las fuentes permiten completar la composición tipográfica. el tamaño y contraste de las minúsculas. Por su valor Pueden ser finas. armar un valor financiero e igualmente. Estos caracteres dentro de la composición tienen usos y significados diferentes a las redondas. 1. Por lo general. El contraste similar al de las minúsculas permite su inclusión en un párrafo. mediana. como ese símbolo denominado calderón. normales o negritas. valor y espesor.1. Por su espesor Los caracteres tienen una estructura o canon que limita sus proporciones en cuanto a su ancho. que CARRERA DE DISEÑO GRÁFICO CIBERTEC . además de su cambio formal entre la caja baja y alta. fina. cuando se compone en versales se debe aumentar el interlineado y el interespaciado. hasta una línea que se ubica en la línea media o ligeramente mayor a esta. venecianas. todas ellas parten del mismo diseño. podemos encontrar caracteres condensados o extendidos en una misma fuente y por ende familias que nos ofrecen una gama tan amplia de caracteres. que indicaba el cambio de párrafo. Por lo tanto.. a más o menos. nombres de autores y personajes. etc. encontramos cambios de orientación. el punto y coma. en el primer caso hablamos de las Redondas. pero variando el grosor de sus astas y por ende su peso visual. También son llamadas por su origen: itálicas.2. negrilla. Estos caracteres están dibujados partiendo de líneas verticales que tienen una relación de 90 grados con respecto a la línea base.2. los cuales junto a los signos matemáticos permiten por ejemplo. incluso en muchos casos se dejaba el espacio para que luego fueran rubricados. lo que las hace ver geométricas y muy rígidas. grifas. extranegra y ultranegra. seminegra. incluso en el primer párrafo de un capítulo. entran aquí: los de puntuación. la coma. Variación de caracteres Los caracteres se presentan en diferentes y variadas formas. por lo que pueden variar angostando o ensanchando dicha estructura. las cuales mantienen una relación directa con todas sus partes. Símbolos Estos símbolos comenzaron en la antigüedad siendo usados por la imperante necesidad de imitar el trabajo que realizaban los copistas. Estos caracteres son ideales para componer títulos y subtítulos. que se dibujan tomando como partida la línea base.

Dentro de cada familia. que debemos reconocer y respetar. comprimida. símbolos de puntuación..blogspot. más que una composición tipográfica. es decir proporciona la altura que tendrá la caja baja sin sus ascendentes o descendentes. por ende CIBERTEC CARRERA DE DISEÑO GRÁFICO . negra y ultranegra. media. La proporción de los ejes: condensada.TIPOGRAFÍA DIGITAL 21 usarlos todos en una misma composición sería un arte. El tamaño y el puntaje de las letras Partiendo de la línea base encontramos guías que delimitan la altura de los caracteres. La forma del trazado: perfilada.. etc. de las equis o altura de la X. Otras variantes de una fuente incluyen versalitas. redonda. monetarios. ancha. Línea de las mayúsculas o altura de mayúsculas d. y cada variación tiene un uso y una tradición.com/ La línea media determina la altura de las equis.Líneas de las tipografías Fuente. Línea de los descendentes Figura 4. cursiva e inclinada. etc. Esta altura no es común en todos los caracteres.Tomado de http://admb940829. Línea media. estrecha.2. ensanchada y expandida. book. números. las variables tipográficas permiten obtener diferentes soluciones de color y ritmo. 1. manteniendo un criterio de diseño que las "emparenta" entre sí. otras sólo unas pocas o ninguna. ya que esta depende de cada fuente en particular. redonda. sombreada. seminegra. c. El grosor del trazado: ultrafina. matemáticos y misceláneos. Línea base b. fina. Las variables constituyen alfabetos alternativos dentro de la misma familia. Algunas familias poseen muchas variaciones.2. Línea de los ascendentes e. las cuales podemos llamar de la siguiente forma: a. minúsculas y capitales. La inclinación de los ejes: redonda. Las variaciones de una fuente se obtienen modificando propiedades como:  El cuerpo o tamaño: mayúsculas. números antiguos.

j. Esta particularidad permite que los caracteres aparezcan alineados unos al lado del otro. f. minúsculas. caso de la letra A.3. Partes y secciones de las letras Los caracteres se dibujan partiendo de una línea base que determina la linealidad del conjunto. a la cual se denomina Cuerpo. palabra que deriva del latín corpus y que sugiere a una figura geométrica de tres dimensiones. contra una vertical. logrando estabilidad. en esta línea se asientan la base de las mayúsculas. se mide en puntos. d. en el caso del Ápice. h. l. números y otros símbolos. que en los caracteres se forma donde dos trazos convergen. como el caso de la b. V o al pie de una M.2. Hay que aclarar que el carácter no tiene una correspondencia directa con la talla del tipo. se requiere de sutiles ajustes y modificaciones. q. INTERLINEADO: Espacio entre una línea y otra y se miden en puntos a partir de la descendente de una línea a la ascendente de la siguiente línea. k. se mide en puntos. Esas porciones se denominan Ascendentes o ascenso. y va desde la alineación superior hacia la alineación inferior. Medidas tipográficas LETRA: Signo. y t. LINEA: Es el conjunto de palabras acomodadas una después de otra en forma horizontal. y. como es el caso de las letras g. 1. como la diferencia visual que se da en dos barras iguales que se encuentran en una posición horizontal. CARRERA DE DISEÑO GRÁFICO CIBERTEC . algunos de estos cambios son tan pequeños que llegan a pasar desapercibidos. como se denomina a cualquier parte de una letra minúscula que se extiende por debajo de la línea base.TIPOGRAFÍA DIGITAL 22 encontramos relaciones donde el tamaño de la equis es muy amplio o muy reducido en comparación con la altura total de la fuente. las letras redondas deben sobresalir al tamaño de la x. ese tamaño de la equis tiene una importancia primordial en la legibilidad de los caracteres.2. como por ejemplo. mantienen una relación con ella. TAMAÑO DE LETRA: Se le denomina cuerpo. limita la altura de los Descendentes. representación gráfica del lenguaje hablado. esa talla se obtiene midiendo desde la parte posterior hasta la parte anterior del bloque. incluso aquellos que sobresalen por debajo de esta línea. También se deben realizar correcciones en los trazos que están ubicados en la mitad de la forma. ya que estos tenderán a verse más bajos. esto es tomando la ascendente y la descendente. En algunas fuentes esta línea puede coincidir con la línea de los ascendentes. que se mide desde la línea base y representa el cuerpo de las mayúsculas. 1. a esa adaptación se le denomina Ajuste óptico. los cuales deben rebasar la línea base.2. ya que sino parecerán más pequeñas. p. palabra que deriva del latín apex y que refiere a una punta o extremo. La línea de los descendentes.1. que se extienden por encima de la línea media. la cual limita el recorrido que hacen los trazos de la caja baja. La línea de las mayúsculas determina la altura de los caracteres de la caja alta o mayúscula. Para lograr una correcta linealidad en los caracteres que formaran toda la fuente.

.. que define su forma esencial.Unión de dos astas diagonales en la parte superior de la letra. SERIFA O RASGO. CARTELA O APOFIGE. En el caso de la letra p podemos ver un Asta o bastón descendente. LIGADURA. ASTA ONDULADA O ESPINA.TIPOGRAFÍA DIGITAL 23 ASTA O BASTÓN. Presenta características propias en cada carácter y según su distancia. sin ella la letra no existiría.Rasgo principal de la letra..Pequeño remate que se agrega en las letras para brindar estabilidad y un límite visual.Se refiere al trazo principal de la letra S su trazo va de izquierda a derecha tanto en la capital como en la minúscula. En el caso de las letras A. dirección y forma pueden tomar otras denominaciones..Pequeño trazo curvo que enlaza el asta vertical con las terminaciones o remates. E y k podemos ver un Asta o bastón ascendente.. t. VERTICE O APICE. CIBERTEC CARRERA DE DISEÑO GRÁFICO .

a.TIPOGRAFÍA DIGITAL 24 ANILLO. BRAZO.Trazo horizontal o vertical que no forma parte expresa de la letra. PANZA. OJO.. CURVA. BUCLE. Es muy importante porque aporta a la legibilidad de una tipografía. OJAL. q. CONTRAPUNZON O BLANCO INTERNO. lo que aporta una gran elegancia. CARRERA DE DISEÑO GRÁFICO CIBERTEC . d.. m. CONTRAFORMA.Trazo cuervo que encierra el blanco interno en las letras como la b d o p. puede tener una longitud regular o diferentes medidas. VIENTRE..Parte interna que poseen algunas letras cerradas o parcialmente cerradas como la p.

f. CIBERTEC CARRERA DE DISEÑO GRÁFICO .TIPOGRAFÍA DIGITAL 25 ASTA TRANSVERSAL.Es el trazo pequeño que sale de la cabeza de la «g» minúscula de cola cerrada.Trazo horizontal que se cruza por algún punto del asta principal... OREJA. CRUZ O TRAVESAÑO.. LÁGRIMA O GOTA.Terminación que se encuentra generalmente en los trazos curvos de la cabeza de algunas minúsculas como la a. c y r.. PANZA.Son los bucles o formas redondas de las letras que apoyan sobre la línea de base.

Final de un trazo que no termina en remate sino con una pequeña proyección de un trazo. ESPOLON... BARRA. AGUIJÓN O GANCHO. FILETE.Línea horizontal entre verticales.Prolongación inferior de algunos rasgos. PERFIL. CARRERA DE DISEÑO GRÁFICO CIBERTEC .. diagonales o curvas.. COLA O PIE. UÑA.Extensión que articula la unión de un trazo curvo con otro recto.TIPOGRAFÍA DIGITAL 26 PATA.

TIPOGRAFÍA DIGITAL 27 PICO. F. Su aspecto es más demarcado. F.. CIBERTEC CARRERA DE DISEÑO GRÁFICO .Trazo horizontal que tiene uno de sus extremos libre. La encontramos en las letras con partes rectas como la E.Rasgo similar a lla uña. L. L su aspecto es más demarcado. BRAZO..en las letras con partes rectas como la E.

TIPOGRAFÍA DIGITAL CARRERA DE DISEÑO GRÁFICO 28 CIBERTEC .

1. Es un tipo de letra que imita la escritura a mano que llevaban a cabo los monjes con un plumín ancho. de ojo más ancho y más legible. Varía desde la más antigua. Familias tipográficas Una clasificación histórica de las diversas familias tipográficas por estilo morfológico (forma) es: 1.3.. hasta las influenciadas por el estilo renacentista.TIPOGRAFÍA DIGITAL 29 1.blogspot. Figura 6.Tomado de http://otros2.Remates de las familias tipográficas Fuente.1..1.Tomado de http://www. de ojo pequeño.3.net/luti82/clasificacin-morfolgica 1.Tipografía Gótica Fuente..com/2010/08/identidad-tipografica-camelia_3153..html CIBERTEC CARRERA DE DISEÑO GRÁFICO . MORFOLOGÍA TIPOGRÁFICA Figura 5.3. Gótica Fue el primer carácter de imprenta usado en Europa.slideshare.

Century Oldstyle. con marcada tendencia a modular más las astas y a contrastarlas con los remates.. que dejan la forma triangular para adoptar la cóncava o la horizontal. Las fuentes Romanas son regulares. en concreto de la caligrafía humanista del siglo XV. Ejemplos de este grupo son las fuentes Baskerville y Caledonia. presentan un fuerte contraste entre elementos rectos y curvos y sus remates les proporcionan un alto grado de legibilidad. tienen una gran armonía de proporciones. cercana a la caligrafía.2. por obra de Grandjean.1.. Goudy. Esta evolución se verificó. principalmente. a finales del siglo XVII y hasta mediados del XVIII. a partir de los grabados de Grifo para Aldo Manuzio. por la modulación de la misma y por la forma triangular y cóncava del remate.Tomado de https://g15unlz. aparecen a fines del siglo XVI en Francia.Fuente Romana Antigua Fuente. Entre ellas destacan las fuentes Garamond. Se distinguen cuatro tipos: Las Romanas se dividen cinco grupos fundamentales: Romanas Antiguas: También llamadas Garaldas (por Garamond).3. Caslon. Se caracterizan por la desigualdad de espesor en el asta dentro de una misma letra. donde los pies de las letras se tallaban para evitar que la piedra saltase en los ángulos. y su trazo presenta un mediano contraste entre finos y gruesos. Fournier y Baskerville. Romana (o con serif) Formado por fuentes que muestran influencias de la escritura manual.com/2013/04/15/familias-tipograficas/ Romanas De Transición: Se manifiestan en el siglo XVIII y muestran la transición entre los tipos romanos antiguos y los modernos. Figura 7. y también de la tradición lapidaria romana. Su contraste es sutil.wordpress. con discretas puntas cuadradas. CARRERA DE DISEÑO GRÁFICO CIBERTEC . presentando una gran variación entre trazos. Times New Roman y Palatino.TIPOGRAFÍA DIGITAL 30 1. su modulación pronunciada.

con el asta muy contrastada y con una marcada y rígida modulación vertical. Su característica principal es el acentuado y abrupto contraste de trazos y remates rectos.. hacen de ella un tipo que. Resultan imponentes a cuerpos grandes.com/2013/04/15/familias-tipograficas/ Romanas Incisas: Otro grupo aislado dentro de las romanas. creadas por Didot. al igual que las mecano. Figura 9. lo que origina fuentes elegantes a la vez que frías. tan solo el hecho de poseer asiento sus caracteres. es muy legible a cualquier cuerpo. Bodoni. reflejando las mejoras de la imprenta. al componerse a cuerpos pequeños y en bloques de texto corrido. No se puede hablar de remates. aunque es extremadamente difícil de digitalizar.ebanking. son letras en la tradición romana más antigua.. No tienen modulación ni contraste. tal como ocurre con las serif. pero acusan cierta falta de legibilidad al romperse los ojos del carácter.wordpress. Su ojo grande y sus ascendentes y descendentes finos.Fuente Romana de Transición Fuente.Fuente Romana Moderna Fuente. Romana Moderna: Son un grupo aislado que no guarda ninguna semejanza constructiva con el resto de los tipos romanos con remate. ligeramente contrastadas y de rasgo adelgazado ahusado.Tomado de http://www.Tomado de https://g15unlz.jpg Romanas Modernas e Incisas: Aparecen a mediados del siglo XVIII. una línea imaginaria de lectura. Fenice y Modern Nº 20. Ejemplos destacables podrían ser Firmin Didot. CIBERTEC CARRERA DE DISEÑO GRÁFICO . pero sus pies abocinados sugieren. con remates finos y rectos. Entre sus fuentes podemos destacar Lubalin y Stymie.. Sus caracteres son rígidos y armoniosos.TIPOGRAFÍA DIGITAL 31 Figura 8.cl/wp-content/uploads/2014/07/santander.. siempre del mismo grueso.

. FRANKLIN GOTHIC.3. Mantienen una estructura lineal simple.1.html 1.3. Egipcia Se deriva del romano.4.Tomado de http://tpereira-crn. Algunas de estas letras son: HELVETICA.blogspot. como un palo sin ramas ni hojas...Fuente Romana Incisa Fuente.3.org/honda-logo/ 1. como por ejemplo. existen muchas más y hay diferentes estilos dentro de cada una. Tienen astas iguales y más anchas y el remate rectangular (Rockwell.TIPOGRAFÍA DIGITAL 32 Figura 10. Palo seco (o sin serif) Son las letras que no tienen detalles en su composición. FRUTIGER o FUTURA.Fuente Egipcia Fuente. CARRERA DE DISEÑO GRÁFICO CIBERTEC ..Tomado de http://mkalty. GILL SANS..1.com/2013/01/clasificaciones-tipografiques. Gill Sans Bold. Figura 11.. UNIVERS. Clarendom). Gill Sans Bold Italic. Al igual que el primer grupo.

CIBERTEC CARRERA DE DISEÑO GRÁFICO .5.3.3.Fuente Palo Seco o sin serif Fuente.Fuente Rotulada Fuente.org/st-bernard/wp-content/uploads/2013/01/ToyotaLogo1.Tomado de http://www. Decorativas Estas fuentes no fueron concebidas como tipos de texto.. y la tradición caligráfica o cursiva en la que se inspiró el creador..1. resultan por lo general poco legibles. Block-Up.com/galeria/destilerias-castaneda/ 1.1.garnatatype.. Ejemplos de este tipo son las fuentes Bombere. Croissant.jpg 1.6. Fuentes rotuladas Las fuentes rotuladas advierten más o menos claramente el instrumento y la mano que los creó. Figura 13. por lo que no se adecuan en la composición de texto y su utilización se circunscribe a titulares cortos. sino para títulos y display. Existen numerosas variaciones..Tomado de http://www. Neon y Shatter. pero podemos distinguir dos grupos principales: Fantasía: Similares en cierto modo a las letras capitulares iluminadas medievales.stbernardproject. Buster.TIPOGRAFÍA DIGITAL 33 Figura 12.

html 1. sin ningún tipo de norma común que marcara las características de las letras..TIPOGRAFÍA DIGITAL 34 Figura 14. Medidas tipográficas A partir de la invención de la imprenta por Gutenberg se comenzaron a diseñar y fundir diferentes tipos de letra según las necesidades técnicas de cada diseñador. Gallia..Fuente Decorativa de Fantasía Fuente. siendo su tamaño total (denominado cuerpo) y el de sus partes totalmente CARRERA DE DISEÑO GRÁFICO CIBERTEC . Caslon Antique.me/walls/girls/happy-new-year-brick-wall-2501741-3000x2000. Cabarga Cursiva.. LCD.jpg Época: Pretenden sugerir una época. Anteponen la función a lo formal. Broadway. Kabel. procediendo de movimientos como la Bauhaus o el Art Decó.Fuente de Época Fuente. Muy utilizados en la realización de rótulos de señalización de edificios y anuncios exteriores de tiendas. Ejemplos de este grupo son Futura. casi siempre uniformes.blogspot..2. Cada tipo era conocido por el nombre que le daba su creador (generalmente el suyo propio). Data 70. una moda o una cultura.Tomado de http://hdscreen. Peignot.3. con trazos sencillos y equilibrados. Figura 15.com/2011/02/tipografia.Tomado de http://diegosdesigns.

a partir de la cual se construye las imágenes. etc. En 1760 Francois Ambroise Didot propone mejoras al sistema de Fournier. definido como la menor unidad de información visual que se puede presentar en pantalla. 7. 60. La escala común de tamaños es la siguiente: 6. Para ello tomó el tipo de letra más pequeño que comúnmente se usaba. llamados por el número de puntos que media el cuerpo de los mismos. 72. de Oratore. manteniéndose su altura en 63 puntos (23. en donde el punto tipográfico está basado sobre la pulgada inglesa.3515 mm). Consecuencia directa de esta libertad de creación fue que las imprentas no podían intercambiar material tipográfico entre ellas. equivalentes a 23. pero fue Pierre Simón Fournier el Joven. llamado “nomparela”. El sistema Didot ha sido adoptado en todas las fundiciones del mundo. cuya equivalencia con el sistema métrico es de 0. excepto en Inglaterra y Estados Unidos. CIBERTEC CARRERA DE DISEÑO GRÁFICO . 32. equivalente a 4. ya que era similar al cuerpo empleado en la edición de la obra Cicerón. A la medida 12 puntos (el doble de la nomparela. 36. 96 Con la aparición de los ordenadores y su aplicación al trabajo editorial y al diseño gráfico se hizo necesaria la introducción de nuevos sistemas de definición de fuentes para pantalla que permitieran su correcta impresión posterior y de nuevas unidades de medida que se acercaran más a la naturaleza propia de los monitores.688 mm). 84. medida de longitud usada en aquella época. Los monitores de ordenador utilizan como unidad de medida el píxel.512 mm) la llamó cícero. y a base de éste empezó a fabricar. adoptando como base el Pied du roi (pie de rey). 8.TIPOGRAFÍA DIGITAL 35 arbitrarios. adoptó como unidad básica el grueso de dos puntos. todo el material tipográfico que fundía.352 mm. La altura del tipo la fijó en 63 puntos fuertes (llamados así porque la altura exacta oscila entre 63 puntos. 28. uno de los mejores punzonistas y fundidores del siglo XVIII. A partir de ese momento se comenzaron a utilizar tipos en tamaños constantes. 14.312 mm). Así. 12. y 63 y medio.377 mm). En 1886 la American Type Founder's Association estableció la medida de la pica en 1/72. 9. desde 1742.). cuatro puntos de pie de rey equivalen a dos puntos tipográficos. que dividió en 12 partes. en el que definió un sistema de proporciones para la fundición sistemática de los caracteres. 10. quien publicó en 1737 su Manuel Typographique. que realizó el impresor Schöffer a finales del siglo XV. 20. Los tipos se funden generalmente en tamaños estandarizados que van desde los 6 hasta los 96 puntos. 18. Una de las primeras unidades tipográficas fue la pica. Equivale a 1/6 de pulgada o 12 puntos (4'233 mm. siendo adoptado este sistema por los Estados Unidos y las colonias inglesas. obteniendo una nueva definición de cícero.27 de una pulgada (aproximadamente 0. Martín Domingo Fertel y Claude Garamond buscaron ya establecer pautas en la fundición de tipos. 24. compuesto ahora por 12 puntos (aproximadamente 0. que llamó duodecimal. a cada una de las cuales dio el nombre de punto. 48. 40. 11. y lo dividió en seis partes. Considerando Didot que un punto de Pied du roi (pie de rey) era excesivamente delgado para formar una apreciable graduación de caracteres. dos puntos de pie de rey equivalen a un punto tipográfico. Aparentemente se compusieron en un cuerpo de letra que se acabó llamando como ellos. 16. nombre dado en la Inglaterra del siglo XV a unos libros destinados a regular el ritual de las fiestas movibles eclesiásticas.

sin embargo.217 mm. formado por 12 puntos de Didot (4. La unidad. Los puntos se utilizan para especificar el cuerpo de un tipo. Las picas. 512 mm. unidades dependientes de la resolución de pantalla usada.). formado por la altura de las mayúsculas más un pequeño espacio por encima y por debajo de las letras.376 mm) y el cícero. entre las que destacan las basadas en el sistema métrico decimal.54 centímetros). sino también en sistemas fotográficos digitales y en televisiones de alta gama. pero hasta la fecha ninguna de ellas ha cuajado. el anglosajón y el europeo. a su vez. Píxeles. Seis picas o 72 puntos equivalen aproximadamente a una pulgada. llamadas tipómetros. actualmente se usan dos sistemas de medidas tipográficas para trabajo en imprenta clásica:  El europeo. Las dos unidades de medidas básicas en tipografía son la pica y el punto (medida inventada por Didot). se utiliza para reducir o aumentar el set. Una pulgada tiene 72 puntos (2. proceso denominado "tracking". Tipos del mismo cuerpo pueden parecer que sean de distinta medida según la altura de la x. que tiene como unidades el punto de Pica (0. Normalmente. La conversión de unas unidades a otras es incómoda. Aun teniendo el mismo cuerpo. CARRERA DE DISEÑO GRÁFICO CIBERTEC . como la propuesta por la ISO (International Organization for Standarization). el propio avance de los medios digitales está estableciendo por si solo una estandarización basada en el sistema Postcript de Adobe. Asimismo. doce puntos equivalen.). ya que depende de la resolución usada (un pixeles a resolución 800x600 es mayor que uno a resolución 1024x768) Resumiendo. basado en el punto de Didot (0. a una pica. El ajuste del espacio entre dos letras para crear consistencia entre las palabras se llama "kerning". Cuadrícula tipográfica. en trabajos digitales se utilizan otros dos sistemas: Adobe Postscript. los puntos también se utilizan para medir la distancia entre las líneas. una letra con la altura de la x grande parece mayor que otra con la x pequeña. se usan para medir la longitud de las líneas. altamente difundido y aceptado en la actualidad. y lo normal es que nadie las realice en los talleres. El anglosajón. los cíceros y las picas vienen en unas regletas.352 mm).351 mm. Por otra parte.TIPOGRAFÍA DIGITAL 36 El tamaño de un píxel no es absoluto. una medida relativa que se determina dividiendo la eme (que equivale a un cuadrado del cuerpo de la letra). Existen muchas propuestas por lograr unificar las medidas tipográficas a escala mundial. no sólo en el diseño gráfico digital y el diseño web. Estos dos conceptos los veremos más adelante. cuya unidad es el punto de pulgada (unos 0.) y la Pica. así como la utilización de los píxeles como unidad de medida. formada por 12 puntos de Pica (4. que en ocasiones pueden hacer uso simultáneo de ambos sistemas. Por otra parte.

1. Variables Tipográficas Cuerpo El cuerpo es una medida que define la proporción del tamaño de una tipografía. Figura 16.2.. Algunos diseñadores definen la medida en base al ancho de la letra. La letra será negrita o bold.. normal o medium la tipografía cuyo trazo vertical tenga un grosor igual al 15 % del alto de la misma. Una letra será regular o normal cuando sus trazos tengan un espesor de un quinto (1/5) del ancho de la letra.Cuerpo de la fuente tipográfica Tono Se considera regular.TIPOGRAFÍA DIGITAL 37 1. La letra será CIBERTEC CARRERA DE DISEÑO GRÁFICO . cuando su grosor de trazo se ubique entre un cuarto (1/4) y un tercio (1/3) del ancho de la ene. considerando como referencia la ene (n) para las minúsculas y la hache (H) para las mayúsculas.3.Cuerpo de la fuente tipográfica Figura 17.

Figura 18.TIPOGRAFÍA DIGITAL 38 considerad blanca o light si tiene un grosor de trazo entre un sexto (1/6) y un octavo (1/8) del ancho de la letra ene. el diseño vertical rota al oblicuo en torno a un eje central horizontal. CARRERA DE DISEÑO GRÁFICO CIBERTEC . En las itálicas..Tono de la fuente tipográfica Fuente.com/2010/09/11/variables-de-familia/ Figura 19.Tomado de http://tiposformales.Tono de la fuente tipográfica Fuente..Tomado de http://tiposformales..com/2010/09/11/variables-de-familia/ Dirección Se considera normal a la tipografía cuyos trazos verticales forman un ángulo de 90º con la línea de base..

Dirección de la fuente tipográfica Proporción Se considera normal a la tipografía cuando su anchura es de aproximadamente 4/5 de la altura. Si el porcentaje es menor a 80% la versión es condensada y si es superior.. la versión es expandida.Dirección de la fuente tipográfica Figura 21.TIPOGRAFÍA DIGITAL 39 Figura 20.. CIBERTEC CARRERA DE DISEÑO GRÁFICO .

2. números. como algunas muy antiguas. transfiere. CARRERA DE DISEÑO GRÁFICO CIBERTEC .2.Tomado de http://tiposformales. Eso es exactamente lo que se pretende al escoger una tipografía para un diseño: COMUNICAR UNA IDEA. Los caracteres pueden presentarse en capitales. 1. Los signos de varias escrituras. contraste o tamaño. son llamados silabogramas (si describen una sílaba) o logogramas (si reflejan una palabra u oración. letra y palabra Caracter: Es esa señal o marca que se imprime.. La Tipografía por su diseño.3. idea o una función para dar forma a una expresión ya sea hablada o escrita.. En muchos casos el carácter se pierde o se confunde con las letras de los costados. forma. como algunos jeroglíficos). Palabra: La palabra es la unidad básica de un idioma y que por sí sola expresa un pensamiento. puede expresar ideas o reforzar el significado de las palabras. pinta o esculpe y viene a ser la unidad fundamental del lenguaje escrito.com/2010/09/11/variables-de-familia/ Cuando se modifica la proporción de una fuente tipográfica debemos tener en cuenta que podemos dificultar la legibilidad al condensar las letras entre sí. Letra: Una letra es cada signo gráfico de un sistema de escritura. Diferencia entre caracter.TIPOGRAFÍA DIGITAL 40 Figura 22. versalitas y símbolos y cada uno de ellos con sus formas bien definidas.Proporción de la fuente tipográfica Fuente. que permiten asociarlos a una fuente o a una familia y estas a su vez clasificarlas. minúsculas.

Los tipos móviles cambiaron a la sociedad y permitieron que la cultura llegue a todos. Existen tres concepciones en tipografía: morfológica.html Variables de familia: http://tiposformales.com/2010/09/11/variables-de-familia/ Variables tipográficas: https://g15unlz. 2. tono.TIPOGRAFÍA DIGITAL 41 Resumen 1. palo seco. Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta unidad: o o o CIBERTEC Clasificaciones tipográficas: http://tpereira-crn. Las variables tipográficas son: cuerpo. decorativas y rotuladas. por su valor y por su espesor.blogspot. 5. 3. creativa y estructural. 4. Los copistas fueron los primeros en ver la tipografía como un elemento gráfico de composición. romanas. Las principales variaciones tipográficas son: por su orientación. Las principales familias tipográficas son: góticas. La tipografía es el recurso principal del diseño. egipcias.com/2013/01/clasificaciones-tipografiques.com/2013/04/15/familias-tipograficas/ CARRERA DE DISEÑO GRÁFICO .wordpress. La tipografía ha sufrido de una larga evolución hasta nuestros días. dirección y proporción.

TIPOGRAFÍA DIGITAL CARRERA DE DISEÑO GRÁFICO 42 CIBERTEC .

1 2.TIPOGRAFÍA DIGITAL 43 UNIDAD 2 CONNOTACIÓN Y COMPOSICIONES TIPOGRÁFICAS LOGRO DE LA UNIDAD DE APRENDIZAJE Al término de la unidad.2 2. TEMARIO 2.2.2. el alumno aplica la connotación tipográfica para desarrollar piezas tipográficas o composiciones representativas del concepto que se desea transmitir.1.2.2 2. CIBERTEC CARRERA DE DISEÑO GRÁFICO .2.1 2.3 : : : : Interpretación tipográfica Denotación y Connotación tipográfica Connotación con Variables tipográficas Legibilidad 2.3 2.1 Tema 4 2.1.1.2 Tema 5 2.4 : : : : : Composición tipográfica Composición con tipografías Contraste Forma y Contraforma Herramientas de texto en Adobe Illustrator ACTIVIDADES PROPUESTAS Los alumnos investigan y componen una tipografía de lettering musical.

TIPOGRAFÍA DIGITAL CARRERA DE DISEÑO GRÁFICO 44 CIBERTEC .

TIPOGRAFÍA DIGITAL 45 2. INTERPRETACIÓN TIPOGRÁFICA 2.. Las Romanas Son las letras romanas..com/caratulas/Cristal-Y-Acero-Dracula-Rock-Opera-Gotico-De-TerrorFrontal.
 Figura 23.2.1. Es fundamental conocer las pautas que se han de seguir para seleccionar y aplicar una tipografía que se adecue al producto a potenciar. tradicional y artesanal.Connotación de las tipografías Góticas Fuente. CIBERTEC CARRERA DE DISEÑO GRÁFICO .1. Cada tipografía está sujeta a connotaciones sociales y en función de la tipología aplicada se pueden expresar distintas sensaciones: 2. Denotación y Connotación tipográfica A cada tipografía se le atribuyen diferentes habilidades o propiedades para transmitir una imagen estética que supera en ocasiones al propio texto. Su estilismo hace percibir cierta sensación de equilibrio y elegancia debido a sus finos trazos.php 2.1.coveralia. También tiene connotaciones religiosas.1. La Gótica Su fuerza y arcaísmo le confiere un aspecto duro.1.1.1.Tomado de http://www.1. Recuerda viejos tiempos y orígenes germánicos.

3.Connotación de las tipografías Romanas Fuente..1. Figura 25.com/pin/171699804513847161/ CARRERA DE DISEÑO GRÁFICO CIBERTEC .pinterest...Tomado de https://www. Se utilizan mucho en publicidad..net/author/tipoadmin/page/2/ 2.Tomado de http://tipografiadigital. Estilismo en tipografía indica proporcionalidad de la letra en sentido vertical dando la sensación de delgadez. Las mayúsculas son las de mayor legibilidad en papel. Las Egipcias: Se denominan así por las serifas o trazos ornamentales sobre los que descansan los trazos verticales.1.
 Figura 24.Connotación de las tipografías Egipcias Fuente.TIPOGRAFÍA DIGITAL 46 Es signo de clasicismo y poder.

Tomado de http://1.1.com/TJg2uqRKk_A/T8fGGJZ4UWI/AAAAAAAAABg/VHIJnL7Hh1o/s1600/3. Denotan un clasicismo muy suavizado.bp. Las de palo seco Se caracterizan por carecer de una base en los trazados verticales. Las Escriptas Esta familia engloba todas aquellas que transmiten sensación de haber sido hechas a mano dando la sensación de manuscrito rápido.1. dando la sensación de refinado pero poca naturalidad.
 Figura 26.jpg 2.5.. CIBERTEC CARRERA DE DISEÑO GRÁFICO .1.4.blogspot. Existen dos tipos: Inglesas y Lineales. Esta tipografía es la más fácil de percibir a larga distancia..TIPOGRAFÍA DIGITAL 47 2.Connotación de las tipografías Palo Seco Fuente.1. Las Inglesas Se caracterizan por sus trazos finos adornados por curvas amplias.

Connotación de las tipografías Escriptas Inglesas Fuente. CARRERA DE DISEÑO GRÁFICO CIBERTEC ..TIPOGRAFÍA DIGITAL 48 Figura 27.Tomado de http://www..todondesign.com/blog/fuentes-hechas-a-mano/ Las Lineales Se utilizan mucho para transmitir diálogos cortos por su espontaneidad de trazos Para seleccionar una tipografía es necesario tener en consideración las siguientes condiciones que permitirán que nuestra elección vaya de la mano con los objetivos de comunicación de la marca.

. El público objetivo Dependiendo del tipo objetivo al que se dirija el mensaje.. los colores y la intensidad de sus formas.Tipografía pensando en el público objetivo Fuente. la legibilidad de las letras.TIPOGRAFÍA DIGITAL 49 Figura 28.Connotación de las tipografías Escriptas Lineales Fuente. Figura 29.com/2012/11/11/10-ejemplos-de-excelente-tipografia-a-mano/ Cuando se define y/o seleccionada la fuente tipográfica adecuada es necesario tener en cuenta algunos puntos que detallamos a continuación como son: el público objetivo.com/?p=50 CIBERTEC CARRERA DE DISEÑO GRÁFICO . el espacio en el texto y el color. se debe elegir una tipografía u otra.. las formas que acostumbran utilizar..Tomado de http://juancamilorincon. Es necesario evaluar sus gustos. sus intereses.Tomado de http://marustephens. las marcas que siguen.

com/2012/11/pequena-historia-del-heavy-metal.blogspot..TIPOGRAFÍA DIGITAL 50 Figura 30..blogspot.La legibilidad de las letras en el Metal Fuente.Tipografía pensando en el público objetivo Fuente. si el público objetivo (target) al que va dirigido el mensaje posee una agudeza visual reducida es necesario optar por los tipos de letras que poseen mayor legibilidad.Tomado de http://mi-musica-metalika... Figura 31.Tomado de http://maludisenopubli5.html CARRERA DE DISEÑO GRÁFICO CIBERTEC .com/ La legibilidad de las letras Por tanto.

pudiendo dificultar la lectura. Por contrario el texto con demasiada separación entre letras hace que la lectura sea más lenta. provocando emociones particulares y despertando asociaciones inconscientes. 2.1. Un logo exitoso es aquel cuyos colores seducen de inmediato a las personas y las llevan a comprar los productos de una empresa.2. CIBERTEC CARRERA DE DISEÑO GRÁFICO . Su determinación depende del objetivo de la comunicación a realizar.2. Determinados tipos dificultan la legibilidad si el contraste de color entre letras y fondos no es impactante. El diseñador encargado del desarrollo de un logo deberá tener en cuenta qué paleta cromática emplear para atraer rápidamente la atención del público y despertar sentimientos positivos hacia una compañía. ya sea porque la distancia de lectura lo amerita o porque la importancia de esos datos lo requiere. Cada color provoca determinados efectos en el público receptor. definiendo y potenciando funciones y significados. 2. generando ciertas reacciones. Connotación con Variables Tipográficas En una familia tipográfica intervienen distintas variables visuales: Cuerpo / Tono / Dirección / Proporción Las variables tipográficas permiten ampliar las posibilidades de uso de una fuente.TIPOGRAFÍA DIGITAL 51 Los espacios en el texto La elección de una tipografía ancha sin ampliar el espacio del papel dará al mensaje una mayor sensación de oscuridad. Cada variable será empleada sobre la base de los objetivos de comunicación. Un cuerpo grande busca destacar una información en particular dentro de un contexto determinado. La elección estratégica del cuerpo tipográfico colabora a enfatizar una idea. Cuerpo El cuerpo es una medida que define la proporción del tamaño de una tipografía. El Color El tipo se selecciona también en función de los colores y la separación entre las letras.1.1. y puede dificultar su comprensión. Un trabajo intencionado con el cuerpo tipográfico colaborará a la transmisión de una idea o mensaje.

.El tono de la tipografía CARRERA DE DISEÑO GRÁFICO CIBERTEC .TIPOGRAFÍA DIGITAL 52 Figura 32.com/2014/07/te-amo.2. en función de un objetivo de comunicación.. Tono El uso de las variables de tono dependerá de la atención y peso visual que se desee generar con la tipografía.El cuerpo de la tipografía Fuente.postaleslindas. Figura 1.html 2.Tomado de http://www.1.2..

Generan una sensación de mayor tensión y movimiento que la versión normal.1. generando además.Tomado de Esta semana volvemos a las raíces!!! Gráfica: Josh Mirman 2. La modulación del trazo y los encuentros se ven alterados.3.Dirección en la tipografía Fuente.2.4.2..1. sacrificando el diseño original. Figura 33. En muchos casos el carácter se pierde o se confunde con las letras de los costados. Proporción Cuando se modifica la proporción de una fuente tipográfica debemos tener en cuenta que podemos dificultar la legibilidad al condensar las letras entre sí.TIPOGRAFÍA DIGITAL 53 2. inestabilidad al signo.. CIBERTEC CARRERA DE DISEÑO GRÁFICO . Dirección La itálica no conlleva una simple inclinación de la letra sino implica para numerosos caracteres una alteración de la forma misma.

1. contraste o tamaño.Tomado de http://galleryhip.com/futura-font. forma. Eso es exactamente lo que se pretende al escoger una tipografía para un diseño: COMUNICAR UNA IDEA.3.TIPOGRAFÍA DIGITAL 54 Figura 34..Proporción en la tipografía Fuente. 2. Legibilidad El primer objetivo que debe tener un diseñador a la hora de ponerse a trabajar con texto es que éste sea legible. es decir que facilite la lectura al posible receptor de ese trabajo.html La Tipografía por su diseño.. CARRERA DE DISEÑO GRÁFICO CIBERTEC . puede expresar ideas o reforzar el significado de las palabras.

es cuando podrá trabajar más libremente. La Legibilidad se refiere a la facilidad con la que los lectores pueden decodificar la información en un documento y la Compresión se refiere al contenido del mismo. El set es la combinación del tipo utilizado.TIPOGRAFÍA DIGITAL 55 Figura 35..Tomado de http://bcoolmagazine. con regularidad en los tipos y con remates clásicos.Tipografía poco legible Fuente. Un set uniforme nos proporciona una textura o color homogéneo del texto. Deberemos escoger caracteres que sean abiertos y bien proporcionados. por lo que son menos recomendables utilizarlos en bloques de textos y más adecuados para textos cortos o titulares.com/arte-psicodelico/ Cuando el diseñador domina las reglas que hacen que un texto sea más o menos legible o cuando es más importante la expresividad que el contenido textual. Los caracteres que contienen afectaciones estilísticas o irregularidades son menos legibles. CIBERTEC CARRERA DE DISEÑO GRÁFICO . el cuerpo con el que trabajemos y el grosor de la letra.. lo cual también nos genera una mayor legibilidad. Cuando definimos qué tipografía es buena debemos tener en cuenta también el set que vamos a definir para nuestra composición tipográfica.

blogspot.com/2012/06/psicodelia_07.Tomado de http://ilustracioneditorialypublicitaria. la altura de colocación del texto. la altura de la letra debe ser. el efecto contrario.TIPOGRAFÍA DIGITAL 56 Figura 36. la distancia. texto blanco sobre fondo negro. tomando en cuenta: la luz. CARRERA DE DISEÑO GRÁFICO CIBERTEC .  Existe un tamaño ideal que anima y favorece la lectura.  Las interrupciones de un texto. nos hacen perder visibilidad.html Para eso debes tomar en cuenta las siguientes recomendaciones:  El aspecto más importante de la tipografía.  Para una valla publicitaria que deba leerse a 60 metros. sin ningún inconveniente. es al público al cual va dirigido el texto y que sea capaz de leerlo perfectamente.Tipografía poco legible Fuente.5 cm. al menos de 2..  Los colores adecuados para una tipografía son: Los tipos negros sobre fondo blanco. subtítulos. la altura de la letra deberá ser al menos de 15 cm. se crean a partir de: Los títulos. reflejan mayor legibilidad.  También se debe tener en cuenta quién lo leerá y desde dónde y a que distancia será vista.  Por ejemplo para un cartel que se observará a 10 metros. la letra del cuerpo diez o doce.. encabezamientos y comienzos de una página.

derecha. modernos.  El texto justificado. si el diseñador equilibra con uniformidad el espacio entre letras y palabras.  Alineación a la derecha se encuentra en sentido contrario del lector porque resulta difícil encontrar la nueva línea. Puede ser muy legible. todo en negrita es muy denso y también dificulta la lectura. CIBERTEC CARRERA DE DISEÑO GRÁFICO . o para dar más expresividad a la página. centrado y justificado. pacíficos agresivos.TIPOGRAFÍA DIGITAL 57  Se tendrá en cuenta la importancia de las imágenes por ellas mismas. Este método puede ser adecuado para un texto que no sea muy extenso.  Alineaciones asimétricas se utilizan cuando el diseñador quiere romper el texto en unidades de pensamiento lógicas. encontramos alineación a la izquierda. que sean vistosos y comunicar mensajes y emociones.  El texto alineado a la izquierda es el recomendable para textos largos.  Las alineaciones centradas proporcionan al texto una apariencia muy formal y son ideales cuando se usan mínimamente. cuando éstas son largas y están compuestas en un cuerpo pequeño. etc. Pueden ser de distintas maneras.  La alineación del texto permite buena legibilidad. su interés visual. alineado a derecha e izquierda.  La interlínea se usa para dar mayor legibilidad a las líneas de un texto.  Los rótulos se utilizan para captar la atención.  El interlineado es el término tipográfico que describe el espacio vertical entre líneas. el diseñador debe evitar que el énfasis tipográfico entre en conflicto con las imágenes.  Un texto. De esta forma.

Tomado de https://sites.Tracking Fuente.com/site/historiadeldisenografico1/el-siglo-xx/raices 2.. Figura 38.com/tag/tracking/ CARRERA DE DISEÑO GRÁFICO CIBERTEC ..Tomado de https://tipografiaune..3.google. Tracking El Tracking ajusta el espacio entre caracteres abriéndolo cuando se trata de cuerpos pequeños y cerrándolos cuando se trata de cuerpos grandes..wordpress.TIPOGRAFÍA DIGITAL 58 Figura 37.1.Tipografía legible Fuente.1.

com/2014/08/29/el-tipo-en-la-composicion/ CIBERTEC CARRERA DE DISEÑO GRÁFICO ..TIPOGRAFÍA DIGITAL 59 2. En el siguiente ejemplo puedes ver a la izquierda las fuentes con Tracking y a la derecha con Kerning.3. Figura 39. Se utiliza para ajustar el espacio entre algunos pares de caracteres que por su forma y construcción necesitan de un ajuste óptico en lugar de una separación regular como el resto de la tipo. Kerning El Kerning es muy similar al tracking pero no igual.1.2.Tracking y Kerning Fuente..Tomado de http://tiposformales.

TIPOGRAFÍA DIGITAL CARRERA DE DISEÑO GRÁFICO 60 CIBERTEC .

Ejes de Simetría: Un eje de simetría es una línea de referencia imaginaria que sirve para definir una simetría. CIBERTEC Cuando los párrafos tienen justificación central y los textos no son muy irregulares se ven como un elemento con simetría axial.Ejes de simetría 2.1. al tomar como referencia una línea que se conoce con el nombre de eje de simetría. Letras simétricas: ABCDEHIKMNOTUVWXYZ Texto simétrico: Cuando los párrafos llevan justificación forzada se ven como un elemento con s i m e t r í a a x i a l . CARRERA DE DISEÑO GRÁFICO .1..TIPOGRAFÍA DIGITAL 61 2. Simetría Axial o Radial Simetría Axial La simetría axial se da cuando los puntos de una figura coinciden con los puntos de otra. Composición con tipografías Toda composición siempre parte de la necesidad de ordenar los elementos de una manera atractiva para la vista.2.1. puede ser horizontal o vertical. se construyen en base a ejes de simetría que son percibidos por nuestros ojos y nos ayudan a sentir que el diseño se encuentra compuesto de una manera estable.2.2. COMPOSICIÓN TIPOGRÁFICA 2. Las composiciones tipográficas entonces. Figura 40. siguiendo un recorrido visual y con elementos contrapesados.

Si piensas en una hélice lo entenderás mejor.svg Simetría Radial Cuando hay simetría radial.Simetría Radial 2... Figura 42. se puede girar la forma o imagen y sigue siendo igual.org/wiki/Datei:Volkswagen_Logo.Tomado de http://de. surge una discordia cuando no somos capaces de reconocer qué parte es la original de la asimetría.wikipedia.Esquema de una instancia Oracle Fuente..2. Se la conoce también como composición libre o dinámica.TIPOGRAFÍA DIGITAL 62 Logos tipográficos axiales: Figura 41. Asimetría La asimetría es una propiedad de determinados cuerpos.1. Sus principales características son el movimiento y la fuerza contrastado con lo apenas insinuado. El número de veces que coincide cuando das una vuelta completa se llama orden. CARRERA DE DISEÑO GRÁFICO CIBERTEC .2.

emaze.2.. Estas relaciones de medida son encontradas en el mundo orgánico e inorgánico.1. es decir.Publicidad asimétrica Fuente..TIPOGRAFÍA DIGITAL 63 Figura 43.4. Equilibrio Podemos conseguir en nuestra composición ese equilibrio de formas y líneas. los pesos de los elementos deben estar compensados. el equilibrio simétrico se produce cuando encontramos igualdad de peso y tono en ambos lados de nuestra composición. La manera de medir el peso de las formas y líneas del diseño es. Existen dos tipos de equilibrio: equilibrio simétrico y equilibrio asimétrico.1.Tomado de http://app.com/@AORRZLQL/la-publicidad Letras asimétricas: FGJLPQR 2.2. Proporción La proporción o canon es una relación de medidas armónicas entre las partes componentes de un todo. Proporción en las letras: AVOQCDGEFHMNÑPR 2. Si dividimos la composición en dos extremos.3. analizando la importancia visual de estos dentro de nuestra composición. la relación existe pero las formas exhiben una serie de pequeñas variaciones dentro de la relación general lo que contribuye a la belleza y la vitalidad. y el CIBERTEC CARRERA DE DISEÑO GRÁFICO .

Nada se deja entonces al azar. Es tremendamente previsible.) en ambos lados. Esto ocurre con el estilo griego. el atractivo de la simetría tiene límites.Tomado de http://nightmarespain. El equilibrio que crea la simetría es un factor importante de la forma en que evaluamos el atractivo visual de un objeto. en cierta manera.. color. no sólo se utiliza la fórmula de la sección áurea. añadiendo un toque de individualidad y singularidad.Equilibrio Fuente.. la asimetría hace lo contrario. Figura 44.. crea agitación y tensión. sino que también se emplea el más completo equilibrio axial o simétrico.blogspot. Sin embargo. a la emoción o a la interpretación subjetiva en cualquiera de los extremos del modelo comunicativo. La simetría.com/2012/02/compendio-de-posters-pesadilla-en-elm. A este estilo lo denominamos clásico y comunica un total equilibrio. un toque de asimetría puede hacer que resulte aún más atractivo. da sensación de orden y alivia la tensión. por ejemplo el desarrollado en el diseño y construcción del Partenón.. con una total ausencia de equivocaciones por parte del diseñador e inexistencia de factores que perturben al observador de la obra.html La regularidad absoluta puede refinarse y regularse encaminándola hacia un resultado final perfecto dentro de una formulación visual.TIPOGRAFÍA DIGITAL 64 equilibrio asimétrico se produce cuando no existen las mismas dimensiones (ya sea de tamaño. pero puede conseguir que una imagen no sea monótona. Podemos hacer otra división de equilibrio: CARRERA DE DISEÑO GRÁFICO CIBERTEC . pero aun así existe equilibrio entre los elementos.

Tomado de http://puedessicreesquedebes. pero no supone una composición muy audaz.com/2011/01/rockwell.blogspot.TIPOGRAFÍA DIGITAL 65 El equilibrio formal Se basa en la bisimetría.. y el equilibrio se consigue aquí sobre la base de contraponer y contrastar los pesos visuales de los elementos. Una composición que siga este esquema compositivo reflejará estabilidad. Prescinde por completo de la simetría. buscando diferentes densidades tanto formales como de color que consigan armonizar visualmente dentro de una asimetría intencionada. calma y estatismo. Figura 45. que no tiene por qué coincidir con el centro geométrico de la composición. CIBERTEC CARRERA DE DISEÑO GRÁFICO .. está altamente cargado de fuerza gráfica y dinamismo.Equilibrio formal Fuente. Se busca un centro óptico dentro del diseño.html El equilibrio informal Por el contrario.

blogspot. Conforme se disminuye la tonalidad del elemento más oscuro el contraste va perdiendo intensidad. como Times New Roman.html 2. siendo necesario redimensionarlo si queremos mantener el mismo contraste. y fuentes sin contraste alguno.2.2.1.Equilibrio informal Fuente.TIPOGRAFÍA DIGITAL 66 Figura 46. permitiéndonos atraer la atención del espectador hacia ellos.2.2. El contraste puede conseguirse a través de diferentes oposiciones entre elementos: 2. destacando el más claro sobre él con más intensidad cuanto mayor sea la diferencia tonal.com/2013/02/autoengano. Contraste En tipografía.2. Este tipo de contraste (tal vez) el más intenso. En este caso.Tomado de http://calei2copicapublicidad. es muy usado en composiciones gráficas.. 2. Composición en contraste El contraste es el efecto que permite resaltar el peso visual de uno o más elementos o zonas de una composición mediante la oposición o diferencia apreciable entre ellas. el mayor peso lo tendrá el elemento más oscuro. el contraste es la relación de aspecto que existe entre los trazos gruesos y los delgados.2. como Helvética.2. existen fuentes con un fuerte contraste. CARRERA DE DISEÑO GRÁFICO CIBERTEC .. Contraste de tonos Se obtiene contraste entre elementos que poseen tonos (claridad-oscuridad) opuestos. Atendiendo a esto.

mientras que los análogos apenas lo hacen.html Este efecto se puede usar para dar mayor dimensión o sensación de proximidad a un elemento en una composición.com/category/formacion/b-expresividad-tipografica/ 2. al igual que un color cálido y otro frío. habrá que buscar siempre un texto cálido sobre un fondo frío o viceversa.2. Los colores opuestos contrastan mucho. Pero en ciertos elementos.TIPOGRAFÍA DIGITAL 67 Figura 47.3. Contraste de colores Dos elementos con colores complementarios se refuerzan entre sí...blogspot. situándolo sobre un color que contraste con él. en los que este juego de colores no sea posible. perdiendo importancia visual ambos.Tomado de http://paletavirtual.Tomado de http://tiposformales.Contraste por colores Fuente. El contraste creado entre dos colores será mayor cuanto más alejados estén en el círculo cromático. Figura 48.2. CIBERTEC CARRERA DE DISEÑO GRÁFICO . en los que debe primar la facilidad de lectura. Lo ideal será el texto negro sobre fondo blanco.com/2012/09/colores-calidos-y-frios.Contrastes por tonos Fuente. Este tipo de contraste es especialmente indicado para los contenidos textuales... ya que es el que más contraste crea (contraste de tono).

Forma Contraforma Blanco y negro.2..net/posts/linux/13698272/Linux-canaima-3-0-con-sabor-venezolano.html 2.. Contraste por ancho de la letra Figura 50.5.2. Contraste por tamaños Figura 49. ¿acaso el "blanco" de la letra no es letra? ¿Puede definirse una forma sin antes dotarle de contraforma? Es el contraste tonal el que define la legibilidad del producto tipográfico. los 'quarks' del diseño. papel y tinta. punzón y contrapunzón. luz y sombra. Pero. A su vez.Esquema de una instancia Oracle Fuente. función primordial del mismo. Podríamos decir que son unidades de comunicación gráfica elementales.taringa. CARRERA DE DISEÑO GRÁFICO CIBERTEC . y ¿es este contraste el definido por la dupla forma-contraforma tan importante como el dado por el medio en el que vaya a ser reproducido? Obviamente sí.2.html 2.taringa. Forma y contraforma son entes independientes que alcanzan su esplendor formal y semántico con la superposición. por lo que la construcción del carácter no se limita al flujo del trazo sino también —y sobre todo— a la elección de ambos.4. El yin yang tipográfico es un interesante juego en el que se define el uno por ausencia del otro.TIPOGRAFÍA DIGITAL 68 2.. forma y contraforma.Tomado de http://www. la construcción de la forma en mención no se limita a la mera inversión de la ella.Contraste por tamaños Fuente.2.Tomado de http://www.2. pues en sí misma esta interacciona con el medio y emerge del mismo.3.net/comunidades/aprendephotoshop/4050272/Donde-descargo-estas-fuentesy-pinceles-para-photoshop-cs5..

Figura 52.4. Estas contraformas. Herramienta en Adobe Illustrator Illustrator nos permite crear dos tipos de texto que se acomodan a las necesidades de nuestra composición tipográfica. no hacen sino enriquecer el conjunto y esclarecer el sentido mismo de las formas participantes..Tipos de textos en Illustrator 2.2. Texto de Punto En este tipo de texto. Para terminar volvamos al inicio. es determinada por el balance entre blanco y negro. Figura 51.blogspot. Figura 53.Texto de Punto en Illustrator CIBERTEC CARRERA DE DISEÑO GRÁFICO . una vez más.1.. Nada más. Lo mismo sucede en el diseño editorial con la morfología de página donde la tensión de la misma viene dada única y exclusivamente por los márgenes. las formas crean nuevas contraformas entre ellas que definen y limitan el espectro del espaciado.Forma contraforma Fuente..Tomado de http://nacional440.2.4. a la forma primigenia. Es más fácil de acomodar y dimensionar. Esta armonía. y es por ello que podríamos definir el diseño de tipos como el simple "manejo y modelado de contraformas". a la forma de la letra.TIPOGRAFÍA DIGITAL 69 De la misma manera.. cuando se combinan las letras formando palabras.com/ 2. Esta nos viene dada desde hace siglos y la tenemos ya tan interiorizada que no se puede —y no se debe— innovar en su dibujo. Illustrator mantiene el texto en una modalidad artística que nos permite realizar modificaciones sobre el texto. diferentes a las contraformas originales. Basta con seleccionar la Herramienta de Selección y modificar el tamaño desde las esquinas.

4. Figura 56. Figura 54.Texto de área en Illustrator Cuando un texto de párrafo tiene en la parte inferior derecha el ícono es porque contiene más texto que el mostrado y requiere que su tamaño se amplíe o se anide a otra caja de texto para mostrar el contenido.2. Figura 55...cambiar entre tipos de texto CARRERA DE DISEÑO GRÁFICO CIBERTEC . Los textos se comportan de forma similar a los programas de texto y no son fáciles de modificar sus propiedades de redimensión o deformación.2. Nos permiten un fácil cambio y visualización de las propiedades de párrafo..Continuidad de textos de área Para cambiar las propiedades de un texto de punto a área o viceversa debes de seleccionar el ícono que se encuentra a la derecha del objeto de texto. Texto de Área Los textos de área fueron creados para controlar grandes párrafos de texto.TIPOGRAFÍA DIGITAL 70 2.

Tipos de Herramientas de texto Existen siete tipos diversos de Herramientas de textos que permiten crear y modificar objetos de textos. A continuación se detallan. Basta con presionar el triángulo que se ubica a la izquierda de los textos para poder expandir las opciones de cada familia y visualizar las opciones disponibles.. Figura 57.TIPOGRAFÍA DIGITAL 71 Ahora las tipografías han sido organizadas por familia.3..2. Figura 58.4.Texto de área en Illustrator 2. lo cual permite tener un control rápido y sencillo de las fuentes.Texto de área en Illustrator Herramienta Texto CIBERTEC CARRERA DE DISEÑO GRÁFICO .

. Figura 59.Texto de área en Illustrator Herramienta Texto en trazado Permite que el texto que desarrollemos obtenga la forma y dirección de un trazado previamente creado.TIPOGRAFÍA DIGITAL 72 Permite crear textos horizontales de texto.Texto de área en Illustrator Herramienta Texto de Área El texto de área nos permite desarrollar grandes párrafos y controlar sus propiedades. Figura 60.Texto de área en Illustrator CARRERA DE DISEÑO GRÁFICO CIBERTEC . Herramienta Texto vertical Permite crear textos verticales de texto... Figura 61.

.Texto de área en Illustrator Herramienta Texto de área vertical El texto de área nos permite desarrollar grandes párrafos de texto vertical y controlar sus propiedades. pero manteniendo la posición de las letras en vertical. CIBERTEC CARRERA DE DISEÑO GRÁFICO .Texto de área en Illustrator Herramienta Texto vertical en trazado Permite que el texto que desarrollemos obtenga la forma y dirección de un trazado previamente creado.. Figura 63.TIPOGRAFÍA DIGITAL 73 Figura 62.

Figura 65.TIPOGRAFÍA DIGITAL 74 Figura 64. escalar o rotar la fuente manteniendo el texto editable.4.Herramienta Retocar Texto 2.Texto de área en Illustrator Herramienta Retocar Texto La Herramienta Retocar Texto nos permite editar y retocar los caracteres dentro de una misma palabra o línea sin tener que modificar todo el texto.. Figura 65.4. En ediciones previas era necesario convertir la palabra o el carácter a curvas para poder realizar modificaciones.2. ahora podemos cambiar. Panel Transformar El panel transformar nos permite realizar modificaciones en las propiedades del texto...Texto de área en Illustrator CARRERA DE DISEÑO GRÁFICO CIBERTEC .

Figura 68.. Figura 66..TIPOGRAFÍA DIGITAL 75 Se pueden realizar cambios en el ancho de los textos utilizando el panel transformar. Figura 67. pero primero se debe definir el punto de referencia (1).Texto de área en Illustrator CIBERTEC CARRERA DE DISEÑO GRÁFICO .Texto de área en Illustrator Se pueden sesgar los textos en relación a la línea vertical o eje axial vertical.Texto de área en Illustrator Se pueden rotar o girar (2) los objetos teniendo en cuenta el punto de referencia (1)..

siguiendo un recorrido visual y con elementos contrapesados. Existen variables tipográficas sobre la base de los objetivos de comunicación.todondesign. Dependiendo del tipo objetivo al que se dirija el mensaje.TIPOGRAFÍA DIGITAL 76 Resumen 1.com/category/formacion/b-expresividad-tipografica/ Fuentes psicodélicas: http://ilustracioneditorialypublicitaria. 3. Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta unidad: o o o Fuentes hechas a mano: http://www.com/2012/06/psicodelia_07.blogspot. Toda composición siempre parte de la necesidad de ordenar los elementos de una manera atractiva para la vista.ht ml CARRERA DE DISEÑO GRÁFICO CIBERTEC . definiendo y potenciando funciones y significados. 2.com/blog/fuentes-hechas-a-mano/ Expresividad tipográfica: http://tiposformales. se debe elegir una tipografía u otra. 4. A cada tipografía se le atribuyen diferentes habilidades o propiedades para transmitir una imagen estética que supera en ocasiones al propio texto.

1 3.2.1.2 3.1.1.4 3.2. CIBERTEC CARRERA DE DISEÑO GRÁFICO .2.3 3.2 Tema 7 3.2 3.5 : : : : : : Tipografía para Web Legibilidad de la lectura para web Amenidad de la lectura para web Tipografía para web Estructuras de jerarquías en la web EMS para tipografía web 3. el alumno desarrolla piezas tipográficas para medios digitales (web) aplicando los recursos estilísticos tipográficos y los principios de legibilidad acorde al concepto y funcionalidad.1. TEMARIO 3.1.2.1 3.  Componen una página web teniendo en cuenta los recursos estilísticos para web.1 Tema 6 3.TIPOGRAFÍA DIGITAL 77 UNIDAD 3 TIPOGRAFÍA PARA WEB Y MEDIOS DIGITALES LOGRO DE LA UNIDAD DE APRENDIZAJE Al término de la unidad.3 3.4 : : : : : Recursos estilísticos para Web Interlineado Interletrado o tracking Kerning Herramientas de texto en Adobe Illustrator ACTIVIDADES PROPUESTAS Los alumnos desarrollan las siguientes acciones:  Diseñan o modifican una tipografía para una página web.

TIPOGRAFÍA DIGITAL CARRERA DE DISEÑO GRÁFICO 78 CIBERTEC .

el interlineado y otros factores tienen una influencia decisiva en la función del tipo. El continuo scroll horizontal y vertical que no nos permite visualizar bloquees completos de texto. se dificulta la lectura.1. Pero si el serif es muy detallado y/o ornamentado esto dificultará la lectura CIBERTEC CARRERA DE DISEÑO GRÁFICO .1. el contraste variable al no conocer como ha sido modificada la iluminación del monitor o el ambiente donde se lee. Para lograr un buen uso de la tipografía dependemos del contraste visual entre las letras (los bloques de texto) y el fondo (que puede ser negro. Si las formas de las letras son muy homogéneas. Si las formas de las letras son muy homogéneas. “La legibilidad se usa generalmente para designar la calidad de la diferenciación entre los caracteres. son los principales factores que afectan a la tipografía en la web. Si las formas de las letras son muy homogéneas. Serif o Sans-serif Actualmente se considera que las tipografías con serif permiten una mayor diferenciación entre las letras.TIPOGRAFÍA DIGITAL 79 3.1.1. se dificulta la lectura. El diseño de la tipografía Las familias tipográficas que han sido construidas con una mayor diferenciación entre sus caracteres son más legibles. Legibilidad para web Al evaluar la legibilidad de un texto para web o dispositivos debes tener en cuenta los siguientes puntos que te permitirán componer mejor tu diseño: 3. Las familias tipográficas que han sido construidas con una mayor diferenciación entre sus caracteres son más legibles.” Lewis Blackwell (1998) Es entonces importante considerar la Legibilidad y la Amenidad cuando definamos las tipografías adecuadas para un diseño web. blanco o la foto que desea el cliente) El ojo se siente atraído por el contraste. 3.1. Los usuarios tienen la costumbre de realizar una rápida barrida en vez de leer. es decir.1. La amenidad de estilo es la calidad de lectura proporcionada por una obra tipográfica en la que lo apretado del texto. La dificultad de lectura por contraste hace que la velocidad de lectura sea aproximadamente un 30% menor que en el papel. se dificulta la lectura.1. ósea una mayor legibilidad. entre otros. por eso los detalles finos no se verán bien definidos en una web. Esto degenera en que la compresión y la retención se reduzcan al 50%. TIPOGRAFÍA PARA WEB La resolución de pantalla es por lo general inferior a la resolución en papel.2. y suelen usarse en textos continuos.1. pero si este es muy alto el ojo se cansa de ver tanta luz. 3. la claridad de las letras individuales. Las familias tipográficas que han sido construidas con una mayor diferenciación entre sus caracteres son más legibles.

Las fuentes cursivas pierden legibilidad por su inclinación. Actualmente se considera que las tipografías con serif permiten una mayor diferenciación entre las letras. La caja baja o minúscula. no es recomendable usarlas en textos largos. no es recomendable usarlas en textos largos. Algunos diseñadores usan tipografía condensada para informaciones poco importantes.1. La caja baja o minúscula. Anchura de la fuente Una fuente demasiado ancha o demasiado condensada deja de ser legible. El uso de la opción bold o negrita y la cursiva o itálica añaden píxeles extras al contorno de las letras.1.TIPOGRAFÍA DIGITAL 80 por el cansancio de entender las formas y la adecuada formación de los píxeles si los textos son pequeños. no es recomendable usarlas en textos largos.5. 3. Pero si el serif es muy detallado y/o ornamentado esto dificultará la lectura por el cansancio de entender las formas y la adecuada formación de los píxeles si los textos son pequeños. Un peso medio permite que la tipografía sea más fácil de leer frente a una tipografía fina o bold. ofrece menor dificultad de lectura. y suelen usarse en textos continuos. 3. Las fuentes cursivas pierden legibilidad por su inclinación. LA CAJA ALTA O MAYÚSCULA TIENE UNA ALINEACIÓN HORIZONTAL HOMOGÉNEA QUE UNIFORMIZA LAS LETRAS Y PERMITE QUE NOS CONFUNDAMOS EN LA LECTURA DE ELLAS. Caja alta o baja La caja alta o mayúscula tiene una alineación horizontal homogénea que uniformiza las letras y permite que nos confundamos en la lectura de ellas.1.1.1. 3. ósea una mayor legibilidad. Las fuentes cursivas pierden legibilidad por su inclinación. ofrece menor dificultad de lectura. pese a que la bold dentro de un texto normal llame la atención por su peso. no es recomendable usarlas en textos largos. pese a que la última dentro de un texto normal llame la atención por su peso.1. Un peso medio permite que la tipografía sea más fácil de leer frente a una tipografía fina o bold.3. permite el uso caracteres individualizados o diferentes. Las fuentes cursivas pierden legibilidad por su inclinación. permite el uso caracteres individualizados o diferentes. CARRERA DE DISEÑO GRÁFICO CIBERTEC . El estilo o peso El uso de la opción bold o negrita y la cursiva o itálica añaden píxeles extras al contorno de las letras.4.

pero eliminando los detalles y la definición del diseño original. 13…) el navegador genera las nuevas letras con medidas inapropiadas.. Tamaño del tipo Actualmente existen tipografías diseñadas especialmente para la pantalla. 9. puede fragmentar el texto. Espaciado entre letras y palabras Un espaciado pequeño puede ser considerado como un amontonamiento de letras y se percibirá que el texto es poco importante. si es demasiado amplio. 10.1. a través de un cálculo que la aproxima visualmente a la medida solicitada. El soporte Si la persona que va a ver el diseño cuenta con una pantalla de baja resolución se reducirá la legibilidad de las tipografías con serif.2. han sido pensadas para acomodarse a la matriz creada por los píxeles y las letras están pensadas y optimizadas en función de la pantalla. CIBERTEC CARRERA DE DISEÑO GRÁFICO .1.1.6.Esquema de una instancia Oracle 3. Figura 70.2.1.2.1. Al evaluar la amenidad de un texto para web o dispositivos debes tener en cuenta los siguientes puntos que te permitirán componer mejor tu diseño: 3.2.1. Normalmente las tipografías se construyen pensando en medidas específicas (8. 12) y los diseñadores las utilizan en un cuerpo para el cual no han sido pensadas (11.TIPOGRAFÍA DIGITAL 81 Figura 69.Esquema de una instancia Oracle 3. Amenidad de la Lectura para web La amenidad de la lectura es la calidad de lectura que le brindamos a las personas que van a leer el texto.. 3.

TIPOGRAFÍA DIGITAL 82 3. (Arial 10 – de 12 a 15 palabras por columna) Es recomendable construir párrafos con un ancho que no sea amplio ni estrecho. al ojo a seguir el flujo del texto.2.4. pues obligamos a la vista a que atraviese continuamente espacios en blanco.1. Un tamaño adecuado es entre 12 y 15 palabras por columna. Para evitar problemas incrementa la interlinea un 150% más que en papel. Una columna muy estrecha fragmenta el texto y una demasiado ancha dificulta la lectura. interrumpirá continuamente la lectura. Interlineado Si se utiliza un interlineado demasiado estrecho se generará un abarrotamiento de texto que dificultará la lectura. serif que no poseen la guía horizontal especialmente con tipografías Sansserif que no poseen la guía horizontal que forman los remates y que ayudan que forman los remates y que ayudan al ojo a seguir el flujo del texto.2. Ancho de columna La tendencia moderna es a comprar pantallas panorámicas o wide. Si es demasiado ancho.2. especialmente con tipografías Sans-serif que no poseen la guía horizontal que forman los remates y que ayudan al ojo a seguir el flujo del texto. Es recomendable construir párrafos con un ancho que no sea amplio ni estrecho. (Interlineado 200%) (Interlineado 150%) 3.1.1. (Interlineado 115%) Para evitar problemas incrementa la interlinea un 150% más que en papel. especialmente con tipografías Sansserif que no poseen la guía horizontal que forman los remates y que ayudan al ojo a seguir el flujo del texto. (Interlineado 100%) Para evitar problemas incrementa la interlinea un 150% más que en papel. Para textos cortos se puede usar la centrada o la alineada a la derecha. esta nueva tendencia hace que los diseñadores compongan la página web con cajas de texto muy anchas y estas agotan a la vista y dificultan la lectura. Alineación La alineación a la izquierda y la justificada son las más legibles. Para evitar problemas incrementa la interlinea un 150% más que en papel. aunque es recomendable la primera por que la justifica estira las palabras y vuelve rígido el párrafo. (Arial 8 – de 12 a 15 palabras por columna) 3.5. especialmente con tipografías Sansserif que no poseen la guía horizontal que forman los remates y que ayudan al ojo a seguir el flujo del texto. Una columna muy estrecha fragmenta el texto y una demasiado ancha dificulta la lectura. Para evitar problemas incrementa la especialmente con tipografías Sans- interlinea un 150% más que en papel. CARRERA DE DISEÑO GRÁFICO CIBERTEC . Un tamaño adecuado es entre 12 y 15 palabras por columna.3.

incluyendo espacios. En el caso de los dispositivos móviles es recomendable mantener de 35 a 50 caracteres por línea. La utilización de encabezados.3. Para dispositivos móviles es recomendable que sea de 1. CIBERTEC CARRERA DE DISEÑO GRÁFICO . Desarrolla sobre la base de ello una maqueta que permita definir longitudes de línea óptimas y un tamaño de texto adecuado para ayudar a la lectura. Cada uno de estos elementos debe de contar con un estilo definido que trabaje en armonía con el resto de los elementos. Para la composición de un texto legible es importante tener en cuenta todos los factores que componen en el texto de cuerpo principal.TIPOGRAFÍA DIGITAL 83 3. listas con viñetas. Los principales elementos que debes tener en cuenta son:         Encabezados Enlaces Negrita o cursiva en el texto Listas de viñetas o numeradas Elementos gráficos como fotos o infografías Subtítulos Entresacas Mezclar serif y sans serif según los elementos A continuación te indicamos diez tipografías recomendables por su legibilidad. El interlineado es recomendable definirlo como un porcentaje del tamaño del texto del cuerpo. colores muy saturados con poco saturados.5 veces el tamaño de la tipografía. Interlineado 150%) Para diseños que van a ser vistos en escritorio es recomendable que el interlineado sea 1.1. Tipografía para web Es importante primero definir en qué dispositivo va a ser visto el texto. Es importante definir un contraste fuerte: colores claros con oscuros. Lo ideal es mantenernos cerca de los 65 caracteres por línea.75 a 2 veces el tamaño de la tipografía.1.6. espacio extra entre párrafos y el color puede incrementar la legibilidad del conjunto. Para visualizaciones en escritorio es recomendable mantener de 55 a 75 caracteres por línea. Se puede definir como un número fijo o mediante el uso de EMS. (Arial 10. Para aumentar la legibilidad es importante combinar el número de caracteres por línea con un interlineado grande para aumentar la legibilidad. Contraste de color El uso de colores demasiado parecidos entre el texto y el fondo dificultan la amenidad de lectura. 3. La jerarquía permitirá que los elementos ordenados brinden estabilidad y una mejor legibilidad del texto.2.

1.2. Visualizan rápidamente los textos de arriba hacia abajo. 3. Permiten que las personas se graben fácilmente la información más importante del texto. Escribe párrafos cortos. Redacta lo más importante sin redundar. 3.5. Pero regularmente las personas al ver textos tan largos pierden el interés en el leer los artículos.TIPOGRAFÍA DIGITAL 84 San Serifs      Open Sans Lato Exo Nobile Droid Sans Con Serifs      Arvo Old Standard TT Abril Fatface Vollkorn Josefin Slab 3.1. Es por eso de vital importancia generar estructuras que aligeren la lectura. 3. Intercala fotos que sinteticen el contenido Apoyar el texto con imágenes representativas y evocadoras te ayudarán a retener a tus visitantes.4. Muchos estudios en internet asumen que sus usuarios leen como mucho un 28% y que el promedio es de 20%. Esto complica la lectura y facilita la perdida de visitantes en nuestra web. Deben ser atractivos e informativos.200 palabras.1. 3. Estructuras de jerarquías en la Web Los redactores de texto buscarán siempre desarrollar textos con más de 1.4. Las personas no leen en internet sino que escanean la información.4. Frases y párrafo cortos Tenemos la mala costumbre en el español de escribir frases larguísimas. Justifica tus textos Dependiendo del contenido justificar los párrafos permite transmitir orden en la composición. La justificación a la izquierda es buena para la legibilidad. Subtítulos Los subtítulos son buenos para el SEO (Search Engine Optimization) y te ayudan a aclarar a manera de aviso sobre lo que está por venir.1.1.1. facilita la lectura.4. CARRERA DE DISEÑO GRÁFICO CIBERTEC .4.4. El diseñador es el encargado de enganchar y guiar al lector de forma visual e intuitiva a través del texto.4. Bold (negritas) cursivas y subrayados Estos tres recursos son formas de destacar el texto más importante y facilitarán la asimilación del texto por parte del lector. pero el desorden de las líneas en la derecha transmite una mala idea. es por eso de vital importancia estructurar los textos para que resalte la información más importante y atrape al lector. 3.3.1.

es importante saber que todos los navegadores modernos de escritorio usan 16px como el tamaño de fuente por defecto.1. font-size: 16px. Aplicamos la fórmula de conversión: 40px ÷ 16px= 2. 3. aplicadas al body. Se define el tamaño de la fuente para el body de la web como 100% y se configuran los estilos para toda ella sobre la base de em. negrita. Partiendo de esto podemos decir que las siguientes reglas.         ¿Es el tipo de cuerpo principal lo suficientemente grande? ¿Está dentro del rango de longitud de línea óptimo para cada tipo de dispositivo? ¿Hay suficiente interlineado? ¿Hay suficiente espacio entre el texto y el borde de la página y otros elementos del diseño? ¿Hay suficiente contraste entre el fondo y el texto del cuerpo principal? ¿Hay espacio adicional entre cada párrafo nuevo? ¿Tienen un estilo diferente los encabezados frente al texto de contenido? ¿Utilizas otros elementos (listas de viñetas. Debe tener en cuenta los siguientes puntos: El texto para el body o cuerpo principal se encuentra configurado en 100%.5 em y ya no 40px. etc.) para romper grandes bloques de texto? ¿Utilizas tipografías legibles para el cuerpo de texto principal (preferiblemente serif simple o sans serif)? CIBERTEC CARRERA DE DISEÑO GRÁFICO . EMS para tipografía web El tamaño de un em está en relación con el tamaño de su contexto. Lista de comprobación de legibilidad Cuando diseñes una web ten en cuenta siempre las siguientes preguntas a manera de lista de comprobación para evaluar si tu proceso de composición es el adecuado.6. font-size: 1em.1. En donde la fórmula básica es: Elemento ÷ Contexto = Resultado Si usted ha decidido escribir en su página web el título: “El diseño tipográfico en la web moderna” y en el diseño se considera que debe medir 40px de alto.5. El tamaño en píxeles que deseamos es de 40px. Esto permite que al reducir o ampliar la fuente en el body se modificarán también los textos de toda la web de manera proporcional.5em Al configurar los estilos tipográficos deberá indicarle a su título que debe medir 2. Si deseas convertir cada fuente basada en pixeles a ems. producirán el mismo resultado: font-size: 100%.TIPOGRAFÍA DIGITAL 85 3.

TIPOGRAFÍA DIGITAL CARRERA DE DISEÑO GRÁFICO 86 CIBERTEC .

Interlineado El uso del interlineado permite ajustar o acercar los textos con el fin de crear bloques densos que llamen la atención más y muestren puntos de interés. Es por eso mejor utilizarlo sólo en pequeños textos.Texto de área en Illustrator 3. títulos o jaladores de vista. títulos o jaladores de vista. CIBERTEC CARRERA DE DISEÑO GRÁFICO .Texto de área en Illustrator 3. Figura 72.. Es necesario tener cuidado con este recurso porque dificulta la lectura de los textos.2. Es por eso mejor utilizarlo sólo en pequeños textos.2. Interletrado o Tracking El uso del Interletrado nos permite ajustar y acercar las letras con el fin de crear bloques densos que llamen la atención porque se visualizan como un bloque de color que tiende a contrastar más con el fondo.TIPOGRAFÍA DIGITAL 87 3.2. Figura 71. RECURSOS ESTILÍSTICOS PARA WEB Ahora visualizaremos como podemos utilizar las propiedades básicas y algunos recursos de transformación como los estilísticos y generar una mejor connotación con nuestras composiciones tipográficas.2..1. Es necesario tener cuidado con este recurso porque dificulta la lectura de los textos.

Texto de área en Illustrator Crear Envolvente con deformación Al seleccionar esta opción se abrirá un nuevo panel que nos permite modificar las propiedades del envolvente. Inicialmente se activará la opción Arco de tipo Horizontal y Curvar: 20%... Herramientas de texto en Adobe Illustrator 3. Figura 74.2.4.2. En el ejemplo se puede ver la diferencia entre las letras (CyA) y las letras (DyA). CARRERA DE DISEÑO GRÁFICO CIBERTEC .3.1. Herramienta Envolvente La Herramienta de Envolvente permite modificar la forma del texto manteniendo el texto original para realizar futuras modificaciones. Para cambiar el tipo de envolvente se debe cambiar el Estilo. Si se selecciona aparecerán dos posibles opciones que veremos a continuación: Figura 75.TIPOGRAFÍA DIGITAL 88 Figura 73.Texto de área en Illustrator 3.Texto de área en Illustrator 3. Kerning El Kerning pareciera muy similar al Tracking pero a diferencia del primero permite que las cajas de los tipos se crucen y/o monten para poder generar espacios mixtos que faciliten la integración. Al seleccionar un texto en la Barra de Propiedades aparecerá el ícono de la deformación.4..2.

Texto de área en Illustrator A continuación te mostramos algunas opciones útiles del envolvente con deformación: CIBERTEC CARRERA DE DISEÑO GRÁFICO .TIPOGRAFÍA DIGITAL 89 Figura 76..

.Texto de área en Illustrator CARRERA DE DISEÑO GRÁFICO CIBERTEC ..Envolvente con deformación Crear Envolvente con malla Al seleccionar esta opción se abrirá un nuevo panel que nos permite indicar cuantas líneas de modificación se requieren crear.TIPOGRAFÍA DIGITAL 90 Figura 77. pero podrás realizar la deformación que desees. Figura 78. Estas trabajan de manera similar al envolvente con deformación.

. Figura 79.TIPOGRAFÍA DIGITAL 91 En el siguiente ejemplo se modificaron algunos nodos del extremo izquierdo del texto utilizando la Herramienta de Selección Directa.Texto de área en Illustrator CIBERTEC CARRERA DE DISEÑO GRÁFICO .

CARRERA DE DISEÑO GRÁFICO CIBERTEC . El interlineado. Las propiedades de texto para web e impresos no son iguales. 7.TIPOGRAFÍA DIGITAL 92 Resumen 5. La tipográfica para web requiere de legibilidad y amenidad. Es recomendable utilizar em y no px ni pt. el tracking y el kerning deben ser evaluados con calma para brindar facilidad de lectura. 9. Las estructuras jerárquicas ayudan a la lectura. 6. 8.

1 Tema 8 : Refuerzo semántico 4. el alumno tiene la capacidad de identificar y elegir la tipografía apropiada. síntesis tipográfica 4.  Desarrollo de una ilustración con abstracción tipográfica.2 : Construcción de imágenes con signos escriturales ACTIVIDADES PROPUESTAS Los alumnos realizan las siguientes acciones:  Investigar y componer una tipografía de lettering para película.2 : Verbo en acción 4. TEMARIO 4.1 : Abstracción.TIPOGRAFÍA DIGITAL 93 UNIDAD 4 EXPRESIVIDAD TIPOGRÁFICA ARTÍSTICA LOGRO DE LA UNIDAD DE APRENDIZAJE Al término de la unidad.2 Tema 9 : Expresividad tipográfica creativa 4.1.2.1.1 : Letra por imagen 4. desarrolla un alfabeto original que sea funcional para aplicarlo a un logotipo o para medios impresos.2. CIBERTEC CARRERA DE DISEÑO GRÁFICO .

TIPOGRAFÍA DIGITAL CARRERA DE DISEÑO GRÁFICO 94 CIBERTEC .

REFUERZO SEMÁNTICO El Refuerzo Semántico es una manera de fortalecer y acentuar el significado de una composición tipográfica.» «Diseñar con tipografía no es meramente registrar discursos o construir herramientas mnemotécnicas. al resultado de este proceso se le conoce como tipografía.com/2010/05/refuerzo-semantico. Se parecen pero no son lo mismo. y tiempo después a su mecanización.TIPOGRAFÍA DIGITAL 95 4..» CIBERTEC CARRERA DE DISEÑO GRÁFICO . mientras que los tipos son una tecnologización de la letra. haciendo que el receptor se involucre con la pieza gráfica. el lenguaje ha adquirido una nueva dimensión espacial que lo ha preservado durante miles de años.html Gracias a la escritura. Las letras y tipos pertenecen al ámbito de la escritura. es producir artefactos visibles con propiedades lingüísticas para controlar su interpretación.. La tipografía cumple dos funciones: la lingüística y la simbólica. una manera particular en que se reproduce el signo gráfico por medios mecánicos. «La tipografía despierta en el observador juicios automáticos y sus correspondientes contenidos emocionales. sin embargo éstos contienen a las primeras. En el Refuerzo Semántico la o las palabras se cargan de valor icónico.Tomado de http://creatividadenexpansion. compositivas y de ejecución de la página impresa.blogspot.1. las primeras son la materia prima de los tipos. La diferencia estriba en que la letra es una expresión gráfica que representa un sonido. resultando de esta manera favorecida la comunicación. Su verdadera importancia radica en su función referencial. sino también en su función referencial. es el elemento primordial de la escritura alfabética. Los tipos son los moldes que usamos para escribir con letras prefabricadas. con respecto de su valor lingüístico. Figura 80. El triunfo de este procedimiento técnico llamado tipografía influyó de manera decisiva en la expresión gráfica escrita como resultado de una serie de innovaciones técnicas.Refuerzo semántico Fuente. La interpretación de la composición tipográfica debe valorizar el mensaje emitido.» «La verdadera importancia de la tipografía no radica exclusivamente en su expresión formal.

Toda “forma” es semántica ya que.com/2013/07/afiche-refuerzo-semantico. estrictamente una permutación visual del lenguaje.Tomado de http://majitovega. a partir de la interacción de ambas funciones (la lingüística y la simbólica) y la combinación de las propiedades semánticas del contenido verbal y la expresión formal genera la producción e interpretación de los signos tipográficos. serio o divertido..yorokobu.es/wp-content/uploads/alvis-square1.Refuerzo semántico Fuente.Tomado de http://cdn1.blogspot. Figura 82. Figura 81. La primera se ocupa de consignar la palabra en el espacio gráfico. hace afirmaciones sobre sí y sobre lo que representa. Las características perceptuales de la tipografía revelan al observador una serie de significados implícitos en la expresión plástica de los signos. al mismo tiempo.. experimental. nos referimos a la función lingüística y la función simbólica. Como cualquier objeto. Así..Función referencial Fuente.html La tipografía posee en sí dos funciones indisociables y que actúan de manera sinérgica y simbiótica..jpg CARRERA DE DISEÑO GRÁFICO CIBERTEC . la función simbólica opera sobre la imagen y expresión plástica de la palabra. como las sensaciones asociadas a lo tradicional. por el simple hecho de existir. De esta forma el valor semántico de la tipografía no se deduce exclusivamente de su contenido verbal sino también de su estructura formal.TIPOGRAFÍA DIGITAL 96 Si bien es cierto que la tipografía le confiere al lenguaje su aspecto visible es sobre todo el soporte mismo de un número indefinido de interpretaciones. la tipografía despierta en el observador juicios automáticos y sus correspondientes contenidos emocionales.

en muchas ocasiones.  Estudiar la relación entre signos tipográficos. incluyendo los signos tipográficos. Se pueden realizar diversos tipos de refuerzos semánticos. A continuación mostramos algunos:  Refuerzo por Ausencia Se elimina una letra para generar una connotación por esa falta. sino también en su función referencial.  Apreciar la importancia de la legibilidad. aludir y representar así a otra cosa. La tipografía. es producir artefactos visibles con propiedades lingüísticas para controlar su interpretación. Diseñar con tipografía no es meramente registrar discursos o construir herramientas mnemotécnicas.  Experimentar la posibilidad de otorgarle a la palabra un refuerzo.TIPOGRAFÍA DIGITAL 97 La verdadera importancia de la tipografía no radica exclusivamente en su expresión formal. la moda y el estilo personal. Por esta razón. para el diseñador común. la elección y composición de los signos tipográficos sigue procedimientos intuitivos alimentados por el gusto. Todos los signos. resulta de particular importancia el control que ejerce el diseñador sobre el aspecto significativo de los componentes que selecciona para la elaboración de sus objetos gráficos. De acuerdo con lo anterior.” de su materialización. La selección y evaluación de la tipografía se realiza principalmente mediante criterios formales. condición necesaria para formar parte de un código socialmente reconocido y convencionalizado por una comunidad lingüística. facilitando así la comprensión y por ende la comunicación. del aspecto físico o apariencia de los signos tipográficos. CIBERTEC CARRERA DE DISEÑO GRÁFICO . Este ejercicio te permitirá:  Comprender la capacidad comunicativa del signo escrito. poseen la capacidad de referir. es el resultado de un proceso inmerso en la producción de sentido. La tipografía. en tanta palabra escrita. tiende hacia la univocidad. la tipografía posibilita la conveniente interpretación de la iconografía dentro en los distintos objetos gráficos. Quizá por eso sería conveniente considerar a la tipografía más allá de su forma. Sin embargo.  Comenzar a visualizar los signos tipográficos como formas y asociarlos con otras formas. por lo tanto es origen y resultado de una práctica significante llamada diseño gráfico. independientemente de su “forma. desde este punto de vista. una acentuación de su contenido mediante la utilización de recursos gráficos. poco más o menos como un juego de azar.

Tomado de https://tiposformales.. CARRERA DE DISEÑO GRÁFICO CIBERTEC .jpg  Refuerzo por elección tipográfica Se selecciona una tipografía porque sus formas permiten connotar un mensaje adicional a la lectura del texto o reforzar el mensaje..TIPOGRAFÍA DIGITAL 98 Figura 83.png  Refuerzo por Adjunción Se agregan elementos a una letra para generar una connotación por nueva forma..wordpress.com/x0irszc6Onk/UOx7RhGuwnI/AAAAAAAAAFc/AbNcLoypUbU/s1600/refuerzo-semantico-02.. Figura 85.Tomado de http://independiente.bp.Tomado de http://2. Figura 84.blogspot.Refuerzo semántico por ausencia Fuente.Refuerzo por sustitución Fuente..files.com/2010/09/061_ref_semantico_reloj.Refuerzo semántico por adjunción Fuente.mx/wp-content/uploads/2014/02/amo.jpg  Refuerzo por Sustitución Se remplaza una letra o palabra por un símbolo para generar una connotación por falta..

TIPOGRAFÍA DIGITAL 99 Figura 86.com/2010/09/12/refuerzos-tipograficos/  Refuerzo por armado tipográfico Se modifican las posiciones de las letras para armar una nueva forma que genere una connotación adicional.Tomado de http://es.Refuerzo por elección tipográfica Fuente. Figura 87.com/2010/09/060_ref_semantico_clasicos... Figura 88.net/paiarvis/refuerzo-semntico  Refuerzo por deformación Se deforma una letra buscando generar una connotación por su nueva forma..slideshare..slideshare.wordpress.. Figura 89.net/paiarvis/refuerzo-semntico CIBERTEC CARRERA DE DISEÑO GRÁFICO .files..Refuerzo por armado tipográfico Fuente.Refuerzo por deformación Fuente.Tomado de https://tiposformales.Tomado de http://tiposformales...jpg  Refuerzo por tratamiento superficial y/o color Se modifica la superficie o trazado ya sea por forma o color con el fin de generar una connotación por su nueva forma.Tomado de http://es.Refuerzo por tratamiento superficial y/o color Fuente.

Tomado de http://www.1. Letra por imagen Figura 91.net/paiarvis/refuerzo-semntico 4..net/img/uploads/images/612wkxj0.jpg CARRERA DE DISEÑO GRÁFICO CIBERTEC .Tomado de http://es..1.TIPOGRAFÍA DIGITAL  100 Refuerzo por combinación de dos o más opciones Se combinan diversos elementos o letras buscando generar una connotación por la nueva forma.Refuerzo por combinación de dos o más opciones Fuente..slideshare.Letra por imagen Fuente. Figura 90..choosa.

fundaciontelefonica.Verbo en acción Fuente.com/2011_03_01_archive..com/proyectos/iregular-toys Figura 93.TIPOGRAFÍA DIGITAL 101 4..1.html CIBERTEC CARRERA DE DISEÑO GRÁFICO . Verbo en acción Figura 92.blogspot.Verbo en acción Fuente.2.Tomado de http://thinkbigjovenes...Tomado de http://luciaenlafiladeatras.

TIPOGRAFÍA DIGITAL CARRERA DE DISEÑO GRÁFICO 102 CIBERTEC .

TIPOGRAFÍA DIGITAL

103

4.2. EXPRESIVIDAD TIPOGRÁFICA CREATIVA
4.2.1. Abstracción, síntesis tipográfica
Construcción de imágenes de signos escriturales, basados en temas de personajes
donde se da una caricaturización de estos o el estilo de dibujo animado.
La abstracción tipográfica nos llevara al plano artístico, por lo tanto no funcionará
como un mensaje entendible.

Figura 94.- Abstracción, síntesis tipográfica
Fuente.- Tomado de http://karol-salazar.blogspot.com/2012/03/hablemos-de-photoshop-y-sus.html

Para componer o construir imágenes tipográficamente, primero debemos tener la
forma lineal de la imagen, luego procederemos a reemplazarlas con algunas letras que
se adapten a las características esenciales.

CIBERTEC

CARRERA DE DISEÑO GRÁFICO

TIPOGRAFÍA DIGITAL

104

Figura 95.- Abstracción con líneas
Fuente.- Tomado de https://larryfire.files.wordpress.com/2008/10/dead-celebrity-font-art-marilyn-monroe.jpg

4.2.1.1. Abstracción y profundidad
Separar por medio de una operación intelectual las cualidades de un objeto para
considerarlas aisladamente o para tener en cuenta el mismo objeto en su pura esencia
o noción.
Proceso que se da cuando la lógica y el cálculo, convierten un elemento complejo
formalmente en una expresión geométrica básica sin perder la esencia inicial.
En esta, la forma y el color demuestran equilibrio y unidad y sus elementos
fundamentales son formas geométricas puras y colores planos.
La profundidad es el espacio por delante y por detrás del plano enfocado,
comprendido entre el primer y el último punto apreciablemente nítido reproducidos en
el mismo plano de enfoque.

CARRERA DE DISEÑO GRÁFICO

CIBERTEC

TIPOGRAFÍA DIGITAL

105

Figura 96.- Profundidad en la abstracción
Fuente.- Tomado de
http://www.colombianfashion.com/fashion/media/k2/items/cache/63ae8dd535459e6ddaa9950601158f8d_XL.jpg

Con el color podemos influir en el espacio, hacer que nuestra mente vea los objetos
más grandes y más cercanos o más pequeños y lejanos, que veamos profundidad
donde no la hay o al contrario que una composición parezca plana, sin espacio.
Cuando en una imagen con áreas de color semejantes utilizamos colores de parecida
luminosidad y saturación la composición se verá plana, sin espacio, sin profundidad.
Variando estos tres componentes: la saturación del color, la luz del color y la
dimensión de las áreas de color podemos modificar la sensación de profundidad de los
objetos, así como la impresión de su tamaño.
Un color intenso es capaz de agrandar y acercar un objeto en nuestra mente y al
contrario un color de débil intensidad lo reduce y lo aleja.
Los colores intensos en pequeñas áreas y los colores mates en grandes áreas
acentúan el movimiento de los objetos.

CIBERTEC

CARRERA DE DISEÑO GRÁFICO

pe/kevinsimon/fullscreen. en función de su grado de luminosidad siendo el amarillo el que más avanza.Tomado de http://internalcomms. se ven más próximos.Tomado de http://neo.Abstracción sobre fondo oscuro Fuente...com..Uso de colores intensos Fuente..jpg Con un fondo oscuro los objetos de los colores más claros se ven primero.TIPOGRAFÍA DIGITAL 106 Figura 97.ar/wp-content/uploads/2010/06/RTipografia_02.html CARRERA DE DISEÑO GRÁFICO CIBERTEC . Figura 98.

2..2. Para ello se necesitará la foto del personaje y se transformará a 50% blanco y negro.jpg 4.1. en la cual la tipografía.2. lo que la palabra o palabras dicen. visualmente. posiciones. frase o palabra cuyo propósito es formar una figura acerca de lo que trata el poema. 4.Tomado de http://1. En un fondo de luminosidad intermedia se ven primero los colores extremos más claros y más oscuros. y donde a veces.. La imagen creada por las palabras expresa.Texto como forma Fuente. Una vez que queden las formas definidas solo se debe completar con los caracteres.1. tipos.blogspot. el poeta cubista francés Guillaume Apollinaire fue un famoso creador de CIBERTEC CARRERA DE DISEÑO GRÁFICO . y siempre llevando relación el texto con el personaje a tratar. Texto como Forma La Tipografía Creativa contempla la comunicación como una metáfora visual. como si se tratara de una imagen. En un poema.TIPOGRAFÍA DIGITAL 107 En un fondo claro o blanco se ven primero los colores oscuros. Caligrama Otra manera de trabajar es mediante el caligrama. caligrafía o el texto manuscrito se arregla o configura de tal manera que crea una especie de imagen visual (poesía visual). El caligrama es un poema. este manifiesta el tema presentado por el texto de la composición. siendo el violeta el que más avanza. donde el texto no sólo tiene una funcionalidad lingüística.com/_PHrFx--v3DU/TJEM-KVVfKI/AAAAAAAAHBs/J1wNzgaBsc/s1600/burger_king_-_burger. los colores avanzan en función inversa a su luminosidad. Figura 99. En la modernidad se dio con las Vanguardias de principios del siglo XX y más concretamente con el cubismo literario y los posteriores Creacionismo y Ultraísmo.bp. pero proponiendo diversos tamaños de letras.3. se representa de forma gráfica.

Caligrama Fuente. series de fotografías y exposiciones de arte..Tomado de http://www. CARRERA DE DISEÑO GRÁFICO CIBERTEC . El poeta creacionista chileno Vicente Huidobro ya había incluido su primer caligrama.2.com/2014/10/poema-en-caligrama.TIPOGRAFÍA DIGITAL 108 caligramas.imagenesberry. con el paso del tiempo los artistas empezaron a darle nuevos usos y vislumbraron en sus formas una nueva concepción de arte. "Triángulo armónico"..2. Algunos artistas y diseñadores decidieron crear el arte de las letras que fue muy útil en campañas publicitarias. Construcción de imágenes con signos escriturales La tipografía en sus inicios se creó para poder leer contenidos.html 4. en su libro Canciones en la Noche (1913). Figura 100.

com/5-maravillosos-proyectos-de-tipografia-en-el-arte/ CIBERTEC CARRERA DE DISEÑO GRÁFICO .com/5-maravillosos-proyectos-de-tipografia-en-el-arte/ Figura 102.paredro.Construcción de imágenes con signos escriturales Fuente.Tomado de http://www.Construcción de imágenes con signos escriturales Fuente.Tomado de http://www.paredro..TIPOGRAFÍA DIGITAL 109 Figura 101....

paredro. La tipografía posee en sí dos funciones indisociables y que actúan de manera sinérgica y simbiótica. El Refuerzo Semántico es una manera de fortalecer y acentuar el significado de una composición tipográfica.net/paiarvis/refuerzo-semntico CARRERA DE DISEÑO GRÁFICO CIBERTEC .com/5-maravillosos-proyectos-de-tipografia-en-el-arte/ Refuerzo semántico: http://es. nos referimos a la función lingüística y la función simbólica. por lo tanto no funcionará como un mensaje entendible.TIPOGRAFÍA DIGITAL 110 Resumen 1. 2.slideshare. Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta unidad: o o Cinco maravillosos proyectos tipográficos: http://www. 4. La abstracción tipográfica nos llevara al plano artístico. 3. La abstracción y profundidad consiste en separar por medio de una operación intelectual las cualidades de un objeto para considerarlas aisladamente o para tener en cuenta el mismo objeto en su pura esencia o noción.