LES DAMOS LA BIENVENIDA A LA CLASE

CLASE 21
Tipografía
VAMOS A COMENZAR A GRABAR LA CLASE
¿Qué es tipografía?
Podemos definir la tipografía como “el arte de diseñar las letras”. Se denomina
así a la disciplina que estudia la representación gráfica de las letras para que el
lenguaje escrito sea efectivo.

Es el estilo o la apariencia del texto. Se refiere al arte de trabajar con él.

La tipografía está donde quiera que se mire; en libros, sitios web, letreros y
avisos, en señales de tráfico y empaques de productos.

La palabra tipografía proviene de dos términos griegos: “typos” que significa

golpe, marca o forma, y “graphia” que significa cualidad de escribir.
Morfología de las tipografías

Subir Logo Subir Logo Subir Logo

Serif Sans-Serif

Interletraje
Interlineado Caja
Morfología de las tipografías

Subir Logo Subir Logo Subir Logo

La anatomía tipográfica se refiere a las características determinadas de una fuente.

Estudiando sus características nos permite dividirlas en 4 grupos:

Serif - Sans Serif - Egipcias/Bloque Serif - Fantasía

Romanas:

Con serifa (romanas) cuentan con remates o terminales, que son esos pequeños
adornos ubicados en los extremos de los trazos de los caracteres.
Las tipografías Serif suelen ser concebidas como serias y tradicionales. Cuentan con
un aire académico o institucional. Son tipografías idóneas para párrafos o textos
largos, ya que los pequeños terminales o serifas contribuyen a que se cree una línea
imaginaria bajo el texto que facilita mucho lectura a nuestro ojo.
Algunos ejemplos de fuentes tipográficas Serif son: Times New Roman, Garamond o
Book Antigua.
Y recuerda dentro de las tipografías con serifa, podemos incluir también las
tipografías egipcias o Slab Serif.
Palo seco:

Sin serifa (palo seco) se caracterizan por la ausencia de remates y terminales. Se

diseñan sin serifas. Sus trazos apenas presentan contrastes.
Las tipografías Sans Serif suelen asociarse con la tipografía comercial, ya que
ofrecen un resultado muy bueno para la impresión de titulares o poco texto, en
carteles y publicidad. Este estilo de fuente evoca modernidad, seguridad, neutralidad
y minimalismo.
Es muy recurrida también para textos en pantalla y textos en tamaños pequeños.
Gracias precisamente a la ausencia de terminales y remates, esta tipografía puede
resultar más legible en textos de pequeño tamaño que su hermana mayor.
Algunos ejemplos de tipografías San Serif son: Futura, Helvética, Arial, Gotham o
Avenir.
Manuscritas:

Cursivas (manuscritas) también se denominan como cursivas o script. Son

tipografías que representan o imitan la caligrafía a mano, por lo que en ocasiones
también se les puede denominar como tipografías caligráficas.
Generalmente este tipo de tipografías cuentan con una tendencia itálica o cursiva
claro. Las letras se ligan entre sí y encontramos curvas más pronunciadas que en
las tipografías con serifa o de palo seco.
Cómo se relacionan con la caligrafía, cuentan con una personalidad algo más
humana y cercana. Algunas tipografías cursivas podrían ser Beckham Script o
Parisienne.
Exposición:

Decorativas (exposición) También se les denomina como tipografías display. Están

consideradas como tipografías divertidas, que pueden transmitir una gran variedad
de sensaciones. Cuentan con un carácter y personalidad muy fuerte. Desde el punto
de vista de la psicología tipográfica son transgresoras y contribuyen a llamar más la
atención.
Dentro de este conjunto de decorativas entrarían las tipografías cuyas
características no se ajustan a los tres conjuntos anteriores. Suelen crearse para
fines específicos donde la legibilidad no se tiene demasiado en cuenta. Como por
ejemplo un logo o un título. Son muy expresivas y suelen contar con atributos más
temáticos.
Eso sí, definitivamente no son tipografías idóneas para párrafos de texto.
Pueden llegar a transmitir falta de cuidado o desinterés en el diseño.
 Tipografía:

