{"id":235,"date":"2019-01-03T12:48:30","date_gmt":"2019-01-03T10:48:30","guid":{"rendered":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/?page_id=235"},"modified":"2019-01-22T17:27:43","modified_gmt":"2019-01-22T15:27:43","slug":"3-5-equilibrio-del-parrafo","status":"publish","type":"page","link":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/3-5-equilibrio-del-parrafo\/","title":{"rendered":"3.5. Equilibrio del p\u00e1rrafo"},"content":{"rendered":"<p>Al igual que en dise\u00f1o, en general, existen algunas buenas pr\u00e1cticas en tipograf\u00eda, pero no son leyes inquebrantables. A menudo estas buenas pr\u00e1cticas se materializan en forma de rangos num\u00e9ricos que deber\u00edamos usar (como hemos visto para la longitud de l\u00ednea), pero elegir valores dentro de esas horquillas recomendadas es algo que solo podemos dominar con tiempo y pr\u00e1ctica. El ojo necesita su tiempo para poder llegar a detectar esas sutiles diferencias y detalles que hacen que un p\u00e1rrafo funcione mejor que otro.<\/p>\n<p>As\u00ed pues, no podemos aportar valores definitivos para el p\u00e1rrafo perfecto porque hay millones de combinaciones v\u00e1lidas. Lo que s\u00ed podemos hacer es aportar algunos ejemplos que servir\u00e1n de ayuda al ojo tipogr\u00e1fico. En los siguientes ejemplos componemos el texto en Merriweather, una tipograf\u00eda <em>serif<\/em> gratuita y de c\u00f3digo abierto, disponible en Google Fonts.<\/p>\n<div class=\"featured featured-grey\"><\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-110\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_041.jpg\" alt=\"\" width=\"580\" height=\"704\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_041.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_041-247x300.jpg 247w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_041-768x932.jpg 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/p>\n<p>Esta primera composici\u00f3n de p\u00e1rrafo es equilibrada, ya que hay un buen balance entre tama\u00f1o de letra, interlineado y ancho de l\u00ednea. Vemos que la relaci\u00f3n entre el cuerpo de texto (12 puntos) y el interlineado (19 puntos) no es menor al 130 % ni mayor al 170 %, que es el rango habitual recomendado. Lo mismo ocurre con el ancho de l\u00ednea, que se encuentra dentro de la horquilla de entre 45 y 75 caracteres.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-111\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_042.jpg\" alt=\"\" width=\"580\" height=\"347\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_042.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_042-300x179.jpg 300w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_042-768x459.jpg 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/p>\n<p>En este caso las l\u00edneas de texto son demasiado largas. Para arreglarlo podr\u00edamos, o bien reducir el ancho de la caja de texto, o bien ampliar el tama\u00f1o del tipo y la interl\u00ednea. Cabe destacar que la cantidad de caracteres dentro de una l\u00ednea es 92, que se encuentra fuera del rango orientativo (45-75).<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-112\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_043.jpg\" alt=\"\" width=\"580\" height=\"764\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_043.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_043-228x300.jpg 228w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_043-768x1012.jpg 768w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_043-777x1024.jpg 777w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/p>\n<p>Lo que falla en este p\u00e1rrafo es el espacio entre l\u00edneas, o interlineado. Como se puede observar, las l\u00edneas del texto se empiezan a desvincular unas de otras en exceso. Mejorar\u00eda ampliando la anchura de l\u00ednea y el tama\u00f1o del tipo, aunque ser\u00eda m\u00e1s sencillo reducir el espacio entre l\u00edneas. Se puede ver que el valor de interl\u00ednea es un 200 % mayor al del cuerpo, un valor que est\u00e1 fuera de la horquilla recomendada (130 %-170 %).<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-113\" src=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_044.jpg\" alt=\"\" width=\"580\" height=\"828\" srcset=\"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_044.jpg 800w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_044-210x300.jpg 210w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_044-768x1096.jpg 768w, http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/wp-content\/uploads\/sites\/13\/2018\/12\/20140_m1_044-717x1024.jpg 717w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/p>\n<p>Aqu\u00ed el tama\u00f1o de la fuente es excesivo y el interlineado demasiado ajustado para el ancho de l\u00ednea que tenemos. Para arreglarlo, deber\u00edamos reducir el cuerpo del texto, o bien aumentar el interlineado y la anchura de la columna. Si nos fijamos en los valores, tanto la relaci\u00f3n entre el tama\u00f1o del texto y el interlineado como los caracteres por l\u00ednea se encuentran fuera de los rangos recomendados.<\/p>\n<p>\n<\/div>\n<div class=\"featured featured-blue\"><\/p>\n<p><strong>Conclusi\u00f3n<\/strong><\/p>\n<p>Los tres factores cruciales a la hora de maquetar un p\u00e1rrafo perfectamente equilibrado son: tama\u00f1o de la fuente, espacio entre l\u00edneas y anchura de l\u00ednea. Hay que recordar que los tres elementos deben ser tratados a la vez para conseguir p\u00e1rrafos f\u00e1ciles y c\u00f3modos de leer.<\/p>\n<p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Al igual que en dise\u00f1o, en general, existen algunas buenas pr\u00e1cticas en tipograf\u00eda, pero no son leyes inquebrantables. A menudo estas buenas pr\u00e1cticas se materializan en forma de rangos num\u00e9ricos que deber\u00edamos usar (como hemos visto para la longitud de l\u00ednea), pero elegir valores dentro de esas horquillas recomendadas es algo que solo podemos dominar [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"acf":[],"_links":{"self":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/wp-json\/wp\/v2\/pages\/235"}],"collection":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/wp-json\/wp\/v2\/comments?post=235"}],"version-history":[{"count":4,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/wp-json\/wp\/v2\/pages\/235\/revisions"}],"predecessor-version":[{"id":705,"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/wp-json\/wp\/v2\/pages\/235\/revisions\/705"}],"wp:attachment":[{"href":"http:\/\/disseny-test.uoc.edu\/materials\/tipografia-avan\/es\/wp-json\/wp\/v2\/media?parent=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}