Fuentes y tipografías. Guía para principiantes

Qué tipos de fuentes y tipografías escoger para tu sitio web
Tabla de Contenidos

_ Te asesoramos sin compromiso _

Presupuesto diseño web​ ¿Tienes un proyecto en mente? Cuéntanoslo

En la actualidad, hay una gran variedad de factores que considerar en el diseño de páginas. No obstante, podemos decir que las tipografías para web son una parte indispensable del diseño. Solo basta con pensar en todos los diferentes usos de la tipografía en el site para darse cuenta que no sólo es una fase crucial de un diseño adecuado, sino es una combinación entre arte y ciencia. Se ha recorrido un largo camino desde el comienzo de Internet, pero el uso de las fuentes de letras es tan importante en la actualidad como lo fue hace años.

Cómo profesionales del diseño de páginas web en Asturias, vemos que todo lo relacionado con el ámbito del diseño cambia continuamente para ofrecer una interfaz atractiva al usuario. Por ello, cuando se desea diseñar un sitio web, se deben analizar cuáles son las últimas tendencias dependiendo de lo que se desee realizar.  

La tipografía en un sitio web busca coherencia de estilo entre la fuente, el tamaño, el color, el diseño, la alineación, y otros múltiples factores. A continuación, se describen algunos de los elementos tipográficos más importantes con que nos encontramos a la hora de desarrollar un sitio web.

psicologia fuentes raw

 

Tipos de fuentes a elegir

Dicho esto, entre las tipografías para web tienes que elegir fuentes de letras adecuadas dependiendo de la naturaleza de tu site, el público al que deseas atraer y la finalidad concreta de la página. Por eso te recomendamos que leas este artículo con detenimiento, ya que vas a descubrir cuáles son las claves concretas a considerar para optimizar tu web en este sentido.

Serif

En primer lugar, vamos a diferenciar entre dos grandes tipos de fuentes de letras, que son las Serif y las Sans Serif. En las mismas encontramos diferencias concretas.

En el caso de las Serif, recordemos que son aquellas cuyas letras tienen adornos como una especie de pie.

Este tipo de tipografía es más fácil de leer. Entre los detalles a diseccionar en esta fuente, sabremos que ciertas letras redondas son algo más grandes, lo que contrarresta el efecto óptico, ya que aparecen como agrupadas unas con otras.

Esta es la fuente adecuada para textos largos, ya que evita que se lean de forma monótona y sirven para que el lector siga las líneas sin problema alguno.

Entre las letras Serif más conocidas encontramos la Courier y la Times New Roman. Aunque no son las únicas, puesto que otras interesantes son la Book Atiqua, la Garamond, la Georgia o la Century Schoolbook, entre otras muchas.

Sans serif

Carece de detalle. Suele usarse para títulos y textos cortos. Así pues, también son llamadas de palo seco, ya que disponen de vértices rectos y no añaden remate.

Por lo general, esta es la tipografía más utilizada para rótulos que requieren de elevada visualización en pantalla. Por eso se usa una fuente que es de tamaño variable, pero incluso cuando es muy pequeña resulta muy legible.

Este, entre los muchos tipos de tipografía, es de los que no se recomienda para textos excesivamente largos, pues acaba por aburrir, puesto que sus letras resultan monótonas y difíciles de seguir.

Entre los tipos de fuentes de letras que encontramos en el grupo Sans Serif, las más llamativas son la Verdana, la Tahoma, la Impact, la Geneva, la Helvética, la Chicago, la Arial o la Century Gothic.

psicologia tipografia

Consideraciones generales para la tipografía web

Existen muchas diferencias en el tipo de manipulación de la impresión frente a lo que se presenta en la web. Es importante pensar cuando se realiza un diseño para un medio online en referencia con el texto son el contraste, el color, la legibilidad y el tamaño.

