miércoles, 27 de abril de 2011

Glosario sobre tipográfía (#05)


Continuamos con este glosario básico de términos sobre tipografía:


*


Versalita

Inglés: 
 Small capital, Small cap
Francés: 
 Petite capitale
Alemán: 
 Kapitälchen
Italiano: 
 Maiuscoletto
Catalán: 
 Versaleta
En una familia o fuente tipográfica, la variante formada por el conjunto de pequeñas letras mayúsculas ligeramente mayores que la altura de la eme de esa fuente. El singular es "versalita" (una versalita, varias versalitas).
Un texto con versalitas verdaderas y falsas.
Es una variante al mismo nivel que las cursivas, negritas y similares, por lo que no tiene subvariantes (es decir: No hay versalita cursiva, por ejemplo). La verdadera versalita no es simplemente una mayúscula reducida (como hacen muchos programas informáticos), sino que es una variante diseñada al efecto.
Un texto con versalitas verdaderas y falsas.
La diferencia entre una verdadera versalita y las pseudoversalitas o falsas versalitas que hacen muchos programas es que su trazo de los tipos está descompensado respecto al de la fuente a la que acompañan (por ser una simple reducción).
Sólo se encuentran en fuentes con un acabado profesional, ideadas para masas de textos razonablemente grandes (no las hay en fuentes de fantasía) y no suele fabricarse para fuentes de palo seco.
Aparte de las libertades creativas que puedan hacerse, se suele usar para especificar fechas en números romanos dentro de textos, para abreviaturas o siglas (como A.D. para anno Domini o D.C. para Distrito Federal) y palabras que se quiere destacar de alguna forma dentro de esos textos sin tener que usar la negrita).
*

Altura de la x

Inglés: 
 X-height
Francés: 
 Hauteur d’x
Alemán: 
 Mittellänge, x-Höhe
Italiano: 
 Altezza della x
Portugués: 
 Altura-x
En tipografía, aquella parte de las letras en caja baja (minúsculas) que coincide en altura con la parte superior de la letra equis (x).
La altura de la equis, la línea base y los ascendentes y descententes.
A veces se llama también "altura de la eme", por ser el mismo valor.
*

Legibilidad

Inglés: 
 Legibility, Readability
Francés: 
 Lisibilité
Italiano: 
 Leggibilità
Catalán: 
 Llegibilitat
Portugués: 
 Legibilidade
En tipografía y diseño gráfico, la cualidad que tiene un texto de leerse con facilidad. A mayor legibilidad, mayor facilidad para un observador de percibir el texto como tal texto y de captar el mensaje escrito.
Esta concepción de legibilidad no implica compresión del mensaje. No es una legibilidad cognitiva, sino perceptual: Tipográficamente el texto es legible no porque sea entretenido o porque esté escrito conforme a las reglas sintácticas adecuadas, sino porque se ha compuesto y distribuido de forma que su percepción es cómoda, sencilla y exige poco esfuerzo.
De este modo, podemos juzgar la legibilidad de un texto falso como Lorem ipsum... No hace falta entender lo que pone, sino juzgar si lo que pone es fácilmente perceptible.
Obviamente, después de esta legibilidad perceptual viene la legibilidad cognitiva: O sea, que para que nos entiendan no sólo hace falta escribir con buena letra, sino además poner cosas coherentes.
*

Bandera a la izquierda

Inglés: 
 Flush left, Ragged right
Francés: 
 Fer à gauche, Appuyée à gauche,
Italiano: 
 Bandiera sinistra, Bandiera a sinistra
En tipografía, componer los textos alineando por igual a la izquierda y dejando con distancias desiguales (sin unificar) por la derecha. El nombre viene de la sensación que da el texto de ser una bandera con el mástil a la izquierda y ondeando "por la salida" del texto.
Un texto en bandera de salida o a la izquierda.
Es el tipo de composición más usual en los textos con alfabetos occidentales por ser la composición tipográfica más fácil.
También se llama "bandera de salida".
*

Calderón

Inglés: 
 Pilcrow
Francés: 
 Pied de mouche
Alemán: 
 Absatzzeichen
Italiano: 
 Piede di mosca
Símbolo tipográfico e informático que indica el final de un párrafo. También se llama a veces "salto de carro", "vuelta de carro", "retorno de carro" o "final de párrafo".
El símbolo del calderón en una fuente de palo seco.
Es un signo casi en desuso, que antes de la aparición de los párrafos tipográficamente separados por estar en líneas distintas, servía para marcar el comienzo de una nueva idea o argumentación.
Por eso, cuando se usa, se suele situar al final de un párrafo (haya o no cambio de línea) para remarcar ese final. Con todo, a veces se puede encontrar usado al comienzo de párrafo para marcar éste en lugar de la sangría habitual, pero eso es bastante raro.
En los ordenadores aparece como símbolo del caracter "retorno de carro" (o sea: final de párrafo) cuando se escoge la opción de mostrar caracteres invisibles.
*


