La tipografía es uno de los elementos que puede arruinar tu diseño de manera más aparente. Si no eliges la fuente adecuada que logre crear el entorno ideal para tu diseño, entonces tu composición no tendrá éxito entre tus usuarios pues será confuso para ellos.
En el caso de que la selección de fuentes no sea el problema, tal vez el error se encuentre en que el texto se ve demasiado grande y que por esta razón se dificulta una lectura fluida del mismo. O por el contrario, tal vez sea demasiado pequeño, tanto que el usuario no puede leerlo.
Para evitar este tipo de situaciones, es mejor crear una escala tipográfica en todos tus proyectos de diseño. Si se crea de forma adecuada, esta escala puede ser de gran ayuda no sólo para mejorar tu diseño en ordenadores, sino también cuando deseas trasladar dicho diseño a dispositivos con pantallas de menor tamaño. En este artículo explicamos brevemente qué es la escala tipográfica y te damos algunas pautas generales para que puedas crear una escala en tu próximo proyecto de diseño web.
¿Qué es una escala tipográfica?
Una escala tipográfica hace referencia a los tamaños, espaciados y proporciones de todos los elementos tipográficos que se emplearán en un proyecto particular. Cuando inicias algún proyecto de diseño, no sólo haces decisiones sobre los tipos de fuentes que emplearás, sino que estableces un sistema para cuerpo de texto, títulos, subtítulos, citas, etc.
La escala es importante pues ayuda a determinar el tamaño que poseen los elementos de texto en relación mutua. Esta escala se emplea tanto en diseño impreso como en diseño web y existen ciertas diferencias que deben tenerse en cuenta pues se busca que las fuentes sean legibles, particularmente las fuentes que tienen menor puntaje.
En el diseño impreso es común que se impriman pruebas para verificar si todos los textos son legibles. Por otro lado, en el diseño web, la escala tipográfica corresponde a ciertas etiquetas propias del lenguaje CSS como h1, h2, h3, p, etc. De esta manera, al establecer los puntajes para cada pieza de texto, puedes mantener un estilo consistente gracias al uso de las etiquetas CSS.
La escala debería ser creada en base al tamaño del cuerpo de texto en cualquier proyecto, así que es recomendable primero definir el puntaje para este elemento y luego para los títulos, subtítulos y demás elementos de texto que contenga el proyecto. Si es la primera vez que escuchas sobre escalas tipográficas o nunca antes te habías planteado empezar a crear escalas en base al cuerpo de texto, puedes utilizar la útil guía que Google pone a tu disposición. Aunque es positivo que leas todo el documento, presta especial atención a la sección “Recomendaciones” pues es allí donde se indican una serie de pautas para crear una escala tipográfica adecuada.
La armonía y el ritmo en la tipografía
La escala tipográfica no solo asegura que tus textos sean legibles, sino que también crea una sensación de armonía y ritmo. Estos dos conceptos se suelen emplear ampliamente en cualquier composición de diseño. Probablemente hayas escuchado el término “armonía” que se utiliza de forma habitual al hablar de paletas de colores. Esta armonía también puede ser trasladada a los elementos de una composición de diseño. Por otro lado, “ritmo” hace referencia a la repetición de uno o varios elementos en una composición, a menudo con intervalos definidos entre ellos. Gracias al ritmo se pueden crear patrones y texturas, además de dar una sensación de movimiento.
Tanto la armonía como el ritmo son valores que se pueden aplicar en el texto para crear un patrón de lectura más fluido en tus diseños. Como ya debes saber, guiar la vista de los usuarios según el orden de importancia de los elementos es esencial en el diseño web.
Ya que en la actualidad el diseño web no sólo se realiza para pantallas de ordenadores y portátiles, se han desarrollado diversos estudios sobre el tamaño ideal del cuerpo de texto, la longitud de las líneas, el espaciado entre párrafos, la reducción en porcentajes cuando el diseño se traslada a dispositivos móviles, etc.
Puede que el diseño se vea ligeramente afectado, particularmente cuando se pasa de un ordenador a un smartphone pues no sólo el tamaño de pantalla varía, sino también el formato ya que la gran mayoría de usuarios decide usarlo verticalmente y no girar la pantalla. Esto es un detalle que debes considerar cuando trabajas con fuentes, no sólo para hacerlas legibles, sino para que la armonía y el ritmo se mantengan.
Sobre el espaciado
Como ya habíamos mencionado, aparte de establecer el tipo de fuente, estilo y puntaje del cuerpo de texto en tu composición, también debes evaluar el espaciado pues este es un factor que puede mejorar o empeorar la legibilidad de tus textos. Ya que ahora debes considerar diferentes tamaños de pantalla, el espaciado también se ve afectado. De forma usual, el kerning y tracking son valores que se asocian de forma automática según el tipo de fuente que empleas. Pero no son sólo estos dos valores los que afectan la legibilidad, sino también el tamaño de la línea. Si es muy corta, no aprovechas todo el espacio en pantalla y si es muy larga a los usuarios se les complica pasar de una línea a otra.
Para ordenadores y dispositivos de mayor tamaño te recomendamos usar líneas de texto que contenga de 60 a 75 caracteres. Por otro lado, para dispositivos móviles lo ideal es de 35 a 40 caracteres por línea. Como ves, en pantallas de mayor tamaño se utilizan líneas más cortas y como consecuencia, párrafos más grandes.
En cuanto al interlineado o espacio entre líneas es un factor que también se suele aplicar de forma automática, pero puedes modificarlo si para la fuente específica que has seleccionado necesitas un menor o mayor interlineado. Para dispositivos móviles si es recomendable aumentar en un 25% el espaciado automático. Este espacio adicional permite reducir la sensación de dimensiones limitadas que se crea en dispositivos móviles, particularmente cuando los usuarios ya están acostumbrados a navegar en ordenador y cuentan con pantallas de alta resolución.
En conclusión…
Establecer una escala tipográfica adecuada contribuye a que tu diseño se vea mejor. Además, los usuarios, aunque pueden no comprender de conceptos como armonía o ritmo, cuando se emplean de forma errónea en un diseño realmente salta a la vista y los usuarios podrán notarlo fácilmente, en especial porque estos dos valores pueden afectar la usabilidad y la legibilidad de tus textos.
Por suerte, cuenta con la útil guía de Google para utilizar fuentes legibles que se encuentra en español. Asimismo, existen diversas herramientas como Type Scale que te permiten experimentar y establecer una escala tipográfica para tus proyectos. Probablemente tendrás que realizar muchas pruebas y repasar algunos conceptos básicos del diseño, pero con mucha práctica podrás lograr dominar las escalas tipográficas en tus proyectos.
