Cómo elegir una Tipografía para una página web

Cuando se trata del diseño de una página web, la elección de la tipografía es un paso decisivo y fundamental en el proceso.

La tipografía, es decir, la fuente o el formato de las letras que conforman el texto, tendrá un impacto directo en como la página será recibida por sus lectores.

Una tipografía enrevesada y poco legible agotará a quien visite el sitio web; los mensajes no son claros y por tanto el visitante prefiere salir del sitio.

Si bien es cierto que no hay un método establecido sobre cómo elegir una tipografía adecuada para una web, sí hay ciertos criterios fundamentales a ser tomados en cuenta.

Debemos tener en consideración que no todas las fuentes se han diseñado para ser legibles. Existen algunos factores que afectan a cierto nivel la legibilidad de algunos tipos de letra, como por ejemplo su anchura, la forma de los caracteres, su longitud excedente a la de la línea de escritura y su contraste.

El uso inadecuado de fuentes puede causar la molestia visual de usuario, por lo que tenemos que ser muy precavidos al momento de elegir, en esta ocasión trataremos de nombrar algunas de las formas y prácticas más convenientes para obtener una tipografía que se adecue a cada situación u objetivo.

¿Cuál es la forma correcta de usar una buena tipografía?

Define tu objetivo en la web

Primero que nada debemos tener bien en claro cual es el objetivo de nuestra página, cual queremos que sea la reacción del usuario al momento de leer el contenido que exponemos.

No hay que olvidarnos nunca del objetivo de nuestro sitio, ya que nos guiará en los momentos donde tengamos que tomar las decisiones más importantes de adecuación y creación.

Al final sea cual sea nuestro objetivo, en base a él tendremos que llegar a un balance de legibilidad y amenidad, buscar que nuestra fuente sea lo suficientemente clara como para poder leerse y que al momento de leerse entregue de manera adecuada el mensaje.

La Interfaz de la página web

La interfaz, o el “molde” de la página web, influye directamente en la tipografía.

Ambos aspectos deberían ser trabajados en conjunto pues la interfaz definirá cómo la tipografía es presentada en cuestión de espacios, locación, y diseño.

Por esto, es recomendable trabajar la tipografía junto con la interfaz a ser desarrollada en la página web.

Busca un diseño limpio

Utiliza espacios en blanco siempre que sea posible, especialmente en los diseños con contenido muy sobrecargado, esto ayudará a mejorar bastante la legibilidad.

Busca una buena tipografía

Como punto especial, debes considerar el uso de una tipografía adecuada, esto actuará como un complementa fundamental para mejorar el estilo de tus textos. Es muy importante, que elijamos una tipografía que se adapte correctamente a lo que queremos expresar.

Descubre con qué tipos de tipografías trabajas mejor, de esa manera te sentirás más cómodo al trabajar y tus diseños mejorarán trascendentalmente.

Establece jerarquías en el texto

Debemos asegurarnos de tener muy buen conocimiento sobre la jerarquía que tiene el contenido de nuestro sitio, es decir, saber identificar que texto tomará más relevancia que otro y escoger un tipo de letra en base a esto.

Después de un análisis de jerarquía tú puedes llegar a la conclusión de cuántos tipos de fuentes necesitas, puede que tu página maneje únicamente encabezados y texto de contenido.

Por otro lado pueden existir sitios donde se requieran cinco distintas fuentes para cubrir encabezados, subencabezados, enlaces en barras laterales y demás cosas.

Claro muchas veces podemos recurrir a utilizar variaciones del mismo tipo de letra, ya sea con negritas, cursivas o manejando mayúsculas y minúsculas, y con esto basta para cubrir lo necesario.

Para ello debes hacer este estudio, así sabrás si realmente cuantos tipos de letras necesitas y después podrás pasar a elegir cuales son las más adecuadas para cada nivel jerárquico.

Legibilidad del texto

La legibilidad es un principio básico y necesario cuando se va a elegir la tipografía para una página web.

Parece obvio, pero no es poco común entre diseñadores web poco experimentados que privilegien una tipografía aparentemente más interesante, original o compleja sobre tipografías tradicionales y cuyo uso es casi generalizado en el mundo web.

