Adrián Gómez Montero

HISTORIA

https://www.youtube.com/watch?v=NmqKEUQSJ9g

La fuente o tipografíaConjunto de caracteres basados en una misma fuente que usualmente incluye:

ABCDEFGHIJKcaja alta números

signos de puntuación

signos matemáticos

caja baja

versalitas

ligaduras

abcdefghijk

ABCDEFGHIJK

fi fl

123456789

.:;¡¿!?¡¿

+%=><≈≠√∫×

La fuente o tipografíaEjemplos

Arial

HelvéticaAvenir

CenturyComic SansDIN

Fira Sans

Franklin Gothic

Frutiger

GabriolaHarrington

ImpactMonacoMuseo

Open Sans

Overlock

Quicksand

Roboto

Sanchez

Tahoma

Verdana

Las tipografías expresan. Y eso es independiente de lo que pueda significar el texto.

pesos estructura ancho

Familia tipográficaEs la gama de variaciones de una misma tipografía

Helvetica

light

regular

medium

bold

italic

VERSALITAS

condensada

expandida

CLASIFICACIÓN TIPOGRÁFICA

TTTTTT

1. Presencia o ausencia de serifas

Sans Serif Serif

Elementos para clasificar las tipografías

Garamond Baskerville Bodoni Rockwell

2. La forma de la serifa

Elementos para clasificar las tipografías

Baskerville Rockwell

3. La relación curva o recta entre bastones y serif

Elementos para clasificar las tipografías

Baskerville Rockwell

4. Uniformidad o variabilidad del grosor del trazo

B BElementos para clasificar las tipografías

3 familias tipográficas

SerifSans serif

Manuscritas y de fantasía

Serif

Romanasantiguas

Trajan

CaslonGaramond

BaskervilleTimes New R

Century

BodoniDidotBauer

Rockwell

Cooper

Clrandon

Romanasde transición

Romanasmodernas

Egipcias

1.

Sans serifGrotescas (1957)

2.

HelveticaFranklin Gothic

Roboto

Sans serifGeométricas (1920)

2.

Avenir

Bauhaus

Century Gothic

Sans serifHumanísticas (1916)

2.

Calibri

Lucida Sans

Gill Sans

Manuscrita y de Fantasía3.

Black Rose

Badaboom

Hand of sean

RETÓRICA TIPOGRÁFICA

Silencio

SILENCIO

A tener en cuenta:

1. Las letras son cosas: las letras son entidades con personalidad propia que no podemos alterar

de manera caprichosa

A tener en cuenta:

2. Las letras son imágenes de cosas: “una imagen vale más que mil palabras” porque una

palabra impresa ya es, en sí misma, una imagen

casa

A tener en cuenta:

3. Las letras son productos históricos: cada diseño de letras que se ha realizado vive pegado al

tiempo en que nacieron y se desarrollaron

A tener en cuenta:

4. No existe una tipografía neutra. Todas están llenas de simbolismo

ANGRYBIRDS ANGRYBIRDS

BATMAN BATMAN

GOOGLE GoogleACDCD ACDC

Comic Sans

Bauhaus

Baskerville

Century

Pérez & PérezAbogados

Pérez & PérezAbogados

Pérez & PérezAbogados

Pérez & PérezAbogados

Comunicación Mensaje acertado

Comunicación Mensaje acertado

arenas movedizas

CONSEJOS IMPORTANTES

Para qué medio se diseñó cada fuente1

Medios digitales Medios impresos

Times New Roman (1932)Verdana (1994)

Helvetica (1957)Georgia (1993)Garamond (siglo XVI)Tahoma (1996)

Baskerville (1757)Arial (1982)

Didot (1783)Roboto (2011)

RobotoRoboto light

Roboto mediumRoboto bold

Times New RomanTimes New Roman italicTimes New Roman boldTimes New Roman bold italic

No es necesario más de dos familias tipográficas2

2

Combinando fuentes3

AdriánGaramond + Times New Roman

Helvetica + Arial

Museo + Futura

Roboto + Baskerville

Gómez

Adrián Gómez

AdriánGómez

AdriánGómez

El párrafo4

Vitae non curabitur purus pretium ac in, ea ligula tempus nibh ornare. Sem netus tempus at erat, rhoncus dolor duis eget id commodo, egestas id felis, diam nunc ut ullamcorper.

Vitae non curabitur purus pretium ac in, ea ligula tempus nibhascasasxsa ornare. Sem netus tempus at erat, rhoncus dolor duis eget id commodo, egestas id felis, diam nunc ut ullamcorper.

Vitae non curabitur purus pretium ac in, ea ligula tempus nibhasca-sasxsa ornare. Sem netus tempus at erat, rhoncus dolor duis eget id commodo, egestas id felis, diam nunc ut ullamcorper.

Alineación a la izquierda

Justificado

Color tipográfico5

In est condimentum vitae porttitor, eget torquent id fames lorem, amet amet sed nunc mi. Donec mollis parturient volutpat ante leo, consectetuer at maecenas arcu leo. Pulvinar eget enim, pulvinar massa massa ullamcorper est, et integer lacinia, eget fusce nam parturient scelerisque. Donec non est architecto odio vel amet, pretium et eget. Et nunc quis, vestibulum porttitor, neque mauris montes nec justo nec neque, sed nec sed, integer dui venenatis nec.

In est condimentum vitae porttitor, eget torquent id fames lorem, amet amet sed nunc mi. Donec mollis parturient volutpat ante leo, consectetuer at maecenas arcu leo. Pulvinar eget enim, pulvinar massa massa ullamcorper est, et integer lacinia, eget fusce nam parturient scelerisque. Donec non est architecto odio vel amet, pretium et eget. Et nunc quis, vestibulum porttitor, neque mauris montes nec justo nec neque, sed nec sed, integer dui venenatis nec.

In est condimentum vitae porttitor, eget torquent id fames lorem, amet amet sed nunc mi. Donec mollis parturient volutpat ante leo, consectetuer at maecenas arcu leo. Pulvinar eget enim, pulvinar massa massa ullamcorper est, et integer lacinia, eget fusce nam parturient scelerisque. Donec non est architecto odio vel amet, pretium et eget. Et nunc quis, vestibulum porttitor, neque mauris montes nec justo nec neque, sed nec sed, integer dui venenatis nec.

El color de la tintaContraste entre tipo y fondoValor tonal de la tipografía

Times New Roman 14/18 Impact 14/18 Century Gothic 14/18

No deforme la tipografía6 (a menos que sea un experto)

Evite las fuentes de fantasía

Puede jugar con las tipografías que ha elegidopero buscando que el diseño sea coherente

7

Tipografía para impresión8

Serif

CenturyTimes New Roman

Georgia

Para grandes bloques de texto

Tipografía para web8

Sans Serif >14px

Open Sans

Roboto

Helvetica

VerdanaLucida Sans

Myriad

¿Preguntas?

:D