Unidad2

TIPOGRAFA

Historia
Anatomadelaletra
Clasificacin
Variables
Alineaciones
E
Espaciado
i d
Legibilidad
Retricatipogrfica
Tipografadigital

Historiadelalfabeto

ALFABETO
GRIEGO

1000a.C.

ALFABETO
ROMANO

113a.C.
Pg: 2

Manuscritos Iluminados

476d.C.

APARECIERONLASMINSCULAS.
CAPITULARESILUMINADASCONIMGENES.

Pg: 3

Laimprenta

BASADAENUNATCNICAINVENTADAPORLOSCHINOS

1455d.C.
Pg: 4

Historiadelatipografa
Lastipografasse
clasificanatravsde
estilosporsuformay
tambinporelmomento
enelquefueron
diseadas.
Losprimerostipos
mvilescreadosen
AlemaniaporJohannes
Gutenberg queimitaban
la escritura manuscrita de
laescrituramanuscritade
laEdadMedia.
BIBLIADE42LNEASDE
GUTENBERGCONTIPOSMVILES

1455d.C.
Pg: 5

Anatomadelaletra

HUMANISTAS

1500d.C.
Pg: 6

Conceptosgenerales
Tipografa,eslatcnicadecrearycomponertipos
paracomunicarunmensaje.Seocupadelestudio
y
yclasificacindelasdistintasfuentestipogrficas.
p g
Tipo,eseldiseodeunaletradeterminada.
Fuentetipogrfica, eslaquesedefinecomoestilo
oaparienciadeungrupocompletodecaracteres,
nmerosysignos,regidosporcaractersticas
comunes.
Familiatipogrfica,eselconjuntodetiposbasado
enunamismafuente,conalgunasvariaciones(por
ejemplogrosoroanchura)peromanteniendo
caractersticascomunes.Separecenentrespero
tienenrasgospropios.
Pg: 7

Anatomadelaletra
Lneasdereferenciayproporciones
Partesdelaletra
Contornoymodulacin

Pg: 8

Anatomadelaletra

Lneasdereferenciayproporciones

Rebaba

Originalmentesellamcuerpotipogrficoalaaltura
deltipodemetalenlossistemasdeimpresin,hoy
llamamoscuerpotipogrficoalacaradelaletramsel
espacioadicionalparaevitarquesetoquenlos
caracteresdedoslneasconsecutivas.
Paramediosimpresoselcuerposemideenpuntos(pt)
Paramediosdigitaleselcuerposemideenpxeles(px)
Pg: 9

Anatomadelaletra

Partesdelaletra
Lostrminosusadosparadescribirlaspartesdelasletrasseasemejanalas
partesdenuestrocuerpo.Aslasletrastienenbrazos,piernas,ojos,entreotros.

Pg: 10

Clasificacintipogrfica
Serif
Romanasantiguasogeraldas (1)
Romanasdetransicin
Romanas de transicin (2)
Romanasmodernas(3)
Egipcias(4)
Sans serif (5)
Grotescas
Geomtricas
Humanistas
Manuscritas,FantasayExperimentales
Manuscritas Fantasa y Experimentales
(1)(2)(3)(4)(5)

Pg: 11

Clasificacintipogrfica

Existencincoelementospuntuales,sirvenparaclasificareidentificaralas
diferenteslasfamiliastipogrficas:

Lapresenciaoausenciadelserif oremate.
Laformadelserif.
Larelacincurvaorectaentrebastonesyserifs.
Launiformidadovariabilidaddelgrosordeltrazo.
Ladireccindelejedeengrosamiento.

Deacuerdoconestopodemoshacerunanlisisyreconoceralosdosgrandes
gruposfundamentales:
Serif
Sans Serif

Pg: 12

Clasificacintipogrfica

Serif:RomanasAntiguasoGeraldas 1460
Garamond,Caslon,Trajan

Tienen serif agudosybaseancha.

Tienenserif
agudos y base ancha
Trazosvariables,ascendentesfinosydescendentesgruesos.
Espaciadoamplio.
Ladireccindelejedeengrosamientoesoblicua.
TipgrafosdestacadosAldus Manutius yClaudeGaramond.

Pg: 13

Clasificacintipogrfica

Serif:RomanasdeTransicin1760
Baskerville,Times,Century
Tienen
Tienenserif
serif muchomsagudosquelasantiguas.
mucho ms agudos que las antiguas
Trazosvariablesconunaaentrefinosygruesos.
Ladireccindelejedeengrosamientoesoblicuaperomscercadeleje
horizontal.
TipgrafosdestacadosJohnBaskerville,StanleyMorison (Times).

Pg: 14

Clasificacintipogrfica

