{"id":476,"date":"2009-10-31T14:09:03","date_gmt":"2009-10-31T16:09:03","guid":{"rendered":"http:\/\/bigital.com\/castellano\/?p=476"},"modified":"2009-10-31T14:27:21","modified_gmt":"2009-10-31T16:27:21","slug":"diseno-tipografico-en-la-web","status":"publish","type":"post","link":"https:\/\/bigital.com\/castellano\/2009\/10\/diseno-tipografico-en-la-web\/","title":{"rendered":"Dise\u00f1o tipogr\u00e1fico en la web"},"content":{"rendered":"

Me interes\u00f3 much\u00edsimo esta conferencia \u2013a la que llegu\u00e9 a trav\u00e9s del Newsletter de Sitepoint<\/a>– porque sintetiza los conceptos que utilizamos para pensar el layout de los websites desde que empezamos a armarlos all\u00e1 por 1996. En aquel momento era complicado lograr una estructura de grilla, se trabajaba el contenido usando tablas y nunca el resultado se ve\u00eda igual en todos los navegadores.<\/p>\n

Mark Boulton<\/a>, en la conferencia australiana Web Directions South 09<\/a>, hizo una presentaci\u00f3n sobre estrucutura tipogr\u00e1fica en la web. \u00c9l se define como un dise\u00f1ador tipogr\u00e1fico y aclara que esto significa que dise\u00f1a con tipograf\u00eda, que es mucho m\u00e1s amplio que elegir una familia: abarca todos los elementos del dise\u00f1o tipogr\u00e1fico, desde grillas y jerarqu\u00edas, a composici\u00f3n.<\/p>\n

No di\u00f3 una presentaci\u00f3n con trucos y consejos, o sobre font embedding, sino acerca de dise\u00f1o tipogr\u00e1fico y los aspectos relacionados que le resultan importantes.<\/p>\n

Boulton entiende la estructura tipogr\u00e1fica desde nueve elementos, a los que divide en tres areas: funci\u00f3n (lenguaje, composici\u00f3n y ritmo), forma (grilla, familia tipogr\u00e1fica y jerarqu\u00eda) y atributos (puesta en p\u00e1gina, color y contenido)
\nTodos ellos contribuyen a crear una estructura tipogr\u00e1fica firme, inclusive sacando un par de ellos, se sigue sosteniendo. Es por eso que la elecci\u00f3n de la familia tipogr\u00e1fica no es la \u00fanica a la hora de definir un buen dise\u00f1o para un website.<\/p>\n

\"boulton\"<\/a><\/p>\n

Define estos nueve elementos de la siguiente manera:<\/p>\n

Puesta en p\u00e1gina:<\/strong> es la combinaci\u00f3n de tipograf\u00eda con otros elementos gr\u00e1ficos tales como fotos, ilustraciones, videos u otros elementos de la interfaz.<\/p>\n

Color: <\/strong>en t\u00e9rminos tipogr\u00e1ficos, puede significar el valor crom\u00e1tico o el valor de luminosidad de un texto. Cuando se habla de color tipogr\u00e1fico denso se refiere a un texto con poca interl\u00ednea e interletrado apretado; y lo contrario ser\u00eda un texto liviano.<\/p>\n

Contenido:<\/strong> muchas veces tenemos que dise\u00f1ar sitios para los cuales no est\u00e1 definido el contenido, a veces tenemos una idea de lo que podr\u00eda ser pero como los datos son l\u00edquidos es dif\u00edcil de definir. Como el contenido es una parte importante del dise\u00f1o tipogr\u00e1fico dise\u00f1amos sin \u00e9l (pero definiendo tipolog\u00edas de lo que podr\u00eda aparecer seg\u00fan cada caso.)<\/p>\n

Jerarqu\u00eda:<\/strong> habla de los niveles de importancia conceptual del contenido, y tipogr\u00e1ficamente se refiere a la visualizaci\u00f3n de la misma.<\/p>\n

Fuente tipogr\u00e1fica:<\/strong> es la familia utilizada para mostrar el contenido.<\/p>\n

Grilla: <\/strong>la grilla tipogr\u00e1fica es la base en la que se construye una puesta en p\u00e1gina.<\/p>\n

Lenguaje:<\/strong> est\u00e1 a la par de la tipograf\u00eda. La \u00faltima puede definirse como el display y el arreglo del lenguaje.<\/p>\n

Composici\u00f3n tipogr\u00e1fica:<\/strong> el proceso de tomar un texto en bruto y marcarlo, darle atribuciones tales como encabezado, listas, enfatizado, etc.<\/p>\n

Ritmo:<\/strong> se refiere a c\u00f3mo la disposici\u00f3n y la puesta en p\u00e1gina ayudan al acto de leer.<\/p>\n

Como se puede observar, la familia tipogr\u00e1fica es una de 9 partes, no la m\u00e1s importante como a menudo suelen esgrimir algunos dise\u00f1adores, sobre todo cuando afirman que poder incrustar las fuentes en los documentos para la web (font-embedding) va a cambiar significativamente la manera en que van a lucir los websites. No quiero decir con esto que no es un paso importante o significativo, sino justamente enfatizar que el equilibrio de todas las partes es lo que hace que una pieza luzca diferente m\u00e1s que una infinita posibilidad de elecci\u00f3n tipogr\u00e1fica. Y justamente no deber\u00eda ser una excusa para tener un dise\u00f1o pobre.<\/p>\n","protected":false},"excerpt":{"rendered":"

Una excelente charla del dise\u00f1ador tipogr\u00e1fico Mark Boulton, que explica los nueve elementos que hay que tener en cuenta al pensar el dise\u00f1o de un website. →<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[2181,47,26,46],"class_list":["post-476","post","type-post","status-publish","format-standard","hentry","category-general","tag-diseno","tag-internet","tag-tipografia","tag-web"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bigital.com\/castellano\/wp-json\/wp\/v2\/posts\/476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bigital.com\/castellano\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bigital.com\/castellano\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bigital.com\/castellano\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bigital.com\/castellano\/wp-json\/wp\/v2\/comments?post=476"}],"version-history":[{"count":8,"href":"https:\/\/bigital.com\/castellano\/wp-json\/wp\/v2\/posts\/476\/revisions"}],"predecessor-version":[{"id":482,"href":"https:\/\/bigital.com\/castellano\/wp-json\/wp\/v2\/posts\/476\/revisions\/482"}],"wp:attachment":[{"href":"https:\/\/bigital.com\/castellano\/wp-json\/wp\/v2\/media?parent=476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bigital.com\/castellano\/wp-json\/wp\/v2\/categories?post=476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bigital.com\/castellano\/wp-json\/wp\/v2\/tags?post=476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}