Hola y bienvenido! Soy David Nieto, diseñador gráfico, webmaster y motion grapher 3D.
Me encanta diseñar y desarollar soluciones creativas.
¿Quieres que trabajemos juntos?. Envíame un mensaje.

Selecciona idioma
Blog de Diseño Gráfico
Haz una búsqueda en el blog

Tipografía en la web

Publicado el por Deividart - Visto 2377 veces - 2 comentarios

La tipografía es uno de los elementos principales que debemos definir al empezar a plantear nuestro proyecto web. no es recomendable escoger una tipografía a la ligera. Debemos tratar el texto como un elemento más de interfaz de usuario.
Un buen uso de la tipografía en la web aporta un toque de profesionalidad y personalidad a tus proyectos.

En los colores, cada uno representa una serie de valores y sensaciones dentro de su contexto, en la tipografía pasa exactamente lo mismo, la escogida definirá una serie de conceptos que tenemos que tener presentes una vez planteemos el diseño del proyecto web realizado. Es fundamental realizar un análisis de la fuente que asuremos para que transmita siguiendo los objetivos planteados.

Por lo general en una web su principal contenido será texto, por este motivo es muy importante cuidar la tipografía y presentarla de una forma adecuada. En este artículo veremos los conceptos tipográficos que debemos tener en cuenta a la hora de diseñar una web profesional.

No es aconsejable usar más de dos tipografía en una misma web. Habrá casos en los que sea útil pero no es lo común y llegado el caso hay que saber muy bien como usarlas. O también se puede usar una tipografía con distintos pesos para conseguir el contraste tipográfico que toda composición debe presentar.

tipografía web¿Serif o Sans Serif?
¿Qué fuente escoger? Os tengo que dar una mala noticia a los aficionados al diseño gráfico: las tipografías que mejor funcionan en impresión no tienen porque ser las que mejor se visualizan en web, al ser lenguajes diferentes. Lo más recomendable será realizar pruebas previamente con las tipografías que queramos utilizar en el proyecto web.

Varios estudios demuestran que sobre papel impreso las tipografías “serif” son más legibles, ya que sus remates en los extremos dan más información sobre los caracteres y facilitan fluidez en la lectura.

Por el contrario en los monitores y debido a su menor resolución en comparación con el papel, los pequeños remates aparecen menos definidos haciendo más complicada la lectura, así que, en la web es más recomendable utilizar tipografías “sans-serif”.

Contraste
Hay que diferenciar entre contraste de la tipografía en sí misma, que es la que presenta diferente grosor en sus trazos horizontales y verticales, y el contraste entre tipografías, que usaremos para enfatizar y resaltar un texto de otro para captar la atención del usuario. El contraste entre tipografías se puede conseguir de muchas maneras, jugando con el tamaño, el peso o las formas. El contraste, por ejemplo entre una Serif y Sans-serif es evidente.

Longitud de línea
A menor longitud de línea, mayor velocidad de lectura (esta es la razón de que los periódicos presentan su información en columnas). 

Una mayor longitud de línea requiere de un salto de mayor longitud de un punto de fijación ocular al siguiente. A mayor longitud del salto, más inexactitud en la siguiente fijación y por tanto mayor será la dificultad de lectura.

No hay una recomendación exclusiva en cuanto a la longitud máxima de línea pero se suele utilizar máximo correcto entre los 55-85 caracteres, incluidos espacios o unas 12 palabras por línea.

Si por el contrario utilizamos columnas muy cortas, el ojo se moverá mucho más rápido provocando una sensación en el lector de estrés.

Interlineado y kerning
El interlineado se ve afectado por muchos factores: el tipo de letra, tamaño, peso, tamaño de la caja, espacio entre las letras, etc. Debemos conseguir un equilibrio entre el tamaño de la tipografía y el espacio entre líneas para que la legibilidad del texto sea clara. Por regla general se establece un interlineado de un 150% con respecto al tamaño de la tipografía en la web.

El Kerning se enfoca en resolver conflictos, añadiendo o restando espacio natural entre dos caracteres. Si la tipografía está bien diseñada no tendremos que cambiar la configuración del kerning en el desarrollo de nuestra web. Aquí tenéis una web donde podéis “jugar” y probar el kerning: http://type.method.ac

Fuentes proporcionales y no proporcionales


No debemos confundir el kerning con el ajuste del espacio que ocupa cada letra.

En este sentido hablamos de dos tipos de fuente: las proporcionales y las no proporcionales o monospaced. En las proporcionales este espacio depende del carácter, por ejemplo una “r” ocupa menos espacio que una “m”. En las fuentes no proporcionales todos los caracteres ocupan el mismo espacio.
tipografía en la web
Otros aspectos que debemos tener encienta a la hora de usar la tipografía en la web son los siguientes:
• Las cursivas son poco legibles y por lo tanto poco recomendables, deberían usarse para pocas palabras y en caso necesario con tipografías de tamaño grandes.

• El subrayado es un recurso que en papel impreso se utiliza para enfatizar, sin embargo en la web no se debe emplear con este objetivo ya que da lugar a confusión con los vínculos.

• Las viñetas (bullets) y sangrías (indent) son recursos útiles para estructurar la información, separar conceptos, subordinar unos a otros, crear dependencias, etc. Bien utilizadas mejoran la  comprensión y facilitan la lectura de un texto.

GD Star Rating
loading...
Tipografía en la web, 3.0 out of 10 based on 1 rating

Comentarios

Publicado el por Juan

¿Por qué utilizas entonces en tu web casi treinta palabras por línea, además con una letra muy difícil de leer?

Publicado el por admin

Llevas razón Juan. Llevo un tiempo queriendo modificar la tipografía de la web, pero por diferentes proyectos que me han surgido no he podido dedicarme a ello.

Acabo de cambiar un poco la maquetación y sustituir la tipografía por otra más legible