(Los textos son una recopilación de tratados, cursos y conocimientos tratados en la red)

lunes, 25 de abril de 2011

Hojas de diseño #11

GUÍA SOBRE TIPOGRAFÍA PARA WEB


El tema de las tipografías da mucho que hablar. Incluso podemos diferenciar entre fuentes específicas para diseño gráfico y para diseño web. La web amplía la teoría sobre este tema, ya que lo que funciona en el papel no lo hace en una pantalla de ordenador. La siguiente lección reflexiona sobre esta realidad.


La tipografía en la web 


¿Que tipo de fuentes son más legibles, "serif" o el "sans-serif"?, ¿qué ancho de línea debería utilizar para facilitar la lectura a los usuarios de mi web?, ¿alineo el texto, lo justifico...?.

Bueno en este apartado vamos a intentar ayudaros a solucinar estas dudas.

Formato "serif" y "sans-serif"
Los formatos de fuente "serif" son aquellos que las letras tienen unos pequeños remates en los extremos, por ejemplo:

Times New Roman es un tipo de letra "serif"
Las fuentes "sans-serif" son aquellas sin esos pequeños remates en los extremos, por ejemplo:

Arial es un tipo de letra "sans-serif"
Varios estudios han demostrado que sobre papel impreso las fuentes "serif" son más legibles, ya que esos pequeños remates en los extremos dan más información sobre los caracteres y facilitan la lectura.

Sin embargo en los monitores, por su menor resolución en comparación con el papel, los pequeños remates aparecen menos definidos y lo que hacen es dificultar la lectura, por lo tanto, en la web es más recomendable utilizar fuentes "sans-serif". 

El Ancho de línea
Cuanto menor es la longitud de línea, mayor es la velocidad de lectura (esta es la razón de que los periódicos presentan su información en columnas).

Una mayor longitud de línea requiere de un salto de mayor longitud de un punto de fijación ocular al siguiente. A mayor longitud del salto, más inexactitud en la siguiente fijación y por tanto mayor será la dificultad de lectura.

Aunque no existe una recomendación única en cuanto a la longitud máxima de línea se suele hablar máximo correcto entre los 60-70 caracteres.
Además, en líneas muy cortas es importante la distribución de las unidades de significado, como se puede ver en este ejemplo tomado de Jarret, C. (vía Nielsen, J. 2000):

Más fácil de leer Más dificil de leer
Si tienes que usar
longitudes de línea
muy cortas,
entonces es adecuado
que cada línea
contenga una unidad
de significado.
 Si tienes que
usar longitudes de
línea muy cortas,
entonces es
adecuado que cada
línea contenga una
unidad de significado.

Ajuste del espacio entre letras (kerning)
El espacio entre las letras de una misma palabra (kerning) no debería ser siempre fijo. Cuando este espacio se ajusta correctamente, los textos son más legibles y el aspecto estético es mucho mejor. El "kerning" es lo que da ese aspecto tan profesional a los libros impresos. Sin embargo, en los navegadores es imposible de regular (incluso en algunos programas de edición tampoco), ya que no ofrecen esta posibilidad. Ahora bien, es un aspecto que podeis tener en cuenta a la hora de trabajar vuestros imágenes de titulos de sección o textos incluidos en una imágen.

Ej: El ajuste varía según las combinaciones de letras que van juntas, por ejemplo en la silaba "To" la "o" debe entrar unos pocos píxels debajo de la "T" como se puede ver en la imagen 1.

-Imagen 1-

Fuentes proporcionales y no proporcionales

No debemos confundir el kerning con el ajuste del espacio que ocupa cada letra.

E xisten dos tipos de fuente: las proporcionales y las no proporcionales (monospaced). En las proporcionales este espacio depende del caracter, por ejemplo una "i" ocupa menos espacio que una "M". En las fuentes no proporcionales todos los caracteres ocupan el mismo espacio. Por ejemplo:



Arial es una fuente proporcional

Courier New es una fuente no proporcional

La mayoría de los medios escritos: periódicos, libros y websites usan fuentes proporcionales.

Las no proporcionales (monospaced) son adecuadas para el mostrar muchos datos ya que ofrecen lecturas mas claras en listas de datos, tablas, calendarios, etc... También son más adecuadas para la entrada de datos en las cajas de texto de formularios porque es mas fácil ver los errores por la mayor separación entre letras.

El espacio en blanco entre varias letras, aparte de escogiendo el tipo de fuente puede controlarse mediante la utilización de hojas de estilo.

Color y contraste con el fondo
La combinación más adecuada para el 90% de los casos es texto negro sobre fondo blanco. En todo caso, si decides utilizar color en el fondo, es consejable utilizar colores suaves y claros y siempre un color de texto oscuro, por supuesto, las cabeceras de un sitio web son una excepción.

Alineación del texto
Para los textos largos se recomienda alineación a la izquierda puesto aunque es posible la justificación mediante hojas de estilo, pueden existir casos en los que no funcione correctamente.

