Los conocimientos tipográficos son una de las mayores habilidades que puede tener un diseñador… los veteranos de la industria emplearon años en perfeccionar su técnica y tú podrías invertir fácilmente años en una universidad estudiando este tema; ¿pero cuál es realmente el mejor sitio para iniciarse? Hoy, en nuestra última aportación a la serie sobre Fundamentos de Diseño Web, vamos a iniciar a los novatos en tipografía explicándoles una única cosa muy sencilla: porque es tan importante la tipografía en el diseño web.
¿Qué es tipografía?
La tipografía es una antigua disciplina que, de forma simplificada, puede explicarse como el arte de organizar y diseñar la palabra escrita. Los primeros ejemplos tipográficos datan de 1800 A. C. y fueron realizados por los antiguos griegos, pero la era moderna de la tipografía no nace hasta mediados del siglo XV, cuando se inventa la imprenta.
Voy a ser breve con la lección histórica: la tipografía es importante por una razón: porque es el medio principal que tienen los diseñadores para comunicarse con los lectores… ya sea el medio, un libro, una publicidad impresa, una valla publicitaria, o un programa de televisión, la tipografía es importante porque materializa el lenguaje visual.
Entonces, ¿a qué nos referimos cuando hablamos de «tipografía web»?
El 96% de Internet se compone de información escrita o texto. Este texto está distribuido en fragmentos de información grandes y pequeños que se extienden a lo largo de distintas páginas con distintos formatos.
La aplicación de formato o estilo a toda esta información en el diseño de un sitio web es lo que llamamos «Tipografía Web».
La tipografía es la parte más importante de un diseño web, ya que influye en la forma en la que la web se comunica con sus lectores. Desde los titulares más grandes y bloques destacados en negrita hasta el texto del cuerpo de la página, las distintas aplicaciones del texto en una web constituyen su método principal de comunicación… así que es lógico que la forma en la que un diseñador decida componer la tipografía en la página web sea crucial para la eficacia de ese sitio.
Vemos su uso por todas partes, ya que todos los sitios web se apoyan en la tipografía para transmitir sus mensajes a los lectores. Aunque existen algunos diseñadores web que tienden a obviar la irremediable relevancia de la tipografía y se centran solo en los aspectos visuales o gráficos del diseño web.
¿En qué se diferencia la tipografía web de la tipografía impresa?
El uso de la tipografía en el medio impreso, como puedan ser catálogos, folletos, revistas, libros o medios externos como la señalética o las vallas publicitarias, es distinto al uso de la misma en para la pantalla del ordenador. Desde la perspectiva de la tipografía, la pantalla es un medio completamente diferente… y como ocurre con cualquier tipo de diseño, debes considerar verdaderamente el medio a través del cual la gente verá tu diseño. Observa las siguientes dos imágenes:
La imagen de arriba es un cartel para la banda, The Black Keys. La imagen de abajo pertenece a su sitio web. La misma banda, diferente enfoque tipográfico. ¿Por qué? Esto se debe a que el medio y, por tanto, el mensaje y la intención de cada diseño es distinto. Uno es para promocionar un concierto y el otro es un portal con todo tipo de información sobre la banda.
Cuando usas la tipografía en un diseño impreso para algo como un libro, el hecho de que vaya a ser visto desde una relativa cercanía visual te permite jugar un poco con las fuentes porque no perjudicará demasiado la legibilidad. Si estás usando la tipografía en un medio de comunicación externo como vallas publicitarias o cartelería, sabes que el lector solo dispondrá de una fracción de tiempo par ver el panel y consumir lo que se está intentando comunicar de forma que no embarulles en exceso los perfectos ajustes de la tipografía, en lugar de eso céntrate en su aspecto visual inicial y en su legibilidad.
Aunque, en un sitio web se tiene objetivos totalmente distintos en mente. Diseñar tipografía para los ordenadores y la web requiere que el diseñador divida gran cantidad de información en secciones y sub-secciones (Micro y Macro-Tipografía). Además, una página web no tiene un estado constante, ya que debe mostrarse en distintos navegadores, distintos dispositivos de accesos a Internet y con diversas resoluciones de pantalla. Así que a la tipografía web le toca lidiar con un gran número de aspectos en comparación con otros medios. Por tanto, cuando están eligiendo tipografías para un sitio web, los diseñadores web deben considerar la compatibilidad entre las distintas plataformas y la legibilidad. Estos son solo algunas de las consideraciones que un diseñador web debe tener en mente cuando desarrolla un proyecto web.
La tipografía web es «diseño de la información»
En lo concerniente al diseño web, la tipografía no está limitada a la elección de una fuente y su disposición en la maquetación; Se trata del arte de dividir grupos de información de tal manera que el lector tendrá mejores condiciones para encontrar lo que le interesa… aquí es donde la tipografía en la web se acerca más al diseño de la información.
La tipografía en la web consiste tanto en organizar los tipos en diseños de página eficaces y significativos como en la elección y el uso de buenos tipos de letras.
Dirigir la atención hacia cierto bloque de texto, ayudar a que los usuarios encuentren el contenido que están buscando, o acoplar una amplia variedad de contenido en una única página, todo ello se consigue con habilidades tipográficas.
La idea de diseñar tipos de letras de modo que además de ser legibles, aporten sentido o connotaciones, es parte de lo que confunde a mucha gente respecto a la tipografía web. Cualquiera puede componer un párrafo de texto; algunos menos pueden usar cosas como el interletraje, el interlineado, y el tamaño de fuente para aportar personalidad o carácter. No obstante, los mejores diseñadores web pueden organizar los caracteres a lo largo de una maquetación de tal forma que transmita un significado a los lectores y les sirva de guía a lo largo de todo el sitio web.
Esto es a lo que nos referimos cuando decimos que la tipografía es diseño de información.
Macro-tipografía y micro-tipografía
Siempre es útil al empezar un sistema tipográfico para un diseño, dividirlo en dos diferentes segmentos.
- Macro-tipografía, hace referencia al conjunto de la estructura del documento.
- Micro-tipografía, se ocupa de aspectos menores como el tipo de fuente, el interlineado, el espaciado, etc.
Abordando primero la macro-tipografía, podemos bosquejar más rápidamente los elementos que dan forma a la visión global del sistema tipográfico de un diseño. ¿Dónde ubicaremos los menús de navegación? ¿Cómo organizaremos la tipografía en el sitio web? ¿En una columna? ¿Dos? ¿Más de dos? Todas las reglas relativas a la estructura deberían ser definidas primero. Para ello puedes usar cualquier tipo de letra que desees… pero podrías empezar a definir ya su tamaño y escala para el diseño.
Una vez concluyas el abocetado del aspecto general, es hora de abordar la micro-tipografía. Aquí es donde empezarás a pulir tu sistema tipográfico, definiendo elementos estilísticos como cuál será tu tipo de letra principal (y posiblemente la secundaria), cuán grandes serán los titulares, el tamaño predeterminado de elementos como los encabezados de las columnas auxiliares, de los párrafos de texto, el color de los enlaces, etc.
Consejos de tipografía web
Si acabas de iniciarte como diseñador web, observar todas las cosas atrevidas y locas que se están dando en el ámbito de la tipografía web puede ser intimidante. Es posible que te hagas algunas preguntas, por ejemplo: ¿Por dónde empiezo? ¿Qué está bien o mal? ¿Existen reglas a seguir? Afortunadamente, en su base, la tipografía web tiene ciertamente algunas reglas consistentes de las que deberías ser consciente. Lo que viene a continuación son algunos útiles consejos que he recogido y que sirven para crear un sistema tipográfico eficaz para la web.
Lo que te queda por leer:
- Una jerarquía clara y limpia
- Tipografía en cascada – Mantén la consistencia
- Repasa el texto
Deja una respuesta