Es clave aclarar que los colores en una pantalla de monitor son creados por la luz, y se hace más importante pensar en el contraste porque quien vea la pantalla está esforzándose por mirar y leer el texto con poco contraste. Un ejemplo, el texto negro sobre un fondo blanco es fácil de leer, ya que proporciona un buen contraste. Sin embargo, la teoría del color y la elección del color juegan un papel sumamente importante en la tipografía web.

Empieza con el alcance de tu proyecto

Cuanto trabajes sobre las tipografías para web, considera cuáles serán las mejores según el alcance que darás al proyecto. Es decir, debes seleccionar los diversos tipos de fuentes de letras dependiendo del sector en el que tu site se tendrá que hacer un hueco, por ejemplo. Además, habrá que tener en cuenta estos detalles.

¿Qué quieres que diga tu fuente?

Entre los tipos de fuentes de letras, llegados a este punto, ten muy en consideración estas claves:

  • ¿Qué mensaje trasmitirás a tu público? Es decir, ten muy presente en todo momento la imagen que quieres que tus clientes potenciales tengan de tu proyecto. No es lo mismo representar a una empresa tradicional, para lo que se requieren tipos de letras más bien clásicas, que a una vanguardista, para lo que se buscarán tipografías para web que impacten, que llamen poderosamente la atención y que queden en la memoria del espectador como un elemento rompedor y diferenciador.
  • Sea como fuere, suele ser importante evitar que las tipografías elegidas y los tipos de fuentes resulten demasiado caligráficas o, en su defecto, con exceso de diseño. Por muy clásico o moderno que sea un proyecto, es necesario no marear ni confundir al visitante. Por eso es básico utilizar textos que sean legibles y que no resulten molestos para los internautas. Recordemos que es conveniente que los internautas pasen cuanto más tiempo mejor visitando los contenidos de nuestra web.
  • Es clave, eso sí, que las tipografías que elijamos tengan un significado o respondan a un propósito. Por ejemplo, si tu web versa sobre cómics, puede ser interesante una fuente tipo Impact. Si bien es meramente periodística o comunicativa, buscaremos alguna que no interfiera en la correcta lectura de los contenidos que, por lo general, pueden llegar a ser muy extensos.
  • Por último, es interesantes que usemos tipografías para web que creen impacto visual. Es decir, que llamen la atención del lector desde el primer vistazo. Con una primera mirada, el internauta podrá interpretar la finalidad de los tipos de fuentes de letras que hemos elegido para el proyecto.

psicologia tipografia 2

¿Cuánto texto tendrá tu web?

El punto anterior nos trae directamente a este. Las tipografías para web deben usarse con conocimiento para que se adapten bien a la naturaleza del site. Quiere decir que, dependiendo de la longitud de los textos, elegiremos unas u otras.

Como bien recordarás, al inicio de este texto hablamos de tipos de fuentes de letras específicos que dividíamos en dos grupos, Serif y Sans Serif:

  • Serif: recordemos que estos tipos de tipografía son ideales para textos más largos, ya que, por sus características descritas, resultan más interesantes y atractivas y mantienen la atención del lector durante más tiempo. Así pues, si somos un medio de comunicación, un blog, una web de descripciones y consejos o un site con textos amplios, será recomendable usar tipografías Serif para la web.
  • Sans serif: por el contrario, entre las mejores tipografías para webs que potencian lo visual por encima del contenido, utilizando textos cortos y grandes titulares, aprovecharemos los tipos de letras Sans Serif que, si bien en una lectura larga resultan más monótonos, son ideales para llamar la atención y crear un impacto específico en el visitante.

¿Qué importancia tiene cuando se trata del tamaño de la tipografía?

El tamaño de la tipografía es un factor importante a considerar al elegir los estilos de fuente. El texto que es demasiado pequeño es difícil de leer, pero el texto que es demasiado grande ocupa un excesivo espacio. Es recomendable procurar conseguir un tamaño que funcione bien con el diseño y sea fácil de leer.

