walkingdesign.com

November 30, 2009 | Posted in: SP-articles

Cinco Simples Pasos para Mejorar la Tipografía — Parte 4

0 Comments Ì Discussion open

Me ha costado un poco esta última edición de estos "simples pasos" serie de artículos sobre tipografía . Por que no es tan simple y hay un poco más de gris área que en los tres artículos anteriores.

La jerarquía tipográfica, en pocas palabras, es cómo las diversas "faces" , pesos (El weight de un particular font es la delgadez del carácter en relación a su altura ) y tamaños las fuentes estructuran un documento. Algunos de estos dispositivos jerárquicos tienen bien establecidas convenciones, tales como títulos principales (encabezados o headlines ) y folios, así que no voy a tocar esos en este articulo. Para mantenerlo simple voy a concentrarme en dos cosas - tamaño y peso. El primero de ellos es el tamaño.

Primero de un pedacito de la historia

Los primeros tipógrafos crearon sus manuscritos usando una fuente, un tamaño, un color sobre todo, entremezclado con iluminaciones pintadas a mano. Los resultados de tales tipógrafos tienen una calidad plana en la información, casi mesmeriana.

Observe algunos manuscritos y las tipografías de ellos, especialmente el antiguo estilo de letra negra, aparecen similares — m’s se parecen a u’s, y’s se parecen a p’s y así sucesivamente. Hermosos son estos manuscritos, con excepción de las iluminaciones, ellos fueron desprovistos de la estructura dentro del contenido. No hay una jerarquía tipográfica.

Evolución de la Escala

En el 1600, los tipógrafos europeos desarrollaron una serie de tamaños de la typefaces, a escala (la analogía musical es una buena elección — estén conmigo). Como muestro en el diagrama hay tamaños que todos conocemos . desde los Seis puntos hasta los setenta y dos puntos de type (carácter) han permanecido intacto por mas de cuatrocientos anos. De hecho son opciones de tamaños de font en múltiples aplicaciones (give or take a few - mas o menos).

¿Entonces que es tan especial acerca de estos tamaños? Porque esta escala de tamaños se ha utilizado por siglos, y si lo colocas los "types" en forma correcta, de acuerdo a la escala podrían ser más agradable a la vista y de ahí es que es mas legible.

Un punto interesante. Originalmente los tamaños en la escala estaban referidos por nombre en vez de por tamaño. He aquí algunos ejemplos de algunos de los más antiguos nombres:

6pt: non pareil, 7pt: minion, 8pt: brevier or small text, 9pt: bour geois or galliard, 10pt: long primer or garamond, 11pt: small pica or philosophy, 12pt: pica, 14pt: english or augustin, 18pt: great primer, 21pt: double small pica or double pica, 24pt: double pica or two-line pica, 36pt: double great primer or 2-line great primer.

Nuevos software, y modernos métodos de ajuste de "tipos", han permitido que la altura del carácter caigan afuera de, y dentro de esta escala. Esta libertad ha permitido una elección tipográfica libre para todos, permitiendo que los diseñadores escojan los tamaños y que no se pueden relacionar unos con otros como seria con la escala. ¿Es esto una mala cosa? Fundamentare esta idea.

Volvamos a la analogía de la música. Es como componer un pedazo de música discordante. Notas de coincidencia, "types" de coincidencia. pero, si está coincidiendo está después de, eso está muy bien. Si, por otra parte, después de la harmonía y la melodía se le coloca los pelos de punta en la parte posterior de su cuello, entonces apeguese a las notas de la escala.

Uso de la Escala

Pongamos algo de esto en práctica. Voy a utilizar esta misma Web site como un ejemplo..

Comencé diseñando esta web site con algo bien especifico en mente - tipografía. Yo quería estar seguro de que este sitio trabajaría con una jerarquía de tipografía simple, clara colocada contra una simple modular rejilla , la grid, con un amplio espacio en blanco sobre el cual pueda colocar un numero de elementos de diseño (en mi portafolio por ejemplo).

Siguiendo la escala topográfica descrita en la sección anterior, Use CSS para setear el diseño pre establecido.

Estos son los elementos para la jerarquía tipográfica. Nota, estoy utilizando pixeles como mi base de medida, no puntos. Y sí se que el pixel son diferentes en las diferentes plataformas.

He aquí acerca de los tamaños de las letras en CSS si usted quiere seguir la verdadera tradición tipográfica, usted tiene que especificar los "types" en "em" o porcentajes basados en una unidad absoluta de medida, en este caso pixel. Si usted utiliza una unidad relativa — small, x-small etc. —- no habrá suficientes declaraciones para homologar la escala y el tamaño de cada incremento es fijo en 1.5 hacia arriba de la escala o 0.66% hacia abajo. (esto depende al parecer y también fue cambiado en algún momento entre 1.0 y 1.2 en CSS2.) Pero de todos modos, no quiero fijar mi atención en el mejor acercamiento del CSS. Este artículo es acerca de tipografía.

Estos son los tamaños del pixel para mis títulos principales:

• 11px /16.5px — Body copy and leading.
• 24px — Main heading used as section headings on the Homepage, Portfolio homepage and entries.
• 18px — Headings for journal entries and portfolio subheadings.
• 16px — All navigational and content tertiary headings.
• 13px — All other headed elements.

Esto me daría visualmente los siguientes estilos:

Esto se traduce en el siguiente camino dentro de CSS, usando porcentajes por propósitos de escala.

• 11px /1.5em — Body copy and leading.
• 218% — Main heading used as section headings on the Homepage, Portfolio homepage and entries.
• 164% — Headings for journal entries and portfolio subheadings.
• 145% — All navigational and content tertiary headings.
• 118% — All other headed elements.

Entonces, mi archivo de CSS, se vería como esto:

• body { font: 11px/1.5em "Lucida Grande"; }
• h1, h2, h3, h4, h5, h6 { font-family: helvetica, arial, verdana, sans-serif; font-weight: normal; }
• h1 { font-size: 218%; }
• h2 { font-size: 164%; }
• h3 { font-size: 145%; }
• h4 { font-size: 118%; }

Usando estos valores de l tamaño para los encabezados crea una relación natural entre ellos. La tipografía es armoniosa como resultado y solo tomo como cinco minutos de implementar. No es tanto tiempo.

El tamaño importa realmente

Es importante, si usted deja afuera cualquier cosa de esta serie de artículos, por favor deje este. detengase y piense cinco minutos acerca de los tamaños de sus "types". Planifique entonces, no escoja cualquier cosa que sienta al desplegar el munu de tipografía en Photoshop. Este seguro que es de acuerdo con el diseño y entonces aplique la teoría a cualquier medio que estés diseñando.

Nota del Traductor, Me:

He incluido en esta traducción algunos interesantes links que pueden ser de ayuda.

• 15 ecxellent examples of Web typography - English Only, 2007 -

• 15 tips to choose a good text type- English Only, 2006 -

• Five Simple Steps to better typography - English Only, 2005 -

• Typographic design. Pattern and best practices - English Only, 2009 -

• 8 simple way to improve typography - English Only, 2009

• Real Fonts on the Web: An Interview with The Font Bureau’s David Berlow - English Only, 2009