Algunos consejos y recursos sobre tipografía

La tipografía es una parte muy importante en el diseño tanto gráfico como web, y es que con solo cambiar la fuente de nuestro diseño, podemos trasmitir una sensación o significado muy diferente al mensaje final del proyecto que estemos desarrollando. Por ello, aquí os dejo algunos consejos básicos y recursos sencillos que nos pueden ayudar un poco a conseguir mejorar el uso de la tipografía en nuestros diseños.

1.- La Tipografía no debe deformarse por ninguna razón, Si necesitamos una letra alargada será mejor elegir una fuente que tenga esas características en vez de deformar una de perfiles más redondeados.

2.- El exceso de negritas y cursivas, puede producir en el lector una distracción y por lo tanto una interrupción en la comprensión de la lectura.

3.- Un documento no debería utilizar más de dos fuentes diferentes.

4.- No deberíamos modificar demasiado los valores que trae por defecto la tipografía, ya que en el 99% de los casos, como mejor funciona un texto es dejándolo con sus características naturales.

5.- Sobre la utilización de las fuentes ‘serif y ‘sans serif’, varios estudios han demostrado que sobre el papel impreso las fuentes ‘serif’ se leen mejor, ya que los pequeños remates que tienen 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 por ello dificultan la lectura, por lo tanto, para el diseño web utilizaremos fuentes ‘sans-serif’.

6.- Encuentra el contraste perfecto, ya que la elección de un mal contraste puede hacer que el texto no se lea bien. Encontrar el equilibrio para el cuerpo del texto es importante y debe ser lo suficientemente fuerte como para ser visible, pero tampoco tan fuerte como para convertirse en una distracción frente a otros elementos.

7.- Usaremos diseños basados en una cuadrícula. Las cuadrículas deben ser la estructura interior de casi todo lo que hagamos en diseño y muy especialmente si este diseño tiene que ser impreso, ello aumentará la unidad y armonía del conjunto.

8.- Siempre que puedas usa OpenType, ya que esta familia se caracteriza por tener la capacidad de contener hasta 65.636 glifos (a diferencia de las PostScript, que se limitan a 256), si usamos OpenType nunca nos faltará ningún acento ni símbolo extraño. Los archivos Opentype son capaces de usarse en sistemas Mac y Windows, así como en algunos sistemas Unix.

9.- Evita el abuso de mayúsculas (parece que levantas la voz), subrayados (ensucia el aspecto) y el texto justificado a ambos lados para pantalla (a veces los navegadores no reparten bien el espacio entre palabras y el efecto cuadrado no compensa la pérdida de homegeneidad).

10.- Es importante gestionar nuestras fuentes, ya que cuando trabajamos con tipografías, acumulamos una gran cantidad de ellas en nuestro ordenador, y es por ello que necesitamos un software que nos permita buscarlas en la totalidad del sistema, agruparlas, clasificarlas y activarlas para trabajos particulares. Esto lo podemos conseguir por ejemplo con el software Extensis Suitcase.

11.- Un recurso online sencillo e interesante es Copypastecharacter.com, se trata de una web con todos esos caracteres no tan habituales, que nos resulta complicado encontrar y nos hace perder un tiempo precioso. Si accedemos a esta web, veremos que solo haciendo clic sobre el símbolo, ya lo tenemos listo en el porta-papeles, ya sea en formato texto o su código HTML.

12.- Html-ipsum.com es un generador de texto en Lorem Ipsum específicamente para el diseño web. En lugar de simplemente dar trozos de texto, Html-ipsum.com puede dar texto pre-formateado como párrafos, listas ordenadas, las listas de navegación, etc. Con esta herramienta online podemos ahorrar tiempo en la creación de maquetas de sitios web y diseños iniciales.

13.- CSStypeset te permite añadir un estilo CSS a un bloque de texto y luego copiar el CSS para usarlo en diseño web. Es un simple generador de CSS que permite controlar el tipo de letra, tamaño, espaciado, el color, etc

14.- Hasta ahora si queríamos que nuestro diseño web lo visualizara más o menos igual cualquier usuario, había que limitarse a unas cuantas fuentes predeterminadas, que sabíamos que estaban instaladas en la mayoría de las computadoras. Pero esta limitación se ha acabado gracias a @font-face, que es una propiedad de CSS3 muy útil para definir en un sitio web una fuente que el usuario no tenga instalada en su ordenador.

15.- Por último, aquí os dejo un vídeo de Enric Jardí con 22 consejos sobre tipografía (video-animación basada en el libro de Enric Jardí, 22 consejos sobre tipografía (que algunos diseñadores jamas te dirán)).