Por tanto, hemos de considerar en todo momento elementos como las propiedades de la fuente y las propiedades del párrafo. Veamos brevemente en qué consiste cada una de ellas:

  • El tamaño mínimo recomendable de la fuente suele ser de 13 a 14 px. Cada tipo de letra es diferente y de diversas medidas, por lo que tendrás que adaptarlo según tu elección y necesidades. Pero recuerda, usa una tipografía que combine bien con cualquier dispositivo, teniendo en cuenta que más del 70% de las conexiones a internet que se realizan y se llevan a cabo por medio de smartphones, donde la pantalla es más pequeña. De ahí que la fuente deba tener un tamaño responsivo que se adapte al terminal y se lea cómodamente siempre.
  • Cuida mucho los contrastes de las tipografías con los fondos utilizados en el site. Tanto el color del texto como del tema en sí deben permitir que todo sea perfectamente legible. Es decir, no uses una letra roja oscura con un fondo rojo claro, por hablar de un ejemplo obvio, ya que será difícilmente distinguible y provocará que se reduzca mucho la legibilidad. No obstante, recuerda que puedes añadir sombreados y remarcados en los bordes de las letras para que se lean con mayor facilidad.
  • No abuses de las mayúsculas. Aunque son más grandes y visibles, también impiden que se lean cómodamente, por lo que ralentizan la lectura. Así pues, conviene utilizarlas en títulos o subtítulos, y, de ser necesario, en mensajes o palabras que queramos destacar como conceptos clave, pero que no sean demasiado extensos para no provocar incomodidad y rechazo en el lector.
  • Igual que sucede con las mayúsculas, en las tipografías para web debemos considerar que las cursivas también terminan por ser menos legibles y ralentizan la lectura. Es decir, tampoco es conveniente abusar de ellas.
  • Por último, las negritas y los subrayados excesivamente largos tienen el mismo problema. Por eso, a excepción de conceptos clave y títulos que necesiten un tamaño considerable y un remarcado especialmente llamativo, evítalas como abuso y como recurso demasiado común.

Debemos remarcar también las propiedades del párrafo, ya que, al hablar del tamaño de las tipografías para web, este elemento ha de combinar a la perfección, pues no pueden existir el uno sin el otro:

  • Calcula el interlineado del párrafo. La recomendación es que la proporción sea de un 20% sobre el tamaño de los tipos de tipografía que utilices. O sea, que, si estás escribiendo con una letra de tamaño 14 px, lo ideal sería multiplicarlo por 1’2. Es decir: 14 x 1,2 = 16’8 px.
  • Es interesante no utilizar el texto justificado. Veamos. Si haces uso del texto justificado, el hueco entre palabras para encajar las líneas va a provocar importantes delimitaciones el cada párrafo. Por defecto puede producir un efecto cascada que hace que el ojo humano se distraiga y puede hacer que nos saltemos de forma involuntaria de una línea a otra. Es preferible, así pues, evitar su uso.
  • Jugar con el entorno también permite aprovechar los espacios en blanco entre párrafos para que el lector descanse la mirada. Además, favorece que los visitantes se concentren mejor y no pierdan interés en su lectura.
  • No hay que olvidar en el tamaño de los tipos de tipografías la longitud recomendada de los párrafos. Es importante que cada uno de ellos sea de unas 40 palabras en total. Es decir, una extensión comprendida entre 40 y 70 palabras es ideal para que el lector no se distraiga, no se aburra y no pierda la concentración y el interés en lo que está viendo.
  • Recuerda que, según los datos, solo el 25% de los lectores leen realmente un texto en internet. El resto lo escanea, o sea, lo mira por encima o lo resume. Así que, el tamaño es muy importante y, además, el contenido también es básico, de ahí que haya que aprovecharlo al máximo para que sea óptimo en su cometido.

serif vs sans serif font infographic

Unidades de medida para las fuentes

Hay muchos parámetros que controlan la forma en que la letra y su tipología aparece en una página web. El tamaño de la fuente es sin duda importante. Las tres unidades más populares de medidas son:

Em

Es una forma ampliamente utilizada de medida tipográfica para diseños web, ya que funciona bien y le puede dar incrementos más finos de tamaño.