Resulta imposible no tener un contacto directo constante con las tipografías. Nos
acompañan en todo momento, ya que forman parte de nuestra rutina diaria.
Hablamos por tanto de un elemento visual casi omnipresente del que podemos
hacer uso desde el diseño gráfico.

Además, las tipografías son una herramienta clave a la hora de diseñar la

identidad de marca o branding de un proyecto. Junto con el logo, la paleta de
colores y otros recursos, forman parte del branding visual que diseñamos
estratégicamente para reforzar el mensaje que queremos enviar desde la empresa.
Familias tipográficas:

Una familia tipográfica es un conjunto de caracteres, alfabéticos o no, que cuentan

con unas características comunes en su estructura y en su estilo. Esto nos permite
identificarlas como una misma familia.
Los miembros que integran una misma familia tipográfica se parecen entre sí, pero
cuentan con algunos rasgos propios como variaciones de peso, inclinación y
proporción. Esto lo voy a aclarar con más detalle en el siguiente punto.
Existen multitud de familias tipográficas. Originalmente surgieron con la creación de
la imprenta pero otras han ido apareciendo como resultado de la digitalización de
todo el proceso de diseño de tipografías.
Por ejemplo, las familias Gotham, Futura o Swift.
Variables tipográficas:

Las variables tipográficas son las opciones que podemos encontrar dentro de una misma familia
tipográfica. Son modificaciones de la morfología de la tipografía, es decir de su forma. Actúan sobre
el grosor (tono) del trazo, el ancho o proporción del carácter y la inclinación del eje vertical de los
caracteres de una misma familia tipográfica.

Gracias a estas variables tipográficas vamos a poder establecer una jerarquía visual en nuestras
composiciones. También nos ayudan a satisfacer las necesidades que nos pueden surgir a la hora
de comunicar visualmente con tipografías.

Variable de peso: Denominada también como variable de grosor o tono, afecta directamente al
trazo de los caracteres. Se modifica la relación entre el ancho del trazo y los espacios vacíos dentro
de cada signo tipográfico. La tipografía bold o negrita presenta un grosor de trazo mayor, mientras
que la tipografía light presenta un grosor del trazo menor.

Variable de inclinación: modifica el eje de los caracteres. Hace referencia al ángulo de inclinación de
la tipografía. Dentro de la variable tipográfica de inclinación vamos a poder reconocer dos tipos. Las
oblicuas y las itálicas.
 Legibilidad:

La legibilidad es la facilidad con que se puede leer y comprender un texto.

En un sentido más amplio es la aptitud de un texto de ser leído fácil y cómodamente,
y esta aptitud hace referencia a elementos tipográficos, de presentación del escrito
en la página, y también al estilo, a la claridad de la exposición, a la manera de escribir,
al lenguaje.
La legibilidad debe ser uno de los temas más importantes cuando se trata de un
proyecto de diseño. Si un texto no se puede leer, entonces su mensaje no va a llegar
a nadie. Un buen diseño se muestra en una forma que es comprensible; la legibilidad
conforma una gran parte de la comprensión.
“No puedes ser un buen tipógrafo sino eres un buen
lector. La tipografía es leer.”
Anónimo.
 Importancia de las jerarquías:

La jerarquía tipográfica presenta las letras de manera que las palabras más
importantes se muestran causando un mayor impacto, por lo que los usuarios
pueden escanear el texto para obtener información clave. Sin jerarquía tipográfica,
cada letra, cada palabra y cada frase en un diseño se vería igual.
Jerarquías:

Nivel Primario- El nivel primario de la tipografía comprende letras de gran tamaño. Estas abarcan
titulares y cubiertas, lo cual también es conocido como «muebles» que atraen a los lectores en el
diseño. Esta tipografía es la más grande (a menos que se utilice arte tipográfico).

Nivel Secundario- El nivel secundario de la tipografía comprende la información que tiende a ser
analizada y que ayuda a los lectores a permanecer con el diseño. Esto incluye elementos tales como
subtítulos, citas, infografías y otros pequeños bloques de texto que añaden información al nivel
primario. El diseño de estos bloques textuales está en el lado grande, pero por lo general, son mucho
más pequeños que las letras en el nivel primario de la tipografía.