El problema es que al justificar un texto se modifica el espacio entre palabras y/o caracteres, lo que hace los textos menos legibles y provoca que algunas palabras con mayor espacio entre sus caracteres sean involuntariamente enfatizadas, además, al contrario que en el papel impreso, puede suceder que la longitud de línea no sea fija (si hemos maquetado nuestra web utilizándo tablas en porcentaje osi no definimos el tamaño de texto en la hoja de estilos)a diferentes resoluciones o diferentes tamaños de visualización del texto, no es posible saber la longitud de línea que verá el usuario y por tanto la justificación no funcionará bien.


Negritas
Las negritas ("bold") deben utilizarse solo para enfatizar algunas palabras, resaltar puntos clave dentro de la información o resaltar alguna frase de gran importancia. Si son utilizadas correctamente ayudan a ojear rápidamente el texto y facilitan la rápida comprensión de la información.

Las negritas llaman poderosamente la atención dentro de un texto e incluso distraen seriamente, por ello nunca se debe abusar de ellas o emplearlas de modo puramente decorativo. En algunas webs por ejemplo se suele escribir en negrita el nombre de la empresa siempre que aparece, lo que no aporta absolutamente nada.

Tamaños de la fuente.
Un tamaño de entre 10 y 13 puntos suele ser el más adecuado para la mayoría de textos en la web, a excepción de titulos y nombre de apartado, en los que perfectamente puede utilizarse un tamaño superior..
Uso de mayúsculas.
Las mayúsculas son mucho más difíciles de leer que las minúsculas por ello no son recomendadas para textos largos sino para palabras sueltas. Su capacidad de resaltar dentro de un texto le hacen un recurso muy valioso para captar atención sobre un elemento de información.
Otras apreciaciones
  • Un documento no debería utilizar más de dos fuentes diferentes.
  • Las cursivas son muy poco legibles y son poco recomendables, solo deberian utilizarse para unas pocas palabras y en caso necesario con fuentes de tamaño suficientemente grande.
  • El subrayado es un recurso que en papel impreso se utiliza para enfatizar, sin embargo en la   web no se debe emplear con este objetivo ya que da lugar a confusión con los vínculos.
  • Las viñetas (bullets) y sangrías (indent) son recursos útiles para estructurar la información, separar conceptos, subordinar unos a otros, crear dependencias, etc. Bien utilizadas mejoran la  comprensión y facilitan la lectura de un texto.

(Los textos son una recopilación de tratados, cursos y conocimientos tratados en la  red)

sábado, 16 de abril de 2011

Hojas de diseño #10

CÓMO ESCOGER TIPOGRAFÍAS PARA COMBINAR


Es frecuente la utilización de dos o más fuentes tipográficas en un mismo trabajo. La labor de escoger tipografías diferentes, pero complementarias, tampoco resulta tarea fácil. La siguiente entrada ofrece asesoramiento sobre este tema particular.




Aquí les transcribo una serie de normas que enumera Rob Carter en su libro “Diseñando con tipografía 4”. Tómalas como una base para generar diseños correctos, siempre y cuando tu intención sea priorizar la legibilidad por sobre el diseño. Si por el contrario, la pieza que vayas a realizar te permite romper con las normas, y trabajar por igual la forma, la expresión y la legibilidad, apegarte a las normas podría llegar a ser un error. Aprovecha este tipo de trabajos para experimentar con la tipografía y hacer lo que hasta ahora no te animaste a probar, jugando con los límites de la legibilidad.


Norma 1:
Para una legibilidad óptima, elija fuentes clásicas y habituales ya probadas.
Normalmente los buenos tipógrafos pueden contar sus fuentes con los dedos de la mano. Con más frecuencia, son estas fuentes las que poseen las proporciones más legibles.
Baskerville Bembo
Bodoni Caslon
Centaur Franklin Gothic
Frutiger Futura
Garamond Gill Sans
Goudy Old Style Helvética
News Gothic Palatino
Perpetua Sabon
Times New Roman Univers

Norma 2:
Procure no utilizar demasiadas fuentes diferentes a la vez.
La única justificación para emplear más de una fuente estriba en destacar o diferenciar dos partes de un mismo texto.
Cuando se usan demasiadas fuentes diferentes el lector es incapaz de determinar qué es importante y qué no lo es. El uso de demasiadas fuentes diferentes en una misma página o dentro de un texto distrae la atención. Se obtendrán excelentes resultados combinando dos o tres fuentes diferentes siempre que se les asigne una función determinada a cada una de ellas.

Norma 3:
Evite combinar fuentes que se parezcan demasiado entre sí.
Si combina fuentes para destacar un texto, evite la ambigüedad que se puede originar al combinar tipos que se parezcan demasiado. Contravenir esta norma habitualmente se considera un error porque no existe contraste suficiente entre los tipos.
Para una correcta elección tipográfica tener en cuenta que dará mejores resultados si le se eligen caracteres con rasgos diferentes (ej.: una tipografía romana antigua con una palo seco).
Combinar una Helvética con una Univers o una Caslon con una Goudy Old Style no tiene sentido porque se parecen demasiado.

