1

TIPOGRAFA
Unidad2
Historia
Anatomadelaletra
Clasificacin
Variables
Alineaciones
E i d Espaciado
Legibilidad
Retricatipogrfica
Tipografadigital
Historiadelatipografa
Laimprenta
Pg: 2
BASADAENUNATCNICAINVENTADAPORLOSCHINOS
1455d.C.
2
Historiadelatipografa
Lastipografasse
clasificanatravsde
estilosporsuformay
tambinporelmomento
enelquefueron
diseadas.
Losprimerostipos
mvilescreadosen
AlemaniaporJohannes
Gutenberg queimitaban
la escritura manuscrita de
Pg: 3
laescrituramanuscritade
laEdadMedia.
BIBLIADE42LNEASDE
GUTENBERGCONTIPOSMVILES
1455d.C.
Conceptosgenerales
Tipografa,eslatcnicadecrearycomponertipos
paracomunicarunmensaje.Seocupadelestudio
yclasificacindelasdistintasfuentestipogrficas. y p g
Tipo,eseldiseodeunaletradeterminada.
Fuentetipogrfica, eslaquesedefinecomoestilo
oaparienciadeungrupocompletodecaracteres,
nmerosysignos,regidosporcaractersticas
comunes.
Pg: 4
Familiatipogrfica,eselconjuntodetiposbasado
enunamismafuente,conalgunasvariaciones(por
ejemplogrosoroanchura)peromanteniendo
caractersticascomunes.Separecenentrespero
tienenrasgospropios.
3
Lneasdereferenciayproporciones
Anatomadelaletra
Rebaba
Originalmentesellamcuerpotipogrficoalaaltura
deltipodemetalenlossistemasdeimpresin,hoy
Pg: 5
llamamoscuerpotipogrficoalacaradelaletramsel
espacioadicionalparaevitarquesetoquenlos
caracteresdedoslneasconsecutivas.
Paramediosimpresoselcuerposemideenpuntos(pt)
Paramediosdigitaleselcuerposemideenpxeles(px)
Anatomadelaletra
Partesdelaletra
Lostrminosusadosparadescribirlaspartesdelasletrasseasemejanalas
partesdenuestrocuerpo.Aslasletrastienenbrazos,piernas,ojos,entreotros.
Pg: 6
4
Clasificacintipogrfica
Serif
Romanasantiguasogeraldas (1)
Romanasdetransicin (2)
Romanasmodernas(3)
Egipcias(4)
Sans serif (5)
Geomtricas
Humanistas
M it F t E i t l
Pg:
Manuscritas,FantasayExperimentales
(1)(2)(3)(4)(5)
7
Clasificacintipogrfica
Gruposysubgrupos
Grupos
SANSSERIF SERIF
Pg: 8
Subgrupos
5
Clasificacintipogrfica
Gruposysubgrupos:Serif
Ejemplos:Jenson,Bembo, Palatino,
G d
Tienenrematesensusterminacionesy
trazosvariables.
Garamond
Ejemplos: TimesNewRoman,Baskerville
Ejemplos:Bodoni, Didot
Pg: 9
Tienenrematesensusterminacionesy
trazoscontinuos.
j p ,
Ejemplos:Clarendon,Rockwell,Courier,
Lubalin Graph,Archer
Clasificacintipogrfica
Gruposysubgrupos:SansSerif
Basadosenformasyestructurasgeomtricas,normalmentemonolneas(trazos
continuos).
Ejemplos:Helvetica,Univers,Futura,
AvantGarde,Akzidenz Grotesk,
FranklinGothic,Gotham
Ejemplos:GillSans,Frutiger,Myriad,
Optima Verdana
Pg: 10
Optima,Verdana
6
Manuscritas,FantasayExperimentales
Mistral,ComicSans,Curlz,etc.
No pertenecen a ninguna clasificacin exacta
Clasificacintipogrfica
Nopertenecenaningunaclasificacinexacta.
Noserecomiendasuusoenlargosbloquesdetexto.
Trazosyestructurasdiversas.
Unatipografadefantasapuedebajarlacalidaddeldiseodeformadramtica.
Pg: 11
Variables
Variablesdepeso
Variablesdeestructura
Variablesdeancho
Familiasistema
Pg: 12
7
Variablesdepeso
Fina,regular,negrita.
Lasletras,puedenllegaratenervariacionesenelgrosordesutrazo.
Variables
Hayfamiliastipogrficasquecuentancontodasesasvariacionesyotrasque
no.Lasnegritasnormalmenteseusanparasobresaltarodarnfasisaalguna
partedeltexto.
Pg: 13
Variablesdeancho
Lascondensadassonlaversinestrechadadeunafamiliatipogrfica,las
expandidassonlaversinensanchadadeunafamiliatipogrfica.
Variables
Esidealutilizartipografascondensadasparaahorrarespacio,aunquepuede
resultarcansadoralleertextosmuylargos.
Pg: 14
8
Variablesdeestructura
Itlicas,cursivayversalitas.
Sellamacursivaoitlicaatodoestilodeescrituraenelquelasletrasestn
Variables
inclinadas.
Versalitaesunavariacinquenotieneminsculas,sinoquesonlasmismas
maysculasqueseadaptanalaalturadexconproporcionesligeramente
distintas.