Porcentaje (%)

El uso de porcentajes para tamaños de fuente porque dan al usuario el control de volumen de fuente. Es decir, que se determina por la configuración de tamaño de fuente de su navegador adaptándose de forma responsiva.

Los píxeles (px)

Se miden con relación a la resolución de la pantalla y te dan un poco menos de control, ya que sólo se pueden utilizar números enteros.

Otras unidades posibles y menos populares de medidas son: puntos (pt), pica (pc), pulgadas (in), centímetros (cm), milímetros (mm), x espacio (ex).

Los puntos no se deben utilizar en sus páginas web, porque hay grandes diferencias entre los navegadores al utilizar puntos.

Estándar Web Site

¿Qué es una fuente segura o estándar web site? Estas fuentes constituyen un grupo selecto de fuentes que están disponibles en la mayoría de las computadoras. Esto es lo que actualmente limita opciones de fuente en la web.

Con la selección de las fuentes estándar Web site se tendrá un mejor control sobre el texto que aparecerá en todos los navegadores y sistemas operativos. El consenso de las fuentes más populares es:

  • Arial (Mac OS es equivalente Helvética)
  • Times New Roman (Mac OS es equivalente Times)
  • Verdana
  • Georgia
  • Courier

Otras fuentes populares son las que describimos a continuación: Impact, Lucida Console (Mac OS es equivalente Monaco), Lucida Sans (Mac OS es equivalente Lucida Grande), Palatino, Tahoma (Mac OS es equivalente Geneva), Comic Sans, Trebuchet MS.

fuentes tipografias medidas

¿Quién es tu público y qué idiomas habla?

Dicho esto, las tipografías que uses en tu web también requieren un enfoque básico dependiendo del tipo de público al que te diriges y, obviamente, del idioma principal que utilice en visitante medio. Es un detalle clave a considerar.

Por lo tanto, considera según tu público, su localización, sus gustos e intereses, elegir tipografía web siguiendo estas claves:

  1. Texto e imágenes y texto unitario. El efecto lo puedes aplicar también a las imágenes con texto, ya que en el contenido en sí es más limitado. Sin embargo, dentro de cada fotografía se pueden implementar cantidad de detalles, títulos, rótulos, menús y demás. Eso sí, procura que el peso de las fotos no sea excesivo para que no afecte a la experiencia de usuario y los tiempos de carga de cada página. Además, también podría provocar errores de indexación en buscadores y dificultad en la legibilidad en caso de fallos.
  2. Recuerda elegir un tamaño legible en los textos del propio diseño web, que no baje nunca de 12 px, a ser posible, sobre 13 o 14 px.
  3. Tipografías para web amigables con el navegador. Todo navegador de internet encuentra mayor facilidad para indexar, verificar webs y posicionar de forma natural aquellos sites que tienen una tipografía adecuada y que compagine perfectamente con el diseño de cada página y la arquitectura de la misma. De esta forma se localiza con más simpleza. Por eso, sea como sea tu lector y visitante habitual, no combines más de 3 fuentes en ningún momento.

¿Cómo sopesas la funcionalidad de una fuente frente a sus características de diseño?

Veamos ahora las mejores fórmulas para establecer la funcionalidad adecuada de los diferentes tipos de fuentes a tenor de las características del diseño que se ha elegido para una web. En este caso, consideraremos estos supuestos:

  1. Código web: en el punto del código de la página y su desarrollo informático, este detalle podría condicionar el uso de una u otra fuente. Si se elige mal, podrían aparecer caracteres no deseados porque no son legibles de forma correcta. Además, podrían desaparecer o estropearse algunos trazos de las letras. Es común que desparezcan las tildes, por ejemplo.
  2. Lectura de pantalla: además, hay que recordar que dependiendo de la pantalla que tenga el usuario, unos tipos de fuentes de letras se leen muy bien, pero otros no tanto. Por eso hay que tratar de elegir dependiendo del tipo de pantallas en que leen los usuarios y clientes potenciales de la web.
  3. La temática: las mejores tipografías para web dependerán de la temática del site. Hay tantas fuentes diferentes que se pueden elegir dependiendo de la publicación. Por ejemplo, para contenidos infantiles, legales, periodísticos, etc.
  4. Combinaciones posibles: recuerda, al combinar varios tipos de tipografías, ten en cuenta también los colores de la web y de las letras en sí, pues no todas concuerdan correctamente incluso siendo de la misma familia. No abuses de las fuentes y no te excedas en más de 3 de ellas.

