No hay forma de cuantificar todas las opciones de fuente disponibles para los diseñadores de sitios web. Casi todos los días aparece un nuevo tipo de letra en mi bandeja de entrada o en mi cuenta de Twitter. Pero no todos estos tipos de letra, por muy bonitos que sean, son adecuados para diseñar un sitio web.
Cuando se trata de seleccionar la fuente perfecta, ha pensado en una variedad de cosas que incluyen compatibilidad, tiempo de carga y propósito de diseño. Hoy tenemos siete consejos para ayudarlo a seleccionar y utilizar la mejor fuente web para su proyecto de diseño.
1. Comience con los Fundamentos
Trabajar con fuentes web es como cualquier otro proyecto de tipografía. Comienza con los fundamentos.
- Serif vs. sans serif: Existen otras categorías de tipos, pero en términos de diseño web, casi todos los proyectos se basan en una de estas opciones. (Y las tipografías sans serif son la opción dominante).
- Kerning, seguimiento y liderazgo: La cantidad de espacio que rodea al texto puede ser tan importante como el tipo de letra. El kerning es el espacio entre pares de letras; Mientras que el seguimiento es el espacio entre los dos personajes del grupo. Líder es la cantidad de espacio entre líneas de texto (también conocida como altura de línea).
- Legibilidad: Cuando se trabaja con texto para la web, el número de caracteres por línea puede ser importante. Piense en el tamaño de la pantalla donde aparecerá el texto y diseñe para que sea fácil de leer.
- Separación: Simplemente no lo hagas. Los guiones hacen un lío de texto en la pantalla.
- Alineación y justificación: Más aplicable a grandes bloques de texto, pero piense cómo se alineará el texto en la pantalla (izquierda, derecha o centro) y si los bloques de texto tendrán bordes irregulares o estarán completamente justificados.
- Número de tipografías: Como con cualquier proyecto, ¿no más de tres tipos de letra? A menos que tengas una muy buena razón.
- Recuerda el contraste: No importa qué tipo de letra seleccione si no hay suficiente contraste entre el texto y el fondo para que pueda leerse. Los elementos que contribuyen al contraste incluyen el tamaño, el peso del trazo, el color y el espacio.
2. Considerar la compatibilidad
Una de las cosas que dificulta la tipografía web es que los navegadores siempre están cambiando y obteniendo actualizaciones. Querrá seleccionar un tipo de letra que sea compatible con las interfaces web modernas utilizadas tanto en dispositivos de escritorio como móviles.
Suena fácil, ¿verdad? Puede tomar pruebas en múltiples dispositivos para encontrar algo que funcione a la perfección.
Tendrá aún más suerte si se adhiere a una familia de tipos diseñada para la web o si utiliza las opciones de Google Fonts o la regla @ font-face. (Puede aprender más sobre este último y cómo funciona a partir de Seis revisiones).
3. Usa un servicio
Hablando de fuentes de Google, muchos diseñadores optan por usar un servicio de fuentes web. Es una buena idea y puede hacer que muchos de los posibles problemas técnicos sean fáciles de superar.
Aparte de Google (probablemente la opción más popular), hay una variedad de otras opciones. Si bien Google Fonts es un servicio gratuito, los niveles de precios para los demás varían desde los niveles de opciones gratuitas hasta los kits más caros.
- Adobe Typekit
- Fonts.com
- Tipo de web
- Fuente tipográfica
Cada uno de estos servicios tiene miles de opciones de tipo y son bastante fáciles de usar. Lo bueno de cualquiera de estas opciones es que pueden proporcionar una biblioteca de tipos expansiva sin tener que gastar dinero en muchas fuentes individuales. El inconveniente es que la mayoría de los tipos de letra solo están disponibles para su uso en línea y no en proyectos impresos.
4. Ser considerado de tono y mensaje
Comience con el tipo. A veces, la selección de fuentes viene casi como una ocurrencia tardía; Las cosas se juntarán más fácilmente si determina las opciones de tipo primero. Luego piense cómo se reproducirá el texto con otros elementos de diseño como el color y las imágenes.
Elegir un tipo de letra puede poner tu cerebro en sobrecarga visual con todas las opciones disponibles. Es más fácil navegar por todo el desorden de fuentes si tiene una idea de lo que está buscando desde el principio.
Es vital asegurarse de que la tipografía que seleccione coincida con el tono y la mensajería del proyecto en el que está trabajando. Aquí hay algunas preguntas para ayudarte a planearlo:
- ¿El proyecto es formal o casual?
- ¿El texto debe ser en negrita o más claro?
- ¿Es el tipo de letra para texto grande o pequeño?
- ¿Cómo se emparejará con el color o las imágenes?
- ¿El estado de ánimo de las letras coincide con las palabras que se leen?
5. Está bien mirar sugerencias
Una de las cosas que Google Fonts hace excepcionalmente bien es que permite al usuario ver las combinaciones de fuentes y hacer sugerencias de combinaciones de fuentes. No hay vergüenza en el uso de una de estas opciones. (La biblioteca de Adobe Typekit también hace un gran trabajo al ayudar a los usuarios a seleccionar tipos de letra según la forma en que se usarán. Consulte las herramientas en el lado derecho de la pantalla para obtener orientación).
El emparejamiento de fuentes puede ser difícil. No es un traje fuerte para todos los diseñadores. Obtener ayuda está bien. Solo ten cuidado con las combinaciones de fuentes que se usan en exceso; La primera opción que veas podría ser la más utilizada.
Recuerde sus principios básicos de emparejamiento de fuentes y busque formas de letras que sean similares en humor, trazo y altura x. Piense en la forma y la inclinación de las letras y opte por tipografías con contornos similares. Es una buena idea mezclar y combinar estilos de tipo y seleccionar un par de serif y sans serif o un tipo de letra sans serif y novedad.
6. Piense en los tiempos de carga
Si una fuente no se carga rápidamente, busque otra opción. Los usuarios no tienen paciencia para sitios web lentos. No importa cuán impresionante sea el tipo de letra, necesita cargarse a una velocidad cercana a la del rayo para ser efectivo.
Al seleccionar un tipo de letra, compruebe su velocidad. (La mayoría de los servicios tipográficos lo ayudarán con esto, incluido Google). Luego piense en otras formas de reducir al mínimo los tiempos de carga.
- Utilice un número limitado de tipos de letra.
- Para cada tipo de letra, seleccione solo los estilos que planea usar.
- Elija solo los idiomas que usará para una fuente específica.
7. Sea selectivo
No tiene que usar Helvetica, Arial o Droid Sans para crear tipografía web. Tómese su tiempo y sea selectivo al seleccionar una paleta de fuentes.
Typewolf es un gran recurso cuando se trata de evitar las fuentes populares. El sitio se ubica entre las 10 opciones más populares en una variedad de categorías: serif, sans serif, slab serif, monoespaciado, etc. También tiene algunas listas divertidas para alternativas a los tipos de letra populares, como los mencionados anteriormente.
Bono: 10 grandes fuentes web
Abril Fatface
Losa de Josefin
Lato
Liga gótica
Open Sans
PT Sans
Losa de roboto
Estancamiento
Ubuntu
Vollkorn
Conclusión
Seleccionar una fuente web perfecta puede ser uno de esos procesos que se siente increíblemente gratificante, cuando encuentras la combinación perfecta, o que quieres que te saques el pelo, cuando nada parece funcionar. Pero puede trabajar con todas las opciones disponibles para encontrar un tipo de letra y un sistema que funcione para los proyectos de diseño de su sitio web.
¿Cómo se elige una fuente web? ¿Hay un proceso diferente a los pasos que hemos descrito anteriormente? Nos encantaría que compartieras tus consejos también en los comentarios.