La tipografía es a menudo pasado por alto – cuando se trata de diseño y uso – y que puede ser un error costoso. Después de todo, las opciones tipográficas pueden potencialmente hacer o romper el sitio web tanto como un mal diseño del mismo.
Si bien puede parecer un factor importante, las decisiones tipográficas pueden realmente atar el diseño de tu sitio juntos. Considera por ejemplo que las opciones de fuente de alta calidad pueden aumentar la legibilidad y permiten retener la atención del lector, entre otros beneficios.
En este artículo, explicaremos primero algunos de los términos tipográficos básicos que debes familiarizarte. Luego, nos sumergiremos en las tres acciones básicas que debes tomar para mejorar la tipografía de tu sitio.
Los términos básicos de tipografía que debes conocer
Puesto que vamos a explorar varias técnicas para mejorar la tipografía de tu sitio web, tiene sentido presentarte algunos términos tipográficos básicos.
Vamos a hacer un esfuerzo para evitar términos técnicos y mantener las cosas simples, pero la información a continuación sin duda será útil cuando se trata de recoger fuentes para tu sitio web.
Fuentes y tipos de familias
Muchas personas usan estos dos términos indistintamente en estos días, pero hay una sutil diferencia. En el diseño web, una fuente es técnicamente un archivo que genera un conjunto de caracteres en una tipografía, mientras que una familia de tipos se refiere a todas las variaciones que conservan un estilo similar (piense en cursiva, negrita, etc.).
Tracking
El seguimiento se refiere al espacio entre los caracteres. Por ejemplo, cuando justificas un párrafo para dar a sus líneas una longitud uniforme, lo haces aumentando el seguimiento entre letras.
Kerning
Kerning se refiere a las distancias entre cada letra. Normalmente se utiliza para garantizar que el espacio entre dos caracteres sea coherente con el espaciado de cualquier otro par dentro de una fuente.
Baseline
La línea de base, sencillamente, es la línea imaginaria en la que se sientan sus personajes. Obsérvese que los «descendientes», como la parte inferior de una minúscula ‘p’, se extienden por debajo de la línea de base.
Leading
El leading se refiere a las distancias entre líneas de base individuales. En otras palabras, es la distancia entre el fondo de cada línea.
3 maneras clave para mejorar la tipografía de tu sitio web
Mientras que la tipografía puede parecer un tema esotérico, seguir las mejores prácticas web es relativamente sencillo. Siempre y cuando sigas las prácticas básicas a continuación.
1. Elige las fuentes perfectas
Cuando decimos que debes elegir la fuente «perfecta», nos referimos a uno que complementa el estilo de su sitio web.
Nuestro blog, por ejemplo, se ocupa de temas técnicos y de instrucciones detalladas. Una fuente gótica extravagante iría definitivamente contra la estética del blog, así que en lugar de eso, fuimos con algo limpio y legible
Puedes estar inclinado a pensar que la elección de la fuente no importa demasiado, siempre y cuando sea legible, pero eso sería un error. Una nueva fuente puede revisar completamente la «sensación» de un sitio web, lo que debería ser evidente si alguna vez has jugado con estilos de fuentes múltiples. Hay algunas grandes diferencias en juego.
Elegir la fuente «perfecta» para su Web site vendrá sobre todo a sus propios gustos, pero hay otros factores a considerar además del estilo:
- Legibilidad. Su elección de fuente debe ser fácilmente legible en tamaños pequeños y grandes. Tómelo para una prueba de ejecución en varios navegadores y dispositivos antes de resolver.
- Compatibilidad. La mayoría de los sitios web emplean más de una fuente. Asegúrate de que tus selecciones se ven bien juntos; La consistencia es clave para una buena experiencia tipográfica.
- Creatividad. No tenga miedo de romper el molde un poco si encuentras una fuente que piensas que funciona bien. El mundo ya tiene suficientes sitios web construidos utilizando Helvetica – siempre y cuando se mantenga alejado de Comic Sans, no dudes en buscar el ajuste adecuado.
2. Establecer una jerarquía visual
Cuando se trata de tipografía, una jerarquía visual se refiere a una estructura global. Considera este artículo como un ejemplo – se divide en varias secciones separadas por subtítulos, pero no todos los subtítulos son iguales. Algunos son más grandes que otros, lo que hace evidente que son subsecciones.
La mayoría de las veces, no notamos jerarquías visuales en la web, pero es seguro decir que hacen que la experiencia del usuario sea más agradable. Una jerarquía visual sólida nos permite «escanear» páginas y artículos de manera más eficiente y encontrar la información que necesitamos más rápidamente.
No hay, simplemente, ninguna desventaja en la implementación de una jerarquía visual tipográfica lógica. Hay varios métodos que puede aprovechar para hacerlo, incluyendo:
- Tamaño. Esta es la forma más sencilla de establecer una jerarquía visual. Los lectores serán atraídos a los tamaños más grandes del texto primero, que se deben utilizar para denotar la información crítica y las nuevas secciones.
- Color y contraste. Las diferencias en el color y el contraste sirven el mismo propósito y las variaciones en tamaño. Si vas a ir por esta ruta, asegúrate de elegir colores complementarios.
- Textura. Cuando hablamos de «textura» en la tipografía, nos estamos refiriendo a las variaciones visuales, como negritas y cursivas. Ambos tipos siguen siendo la misma fuente, pero sus diferencias visuales le permiten diferenciar el contenido con facilidad.
3. Optimiza medidas de párrafo
Esta última técnica es menos llamativa que sus dos predecesores, pero no menos importante.
Cuando se trata de texto te sorprenderás al saber que hay una longitud de línea óptima para maximizar la legibilidad. La longitud de qué ancho se conoce como una «medida de párrafo». Tocar con sus medidas de párrafo puede parecer superfluo, pero puede hacer una gran diferencia.
Si tus párrafos son demasiado amplios, los visitantes pueden perder la pista de dónde comienzan y terminan. Por otro lado, si tu medida de párrafo es demasiado estrecha, sus ojos tendrán que viajar de regreso al inicio de la siguiente línea con demasiada frecuencia. Cualquiera de las opciones hace que la experiencia de lectura sea más incómoda de lo que debería.
La medida de párrafo ideal se sitúa entre 45 y 90 caracteres por línea. Todo lo que tienes que hacer es implementar esa medida en tus diseños para mejorar drásticamente su legibilidad.
Conclusión
Muchas personas tienden a pasar por alto la tipografía en lugar de otras consideraciones de diseño aparentemente más importantes. Aunque eso puede parecer razonable, es definitivamente un error.
Lo mejor de todo es que no necesitas convertirte en un experto para seguir buenas prácticas, basta con seguir nuestro consejo y estarás en camino hacia una gran experiencia tipográfica:
- Elegir las fuentes adecuadas para el sitio.
- Implementar una jerarquía visual.
- Optimizar medidas de párrafo.