Serif:RomanasModernas1780
BauerBodoni,Didi

Tienen serif linealconmarcadosngulosconlosbastones.

Tienenserif
lineal con marcados ngulos con los bastones
Trazosvariablesconunaabruptadiferenciaentrefinosygruesos.
Ladireccindelejedeengrosamientoes horizontal.
SonproductodelaRevolucinIndustrial.
Tipgrafosdestacados:Giambattista Bodoni,FermnDidot.

Pg: 15

Clasificacintipogrfica

Slab serif:Mecanas1815
Rockwell,Clarendon
El
Elserif
serif estangruesocomolosbastones.
es tan grueso como los bastones
Puedesercuadrado(Lubalin Graph,Robotik)obienredondo(CooperBlack).
Lasrelacionesentreserif ybastnpuedenserangulares(Memphis)obien
curvas(Clarendon).
Ladireccindelejedeengrosamientoesnormalmentehorizontal.
Tipgrafosdestacados:Vincent Figgins (Rockwell),RobertBesley (Clarendon).

Pg: 16

Clasificacintipogrfica

Sans serif:Grotescas1957
AkzidenzGrotesk,Helvtica,Univers yFranklinGothic.

No tienen serifs
Notienenserifs.
Trazosuniformes,convariacionesdecompensacinptica.
Ladireccindelejedeengrosamientoesgeneralmentehorizontal.
Tipgrafosdestacados:MaxMiedinger (Helvetica),AdrianFrutiger (Univers).

Pg: 17

Clasificacintipogrfica

Sans serif:Geomtricas1920
Futura,Eurostile,Avenir.
Basados
Basadosenformasyestructurasgeomtricas,normalmentemonolneas.
en formas y estructuras geomtricas normalmente monolneas
Nacenapartirde1920comoconsecuenciadelasvanguardiaseuropeasyla
Bauhaus.
Tipgrafosdestacados:PaulRenner (Futura),AdrianFrutiger (Avenir).

Pg: 18

Clasificacintipogrfica

Sans serif:Humansticas1916
Gill Sans.
Basadas
Basadasenlasproporcionesdelasromanas,conunligerocontrasteensusserifs.
en las proporciones de las romanas con un ligero contraste en sus serifs
EdwardJohnston,calgraforelevantedelapocaconsucreeltipoparaelMetro
deLondresen1916.
Tipgrafosdestacados: EdwardJohnston(LondonUnderground), EricGill que
tomlatipografacreadaporJohnstonparadisearlaGill Sans.

Pg: 19

Clasificacintipogrfica

Manuscritas,FantasayExperimentalesfinsigloXX
Mistral,ComicSans,Curlz,etc.

No pertenecen a ninguna clasificacin exacta

Nopertenecenaningunaclasificacinexacta.
Noserecomiendasuusoenlargosbloquesdetexto.
Trazosyestructurasdiversas.
Unatipografadefantasapuedebajarlacalidaddeldiseodeformadramtica.

Pg: 20

10

Variables

Variablesdepeso
Variablesdeestructura
Variablesdeancho
Familiasistema

Pg: 21

Variables

Variablesdepeso
Fina,regular,negrita.
Lasletras,puedenllegaratenervariacionesenelgrosordesutrazo.
Hayfamiliastipogrficasquecuentancontodasesasvariacionesyotrasque
no.Lasnegritasnormalmenteseusanparasobresaltarodarnfasisaalguna
partedeltexto.

Pg: 22

11

Variables

Variablesdeancho
Lascondensadassonlaversinestrechadadeunafamiliatipogrfica,las
expandidassonlaversinensanchadadeunafamiliatipogrfica.
Esidealutilizartipografascondensadasparaahorrarespacio,aunquepuede
resultarcansadoralleertextosmuylargos.

Pg: 23

Variables

Variablesdeestructura
Itlicas,cursivayversalitas.
Sellamacursivaoitlicaatodoestilodeescrituraenelquelasletrasestn
inclinadas.
Versalitaesunavariacinquenotieneminsculas,sinoquesonlasmismas
maysculasqueseadaptanalaalturadexconproporcionesligeramente
distintas.

Pg: 24

12

Familiasistema
Univers (1957)
AdrianFrutiger diseoun
sistema de numeracin
sistemadenumeracin
paradiferenciarlos21
pesosyanchurasdela
Univers,aunquedespus
seutilizparacatalogarla
Frutiger,Avenir,Helvetica
Neue entreotras.

Pg: 25

Alineaciones
Laalineacindeltextoesunpasoimportantepara
mantenertambinunabuenalegibilidad.
Eltextopuedealinearsedecincoformasdistintas:
alineadoalaizquierda,
alineadoaladerecha,
justificado,
centradoo
asimtrico.