Norma 4:
Un texto en mayúsculas entorpece la lectura.
Utilice letras en caja alta y baja (mayúsculas y minúsculas) para optimizar la legibilidad.
Las letras en caja baja poseen las prolongaciones que necesita el ojo para leer mejor el texto, porque muestran las astas o trazos ascendentes y descendentes y las características propias de las letras con mayor claridad. Usar caja alta y baja es el método normativo para presentar el texto y a lo que los lectores están muy familiarizados. Sin embargo, las letras en caja alta pese a que crean formas rectangulares monótonas, pueden utilizarse con éxito para destacar el tipo.
Un texto que presente todas sus letras en caja alta carece de variedad rítmica y es por tanto más difícil de leer. Un texto que posee todas sus letras en caja baja resulta más difícil de leer por el contraste de las formas.
El método más común de presentar el texto consiste en combinar la caja alta con la caja baja. Las mayúsculas marcan claramente el inicio de las frases.


Norma 5:
Para los bloques de texto utilice aquellos cuerpos que, según se ha demostrado, facilitan la lectura.
Dichos cuerpos oscilan entre los 8 y 12 puntos (con todos los cuerpos intermedios) para un texto que se lea a una distancia media de entre 30 y 35 cms. aproximadamente.
Sin embargo es importante saber que las fuentes del mismo cuerpo pueden parecer diferentes en función de la altura de X de las letras. Si comparamos un texto escrito en Bodoni, otro en Helvética y otro en Frutiger, (todos en cuerpo 8) serán aparentemente desiguales (es decir escritos en distintos cuerpos).

Norma 6:
Evite emplear demasiados cuerpos y grosores a la vez.
Utilice sólo los cuerpos y grosores necesarios para establecer una clara jerarquía entre las partes de la información. Josef Müller-Brockmann recomendaba no usar más de dos cuerpos, uno para destacar títulos y otro para el texto. Limitando el número de cuerpos utilizados conseguirá páginas más funcionales y bellas. Puede emplearse el mismo cuerpo y grosor para los títulos y para el texto, siempre que ambos elementos estén separados por un espacio.
Utilizar dos cuerpos y grosores para los títulos y para el texto marca una jerarquía clara pero simple. Es importante que haya mucho contraste. Si el cuerpo o el grosor son muy parecidos, desaparece el contraste y su relación es ambigua.


Norma 7:
Use tipo para texto de grosor adecuado. Evite fuentes demasiado gruesas o demasiado finas.
El grosor de las fuentes viene determinado por el ancho de las astas o trazos de las letras. Las fuentes del texto que son demasiado finas no se pueden distinguir o separar fácilmente del fondo. En las fuentes demasiado gruesas, se reduce demasiado el tamaño de sus ojos (los blancos de las letras se cierran) lo que dificulta su lectura. El grosor del tipo principal debe mantenerse en un término medio, ideal para el texto.
Las fuentes demasiado gruesas dificulta la lectura porque no hay equilibrio entre las astas y los ojales de las letras. Se reservan para destacar un título o un fragmento concreto.

Norma 8:
Utilice fuentes de anchura media. Evite las fuentes demasiado anchas o demasiado estrechas.
Distorsionar el texto para ampliar o estrechar las letras dificulta la lectura ya que no estamos familiarizados con las proporciones de las letras así modificadas. Las familias tipográficas bien diseñadas incluyen estilos condensados y expandidos que responden a las normas aceptadas sobre las proporciones.
Si bien en todos los casos las opciones condensadas y expandidas fueron creadas y añadidas cuidadosamente a las distintas familias, cuesta leer un fragmento largo en estas variables.


Norma 9:
Utilice un interletrado y un espaciado entre palabras coherente, para dar solución de continuidad.
Las letras deben fluir con libertad y naturalidad en las palabras y, a su vez, las palabras en las líneas. Para ello deberá aumentar el espacio entre palabras si el interletrado aumenta.
Las letras odian estar apretujadas pero también les gusta no perder de vista a sus compañeras.
Otra consideración a tener en cuenta es que las fuentes más finas mejoran su aspecto si se aumenta el interletrado, mientras que lo contrario es propio de estilos en negrita.

Norma 10:
Use líneas de longitud adecuada. Las líneas demasiado cortas o demasiado largas interrumpen la lectura.
Cuando las líneas de texto son muy largas o muy cortas, la lectura se hace aburrida. Cuando el ojo se desplaza a lo largo de líneas interminables, llegar a la línea siguiente resulta bastante difícil. Leer líneas cortas produce en el ojo un movimiento intermitente que cansa y aburre al lector. Utilice un máximo de 70 caracteres por línea (diez a doce palabras). Al aumentar el cuerpo, disminuye el número de caracteres por línea.


