Beruflich Dokumente
Kultur Dokumente
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
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
Clasificacintipogrfica
Gruposysubgrupos:SansSerif
Basadosenformasyestructurasgeomtricas,normalmentemonolneas(trazos continuos).
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
5. 6. 7.
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:
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