Pg: 26

13

Espaciado
1.
2.
3.
4
4.

Entreletras.
Entrepalabras.
Entrelneas.
E t
Entreprrafos.
f

5.
6.
7.

Medianiles(diseoeditorial).
Mrgenes(diseoeditorial).
Sangras.
6

1
2

4
3

Pg: 27

Legibilidad
Lalegibilidadeselconjuntodecaractersticas
tipogrficasylingsticasdeltextoescritoque
permitenleerloycomprenderloconfacilidad.
l l
d l
f ld d
Porejemplo:unttulo,unprrafoounaseal
destop,debenserreconociblealinstante.
Parahacerlegibleeltrabajo,tendremosque
tenerencuentaotrosaspectoscomo:
estilodelafamiliatipogrfica:
formadelasletras,
espaciados.
eltamaoocuerpotipogrfico,
lalongituddelalnea,
elinterlineado.
Pg: 28

14

Retricatipogrfica
Loscaracterespuedentransmitirnosloinformacintextual,sinotambin
mltiplesemocionesysensacionesatravsdesuforma.
Laeleccindeuntipodeletranuncaesarbitrariayrequiereunejerciciodelos
conceptoseideasqueselequierentransmitir.
Unmismotextocompuestocondiferentestiposproducesensaciones
diferentes,aunquediganexactamentelomismo.

Pg: 29

silencio!

Pg: 30

15

Pg: 31

Tipografadigital
Condicionantesqueinfluyensobrelatipografadigital
Tecnologaqueutilizaelusuarioparaprevisualizarla:
Hardwareogadget (PC,MAC,Celular,tabletadigital,proyector,etc)
Sistemaoperativo(OS).
Navegadorutilizado(encasodelaweb)
Capacidaddelafamiliaeligida poreldiseadorparaadaptarseaestas
circunstancias.

VECTORE
S

ANTIALIASING
OSUAVIZADO

PIXELADO

Pg: 32

16

Latipografaenlaweb
Elusodelashojasdeestiloencascada (CSS)revolucioneldiseotipogrfico
webypermitilogrardiseossimilaresindependientementedelossistemas
operativos(OS)olosnavegadoresweb.
( ) l
d
b
Lasfamiliastipogrficasmsutilizadasenlawebson:

Arial
Times New Roman
g
Georgia
Verdana
Trebuchet
Courier New

Websafe fonts sonfuentesquese

encuentrandisponiblesenlamayorade
losordenadoresynospermitenleer
cualquier sitio webencualquier
navegador deinternet.

Pg: 33

Formatostipogrficosdigitales
Sonarchivosindependientesqueseinstalanenundeterminadodirectoriodel
sistemaoperativoparaqueestndisponiblesentodoslosprogramasqueusan
caracteres.
Losformatosdetipografadigitalmscomunesson:
Los formatos de tipografa digital ms comunes son:
TTF(TrueTypeFont):diferentessegnelOS(MicrosoftyApple).
PostScriptdeAdobe:utilizadoenmediosimpresosyarchivosPDF.
OTF(OpenType Font):precedealTTFysonmultiplataforma(desdeWindows
VistayOSdeMac).
Formatosdelmaana paralawebparautilizarcualquierfamiliatipogrficaen
cualquiernavegador:
EOT (Embedded OpenType):utilizadoporInternetExplorer.
WOFF (WebOpenFontFormat):desarrolladoporMozilla
( b
) d
ll d
ll yencaminoparaser
elestandar.

Pg: 34

17

Referencias:librosylinks

DiseoDigital.JavierRoyo.Paids ISBN8449315506
http://www.ideocentro.com/recursos.php?id=31&estudio_diseno_web_ideocent
ro=Tipografia
http://www.typographia.com.ar/typo1/?p=1419
http://rienzie.com/30tipografiasserifysansserifparatustrabajos
h //
/
f
f
f
b
http://es.wikipedia.org/wiki/Tipograf%C3%ADa
http://es.wikipedia.org/wiki/Tipo_de_letra
http://letritas.blogspot.com/2008/09/sensibilidadtipogrfica.html
http://andreubalius.blogspot.com/2010/03/tipografiaenpantallahacia
una.html

Recursos
http://es.letrag.com/visualizador.php
http://www.smashingmagazine.com/2010/05/06/50helpfultypography
toolsandresources/
http://www.squidspot.com/Periodic_Table_of_Typefaces/Periodic_Table_of_
Typefaces_large.jpg
http://www.typographicposters.com/
Pg: 35

UNSL|IntroduccinalDiseoGrfico|IvanPianciola(DG)|ipianciola@unsl.edu.ar|http://bit.ly/unsldg

18