Norma 11:
Use interlineados que lleven al ojo con facilidad de una línea a la siguiente.
Las líneas separadas por muy poco espacio ralentizan la lectura y fuerzan al ojo a captar muchas de ellas a la vez. Si se añade de uno a cuatro puntos de espacio entre las líneas -dependiendo de la naturaleza específica de la fuente- se mejorará la lectura.
Aunque se utilice en dos bloques de texto el mismo cuerpo y la misma interlínea variando solo la familia tipográfica con diferentes cajas de X, puede llegar a parecer que tengan un mayor o menor interlineado.
Las líneas de texto con mayor altura de X se deberán espaciar adecuadamente para compensar su aspecto más voluminoso.

Norma 12:
La mejor legibilidad se consigue con una alineación a la izquierda o desflecado a la derecha.
Aunque en situaciones especiales se aceptan otro tipo de alineaciones, si se combinan siempre se pierde calidad en la lectura.


Norma 13:
Procure obtener finales de línea coherentes y rítmicos.
Evite el desflecado que genere formas extrañas e inadecuadas al final de las líneas y desflecados que muestre una repetición y pautas predecibles en los finales de línea.
El aspecto de los textos desflecados es deficiente si los finales de línea no son suficientemente diferentes entre sí, si aparecen formas extrañas o contornos y si las líneas cortas y largas se parecen tanto que crean una pauta repetitiva y predecible

Norma 14:
Indique los párrafos con claridad, pero procure no alterar la integridad y la coherencia visual del texto.
Las dos maneras más comunes de marcar párrafos son los sangrados y la inserción de un espacio adicional entre ellos aunque no es necesario sangrar el primer párrafo de una columna de texto.


Norma 15:
Evite viudas y huérfanas siempre que pueda.
Una viuda es una línea corta, palabra o sílaba que corresponde al final de un párrafo y que aparece suelta al inicio de una nueva página o columna.
Una huérfana es una línea inicial de párrafo que queda al final de una página o columna. Evítelas siempre que puedan porque rompen la continuidad de los bloques de texto, crean páginas irregulares e interfieren en la concentración de la lectura

Norma 16:
Destaque discretamente elementos del texto sin alterar la fluidez de la lectura.
Realice intervenciones mínimas para obtener los máximos resultados. Destacar elementos del texto sirve sobre todo para aclarar el contenido y diferenciar partes de información.
Diferentes métodos para destacar unidades de texto: uso de cursiva, subrayado, color, diferentes fuentes, versalitas, mayúsculas, negrita y normal, cuerpo mayor, contorno.
Si bien ninguna de estas posibilidades perjudica al texto, algunas de ellas destacan más que otras.


Norma 17:
Mantenga siempre la integridad del tipo. Evite cambiar el set de forma arbitraria.
Las fuentes bien diseñadas ofrecen calidades visuales que las hacen más legible. Las letras se diseñan con atributos proporcionales específicos en mente. Distorsionarlos de manera arbitraria afecta su integridad.
Si desea una versión más extendida o condensada de una determinada fuente, utilice una versión diseñada específicamente para esa familia particular.
Las proporciones perfectas y refinadas quedan totalmente alteradas al utilizar el ordenador para escalar las formas de las letras, generando así proporciones inadecuadas entre las astas más gruesas y las más finas de las letras.

Norma 18:
Alinee las letras y las palabras sobre la línea base.
Las letras están diseñadas para convivir sobre una línea base invisible. Cuando pierden esta orientación, parecen escapar fuera de control y resultan mucho más difíciles de leer.
Como las letras están diseñadas específicamente para estar alineadas una al lado de la otra, cualquier desviación de la norma es cuestionable. Nunca amontone las letras.


Norma 19:
Cuando trabaje con el tipo y el color, asegúrese de que existe suficiente contraste entre tipo y fondo.
Un contraste muy débil en cuanto a matiz, valor o saturación, o una combinación de estos tres factores puede dificultar, o incluso imposibilitar, la lectura.
Un tipo en negro sobre un fondo blanco constituye la combinación de colores más legible y es la que más estamos acostumbrados a leer. Un tipo blanco sobre fondo negro invierte esta relación de color y dificulta la lectura. Si consideramos las relaciones de contraste de color entre el tipo y el fondo, el tipo siempre se ha de poder leer.


(Los textos son una recopilación de tratados, cursos y conocimientos tratados en la red)

jueves, 7 de abril de 2011

Hojas de diseño #09

CÓMO ESCOGER UNA TIPOGRAFÍA


Una de las decisiones más complicadas para rematar un diseño es escoger la fuente más apropiada para esa composición. El tipo de letra debe acompañar al resto de la estética, para reforzar el mensaje que se quiere transmitir. La entrada siguiente facilita el proceso de selección de tipografías.



15 tips al elegir un buen tipo de texto


