Se suele descuidar la tipografía en los sitios web. Es una lástima, porque mejorando la tipografía es posible tanto mejorar el diseño de tu web como la legibilidad. En este artículo he recopilado 10 consejos sobre tipografía muy útiles que te ayudarán a hacer de tu web un sitio mucho mejor.
Alto de línea correcto
Uno de los errores más comunes de la tipografía en la web es definitivamente el uso incorrecto del alto de línea. El line height define el alto de línea de un texto, propiedad que debe estar acorde con el tamaño de la fuente.
Como regla general, siempre agrego 7px al tamaño de la fuente para ajustar la altura de la línea (siendo de 12 a 15 pixeles el tamaño de dicha fuente)
body{
font-size:14px;
line-height:21px; /* 14px + 7px */
}
Márgenes de título correctos
Otro error muy común es definir un margen incorrecto a los títulos. Un título está relacionado con un párrafo, pero no es un separador entre dos párrafos. Esta es la razón por la que un título (ya sea h1, h2, h3...) debe contar con un margen, tanto por arriba como por abajo.
No uses demasiadas fuentes
Para tener una web con un diseño profesional y legible, no debes utilizar más de tres fuentes distintas. El hecho de usar muchas fuentes puede ser confuso para el lector y puede dar una apariencia cutre a la web.
Por otro lado, utilizar pocas fuentes puede lograr que tu sitio web sea un sitio web limpio y 100% legible. Puedes usar una fuente para los títulos o encabezados, otra para el texto y, eventualmente, otra para el logo o, si eso, los subtítulos.
Usa fuentes monoespaciadas para mostrar snippets de código
Si eres desarrollador (como muchos de los que leéis esta web) probablemente quieras mostrar snippets de código en tu sitio web. Si esto es así, por favor utiliza fuentes monoespaciadas para llevarlo a cabo. ¿Que qué es una fuente monoespaciada? Es una fuente cuyas letras y caracteres ocupan siempre el mismo espacio horizontal, es decir, el mismo ancho.
Entonces, ¿qué fuentes puedo utilizar para mostrar snippets de código en una web? Courier es de lejos la más popular para ello, pero últimamente se están haciendo muy populares otras fuentes como Consolas o Monaco. Si no te has decidido por qué fuente utilizar, te recomendamos que eches un vistazo a este directorio de fuentes monoespaciadas.
Cuida el contraste
Incluso si tu web cuenta con una estupenda tipografía, otro punto a considerar es el contraste. Si el fondo de tu página es gris (#999999), no uses un gris fuerte (#333333) para el texto, de lo contrario tu contenido será difícil de leer, especialmente para personas mayores o que tengan discapacidades visuales.
Por lo general, exceptuando si tu sitio web es sobre piratería informática, SEO black hat o rock gótico, debes utilizar un fondo claro y una fuente oscura para lograr un alto contraste e incrementar así, la legibilidad de la web.
Los enlaces deben estar subrayados
Desde que llevo en esto del desarrollo web, alrededor de unos 10 años, el estilo predeterminado que se aplica a los enlaces en los navegadores es un texto azul con un subrayado. Aunque el azul se cambia a menudo por otros colores, el subrayado se ha reconocido desde entonces como el estilo genérico para los enlaces. Es por eso, que no debes utilizar nunca un subrayado en tu web, sino es para reforzar la idea de un enlace. De lo contrario puede ser confuso para tus lectores.
Crea una librería de estilos
Una manera simple y efectiva de hacer que tu sitio web sea visualmente impresionante es crear estilos específicos para usos específicos. Por ejemplo, ¿qué tal si creas una clase de CSS llamada .warning para mostrar advertencias a tus lectores?
Títulos y textos jerarquizados
Con el fin de facilitar la lectura, la creación de una jerarquía que conste de título, párrafo de introducción y texto normal es importante, ya que permite a los lectores visualizar los artículos de manera completa y acceder rápidamente a la parte que les interesa.
No tengas miedo de los espacios en blanco
Uno de los mejores consejos sobre tipografía que he recibido es "No tengas miedo de los espacios en blanco". El espacio en blanco no es un espacio vacío ni un espacio sin utilizar y hacen que tu diseño luzca mucho más profesional. Mucha gente ama la página web de Apple por esta razón: es sofisticada, pero simple, y tiene un montón de espacio en blanco.
Usa los símbolos correctos
Un punto importante a considerar su buscas mejorar la tipografía es el uso correcto de los símbolos. Por ejemplo, las comillas dobles se suelen utilizar más que las comillas para citas.
Nota la diferencia entre un texto con comillas dobles
Él dijo "Hola".
Y otro con comillas para citas.
El dijo “Hola”.
Mejor así, ¿verdad?