Ahora bien, las tipografías del primer tipo tienden a tener dos problemas: por un lado, son poco legibles pues están llenas de adornos.

En este sentido demandan un mayor esfuerzo y una mayor atención de parte del lector. Por otro lado, suelen distraer al lector del mensaje que se trata de transmitir.

A parte está, el hecho de que tipografías poco comunes no se verán igual en diferentes ordenadores. En el ordenador donde no estén instaladas, se sustituirán automáticamente por una tipografía que sí tenga el sistema.

Si quieres que una tipografía se vea igual en todos los ordenadores, la tengan o no instaladas, tendrás que tratarla como un archivo estático más y añadirla a tu CSS mediante @font-face.

Si el texto es más pequeño que esta medida, el visitante tendrá que hacer esfuerzos poder distinguir lo que escribimos.

En cambio si se maneja un tamaño aproximado a 16 píxeles, este resulta más semejante al de los libros físicos, por lo que el visitante se siente cómodo leyendo.

La propiedad CSS para modificar el espacio de interlineado es line-height. Generalmente se recomiendo utilizar un valor de 140%, esto se puede tomar como punto de referencia y a partir de ahí adecuarlo a nuestro diseño.

Usa el contraste sabiamente

Un buen contraste hará que el texto sea fácil de leer, mientras que uno malo puede arruinar rápidamente la experiencia del usuario, es por eso que debemos utilizarlo con prudencia.

No extiendas de más las líneas de texto

La longitud de una línea de texto, debe estar entre 65 y 75 caracteres. Tener más que estos caracteres, puede aburrir a los visitantes y la posibilidad de que dejen de leer aumenta en gran medida.

Al manejar líneas con longitudes estándar, permitimos que los ojos de los usuarios fluyan desde el final de una línea a la siguiente con facilidad.

Combinaciones de tipografías

Una página web no se hace con una sola tipografía. Ciertamente se puede pero no es lo deseado ni lo recomendable.

Debido a esto es que es muy importante el que se hagan combinaciones adecuadas en donde las fuentes utilizadas no sean discordantes entre sí.

Para que esto no suceda es recomendable utilizar distintas tipografías de un mismo diseñador.

Así, si se utiliza para el cuerpo del texto la fuente Meta Sans para los títulos y encabezados, se podría utilizar Meta Serif para el cuerpo del texto.

Lo importante en las combinaciones es crear un contraste notorio pero no al punto en el que las tipografías parezcan radicalmente distintas.

El objetivo del texto de tu web

Para elegir una tipografía adecuada para la web es indispensable prestarle especial atención al sentido del texto. Es decir, a quien se dirige y a nombre de quien lo hace.

Hay fuentes que tienden a asociarse a un contenido serio mientras que hay otras asociadas más a un texto lúdico o juvenil.

Ejemplos del primer caso sería la tipografía Times New Roman, mientras que para el segundo caso podría funcionar una tipografía como Impact.

Si se está diseñando la página web de una aseguradora o institución financiera, por ejemplo, la tipografía a utilizar será aquella que sea más formal pues será mejor recibida por quienes se interesan en los servicios de este tipo de empresas.

La tipografía no puede estar desligada del texto que con ella se escribe y el contexto del mismo.

Consejos para elegir una una fuente adecuada

Considera el trabajo de otros

Tenga en mente que quizás muchos ya pasaron por la situación en que tu te encuentras en este momento, es muy probable que algún desarrollador o diseñador ya haya encontrado una manera adecuada de combinar las tipografías que tu quieres manejar, por lo que no es necesario complicarnos la existencia tratando de reinventar la rueda.

Todos quisiéramos ser siempre creativos y entregar algo que sea innovador, pero muchas veces por tratar de llegar a eso terminamos con un producto que altera los nervios de varios y que solo nos hará perder visitas.

No descartes tu creatividad pues de ella dependes, pero tampoco descartes el uso de algo que ya este probado, existen razones por las que varias fuentes son utilizadas con tanta frecuencia.

Obtén una segunda opinión