No es primera vez que me preguntan que tipografía de texto puedo usar para (la tesis, una revista, un libro, un folleto, un afiche, etc.) una publicación. Por lo general, y para evitarme problemas les doy de inmediato la solución. Sé que no está bien, pero puedo salir del apuro.Hoy pretendo detenerme un segundo más y hacer un pequeño análisis de cómo elegir una buena tipografía. Cabe mencionar que nunca hay que ser concluyente con los datos que pretendo tratar, pero si son factores a tomar en cuenta a la hora de selección o descarte de una fuente para textos. De todas maneras esto depende del uso que se le quiera dar a la tipografía, porque muchas veces la legibilidad es tan importante como el carácter de la letra. Hay que tratar de ser lo más observador posible y seguir las siguientes instrucciones:

1. La forma.Anteriormente, en el juego a ser Garamond, revisamos el concepto de ductus. El ductus representa lo más importante de la letra, su esqueleto. Para una buena legibilidad en el tipo de texto, necesitamos tipografías con un ductus carente de complejidades innecesarias, y que sea lo más simple posible, para que el sobrediseño no sea un elemento distractor. Asi fijamos la atención en lo que estamos leyendo, y no en la forma de la letra.

2. El pesoCuando hablamos del peso de la letra hablamos de una coherente relación entre el negro que emite la forma, y la luz que entra entre las letras (blanco de página o contraforma). Muchas veces se suele escribir con tipografías light que generan una página demasiado clara. Claro, suele verse muy cool, pero dependiendo de la extensión del texto, suele cansar muy luego. Imagínense a un estudiante universitario estudiando en el bus de noche mientras viaja a la ciudad donde tiene que dar la prueba. Una tipografía demasiado liviana, con una mala luz. Resultado: media página leída y el resto del viaje durmiendo.

3. El ContrasteEl contraste se refiere básicamente a la diferencia de grosor entre las verticales y las horizontales. Explicado mejor, la diferencia entre los trazos más gruesos con los más delgados. No quiero dar fórmulas como llegar a un equilibrio adecuado; pero un error sería crear un contraste tan marcado, que se produzca el efecto Bodoni. Yo creo que todos alguna vez nos tocó estudiar de las fotocopias, de las fotocopias, de las fotocopias, de las fotocopias de un paper que nos entregaba el profesor. O sea, sólo se leían las verticales. Una buena tipografía debería resistir varias generaciones de copiado, debe ser robusta sin ser grosera.

4. El eje.
Un comentario no atinado y me echo encima cientos de años de historia tipográfica. Muchos conservadores no van a estar de acuerdo conmigo, pero el eje de la tipografía suele ser ligeramente decisivo para una mejor lectura. Cuando presentas tipografías con astas 100% ortogonales, que van marcando el ritmo de una lectura con rectas verticales, no puedes distraerla con curvas que buscan un sentido opuesto. Si hilamos fino, estaríamos trabajando con 2 lenguajes, uno para las curvas, y otro para las rectas. Resultado, el desordenamiento de la frase.


5. Altura x
La altura x mostrará de qué tamaño es el cuerpo legible la letra. Ascendentes y descendentes demasiado largas conseguirán un acortamiento de la línea de cuerpo de texto, que insisto, es donde se concentra la mayor cantidad de la información legible. Es esta diferencia lo que produce por ejemplo que Mrs. Eaves se vea mucho más chica que Times New Roman. En el ejemplo podemos ver caricaturizada este punto.


6. Altura de las mayúsculas
Creo que suele quedar bastante claro con el ejemplo. Antiguamente las mayúsculas se diseñaban del mismo porte de las ascendentes, o en ocasiones más grandes aún. El efecto que provoca una palabra escrita en mayúsculas (como MINEDUC) dentro de la frase suele ser un atentado a la lectura en línea del texto.
Cuando escribo la palabra “Garamond” con Garamond siento, siento como si la “G” fuera un dinosaurio y la “a” fuera su presa.



7. Terminaciones
Cuando ocupamos una tipografía para escribir un texto, muchas veces tenemos que verla en grande, como en avisos publicitarios, etc. Ya que se usa como tipografía corporativa. El simple hecho que esté mal dibujada es más que una buena razón para descartarla. La gran mayoría de las tipografías tienen horribles terminaciones, y eso los diseñadores no lo deberíamos tolerar.



8. Gris de texto, o gris de textura.
Hilando ya un poco a niveles más macro, nos encontramos con este curioso punto. Cuando escribimos un texto, y vemos la textura que produce el bloque (conjunto de letras juntas), esta debe estar homogénea. Si hay letras que resaltan porque están más gruesas que otras, es porque el tipo de texto está mal diseñado. Muchos tipógrafos exageran engrosando las verticales de las mayúsculas con respecto a las de las minúsculas, creando un desagradable efecto en el gris de la textura del texto.



9. Apertura de la contraforma
Muchas tipografías consideradas de texto, pecan de cerrar o abrir demasiado sus contraformas. En el caso de que se cierren demasiado, pueden generar errores de legibilidad como confundir una “c” con una “o”. En el caso de que estén demasiado abiertas (como frutiger), la contraforma interna de la letra se suma a la contraforma externa de la letra, produciendo una cantidad de blanco muy desagradable a la vista.





