{"id":122,"date":"2017-06-21T08:21:10","date_gmt":"2017-06-21T08:21:10","guid":{"rendered":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/?page_id=122"},"modified":"2017-07-13T11:19:49","modified_gmt":"2017-07-13T11:19:49","slug":"2-las-tipografias","status":"publish","type":"page","link":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/2-las-tipografias\/","title":{"rendered":"2. Las tipograf\u00edas"},"content":{"rendered":"<p><\/p>\n<h3>2.1. Importancia de la tipograf\u00eda: las letras tambi\u00e9n comunican cosas<\/h3>\n<p>Las letras est\u00e1n por todas partes. Esto es un hecho. Solo tenemos que mirar a nuestro alrededor. El correcto uso de estas letras es la manera m\u00e1s eficaz y m\u00e1s poderosa de trasmitir un mensaje. Son una herramienta de comunicaci\u00f3n imprescindible en el dise\u00f1o gr\u00e1fico. La importancia de la tipograf\u00eda va m\u00e1s all\u00e1 del significado del texto, ya que con las letras pueden comunicar estados de \u00e1nimo, pueden ser relacionadas con momentos hist\u00f3ricos concretos o incluso con estilos de vida. Un sencillo cambio de tipo de letra, de tama\u00f1o, de grosor, etc. puede a\u00f1adir \u00e9nfasis e intenci\u00f3n a la informaci\u00f3n que se ha colocado en la p\u00e1gina.<\/p>\n<div class=\"cita\">\n<p>\u00abLa tipograf\u00eda no se relaciona con el dise\u00f1o gr\u00e1fico, no es causa ni consecuencia. La tipograf\u00eda forma parte del dise\u00f1o gr\u00e1fico, lo uno no existir\u00eda sin lo otro y viceversa\u00bb (Francisco Calles, investigador mexicano).<\/p>\n<\/div>\n<div id=\"attachment_125\" style=\"width: 460px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-125\" loading=\"lazy\" class=\"img-responsive wp-image-125 size-full\" src=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-content\/uploads\/sites\/22\/2017\/06\/20118_a2_001.jpg\" alt=\"\" width=\"450\" height=\"450\" srcset=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-content\/uploads\/sites\/22\/2017\/06\/20118_a2_001.jpg 450w, http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-content\/uploads\/sites\/22\/2017\/06\/20118_a2_001-150x150.jpg 150w, http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-content\/uploads\/sites\/22\/2017\/06\/20118_a2_001-300x300.jpg 300w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><p id=\"caption-attachment-125\" class=\"wp-caption-text\">Las tipograf\u00edas expresan independientemente de lo que pueda significar el texto.<\/p><\/div>\n<p>Puede darse el caso de que la tipograf\u00eda sea el \u00fanico elemento gr\u00e1fico con el que contamos en un proyecto, como en algunas portadas de libros o carteles, compuestas solo por letras. Componer estos supuestos de manera efectiva y con una est\u00e9tica milimetrada es uno de los retos m\u00e1s dif\u00edciles que puede enfrentar un dise\u00f1ador.<\/p>\n<div id=\"attachment_126\" style=\"width: 460px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-126\" loading=\"lazy\" class=\"img-responsive wp-image-126 size-full\" src=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-content\/uploads\/sites\/22\/2017\/06\/20118_a2_002.jpg\" alt=\"\" width=\"450\" height=\"611\" srcset=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-content\/uploads\/sites\/22\/2017\/06\/20118_a2_002.jpg 450w, http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-content\/uploads\/sites\/22\/2017\/06\/20118_a2_002-221x300.jpg 221w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><p id=\"caption-attachment-126\" class=\"wp-caption-text\">La revista <em>Time<\/em> sorprend\u00eda en 1960 con esta sobria portada de contundente mensaje.<\/p><\/div>\n<p>El dise\u00f1ador y director de arte Diego Areso especificaba en su curso de tipograf\u00eda para la Universidad Carlos III que \u00aben tipograf\u00eda, todo depende del ojo que mira\u00bb.<\/p>\n<p>Un tipo de letra que nos es familiar siempre ser\u00e1 m\u00e1s f\u00e1cil de leer, un tipo de letra que nos es ajeno servir\u00e1 para llamar la atenci\u00f3n, haciendo hincapi\u00e9 en su significado, puede que incluso alter\u00e1ndolo. Esto quiere decir que, por norma general, una tipograf\u00eda tendr\u00e1 un fuerte impacto subliminal en la persona, y no todo el mundo la percibir\u00e1 de la misma manera.<\/p>\n<p>Se pueden establecer algunos puntos comunes dentro de este universo de sensaciones que las letras provocan. Por ejemplo, se puede decir que las formas curvas son consideradas m\u00e1s tranquilas o que las angulosas suelen provocar tensi\u00f3n. Del mismo modo, las letras inclinadas suelen dar sensaci\u00f3n de movimiento frente a las no inclinadas, que suelen ser m\u00e1s est\u00e1ticas.<\/p>\n<p>Todo dise\u00f1o hecho con tipograf\u00edas consta de dos partes: la \u00abmacrotipia\u00bb o composici\u00f3n del espacio (lo que ser\u00eda la primera impresi\u00f3n), y la \u00abmicrotipia\u00bb o los detalles que componen la letra como la l\u00ednea, la puntuaci\u00f3n, la forma, etc. (normalmente, este nivel se capta de manera inconsciente). El \u00e9xito de un conjunto depender\u00e1 del buen funcionamiento de las dos partes.<\/p>\n<h3>2.1.1. C\u00f3mo elegir bien una tipograf\u00eda<\/h3>\n<p>A la hora de elegir bien un tipo de letra, hay que tener claros una serie de aspectos como a qui\u00e9n va dirigido el proyecto (la audiencia del producto), el tipo de mensaje que contiene, su extensi\u00f3n o el soporte en el que ser\u00e1 impresa.<\/p>\n<h4>2.1.1.1. Seg\u00fan la audiencia<\/h4>\n<p>El tipo de letra (as\u00ed como el resto de los elementos del dise\u00f1o) deber\u00e1 ser adecuado a las personas a las que va destinada la publicaci\u00f3n. Nuestra selecci\u00f3n de tipos ha de ser acorde a esto. No usar\u00edamos la misma tipograf\u00eda en una revista corporativa de un bufete de abogados que en una revista de m\u00fasica para adolescentes.<\/p>\n<div id=\"attachment_133\" style=\"width: 650px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-133\" loading=\"lazy\" class=\"img-responsive wp-image-133 size-full\" src=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-content\/uploads\/sites\/22\/2017\/06\/20118_a2_003.jpg\" alt=\"\" width=\"640\" height=\"415\" srcset=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-content\/uploads\/sites\/22\/2017\/06\/20118_a2_003.jpg 640w, http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-content\/uploads\/sites\/22\/2017\/06\/20118_a2_003-300x195.jpg 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><p id=\"caption-attachment-133\" class=\"wp-caption-text\">En la imagen podemos ver un ejemplo de revista destinada a una audiencia m\u00e1s adulta (entre 30-40 a\u00f1os). El uso tipogr\u00e1fico es elegante y sobrio, aunque el dise\u00f1o es muy din\u00e1mico. La portada pertenece a la edici\u00f3n espa\u00f1ola de la revista <em>Vogue<\/em> y la p\u00e1gina interior, a <em>Vogue<\/em> M\u00e9xico.<\/p><\/div>\n<div id=\"attachment_134\" style=\"width: 650px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-134\" loading=\"lazy\" class=\"img-responsive wp-image-134 size-full\" src=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-content\/uploads\/sites\/22\/2017\/06\/20118_a2_004.jpg\" alt=\"\" width=\"640\" height=\"439\" srcset=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-content\/uploads\/sites\/22\/2017\/06\/20118_a2_004.jpg 640w, http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-content\/uploads\/sites\/22\/2017\/06\/20118_a2_004-300x206.jpg 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><p id=\"caption-attachment-134\" class=\"wp-caption-text\">Aqu\u00ed podemos observar la versi\u00f3n adolescente de la misma publicaci\u00f3n: <em>Teen Vogue<\/em>. Como vemos, el uso tipogr\u00e1fico es m\u00e1s desenfadado. En el ejemplo podemos ver que se busca ser m\u00e1s efectista con la ayuda del color.<\/p><\/div>\n<h4>2.1.1.2. Seg\u00fan el contenido<\/h4>\n<p>Debemos ser consecuentes con el producto que dise\u00f1amos, y buscar letras que nos ayuden a definir la personalidad de lo que queremos hacer. Si nuestro producto tiene un car\u00e1cter m\u00e1s informativo y serio, intentaremos elegir tipograf\u00edas m\u00e1s cl\u00e1sicas, serifas de f\u00e1cil lectura sin un exceso de florituras. Si nuestro proyecto tiene un tono m\u00e1s desenfadado, podemos utilizar tipograf\u00edas m\u00e1s atrevidas.<\/p>\n<h4>2.1.1.3. Seg\u00fan la extensi\u00f3n del texto<\/h4>\n<p>Si nuestro proyecto contiene textos muy largos, debemos intentar que la legibilidad de estos sea la mejor posible. El impacto tipogr\u00e1fico o los efectos m\u00e1s intencionados siempre pueden dejarse para titulares o textos m\u00e1s breves. Esto es muy importante y, aunque parezca evidente, hay que tenerlo muy en cuenta: los textos deben leerse f\u00e1cilmente, y para ello tendremos en cuenta la legibilidad de la letra y la lecturabilidad de la composici\u00f3n.<\/p>\n<h4>2.1.1.4. Por el soporte en el que se va a imprimir<\/h4>\n<p>No ser\u00e1 igual el tratamiento que tengamos que dar a un soporte de grandes dimensiones como un p\u00f3ster, un libro o una revista. Si el papel en el que se va a imprimir es de mala calidad (como suele pasar en diarios), hay que intentar no usar tipograf\u00edas muy complejas que puedan verse afectadas con una mala impresi\u00f3n.<\/p>\n<p>Hay que tener tambi\u00e9n en cuenta que no se usan las misma tipograf\u00edas en medios impresos que en web. El uso de tipos en web siempre ha supuesto un problema para el dise\u00f1ador, ya que los navegadores contaban con un n\u00famero muy limitado de fuentes y su visualizaci\u00f3n se ve\u00eda afectada por los sistemas operativos que estuvieran instalados en cada ordenador. Actualmente, este problema se ha solucionado y el abanico tipogr\u00e1fico es mucho m\u00e1s amplio, si bien hay que tener en cuenta que los efectos complejos sobre letras o las tipograf\u00edas que se salen de lo com\u00fan pueden llevar consigo problemas de visualizaci\u00f3n. En el caso de las publicaciones digitales para soportes m\u00f3viles no existe este problema, ya que el contenido se muestra en formatos que llevan las fuentes incrustadas. En estos soportes es muy importante tener en cuenta que el cuerpo de la tipograf\u00eda ha de ser mayor, ya que los tama\u00f1os para la lectura no funcionan de la misma manera en pantalla que en el medio impreso.<\/p>\n<h4>2.1.1.5. La imagen de marca<\/h4>\n<p>La tipograf\u00eda es un elemento m\u00e1s que ayudar\u00e1 a definir la personalidad gr\u00e1fica del proyecto. Peque\u00f1os elementos tipogr\u00e1ficos, la combinaci\u00f3n de las familias escogidas, los estilos usados o la colocaci\u00f3n en el espacio contribuir\u00e1n a remarcar un estilo reconocible dentro de la marca del proyecto: una personalidad propia.<\/p>\n<p>Para resumir, podemos decir que el mundo de la tipograf\u00eda es pr\u00e1cticamente inabarcable, por lo que es importante tener unas nociones b\u00e1sicas que nos sirvan de base a la hora de elegir. Debemos tener claro que hay combinaciones y usos que sabemos que funcionan de manera eficaz y que son est\u00e9ticos, aunque el universo tipogr\u00e1fico es tan amplio que hay que probar y probar y seguir probando cosas para poder crear algo nuevo, est\u00e9tico y sorprendente.<\/p>","protected":false},"excerpt":{"rendered":"<p>2.1. Importancia de la tipograf\u00eda: las letras tambi\u00e9n comunican cosas Las letras est\u00e1n por todas partes. Esto es un hecho. Solo tenemos que mirar a nuestro alrededor. El correcto uso de estas letras es la manera m\u00e1s eficaz y m\u00e1s poderosa de trasmitir un mensaje. Son una herramienta de comunicaci\u00f3n imprescindible en el dise\u00f1o gr\u00e1fico. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-json\/wp\/v2\/pages\/122"}],"collection":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-json\/wp\/v2\/comments?post=122"}],"version-history":[{"count":10,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-json\/wp\/v2\/pages\/122\/revisions"}],"predecessor-version":[{"id":733,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-json\/wp\/v2\/pages\/122\/revisions\/733"}],"wp:attachment":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-json\/wp\/v2\/media?parent=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}