7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Typography

Fundamentos de Diseño Web: Por Qué es Importante la Tipografía

Scroll to top
Read Time: 12 mins

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

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 1.800 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é No 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. Así que, 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 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;… pero 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


Créditos: I Love Typography

Siempre es útil al empezar un sistema tipográfico para un diseño, dividirlo en dos diferentes segmentos.

  • Macro-tipografía, que hace referencia al conjunto de la estructura del documento.
  • Micro-tipografía, que 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? ¿Como 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 bocetado 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 cual 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: 

Una Jerarquía Clara y Limpia

La jerarquía de la tipografía es muy importante en un diseño web. Piensa en todos los distintos lugares de una web en los que colocas texto: los sistemas de navegación, los titulares, los párrafos, los pies de foto, las columnas auxiliares, etc… ¡Es muy posible que haya mucho texto! ¿Cómo vas a convertir todo esto en un sistema tipográfico lógico? Desarrollando una jerarquía tipográfica.

Una jerarquía tipográfica bien desarrollada permite saber por donde empezar la lectura, por dónde continuar leyendo, y la diferencia entre la información más y menos importante de la página. Mediante una jerarquía tipográfica eficaz, ya no necesitarás apoyarte en la ubicación de los textos para señalar por dónde deben empezar la lectura los usuarios. 

Lee más sobre este tema en Comprender la Jerarquía


Tipografía en Cascada - Mantén la Consistencia

La falta de consistencia en la tipografía es uno de los errores más comunes y repetidos que cometen los diseñadores web actualmente. Un diseñador gráfico con frecuencia diseñará meticulosamente cada uno de los caracteres que aparecen en una página… pero esto no es necesario en el diseño web.

En lugar de eso intenta diseñar manualmente cada uno de los elementos tipográficos del sitio web, diseñando teniendo en cuenta las Hojas de Estilo en Cascada (CSS). Haz uso de las ventajas que aporta el CSS y establece la fuente, el tamaño, el color, el espaciado, el interlineado, la altura y otras características de tu tipografía en todo el sitio web.  


Repasa el Texto

Ya he mencionado esto anteriormente, pero permíteme enfatizar el argumento: los grandes diseñadores web hacen algo más que colocar imágenes y pegar texto en las páginas de un sitio web. Se necesita tener buenos hábitos profesionales para realizar un diseño web logrado y atractivo; uno de los mejores hábitos profesionales que debería tener un diseñador web consiste en leer atentamente el texto antes de colocarlo en el diseño web. Si tienes acceso a los textos que usarás para tu contenido, evita "pegarlo" todo de golpe a ciegas. Si lo repasas y lo lees en su totalidad, serás capaz de crear una mejor conexión entre el contenido y el diseño.

Además, cuando hayas acabado de ubicar el texto y el resto de elementos en tu diseño, acostúmbrate a revisarlo nuevamente a modo de corrección de pruebas para evitar cualquier error o cosas que falten. Es increíble la frecuencia con la que los diseñadores olvidan aplicar estilo a elementos simples como las viñetas de las listas, estas omisiones suelen detectarse en la fase de diseño.


Macro y Micro Tipografía – ¡Ambas Son Importantes!

Para lograr un diseño web de éxito, un diseñador web debería prestar atención tanto a la macro como a la micro tipografía. Hasta los mejores diseños pueden fallar si ciertos elementos de la "micro" tipografía son omitidos… e incluso la mejor micro-tipografía no será útil para los lectores si no está organizada haciendo uso de los principios de la macro-tipografía. ¡Ambas son de gran importancia!

Muchos diseñadores son especialmente buenos en una u otra área… así que tómate el tiempo necesario para considerar cual es tu fuerte: ¿la macro o la micro?. Después haz todo lo posible para mejorar las habilidades en las que seas menos experto a través de la práctica y la atención al detalle.


El Color y la Tipografía

Esto es algo obvio para muchos diseñadores, el color del texto es otro aspecto importante a tener en cuenta. Existen cientos de sitios web que dan por garantizado este punto y usan color en sus fuentes que omiten alguna de las siguientes cosas:

  • Hacen la tipografía inmensamente difícil de leer
  • o… ¡son aburridas!, y los colores aburridos son colores desaprovechados.

No es necesario que plasmes todo el arco iris en la página, ni uses algo tan horrible como un texto rojo sobre un fondo verde… basta con que sigas sencillas teorías del color con sensibilidad para seleccionar colores de tus fuentes que sean legibles e interesantes. Recuerda, los enlaces deberían tener un color distinto al del resto del texto en la mayoría de los casos… ¡esto le indica a la gente que pueden hacer clic sobre ellos!

Lee más sobre Teoría del Color en el Diseño Web.


Diseña Con El "Texto en Vivo"

¡Deja de usar texto falso tipo Lorem Ipsum! No hay nada que pueda sustituir verdaderamente al texto real durante el proceso de diseño de una web. Aunque puedes usar texto ficticio para obtener una idea del aspecto que tendrán las cosas en la maquetación, conforme el diseño vaya acercándose a término, intenta usar el texto definitivo que tú o tu cliente usaréis en la web final. No solo serás capaz de sincronizar el diseño con el texto y determinar el impacto general que tendrá en la apariencia del sitio web… hasta los más pequeños olvidos durante este proceso pueden debilitar aspectos en el conjunto del diseño. Así que, ¡tómate el tiempo necesario para usar el texto definitivo antes de poder decir que un proyecto está "terminado"!


Muestra Tu Personalidad A Través de la Tipografía

Lo mejor de la tipografía web es que existen una gran variedad de enfoques - cada diseñador tendrá su propio estilo a la hora de hacer las cosas, y realmente no existe una forma "correcta" de usar las fuentes en la maquetación de una web. La tipografía tiene personalidad, del mismo modo que la tenéis tú o tu cliente, así que no tengas miedo de jugar con tu creatividad siempre que los aspectos básicos del diseño web estén garantizados.

Lee más sobre cómo Elegir la Tipografía Adecuada


Conclusión: Con La Practica Llega la Perfección

El diseño web te exige profesionalidad y dominio de un cierto número de cosas para conseguir realmente un diseño excelente, y la tipografía es definitivamente una de ellas. Un diseñador web que realmente entienda la importancia de la tipografía tendrá más posibilidades de alcanzar el éxito en este aspecto… ¡pero ciertamente se necesita práctica para entrenar la mente de forma que sea capaz de encontrar la forma óptima de disponer un determinado fragmento de texto! La excelencia tipográfica no es una habilidad que se adquiera en poco tiempo, muy al contrario, hay que invertir mucho tiempo hasta descubrir la mejor forma de hacer las cosas en un proyecto determinado.

Reserva algo de tiempo diariamente a su práctica - prueba a coger un artículo que te guste e intenta rediseñarlo; diseña tu propio currículum, portafolio o lo que te apetezca… ¡haz cualquier cosa útil que se te ocurra para practicar y comprobarás tus avances en poco tiempo! Créeme, tan pronto como entiendas los aspectos básicos, ¡será pan comido!

Este artículo fue escrito mano a mano entre Arfa Mizra y Brandon Jones. ¡Gracias por leerme!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.