10. El efecto pescado
En un post anterior hablé sobre el desagradable resultado producido por el efecto pescado. Cuando se el tipógrafo diseña sólo las formas suele caer en este tipo de errores. Un buen tipógrafo de texto, diseña la forma, la contraforma interna y externa, y su ductus. (Mayor información leer el post del efecto pescado).



11. Contraforma externa
Hay detalles que hacen a una tipografía muy legible, y eso es la contraforma externa. No se imaginan cuanto cambia leer una tipografía con el sacadito de arriba de la “n” bien marcado, o la diferencia entre la “rn” y la “m”. Hay tipografías que ni siquiera tienen ese sacadito. Entonces no son de texto, punto.



12. Contraforma interna
Una costumbre muy recurrente de los diseñadores de fuentes es hacer el ojo pequeño de la “a” y “e” demasiado pequeños. Algunos se excusan citando a la historia, otros lo hacen por estética. Lo único claro es que este pequeño ojo tiende a desaparecer, y la contraforma abierta tiende a agrandarse demasiado. Como la “a” y la “e” son las letras más usadas en muchos idiomas, el desagradable efecto se potencia aún más.





13. Comprobar que el set esté completo¿Cuántas veces se han encontrado con este signo, cuando ya tienen todo diseñado?. Debe ser una de las sensaciones más desastrosas que existen, ya que hay que empezar todo de nuevo. Muchos tipógrafos NO diseñan la “ñ”, los acentos, los signos de interrogación, los punto y coma, y los signos de corte de palabra o los números. Es mejor revisar bien la fuente antes de lamentar.



14. La familiaComprobar que la familia sea abundante y que pueda resolver los problemas de diseño que se puedan presentar en un párrafo es lo ideal. Difícilmente se puede diseñar con una tipografía que solo tenga la versión regular. Hoy en día se necesita destacar mediante itálicas, o usar las negritas en los subtítulos o cambios de tema. Otra cosa que suele ser muy importante, es que la itálica sea igual de legible que la regular, y que no esté llena de figuritas rebuscadas.


15. El interletrajeExisten tipografías que sencillamente no se les hizo interletraje, y funcionan muy mal. Un buen diseñador corrige los interletrajes que no le parecen correctos, pero es demasiado tedioso ir corrigiéndolos todos. Hay programas como InDesign que hacen ese trabajo automáticamente, pero nunca queda lo bien que lo hace el mismo diseñador tipográfico.

(Los textos son una recopilación de tratados, cursos y conocimientos tratados en la red)


miércoles, 6 de abril de 2011

Hojas de diseño #08

EL COLOR EN MARKETING


Los profesionales del marketing aprovechan los conocimientos que se tienen sobre la psicología del color para aplicarlos a su propia disciplina. Cada campaña de publicidad tiene objetivos diferentes, y el cumplimiento de esos objetivos puede verse reforzado por el empleo de uno u otro color. Así lo indica la siguiente entrada.

En este capítulo describiremos las sensaciones que producen algunos colores como el rojo, el verde y el azul, así como su posible uso y su significado en una web.

Es bien sabido por los psicólogos la influencia emocional que desencadenan los colores en el espíritu humano. Las respuestas emocionales varían enormemente dependiendo del color y de la intensidad de éste, así como de las diferentes combinaciones de colores que se pueden dar.

Normalmente cada color individual lleva asociado un conjunto de emociones y asociaciones de ideas que le es propio. Hay que destacar que estas emociones asociadas corresponden a la cultura occidental, ya que en otras culturas los colores pueden expresar sentimientos totalmente opuestos a los arriba indicados (por ejemplo, en Japón el color blanco simboliza la muerte).

Las sensaciones que producen los colores dependen de factores culturales y ambientales, y muchas veces de los propios prejuicios del usuario. Además hay que sumar a esto que no todas las personas ven los colores de la misma forma, ya que hay personas que sólo pueden ver bien la gama azul / naranja, otras la roja / verde y otras degeneran a la gama blanco / negro. Incluso se perciben los colores de forma diferente con el ojo derecho que con el izquierdo.

Vamos a estudiar a continuación las propiedades psicológicas de los principales colores y sus combinaciones más acertadas.

Rojo

El rojo es el único color brillante de verdad y puro en su composición. es exultante y agresivo. Es el símbolo de la pasión ardiente y desbordada, de la sexualidad y el erotismo. Es un color cálido, asociado con el sol y el calor, de tal manera que es posible sentirse más acalorado en un ambiente pintado de rojo, aunque objetivamente la temperatura no haya variado. Su nombre procede del latín "russus".



El rojo es el color de la sangre, de la pasión, de la fuerza bruta y del fuego. Se utiliza en las fiestas del Espíritu Santo, iluminando la llama del amor divino, y en las fiestas de los Mártires, en la Pasión, y el Pentecostés.