Pg: 15

Familiasistema
Univers (1957)
AdrianFrutiger diseoun
sistema de numeracin sistemadenumeracin
paradiferenciarlos21
pesosyanchurasdela
Univers,aunquedespus
seutilizparacatalogarla
Frutiger,Avenir,Helvetica
Neue entreotras.
Pg: 16
9
Alineaciones
Laalineacindeltextoesunpasoimportantepara
mantenertambinunabuenalegibilidad.
Eltextopuedealinearsedecincoformasdistintas:
alineadoalaizquierda,
alineadoaladerecha,
justificado,
centradoo
asimtrico.
Pg: 17
Espaciado
1. Entreletras.
2. Entrepalabras.
3. Entrelneas.
4 E t f
5. Medianiles(diseoeditorial).
6. Mrgenes(diseoeditorial).
7. Sangras.
4. Entreprrafos.
1
2
7
5
6
Pg: 18
4
3
10
Recomendaciones:Longituddelneaorengln
Esrecomendablequeunprrafotengaunpromediode10o15palabrasporlneao
rengln.
Muy largo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
Muy corto
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
Bueno
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
Pg: 19
sed do eiusmod tempor
incididunt ut labore et dolore
magna aliqua. Ut enim ad
minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea
commodo consequat.
enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
Recomendaciones:Interlineado
Lalongituddelrenglnafectardirectamentealespaciadoespaciadoentrelneas.
Cuantomspalabrascontengaunrengln,sernecesariomayorespaciadoentre
lneasparalograrunatextolegible.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco.
Muy estrecho
Bueno
Pg: 20
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco.
Demasiado amplio
11
Recomendaciones:nfasis
Darnfasisaunapalabraofrasesimportantessininterrumpirlalectura.Los
recursosmscomunesdenfasisson:negritas,MAYSCULAS,VERSALITAS,color,
tamao odiferente fuente tipogrfica.
C bi d d di i l l fl d Combinarmsdeunrecursopuedeserdisrruptivoyentorpecerlalecturafluda.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco.
Bueno
Pg: 21
Lorem ipsum dolor sit amet, CONSECTETUR ADIPISICING
ELIT, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Disruptivo
Legibilidad
Lalegibilidadeselconjuntodeaspectos
tipogrficosylingsticosquepermitenleerun
d l f l d d textoycomprenderloconfacilidad.
Porejemplo:unttuloounasealdestop,
debenserreconociblealinstante.
Parahacerlegibleeltrabajo,tendremosque
tenerencuentaotrosaspectoscomo:
jerarquas
estilodelafamiliatipogrfica:
Pg: 22
formadelasletras,
espaciados.
eltamaoocuerpotipogrfico,
lalongituddelalnea,
elinterlineado.
12
Legibilidad: Contraste
Uncontrasteptimopermiteque
untextoseafcildereconocery
d l deleer.
Ej:contrasteentrecolordetexto
yelcolordefondo.
Fundamentalparaqueundiseo,
pginaotextosealegible.
Pg: 23
Legibilidad: Jerarquas
Lajerarquadefinecomoleerel
contenido,indicaelcomienzoy
h d d haciadondecontinuar.
Diferencialostitularesdeltexto
deprrafopormedioderecursos
grficoscomoelcolor,eltamao
oelpesotipogrfico.
Fundamentalparaqueundiseo,
pginaotextoseaescaneable.
Pg: 24
13
Legibilidad: Claves
1. Titulares amigables para el
usuario(UserFriendly)
2 T bl
1
2. Texto escaneable
3. Espacios enblanco
4. Densidad detexto (cantidad de
palabras)
5. nfasis enloselementos
importantes
6. Mrgenes amplios
5
Pg: 25
5
Retricatipogrfica
Loscaracterespuedentransmitirnosloinformacintextual,sinotambin
mltiplesemocionesysensacionesatravsdesuforma.
Laeleccindeuntipodeletranuncaesarbitrariayrequiereunejerciciodelos
conceptoseideasqueselequierentransmitir.
Unmismotextocompuestocondiferentestiposproducesensaciones
diferentes,aunquediganexactamentelomismo.
Pg: 26
14
silencio!
Pg: 27
Pg: 28
15
Tipografadigital
Condicionantesqueinfluyensobrelatipografadigital
Tecnologaqueutilizaelusuarioparaprevisualizarla:
Hardwareogadget (PC,MAC,Celular,tabletadigital,proyector,etc)
Sistemaoperativo(OS).
Navegadorutilizado(encasodelaweb)
Capacidaddelafamiliaeligidaparaadaptarseaestascircunstancias.
Pg: 29
VECTORES PIXELADO ANTIALIASING
OSUAVIZADO
Formatostipogrficosdigitales
Sonarchivosindependientesqueseinstalanenundeterminadodirectoriodel
sistemaoperativoparaqueestndisponiblesentodoslosprogramasqueusan
caracteres.
Losformatosdetipografadigitalmscomunesson:
TTF (TrueType Font): diferentes segn el OS (Microsoft y Apple) TTF(TrueTypeFont):diferentessegnelOS(MicrosoftyApple).
PostScriptdeAdobe:utilizadoenmediosimpresosyarchivosPDF.
OTF(OpenTypeFont):precedealTTFysonmultiplataforma(desde
WindowsVistayOSdeMac).
Soporteennavegadoresweb parautilizarcualquierfamiliatipogrficaen
cualquiernavegador:
InternetExplorer(4+):EOT(EmbeddedOpenType)
InternetExplorer(9+):WOFF (WebOpenFontFormat)
Pg:
p ( ) ( p )
Safari(3.2+):TTF /OTF
Chrome(allversions):SVG/TTF/OTF
Firefox(3.5+):TTF/OTF/WOFF
Opera(10+)TTF/OTF
iPhone/iPod(3.1),iPad SVG
30
16
Latipografaenlaweb:Websafefonts
Elusodelashojasdeestiloencascada (CSS)revolucioneldiseotipogrfico
webypermitilogrardiseossimilaresindependientementedelossistemas
operativos(OS)olosnavegadoresweb.
Las familias tipogrficas ms utilizadas en la web son: Lasfamiliastipogrficasmsutilizadasenlawebson:
Arial
Times New Roman
Georgia
Websafe fonts sonfuentesquese
encuentrandisponiblesenlamayorade
losordenadoresynospermitenleer
l b l
Pg:
Verdana
Trebuchet
Courier New
31
cualquier sitio webencualquier
navegador deinternet.
Latipografaenlaweb:@fontface
@fontfacees una regla deCSS3que permite descargar una fuente particulardesde el
servidor para usarla enelnavegador encaso que elusuario notenga lafuente
instalada.
Estoamplaelespectrodeeleccintipogrficaalnolimitarsesoloalusodelasweb
safefonts.Cualquierfuentetipogrficapodrautilizarseenunsitioweb.
Pg: 32
www.google.com/webfonts/
17
DiseoDigital.JavierRoyo.Paids ISBN8449315506
http://www.ideocentro.com/recursos.php?id=31&estudio_diseno_web_ideocentro=Tipografia
http://www.typographia.com.ar/typo1/?p=1419
http://rienzie.com/30tipografiasserifysansserifparatustrabajos
http://es.wikipedia.org/wiki/Tipograf%C3%ADa
Referencias:librosylinks
http://es.wikipedia.org/wiki/Tipo_de_letra
http://letritas.blogspot.com/2008/09/sensibilidadtipogrfica.html
http://andreubalius.blogspot.com/2010/03/tipografiaenpantallahaciauna.html
http://www.damiandeluca.com.ar/lastipografiasenlawebactual
http://www.fontface.com/
http://www.miltonbayer.com/fontface/
Recursos
http://www.google.com/webfonts/
UNSL|IntroduccinalDiseoGrfico|unsldg@gmail.com|http://cor.to/unsldg Pg:
www.typetester.org
http://es.letrag.com/visualizador.php
http://www.smashingmagazine.com/2010/05/06/50helpfultypographytoolsand
resources/
http://www.squidspot.com/Periodic_Table_of_Typefaces/Periodic_Table_of_Typefaces_larg
e.jpg
http://www.typographicposters.com/
33