Disposición de los textos en una página web

Cuando se desea diseñar un sitio web se debe tomar en cuenta el contenido que tendrá el mismo. Por eso es básico advertir que, en el momento en que se van a colocar textos de gran extensión, estos estarán divididos en párrafos no muy largos. ¿El motivo? Esto ayuda a que el usuario pueda leer de forma rápida un texto de corrido y sin que se pierda con facilidad.

Además, la división de párrafos es un elemento visual agradable a la vista y también un elemento decorativo. Se deben diferenciar los párrafos de los títulos y subtítulos para que la lectura e información se hagan ligera y amena. También es útil la creación de listas. Y es que las citadas listas se leen muy bien en pantalla, son fáciles de escanear y atraen la atención de visitante.

Estos elementos que suelen ser sencillos son necesarios porque forman parte de la estética y la factibilidad que debe poseer un texto para que los usuarios puedan seguir un ritmo de lectura y no se cansen y abandonen la lectura.

tipografias guia

Tipografía para dispositivos móviles

De nada sirve diseñar un sitio web con todas las recomendaciones dadas y de manera profesional si no se tiene en cuenta el diseño que requiere en los dispositivos móviles. El mundo actualmente se rige por la tecnología y cada día más personas utilizan y consultan desde sus smartphones y tablets. Por este motivo es necesario tomar en absoluta consideración este aspecto.

En el diseño web para dispositivos móviles, cambian un poco las reglas del diseño, pero existen las tipografías seguras para este medio:

  • Arial / Helvetica
  • Courier / Courier New
  • Georgia
  • Times / Times New Roman
  • Trebuchet MS
  • Verdana

Estas seis fuentes de tipografía se pueden utilizar sin ningún problema para las aplicaciones y sitios web en los dispositivos móviles. El uso de estas tipografías es 100% recomendable ya que ayudarán a mantener el bajo consumo de ancho de banda y el uso de recursos del sistema.

¿Qué pasa si quieres usar más de una fuente?

Ya hemos hablado largo y tendido de la necesidad de usar tipografías para web adecuadas a cada proyecto y que no abusen de una variedad excesiva en una misma página. Cuando las quieras combinar, considera que:

  • Si vas a usar dos, tres o más tipografías o tipos de fuentes de letras en una misma página, recuerda que deben contrastar y combinar a la perfección para que no queden forzadas, recargadas y excesivas.

Conclusiones

No olvides la vital importancia del uso de la tipografía correcta en cada proyecto. Para ello, considera que:

  • Tipografías como la Arial son muy sencillas y simples, fáciles de leer, pero también comunes, de ahí que carezcan de personalidad.
  • Una mala tipografía o una excesiva combinación de tipos de fuentes de letras puede arruinar un diseño web atractivo. Trata de cumplir las expectativas emocionales del visitante.
  • Utiliza siempre tipografías que marquen la idea de tu web, la personalidad del site y la comunicación que quieras transmitir a tus lectores y clientes potenciales.

Y ahora, ponte manos a la obra, elige las mejores tipografías para web de cuantas tienes disponibles y diseña la página perfecta que adoren tus clientes y visitantes.

Fuentes : Weba100, Weems, Urban fonts, Cliff Kuang / taylordesign.com

_ Te asesoramos sin compromiso _

Presupuesto diseño web​ ¿Tienes un proyecto en mente? Cuéntanoslo
One Response

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *