Tipografía Responsive

Autor:  Oliver Reichenstein

Tipografía adaptable

Cuando construimos sitios web, normalmente empezamos definiendo el cuerpo del texto. La definición de texto cuerpo dicta el ancho de la columna principal y el resto solía seguir casi por sí mismo. Solía. Hasta hace poco, la resolución de pantalla era más o menos homogénea. Hoy nos enfrentamos con una gran variedad de tamaños de pantalla y resoluciones. Esto hace las cosas mucho más complicadas.

responsive-typography-perspective[1]

Para evitar el diseño de diferentes layouts para cada tamaño de la pantalla posible, muchos diseñadores web han adoptado el concepto de Responsive Web Design. En pocas palabras esta es la idea de que su diseño se adapta automáticamente a la definición de la pantalla. Hay diferentes formas para definirlo. Me gusta ponerlo de esta manera:

  1. Layouts adaptables: ajustar la distribución en pasos a un número limitado de tamaños
  2. Layouts líquidos: ajustar la distribución continuamente para cada anchura

Si bien ambos tienen ventajas y desventajas, creemos que adaptarse con el menor número posible de puntos de ruptura es el camino a seguir, ya que la legibilidad  es más importante que tener un diseño que siempre es tan amplio como el punto de visión. Esta es una opinión discutible  sobre una cuestión compleja en sí misma,  pero la legibilidad óptima requiere una cierta cantidad de control sobre la medida (ancho de columna) del texto, y en este sentido un diseño líquido crea más problemas de los que soluciona. .

Elegir un tipo de letra

El tono adecuado

Tarde o temprano, tendrá que decidir qué tipo de tipo de letra que desea usar. La elección de la fuente es principalmente una cuestión de tono, pero, ya que cada tipo de letra tiene sus propias cualidades y demandas (o prohíbe) ciertos tratamientos, la elección del tipo tiene muchas consecuencias visuales y tecnológicas. Con las web fonts ahora dispone de una gran variedad de tipos de letras, así que encontrar la fuente adecuada se ha convertido en un reto más.

Serif o Sans Serif?

Por lo general, la elección está entre serif y sans serif. Esto es en sí mismo un asunto complejo, pero hay una regla simple que te pueden ayudar: La tipografía serif es un sacerdote, los sans es un hacker . Uno no es mejor que el otro, pero, por diversas razones, un tipo de letra serif tiene un toque más autoritario, mientras que una fuente sin serifas se siente más democrática. Recuerde, esto son cinco mil años de historia tipográfica resumidos en dos líneas descuidadas, así que no se lo tome muy en serio.

Mucha gente todavía piensa que por la tipografía de pantalla a la pregunta “serif o sans serif” respuestas por sí mismo. En realidad, no es tan fácil. Contra las creencias comunes, tanto serif y sans serif puede funcionar igual de bien, si usted elige un tamaño texto del cuerpo por encima de 12 píxeles. Por debajo de 12 píxeles tipografías serif no tienen fuerza suficiente, pero (y esto nos lleva al segundo punto) en los monitores actuales en los que 12 píxeles es, definitivamente, demasiado pequeño de todos modos.

¿De qué tamaño?

El tamaño de su cuerpo del texto no depende de sus preferencias personales. Depende de la distancia de lectura. Dado que en los ordenadores en general están más lejos de los libros, el tamaño de métrica de un tipo de letra escritorio tiene que ser más grande que los tamaños utilizados para el material impreso.

La siguiente ilustración muestra que cuanto más lejos, más grande tiene que ser su cuerpo de texto. Los dos negros y los dos rojos tienen el mismo tamaño métrico . Pero como el segundo par esta más lejos, el tamaño percibido es menor. La A de color rojo en la imagen de la derecha tiene el mismo tamaño percibido como la A negra en la imagen de la izquierda:

responsive-typography-relative-type-size2[1]

 

Cuanto más lejos se mantiene el texto, menor es visualmente. Es necesario hacer el tamaño del texto más grande cuanto más lejos se lee, para compensar una mayor distancia de lectura. Qué grande es una ciencia por sí misma. Si no tiene experiencia, un truco útil es sostener un libro bien impreso en una distancia de lectura cómoda mientras mira a su sitio de Internet para comparar.

Los diseñadores gráficos sin experiencia en diseño Web se sorprenden de lo enorme que es el cuerpo de texto en la web en comparación con productos de imprenta. Eso sí, sólo es grande si se compara uno al lado del otro, no si se compara con perspectiva.

responsive-typography-relative-readability3[1]

Si, después de aumentar el tamaño de su cuerpo de texto para que coincida, el nuevo tamaño le molesta al principio, no se preocupe que eso es normal. Sin embargo, una vez que se  acostumbre a él, usted no querrá volver a los pequeños tamaños “estándar”.

Hemos estado promoviendo estos tamaños de fuente “en perspectiva proporcionales” desde el año 2006. Inicialmente, nuestra afirmación de que Georgia 16px era un buen punto de referencia para los tamaños de texto del cuerpo provocó mucha ira e incluso algunas risas, pero ahora es más o menos una norma común. Con resoluciones más altas, esa norma está convirtiendo lentamente en obsoleta.

La altura y el contraste Línea

Mientras que el tamaño del cuerpo de texto se puede evaluar con esa perspectiva truco, altura de línea necesita un poco de ajuste. Con más distancia de lectura, es prudente dar al texto de la pantalla un poco más altura de interlineado que al texto impreso. 140% es un buen punto de referencia, pero, por supuesto, depende del tipo de letra que utilice.

responsive-typography-reading-distance[1]

