{"id":90,"date":"2017-01-24T16:06:48","date_gmt":"2017-01-24T16:06:48","guid":{"rendered":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/?page_id=90"},"modified":"2021-08-20T07:40:08","modified_gmt":"2021-08-20T07:40:08","slug":"1-lletres-6","status":"publish","type":"page","link":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/es\/1-lletres-6\/","title":{"rendered":"1. Letras"},"content":{"rendered":"<p><\/p>\n<h3><strong>1.6. Anatom\u00eda del tipo<\/strong><\/h3>\n<h4><strong>1.6.1. Letras, familias, fuentes y estilos<\/strong><\/h4>\n<p>La <strong>letra<\/strong> es la forma gr\u00e1fica usada para representar un sonido ling\u00fc\u00edstico y el elemento m\u00e1s peque\u00f1o en la formaci\u00f3n de una palabra o un texto. En la maquetaci\u00f3n por ordenador, las letras o caracteres tambi\u00e9n se denominan glifos. Un <strong>car\u00e1cter<\/strong> es la unidad textual o de escritura, mientras que un <strong>glifo<\/strong> es la unidad gr\u00e1fica.<\/p>\n<div id=\"attachment_787\" style=\"width: 850px\" class=\"wp-caption alignleft\"><img aria-describedby=\"caption-attachment-787\" loading=\"lazy\" class=\"img-responsive wp-image-787 size-full\" src=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.01-letras-glifo.jpg\" alt=\"\" width=\"840\" height=\"421\" srcset=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.01-letras-glifo.jpg 840w, http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.01-letras-glifo-300x150.jpg 300w, http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.01-letras-glifo-768x385.jpg 768w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-787\" class=\"wp-caption-text\">Figura 13. Diferentes glifos del car\u00e1cter \u00aba\u00bb de la tipograf\u00eda Affair dise\u00f1ada por Alejandro Paul<br \/> Fuente: <a href=\"https:\/\/www.linotype.com\/es\/868241\/affair-regular-product.html\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.linotype.com\/es\/868241\/affair-regular-product.html<\/a><\/p><\/div>\n<p>En la ventana \u00abGlifos\u00bb de InDesign se pueden localizar de manera r\u00e1pida todos los glifos de cada fuente. Inicialmente muestra los glifos de la fuente en la que est\u00e1 situado el cursor, pero se puede seleccionar cualquier familia o estilo disponible. Adem\u00e1s, es posible seleccionar un subconjunto de glifos (por ejemplo, s\u00edmbolos matem\u00e1ticos, n\u00fameros o signos de puntuaci\u00f3n) y tiene diferentes opciones de b\u00fasqueda y visualizaci\u00f3n.<\/p>\n<div id=\"attachment_788\" style=\"width: 850px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/fonts.google.com\/?query=playfair\" target=\"_blank\" rel=\"noopener noreferrer\"><img aria-describedby=\"caption-attachment-788\" loading=\"lazy\" class=\"img-responsive wp-image-788 size-full\" src=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.02-glifos.jpg\" alt=\"\" width=\"840\" height=\"602\" srcset=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.02-glifos.jpg 840w, http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.02-glifos-300x215.jpg 300w, http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.02-glifos-768x550.jpg 768w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/a><p id=\"caption-attachment-788\" class=\"wp-caption-text\">Figura 14. Tabla de glifos de la fuente Playfair Display Regular dise\u00f1ada por Claus Eggers S\u00f8rensen<br \/> Fuente: <a href=\"https:\/\/fonts.google.com\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/fonts.google.com<\/a><\/p><\/div>\n<p>Denominamos <strong>familia tipogr\u00e1fica<\/strong> al conjunto de caracteres del alfabeto dise\u00f1ados con unos mismos criterios de coherencia formal, con una misma l\u00ednea gr\u00e1fica. Por ejemplo, son familias la Helvetica y la Times, porque tienen una personalidad propia y caracter\u00edstica dada por el dise\u00f1ador que permite diferenciarlas del resto de tipograf\u00edas.<\/p>\n<div id=\"attachment_789\" style=\"width: 850px\" class=\"wp-caption alignleft\"><img aria-describedby=\"caption-attachment-789\" loading=\"lazy\" class=\"img-responsive wp-image-789 size-full\" src=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.03-google-fonts.jpg\" alt=\"\" width=\"840\" height=\"302\" srcset=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.03-google-fonts.jpg 840w, http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.03-google-fonts-300x108.jpg 300w, http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.03-google-fonts-768x276.jpg 768w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-789\" class=\"wp-caption-text\">Figura 15. Familias Playfair Display (Variable) y Playfair Display SC (con 6 estilos) dise\u00f1adas por Claus Eggers S\u00f8rensen<br \/> Fuente: <a href=\"https:\/\/fonts.google.com\/?query=playfair\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/fonts.google.com\/?query=playfair<\/a><\/p><\/div>\n<p>Es interesante tener en cuenta las<strong> tipograf\u00edas variables OpenType<\/strong>, como la Playfair Display de la figura anterior. Estos archivos de fuentes fueron desarrollados conjuntamente por cuatro de las compa\u00f1\u00edas de tecnolog\u00eda m\u00e1s influyentes (Google, Apple, Microsoft y Adobe) y fueron presentadas en 2016 por Typekit en uno de los eventos tipogr\u00e1ficos m\u00e1s importantes del mundo: ATypl. Estas tipograf\u00edas variables tienen la atractiva peculiaridad de que son capaces de comportarse como m\u00faltiples fuentes, pero en un solo archivo OpenType. Pueden contener el conjunto completo de glifos de una fuente, o glifos individuales con hasta 64,000 ejes de variaci\u00f3n, incluyendo grosor, ancho, inclinaci\u00f3n y, en algunos casos, estilos espec\u00edficos, como condensado, negrita, etc. Son una progresi\u00f3n natural en el campo de la tipograf\u00eda y reflejan cada vez m\u00e1s los desarrollos en el dise\u00f1o web responsive. Los dise\u00f1adores exigen m\u00e1s conveniencia e interactividad de sus herramientas de dise\u00f1o, y las fuentes que se pueden ajustar con un control deslizante satisfacen esta demanda. M\u00e1s informaci\u00f3n en este enlace: <a href=\"https:\/\/web.dev\/variable-fonts\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/web.dev\/variable-fonts\/<\/a>.<\/p>\n<p>&nbsp;<br \/>\n<iframe loading=\"lazy\" id=\"kaltura_player_1629375015\" src=\"https:\/\/cdnapisec.kaltura.com\/p\/2453002\/sp\/245300200\/embedIframeJs\/uiconf_id\/43468991\/partner_id\/2453002?iframeembed=true&amp;playerId=kaltura_player_1629375015&amp;entry_id=1_jko3bk4o\" width=\"560\" height=\"395\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\n<span style=\"font-size: 13px\"><br \/>\nFigura 16. Ejes variables de la Playfair Display dise\u00f1ada por Claus Eggers S\u00f8rensen <br \/> Fuente: <a href=\"https:\/\/fonts.google.com\/specimen\/Playfair+Display?query=playfair\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/fonts.google.com\/specimen\/Playfair+Display?query=playfair<\/a><\/span><br \/>\n&nbsp;<\/p>\n<p>Hablamos de <strong>fuente<\/strong> (del franc\u00e9s <em>fonte<\/em>, de \u2018fundir\u2019) cuando nos referimos a cada variante dise\u00f1ada dentro de una misma familia de tipos. Por ejemplo, la FF Meta Bold Italic (negrita y cursiva) es una fuente de la familia FF Meta.<\/p>\n<div id=\"attachment_791\" style=\"width: 850px\" class=\"wp-caption alignleft\"><img aria-describedby=\"caption-attachment-791\" loading=\"lazy\" class=\"img-responsive wp-image-791 size-full\" src=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.05-handgloves.jpg\" alt=\"\" width=\"840\" height=\"419\" srcset=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.05-handgloves.jpg 840w, http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.05-handgloves-300x150.jpg 300w, http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.05-handgloves-768x383.jpg 768w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-791\" class=\"wp-caption-text\">Figura 17. Fuentes de la familia FF Meta dise\u00f1ada por Erik Spiekermann, Oded Ezer y Akaki Razmadze en 1991. <br \/>Publicada por FontFont como parte de la FF Meta Super Family<br \/> Fuente: <a href=\"https:\/\/www.fontshop.com\/families\/ff-meta#cover\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.fontshop.com\/families\/ff-meta#cover<\/a><\/p><\/div>\n<p>Algunas familias pueden ser muy amplias y disponer de muchas fuentes, como la FF Meta (figura anterior), mientras que otras pueden tener menos o una sola como la Affair (figura 13). En la composici\u00f3n de textos continuos es conveniente trabajar con familias que tengan, como m\u00ednimo, las cuatro series b\u00e1sicas: redonda, <em>cursiva <\/em>o<em> it\u00e1lica<\/em>, <strong>negrita<\/strong> y <strong><em>negrita cursiva<\/em><\/strong>. Con estos cuatro estilos fundamentales podremos resolver la gran mayor\u00eda de proyectos que se nos presenten. Si la tipograf\u00eda que escogemos no los incluye, tendremos problemas a la hora de destacar alguna parte del texto o jerarquizar el contenido. Para conseguir proyectos con m\u00e1s peso tipogr\u00e1fico, es fundamental seleccionar familias m\u00e1s completas.<\/p>\n<p>Una familia tipogr\u00e1fica puede incluir diferentes series, pesos o estilos atendiendo al ancho del car\u00e1cter (comprimida, regular y ancha), el grueso de sus trazos (extrafina, fina, normal, seminegra, negra, etc.) y su inclinaci\u00f3n (redonda o cursiva). Todos estos atributos pueden presentarse en m\u00faltiples combinaciones y gradaciones.<\/p>\n<div id=\"attachment_816\" style=\"width: 850px\" class=\"wp-caption alignleft\"><img aria-describedby=\"caption-attachment-816\" loading=\"lazy\" class=\"img-responsive wp-image-816 size-full\" src=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.06-helvetica-family.jpg\" alt=\"\" width=\"840\" height=\"470\" srcset=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.06-helvetica-family.jpg 840w, http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.06-helvetica-family-300x168.jpg 300w, http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.06-helvetica-family-768x430.jpg 768w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-816\" class=\"wp-caption-text\">Figura 18. Familia Helvetica Neue<br \/> Fuente: <a href=\"https:\/\/www.linotype.com\/es\/1266\/neue-helvetica-familia.html\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.linotype.com\/es\/1266\/neue-helvetica-familia.html<\/a><\/p><\/div>\n<p>Adem\u00e1s de estas variaciones, puede haber varios dise\u00f1os de una misma letra que se hacen con el objetivo de asignarles una tonalidad espec\u00edfica en funci\u00f3n de si se usar\u00e1n en texto corrido o en titulares. Hablamos de las versiones <em>text<\/em> y <em>display<\/em>, respectivamente. Por regla general, una letra pensada para cuerpos peque\u00f1os probablemente no funcionar\u00e1 bien del todo en cuerpos grandes, y al contrario.<\/p>\n<div id=\"attachment_793\" style=\"width: 650px\" class=\"wp-caption alignleft\"><img aria-describedby=\"caption-attachment-793\" loading=\"lazy\" class=\"img-responsive wp-image-793 size-full\" src=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.07-hub.jpg\" alt=\"\" width=\"640\" height=\"201\" srcset=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.07-hub.jpg 640w, http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.07-hub-300x94.jpg 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><p id=\"caption-attachment-793\" class=\"wp-caption-text\">Figura 19. Familias Chronicle Text y Display dise\u00f1adas por Hoefler&amp;Co<br \/> Fuente: <a href=\"https:\/\/www.typography.com\/search?term=Chronicle\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.typography.com\/search?term=Chronicle<\/a><\/p><\/div>\n<p>Los t\u00e9rminos <em>normal<\/em>, <em>regular<\/em> y <em>roman<\/em> se utilizan para el estilo principal de una familia tipogr\u00e1fica. Existen otras clasificaciones que tiene la particularidad de hacer referencia expl\u00edcita a la funci\u00f3n de la fuente que designan. Por ejemplo, algunas familias contienen fuentes llamadas <em>book<\/em> o <em>poster<\/em>, nombres que no solo especifican el grosor del trazo, sino que adem\u00e1s funcionan como una etiqueta que designa su prop\u00f3sito. La funci\u00f3n de la fuente est\u00e1 muy vinculada, entre otros factores, a su color tipogr\u00e1fico. En las tipograf\u00edas con serifa, las variantes <em>book<\/em> suelen tener un color tipogr\u00e1fico levemente m\u00e1s oscuro que las regulares, para mejorar su desempe\u00f1o en situaciones de lectura extendida y continua, tal como ocurre en las novelas. En cambio, en las de palo seco, la relaci\u00f3n es frecuentemente opuesta: los estilos <em>book<\/em> son m\u00e1s livianos que los regulares.<\/p>\n<div class=\"mceTemp\"><\/div>\n<div id=\"attachment_794\" style=\"width: 850px\" class=\"wp-caption alignleft\"><img aria-describedby=\"caption-attachment-794\" loading=\"lazy\" class=\"img-responsive wp-image-794 size-full\" src=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.08-gentium-book.jpg\" alt=\"\" width=\"840\" height=\"376\" srcset=\"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.08-gentium-book.jpg 840w, http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.08-gentium-book-300x134.jpg 300w, http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/wp-content\/uploads\/sites\/18\/2021\/07\/1.6.1.08-gentium-book-768x344.jpg 768w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><p id=\"caption-attachment-794\" class=\"wp-caption-text\">Figura 20. Familias Gentium Book Basic y Gentium Basic <br \/> Fuente: <a href=\"https:\/\/fonts.google.com\/?query=gentium&amp;preview.size=84\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/fonts.google.com\/?query=gentium&amp;preview.size=84<\/a><\/p><\/div>\n<p>Originariamente, en tiempos de la tipograf\u00eda de plomo, se llamaba <em>fuente<\/em> a cada variante en cada cuerpo diferente que se hab\u00eda fundido. Por ejemplo, era una fuente la Helvetica Light Italic de 8 puntos y otra fuente la Helvetica Light Italic de 10 puntos.<\/p>\n<p>La palabra <strong>estilo<\/strong> es una referencia muy general al conjunto de las caracter\u00edsticas formales de una letra. Es decir, son estilos: redonda, cursiva o it\u00e1lica, negrita, fina, expandida, condensada, etc. En muchos contextos, podemos emplear la palabra <em>estilo<\/em> como sin\u00f3nimo de <em>fuente<\/em>.<\/p>\n<p>Hoy en d\u00eda es frecuente hablar de <em>fuente<\/em> cuando queremos referirnos a una familia, decir <em>estilo<\/em> cuando pensamos en una fuente o pronunciar <em>letra<\/em>, <em>tipo<\/em> o <em>tipograf\u00eda<\/em> cuando en realidad nos referimos a una familia, por ejemplo. Estos casos y otros son bastante habituales en el mundo del dise\u00f1o gr\u00e1fico y deben considerarse errores menores siempre que, por el contexto, sea f\u00e1cil saber a qu\u00e9 nos referimos.<\/p>","protected":false},"excerpt":{"rendered":"<p>1.6. Anatom\u00eda del tipo 1.6.1. Letras, familias, fuentes y estilos La letra es la forma gr\u00e1fica usada para representar un sonido ling\u00fc\u00edstico y el elemento m\u00e1s peque\u00f1o en la formaci\u00f3n de una palabra o un texto. En la maquetaci\u00f3n por ordenador, las letras o caracteres tambi\u00e9n se denominan glifos. Un car\u00e1cter es la unidad textual [&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\/tipo\/es\/wp-json\/wp\/v2\/pages\/90"}],"collection":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/es\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":53,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/es\/wp-json\/wp\/v2\/pages\/90\/revisions"}],"predecessor-version":[{"id":963,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/es\/wp-json\/wp\/v2\/pages\/90\/revisions\/963"}],"wp:attachment":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/tipo\/es\/wp-json\/wp\/v2\/media?parent=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}