El obtener una segunda e incluso una tercera opinión sobre nuestro producto nos ayudará y beneficiará en gran medida, ya que un ojo imparcial evaluará lo que hicimos y nos permitirá darnos cuenta de muchas cosas que estamos dejando pasar.

Incluso las cosas más obvias pudieron haberse dejado pasar por alto, no te confíes pensando que tu producto es perfecto, un par de ojos extra es fundamental para encontrar discrepancias.

Investiga bien el origen de la letra

En muchas ocasiones al utilizar una fuente sobre un sitio temático podemos estar cometiendo errores de precisión cultural, histórica o geográfica, para evitar esto no hay nada mejor que estudiar el trasfondo de una fuente.

Puede parecer exagerado el hecho de que necesitemos estudiar de donde proviene o de que manera se utilizaba dicha fuente, pero en muchas ocasiones esto puede resultar crucial para la apreciación de un sitio.

Imaginen tener un sitio de comida mexicana que utilice como base la tipografía “Lithos”, comúnmente utilizada para textos en griego, al momento de leer el contenido del sitio puedes imaginar que este es un restaurante dirigido por personas que realmente no son mexicanas, lo cual te hará consciente o inconscientemente pensar que la comida no es lo suficientemente buena.

Ahora imagina un libro sobre la antigua Grecia que tenga en su portada el título escrito con letra de tipo “Trajano”, comúnmente utilizada para representar textos romanos, en ese momento puedes imaginar que el autor no tiene idea de lo que esta hablando, entonces si no lo hacemos para los libros, ¿Por qué si hacerlo en los sitios web?

Evita lo trillado

Si bien es necesario que la fuente que manejemos tenga relación con el contenido que se muestra en la página, siempre debemos evitar caer en lo trillado, o peor aún en uso de fuentes viejas o poco estéticas solo porque tienen relación con lo que hablo.

Se puede dar el caso de que tengas un restaurante de comida griega pero no por eso tienes que manejar siempre la tipografía “Lithos”, busca alternativas que respeten el contenido.

Si haces una invitación a una fiesta no tienes que usar “Comic Sans” siempre, es más por favor no la uses nunca, si haces un sitio de temática Egipcia no tienes que usar la fuente “Papiro” para dar a entender tu punto. Si haces esta clase de cosas puedes dar la impresión de que no tomaste muy en serio tu trabajo y que en menos de 5 minutos habías terminado con el sitio.

Utiliza combinaciones clásicas

Como ya dijimos antes, la innovación es genial pero no lo es todo, si deseas irte por algo seguro no te critiques, no todos llevamos un diseñador por dentro y a veces es mejor irte por lo clásico a terminar probando algo que nunca termine de agradar.

Directorios de fuentes gratuitas

Sin embargo hay otras opciones que te permiten ampliar tus posibilidades y salir un poco de las fuentes que ofrece Google.

El directorio puede recorrerse buscando por orden alfabético, por familia (como las populares sans-serif), por autor y por temas. Este último tipo de búsqueda es muy útil si tienes en mente un estilo determinado, como las típicas letras góticas o de cómic.

Visitando algunas de sus categorías de tipografías gratuitas, se ven algunas fuentes de buena calidad, por lo que merece la pena echarle un vistazo, ir probando con diferentes tipos de letra la frase que tenemos en mente, etc.

Por último, cuando encuentras una tipografía que te gusta te da la opción de bajártela para PC o Mac.

A diferencia de otros directorios de fuentes, Fawnt no está dividido en categorías, sino que comprimen el espacio al máximo para ser capaces de mostrar el mayor número de fuentes por página.

De momento no tienen una base de datos de tipografías muy grande, pero las que tienen son de calidad.

Probar la fuente

Hay herramientas que sirven para probar online cómo queda una tipografía determinada modificando sus características principales, a la vez que te devuelve el código CSS necesario para implementarla en tu web.

Como digo la idea es muy similar, ingresas un texto y vas modificando opciones como el tamaño de fuente, color, espacio entre caracteres, alineación, etc. y te muestra a un lado el resultado final y al otro el código CSS necesario.

Espero que con todas estas pautas seas capaz de elegir las tipografías que mejor se adapten a tu web.