Color fundamental, ligado al principio de la vida, sugiere vitalidad, entusiasmo, pasión, agitación, fuerza, sexo, calor, fuego, sangre, amor, audacia, valor, coraje, cólera, crueldad, intensidad y virilidad, estando asociado con sentimientos enérgicos, con la excitación apasionada o erótica. Es el color más sensual de todo el círculo cromático.



También sugiere alarma, peligro, violencia, ira y enfado. Muchos animales y plantas usan el rojo para indicar su peligrosidad, y el hombre lo utiliza en todo tipo de indicaciones de prohibición y peligro.



El rojo es un color controvertido, pudiendo ser atractivo y seductor como unos labios de mujer pintados o desencadenar asco o mareo, como cuando se contempla un charco de sangre.

En una composición puede ser usado para llamar la atención, para incitar una acción o para marcar los elementos más importantes de una composición o página web, pero cuando es usado en gran cantidad cansa la vista en exceso.



Un problema asociado al uso del color rojo es la mala gradación que ofrece, ya que al modificar sus propiedades vamos obteniendo colores rosáceos, poco aptos para su uso en la web.



Una posible solución a este problema es desplazarnos en el círculo cromático hacia los violetas o hacia los naranjas, es decir, usar el rojo como centro de la gama y completar ésta con sus colores análogos.



Otra buena forma es combinar el rojo grises y con los colores de su tríada. En cuanto a su complementario, el verde, aunque contrasta muy bien con él, juntos no crean un efecto visual adecuado.

Verde

El verde es el color más tranquilo y sedante de todos. Es el color de la calma indiferente: no transmite alegría, tristeza o pasión. Su nombre deriva del latín "viridis" (que tiene savia).

Está asociado a conceptos como Naturaleza, salud, dinero, frescura, crecimiento, abundancia, fertilidad, plantas, bosques, vegetación, primavera, frescor, esmeralda, honor, cortesía, civismo y vigor. El verde que tiende al amarillo cobra fuerza activa y soleada; si en él predomina el azul resulta más sobrio y sofisticado.



Significa la esperanza, los bienes que han de venir, el deseo de vida eterna. Es el color propio del año eclesiástico y de gran número de fiestas, así como de ciertos domingos antes de Pentecostés.

Su paleta de variaciones es rica en colores aprovechables para el diseño gráfico y la web.



Se dice que es el color mas descansado para el ojo humano y que tiene poder de curación ( ¿será por eso que las batas de los cirujanos son verdes?).



Es un color contradictorio. A muchas personas les influye un carácter desagradable, mientras que a otras les sugiere más pasión que el rojo.



En las composiciones gráficas y páginas web da buen juego. Sus degradados son buenos y sus variaciones tonales también, formando gamas apropiadas para diseño.



Su complementario es el rojo y, aunque contrastan muy bien, no suelen hacer buena combinación. Con sus análogos y su tríada es posible obtener paletas aceptables para una página web.



Azul

El color azul es el símbolo de la profundidad. Inmaterial y frío, suscita una predisposición favorable. La sensación de placidez que provoca el azul es distinta de la calma o reposo terrestres, propios del verde.

Es un color reservado y entra dentro de los colores fríos. Expresa armonía, amistad, fidelidad, serenidad, sosiego, verdad, dignidad, confianza, masculinidad, sensualidad y comodidad. Su nombre es de origen incierto, pero parece que procede del sánscrito "rajavarta" (rizo del rey).

Este color se asocia con el cielo, el mar y el aire. El azul claro puede sugerir optimismo. Cuanto más se clarifica más pierde atracción y se vuelve indiferente y vacío. Cuanto más se oscurece más atrae hacia el infinito. Posee también la virtud de crear la ilusión óptica de retroceder.



Es el color del cielo sin nubes, sin amenazas, donde vuelan las aves con libertad, del agua cristalina, fuente de vida para animales y plantas, de la Tierra, nuestro bello planeta azul.



Está asociado a conceptos como seriedad, compromiso, lealtad, justicia y fidelidad, pero también puede expresar melancolía, tristeza, pasividad y depresión.

Si es muy pálido puede inspirar frescura e incluso frío. Si es intermedio, da sensación de elegancia, de frescura. Si es oscuro da sensación de espiritualidad, de seriedad, de responsabilidad.



El azul es un color que da mucho juego en las composiciones gráficas en general y en las páginas web en concreto. Es utilizado ampliamente como color corporativo, por la seriedad y confianza que inspira, y admite buenas gradaciones, pudiendo ser el color dominante en una página.



Combina muy bien con su complementario, el naranja, y con las variaciones de éste, siendo típicos los fondos azules con textos naranjas, sobre todo en dinteles con logotipo.



También ofrece una buena gama de análogos y hace buenos juegos con los colores de su tríada.



Es un color que influye sobre el apetito, disminuyendo éste, seguramente porque no hay ningún alimento azul en la naturaleza, por lo que no es aconsejable su uso para una página sobre recetas de cocina o productos alimenticios.