Nivel Terciario- El nivel terciario de la tipografía comprende el texto principal del diseño. A menudo
es una de las tipografías más pequeñas, pero debe ser lo suficientemente grande como para ser
completamente legible por todos los usuarios potenciales. El tipo de letra debe ser simple y
consistente en el diseño, espaciamiento y el uso general.

Otros niveles- Los otros niveles de la tipografía incluyen efectos que se aplican a escribir en el nivel
terciario para pequeñas áreas de impacto. Efectos tales como negrita, cursiva, subrayado y color
pueden llamar la atención sobre las áreas específicas del texto principal.
Jerarquías visuales y niveles de Lectura

Subir Logo Subir Logo Subir Logo

Jerarquías visuales y niveles de Lectura
Subir Logo Subir Logo
Connotación tipográfica

Contrato serio

Subir Logo Subir Logo Subir Logo

Relájate y disfruta

Músculo, autos y cerveza

Frivolidad Ligera

Siglo 21

La elección tipográfica está en contradicción con su significado

 Tipografía como imagen:

La tipografía puede comportarse como una imagen gracias a los atributos

formales que definen su personalidad gráfica.

Separados del componente informativo del lenguaje, los tipos quedan liberados de
su función lingüística, convirtiéndose en una representación visual de sí mismos con
un significado connotativo asociado.
Tipografía como imagen

Subir Logo Subir Logo Subir Logo

Valor estético de la tipografía

Tipografía como imagen

Tipografía Helvetica creada en

1957, sus aspectos morfológicos
y su gran variedad nos permiten
Subir Logo Subir Logo hacerSubir Logotan “modernos”
trabajos
como hace 60 años de su
creación.
Tipografía como imagen

¿Qué nos quiere decir este diseño?

Subir Logo

“La buena puesta tipografía es invisible.”

Subir Logo Subir Logo
“La mala tipografía está en todos lados.”
Tipografía como imagen

Subir Logo

Misma foto, distinta tipografía, distinto concepto, distinta clave tonal (alta-clara/baja-oscura)
Semantización
Semantización

Subir Logo Subir Logo Subir Logo

Semantización

Subir Logo
Semantización

Subir Logo Subir Logo Subir Logo

Semantización

Subir Logo Subir Logo Subir Logo

Semantización

Subir Logo Subir Logo Subir Logo

 Ejercicio
Clase 22
Semantización tipográfica:
Usando como referencia los
ejemplos vistos:
van a crear una puesta tipográfica.
Podría ser sobre un adjetivo, un
personaje famoso o una película.
Proyecto
Final
 Para continuar con el Proyecto Final que estamos desarrollando:

Vamos a utilizar todo lo visto en clase para definir una tipografía para utilizar en la
presentación de slides, es decir para la Entrega Final del proyecto. Será únicamente para los
títulos, y será acompañada con Roboto o San Francisco, según el caso, en los textos más
largos.

Asegurate que la tipografía que elijas exprese el alma del proyecto que estás diseñando.

Realizar un breve informe sobre tu elección junto con una muestra de la tipografía elegida.

Dentro del prototipo vamos a utilizar:

● Tipografía Roboto para Android.

● Tipografía San Francisco y New York para IOS.

TAREA PARA EL PROYECTO FINAL

Ejemplo de entrega:
Moodboard:
UI KIT:
Navbar Íconos Filtros Títulos H1 48pt

Títulos H2 24pt

Botones (presionados y sin presionar)

Títulos H3 18pt

Párrafo p 12pt

Input-box (con y sin ícono,

blanco/negro)
Paleta de colores

Primario:
7776F6

Card Secundario:
D5D6F2

Acento:
FF7062
NO TE OLVIDES DE HACER TUS PREGUNTAS
EN EL FORO DEL AULA VIRTUAL
NO TE OLVIDES DE DEJAR TU PRESENTE
MUCHAS GRACIAS POR TU ATENCIÓN
NOS VEMOS PRONTO