Unidad2

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

Historiadelatipografa Laimprenta

BASADAENUNATCNICAINVENTADAPORLOSCHINOS

1455d.C.
Pg: 2

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

1455d.C.
Pg: 3

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

Anatomadelaletra

Lneasdereferenciayproporciones

Rebaba

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

Pg: 5

Anatomadelaletra

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

Pg: 6

Clasificacintipogrfica
Serif Romanasantiguasogeraldas (1) Romanasdetransicin (2) Romanasmodernas(3) Egipcias(4) Sans serif (5) Geomtricas Humanistas Manuscritas, M it F Fantasa t yE Experimentales i t l
(1)(2)(3)(4)(5)

Pg: 7

Clasificacintipogrfica

Gruposysubgrupos
Grupos
SANSSERIF SERIF

Subgrupos

Pg: 8

Clasificacintipogrfica

Gruposysubgrupos:Serif
Tienenrematesensusterminacionesy trazosvariables. Ejemplos:Jenson,Bembo, Palatino, G Garamond d Ejemplos: TimesNewRoman,Baskerville

j p Bodoni, , Didot Ejemplos:

Tienenrematesensusterminacionesy trazoscontinuos. Ejemplos:Clarendon,Rockwell,Courier, Lubalin Graph,Archer

Pg: 9

Clasificacintipogrfica

Gruposysubgrupos:SansSerif
Basadosenformasyestructurasgeomtricas,normalmentemonolneas(trazos continuos).

Ejemplos:Helvetica,Univers,Futura, AvantGarde,Akzidenz Grotesk, FranklinGothic,Gotham Ejemplos:GillSans,Frutiger,Myriad, Optima,Verdana Optima

Pg: 10

Clasificacintipogrfica

Manuscritas,FantasayExperimentales Mistral,ComicSans,Curlz,etc.
Nopertenecenaningunaclasificacinexacta. exacta Noserecomiendasuusoenlargosbloquesdetexto. Trazosyestructurasdiversas. Unatipografadefantasapuedebajarlacalidaddeldiseodeformadramtica.

Pg: 11

Variables
Variablesdepeso Variablesdeestructura Variablesdeancho Familiasistema

Pg: 12

Variables

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

Pg: 13

Variables

Variablesdeancho
Lascondensadassonlaversinestrechadadeunafamiliatipogrfica,las expandidassonlaversinensanchadadeunafamiliatipogrfica. Esidealutilizartipografascondensadasparaahorrarespacio,aunquepuede resultarcansadoralleertextosmuylargos.

Pg: 14

Variables

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

Pg: 15

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

Pg: 16

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

Pg: 17

Espaciado
1. 2. 3. 4 4.
1 2 7 5

Entreletras. Entrepalabras. Entrelneas. E t prrafos. Entre f

5. 6. 7.

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

6

4 3

Pg: 18

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, 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.

Bueno
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.

Pg: 19

Recomendaciones:Interlineado
Lalongituddelrenglnafectardirectamentealespaciadoespaciadoentrelneas. Cuantomspalabrascontengaunrengln,sernecesariomayorespaciadoentre lneasparalograrunatextolegible. Muy estrecho
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
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
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.

Pg: 20

10

Recomendaciones:nfasis
Darnfasisaunapalabraofrasesimportantessininterrumpirlalectura.Los recursosmscomunesdenfasisson:negritas,MAYSCULAS,VERSALITAS,color, tamao odiferente fuente tipogrfica. C bi ms Combinar de d unrecursopuede d serdisrruptivo di i yentorpecerla l lectura l fluda. fl d Bueno
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
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.

Pg: 21

Legibilidad
Lalegibilidadeselconjuntodeaspectos tipogrficosylingsticosquepermitenleerun textoycomprenderlo d l confacilidad. f ld d Porejemplo:unttuloounasealdestop, debenserreconociblealinstante. Parahacerlegibleeltrabajo,tendremosque tenerencuentaotrosaspectoscomo: jerarquas estilodelafamiliatipogrfica: formadelasletras, espaciados. eltamaoocuerpotipogrfico, lalongituddelalnea, elinterlineado.
Pg: 22

11

Legibilidad: Contraste
Uncontrasteptimopermiteque untextoseafcildereconocery d l de leer. Ej:contrasteentrecolordetexto yelcolordefondo. Fundamentalparaqueundiseo, pginaotextosealegible.

Pg: 23

Legibilidad: Jerarquas
Lajerarquadefinecomoleerel contenido,indicaelcomienzoy h hacia d donde d continuar. Diferencialostitularesdeltexto deprrafopormedioderecursos grficoscomoelcolor,eltamao oelpesotipogrfico. Fundamentalparaqueundiseo, pginaotextoseaescaneable.

Pg: 24

12

Legibilidad: Claves
1. 2. 2 3. 4. 5. 6. Titulares amigables para el 1 usuario(UserFriendly) T Texto escaneable bl Espacios enblanco Densidad detexto (cantidad de palabras) nfasis enloselementos importantes Mrgenes amplios 5

Pg: 25

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

Pg: 26

13

silencio!

Pg: 27

Pg: 28

14

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

VECTORES
Pg: 29

ANTIALIASING OSUAVIZADO

PIXELADO

Formatostipogrficosdigitales
Sonarchivosindependientesqueseinstalanenundeterminadodirectoriodel sistemaoperativoparaqueestndisponiblesentodoslosprogramasqueusan caracteres. Losformatosdetipografadigitalmscomunesson: TTF(TrueTypeFont):diferentessegnelOS(MicrosoftyApple) Apple). PostScriptdeAdobe:utilizadoenmediosimpresosyarchivosPDF. OTF(OpenTypeFont):precedealTTFysonmultiplataforma(desde WindowsVistayOSdeMac). Soporteennavegadoresweb parautilizarcualquierfamiliatipogrficaen cualquiernavegador:
InternetExplorer(4+):EOT(EmbeddedOpenType) InternetExplorer p ( (9+): ) WOFF ( (WebOpen p FontFormat) ) 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

Pg: 30

15

Latipografaenlaweb:Websafefonts
Elusodelashojasdeestiloencascada (CSS)revolucioneldiseotipogrfico webypermitilogrardiseossimilaresindependientementedelossistemas operativos(OS)olosnavegadoresweb. Lasfamiliastipogrficasmsutilizadasenlawebson:

Arial Times New Roman Georgia Verdana Trebuchet Courier New

Pg: 31

Websafe fonts sonfuentesquese encuentrandisponiblesenlamayorade losordenadoresynospermitenleer cualquier l sitio web bencualquier l 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/

16

Referencias:librosylinks

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 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/ 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/
UNSL|IntroduccinalDiseoGrfico|unsldg@gmail.com|http://cor.to/unsldg

Pg: 33

17