Hoy en día es un hecho que te asegures de que el contraste no es demasiado débil (por ejemplo, texto gris sobre un fondo gris claro) o demasiado chillon (por ejemplo, color de rosa en amarillo). Dado que los tipos de letra de la pantalla se han diseñado para que se muestre en negro sobre blanco, con fondos oscuros es algo difícil, pero si se hace bien estos también pueden funcionar. Con las pantallas de alto contraste actuales, también es preferible elegir un color gris oscuro para el texto o un gris claro para el fondo, en lugar de un duro negro sobre blanco . Pero esto no es, de nuevo, la pregunta más importante.

iPhone vs iPad

Mucho de lo que hemos aprendido acerca de la tipografía responsive vino de la búsqueda de la tipografía perfecta para nuestra aplicación para escritura. Cuando diseñamos iA Writer for iPad invertimos semanas para encontrar la definición tipográfica optima. En ese momento, la pantalla de alta resolución de la iPad era un desafío completamente nuevo, y tardó bastante tiempo hasta que entendimos cómo funciona. Cuando Apple introdujo pantallas de Retina para iPhone y más tarde para el iPad, todo cambió de nuevo. Podríamos escribir un libro entero para explicar cómo llegamos a la mirada icónica de la tipografía del iA Writer, pero todavía hay mucho que decir acerca de los asuntos más generales, así que voy a ir al grano.

Si se compara nuestra versión actual del iA Writer para el iPhone con la versión para iPads, se dará cuenta de que el tamaño de la letra no es lo mismo.

responsive-typography-type-size[1]

¿Por qué los diferentes tamaños de letra para el iPhone y el iPad? Si usted lee con atención la explicación anterior, es posible que ya han adivinado.

  1. La distancia de lectura no siempre es la misma. Por lo general se mantiene el iPad un poco más lejos. Si usted utiliza su iPad en la mesa del desayuno, en la rodilla que se sienta en su sofá o justo en frente de su rostro tumbado en la cama le da una variedad de distancias de lectura. Este fue un desafío totalmente nuevo, ya que la distancia de lectura en las computadoras de escritorio y portátiles no varía mucho. Con el fin de hacer que funcione en todos los casos se optó por la distancia de lectura más alejada de definir el tamaño de letra. Esto podría resultar en un poco más grande de lo normal tamaño de letra cuando lo lees en la cama, pero no es incómodo, y generalmente no usas una aplicación de escritura acostado boca abajo en la cama.
  2. Usted tiene menos espacio en pantalla en un iPhone por lo que se ven obligados a hacer ajustes.

Por suerte, el iPhone se mantiene más cerca de la cara, asi que obliga a utilizar un tamaño de letra más pequeño. Desde una distancia media de lectura, tanto para iPhone como iPad tienen un tamaño de letra percibida similar.

responsive-typography-type-sizes[1]

Ya que que el iPhone se mantiene más cerca, el interlineado también puede ser más ajustado, lo cual a su vez es una necesidad, debido a la pantalla menor:

responsive-typography-distance-differences[1]

No todo funciona siempre en su favor cuando diseñas para la pantalla. En la ingeniería diseño de interacción: no se trata de encontrar el diseño perfecto, es encontrar el mejor compromiso. En nuestro caso hemos tenido que reducir la altura de la línea y también el canal y el espaciado entre caracteres:

responsive-typography-compromises[1]

Los ajustes fueron tan delicados que si  no lo sabe, no se dará cuenta de lo pequeño que son los espaciados. Los espaciados no con una cuestión estética, permiten que el texto respire y ayuda al ojo a saltar de una línea a otra. Si usted piensa que todo esto suena esotérico: no, hasta ahora sólos cubrimos los conceptos básicos.

¿Qué pasa con los ordenadores de escritorio?

Algunas personas se quejan del tamaño de la fuente tan grande en Writer para Mac. Al igual que tuvimos que elegir el mayor  mínimo tamaño de letra para iPad (que se lee a diferentes distancias), también tuvimos que elegir el  mayor mínimo tamaño de letra en Mac. En el momento nuestro punto de referencia era una alta resolución iMac de 24 pulgadas, donde el tamaño percibido es más o menos la misma que en todos los otros dispositivos.

responsive-typography-mac-iPad-iPhone2[1]

Teniendo en cuenta la infinita variedad de equipos Mac que ejecutan iA Writer, podemos determinar las diferentes resoluciones posibles. Nos fijamos en todas las configuraciones posibles para asegurar que el tamaño de la letra era el mejor compromiso para la mayoría de las máquinas.

responsive-typography-different-resolutions[1]

Usted podría preguntarse “¿Por qué no permitir al usuario elegir el tamaño de letra?” Bueno, ajustar tamaño de letra no es una cuestión de gusto, sino una cuestión de distancia de lectura. Como la mayoría de sitios web y aplicaciones tienen un tamaño de letra demasiado pequeña, los nuevos usuarios elegirían un tamaño de letra adecuado para este este tamaño demasiado pequeño, y nunca experimentarían el placer completo de nuestra app de escritura. La principal razón  no es que queremos forzar una cierta mirada a todos los usuarios: lo que queremos es que iA Writer  funcione sin tener que cambiar los ajustes, que la única cosa que tengas que hacer con él es escribir. Este ha sido el secreto a voces de su éxito y el cambio que se jugar con su núcleo. (Lo que tenemos que mejorar son la integración de accesibilidad para las personas con mala visión).

Está bien, entonces, ¿por qué no ajustarse a la resolución del dispositivo automáticamente? ¿Eso seria una tipografía responsive? Así es, y estamos trabajando en algo similar. Ahora, en el ajuste de la resolución, también hay que elegir el peso óptico adecuado y asegurarse que el tipo de letra funciona realmente según lo previsto con cada tamaño y resolución. El tamaño de letra debe cambiar con el cambio de resolución.

Extracto obtenido de:  http://ia.net/blog/responsive-typography-the-basics/