Diseñar un sitio web de servicios a domicilio Maximizar el compromiso del usuario con fuentes sencillas
La fuente de su sitio web es esencial para comunicarse con sus clientes. Pero, ¿cómo eliges una fuente que te ayude a hacer esto? Todo comienza con conocer a tu audiencia. ¿Y quién mejor para conocer a tu audiencia que tú?
Además, la elección del tipo de letra debe estar en consonancia con lo que buscan sus clientes. Por ejemplo, si se dedica a la limpieza y elige un tipo de letra recargado y de estilo grunge, puede perjudicar a su cliente, que busca limpieza y sencillez.
Los pequeños detalles a tener en cuenta pueden suponer una gran diferencia para su público. A continuación le explicamos cómo seleccionar un tipo de letra sencillo para su sitio web que funcione para sus clientes y su negocio.
Fuentes básicas
Una fuente es un grupo de caracteres que vienen en un estilo y tamaño particulares, y su propósito es mostrar texto. Al buscar fuentes, también puede ver la palabra 'tipo de letra' referenciada.
¿Cuál es la diferencia? Un tipo de letra es un nombre colectivo para la familia de fuentes (por ejemplo, Helvetica® es un tipo de letra). Las fuentes son los estilos y el peso de los caracteres dentro del tipo de letra (por ejemplo, Helvetica ® Light).
A veces se usan indistintamente. A los efectos de este artículo, nos referiremos a ella como una fuente.
Marca y recursos
Marca y fuentes
Si ha trabajado con un diseñador para que le ayude a diseñar su marca, utilícelo como base. Tal vez tengas unas directrices de marca (si es así, ¡fantástico!) o sepas qué fuentes utilizan tu logotipo o tus materiales de marketing.
Es importante que el tipo de letra sea coherente en las distintas plataformas. Esto permite que tu marca sea coherente y ayuda a tus clientes a reconocer tu negocio.
Según un estudio de Lucidpress, la presentación consistente de la marca en todas las plataformas puede aumentar los ingresos hasta en un 23%.
Bibliotecas y herramientas de fuentes
La buena noticia es que existen varias bibliotecas y herramientas de fuentes para que las uses. ¡Enumeraremos algunos a continuación! Asegúrese de verificar la licencia de la fuente que elija y de que puede usarla en su sitio web.
A menudo, las fuentes son una forma de software para la que debe adquirir una licencia.
Consejo útil: Tenga cuidado si está descargando una fuente gratuita para su sitio web. Puede ser solo para uso personal — no comercial, ¡así que siempre verifique la licencia!
Algunas bibliotecas de fuentes en línea son
Google Fonts
MyFonts
Adobe Fonts
Fontspring
Consejo útil: Si está utilizando fuentes de Google, use la barra' Escriba algo ' en la parte superior de la página. Aquí, puede escribir su texto preferido para ver cómo se ve y si es ideal para sus clientes.
Elección y uso de fuentes
Puede que encuentre un tema común en este artículo: tenga siempre presente a su público. Cuando busque un tipo de letra para su sitio web, piense en el que mejor se adapte a su público.
Por ejemplo, si sus clientes son personas mayores, es importante buscar una fuente sencilla que sea legible y clara en tamaños grandes. En este caso, evite utilizar tipos de letra más decorativos, ya que serán más difíciles de leer.
También es importante tener en cuenta el color de la propia fuente y cómo contrastará con el fondo de su sitio web. Si el color de la fuente se funde con el fondo de su sitio web, puede disuadir a los visitantes, ya que dificultará la lectura.
Lo último que quiere es ahuyentar o disuadir a los visitantes de su sitio web porque la legibilidad del mismo es deficiente. Incluso si algo parece estéticamente agradable, si dificulta la lectura a su cliente, no merece la pena hacerlo.
Recuerde también considerar qué dispositivos utilizará su audiencia para ver su sitio web. Asegúrese de haber seleccionado una fuente simple que funcione, sin importar el dispositivo. Un estudio de Think with Google descubrió que es poco probable que el 61% de los usuarios regresen a un sitio móvil al que tuvieron problemas para acceder, y que el 40% visite el sitio de un competidor.
Consejo útil: Al buscar fuentes para su sitio web, se encontrará con los términos Serif y Sans-Serif. ¿Cuál es la diferencia? Las fuentes serif tienen una línea decorativa o' pies ' en sus caracteres, mientras que las fuentes Sans-Serif no.
Dependiendo de su audiencia y su marca, puede que use una de las dos para la fuente de su sitio web, o puede usar ambas si hacen una buena pareja.
Número de fuentes a utilizar
No recomendaría seleccionar más de dos fuentes para su sitio web. Una o dos fuentes simples son suficientes para crear una estructura que su audiencia pueda seguir (piénselo como un periódico).
Más de dos fuentes pueden comenzar a ser confusas y hacer que su audiencia no sepa dónde buscar en la página.
Si tiene una fuente en mente pero no está seguro de que funcione bien para sus encabezados o texto de párrafo, hay una variedad de herramientas de emparejamiento de fuentes que puede usar como emparejador de fuentes. Una de estas herramientas de emparejamiento es FontPair.
Consejo útil: No hay nada de malo en ceñirse a una fuente (¡algunas fuentes están felices de ser pringles solteras!). Pueden funcionar muy bien para encabezados y texto de párrafos por sí solos.
Tamaños y estilos de fuente
Ha seleccionado sus fuentes. Ahora, solo necesita determinar qué tamaños y estilos de fuente usará en todo su sitio web.
Esto le permite establecer estilos definidos y consistentes, dando a los visitantes de su sitio web una estructura clara que pueden seguir. ¡También le ahorrará mucho tiempo a largo plazo, ya que tendrá una guía para usar en el futuro!
Hay tres cosas en las que pensar aquí: tamaño de fuente, estilo de fuente y altura de línea. El tamaño de la fuente es el tamaño de los caracteres cuando se muestren en su sitio web.
A menudo se mide en puntos (pt) o en píxeles (px) en computadoras. La altura de línea o el espaciado entre líneas es el espacio vertical entre líneas de texto.
Esto es importante porque tiene un gran impacto en la legibilidad general del texto. ¿Alguna vez ha notado que a veces el espaciado entre párrafos parece un poco demasiado cerca?
Esto se puede corregir con la altura de línea. Con la altura de línea, es importante hacerla más grande que el tamaño de la fuente.
Para la legibilidad, trate de apuntar a alrededor del 140% – 180% más grande que su tamaño de fuente. Por ejemplo, si su tamaño de fuente es de 32px, intente multiplicarlo por 1.5 para obtener su altura de línea (y, por supuesto, puede ajustarlo en consecuencia).
A continuación se muestra un ejemplo de un grupo de tamaños y estilos de fuente para la versión de escritorio de su sitio web:
Encabezados principales (para sus títulos principales)
Tamaño de fuente: 32px. Altura de línea: 48px.
Estilo de fuente: Extra audaz. Esto le dará a sus encabezados una distinción muy clara, ya que son más pesados y más grandes. Pero aún son notablemente más grandes que el texto del párrafo principal.
Subtítulos (para sus títulos de servicio)
Tamaño de fuente: 26px. Line-height: 39px.
Estilo de fuente: Medio. Esto le dará a sus subtítulos una distinción clara, ya que no son tan pesados y son más pequeños. Pero aún son notablemente más grandes que el texto del párrafo principal.
Texto de párrafo (su texto principal)
Tamaño de fuente: 18px. Altura de línea: 27px.
Estilo de fuente: Normal. Esto le dará a su texto de párrafo un estilo de lectura limpio y claro que permitirá a sus clientes leer fragmentos de texto más grandes con facilidad.
Texto de enlace (para hipervínculos en su texto de párrafo – esto probablemente será de un color diferente también)
Tamaño de fuente: 18px. Altura de línea: 27px.
Estilo de fuente: Medio. Si los enlaces de texto están en el cuerpo principal de su texto, tener un peso de fuente mediano enfatizará los enlaces entre el resto del párrafo (para que su audiencia sepa que se puede hacer clic en ellos).
Example for mobile devices
Encabezados principales (para sus títulos principales)
Tamaño de fuente: 28px. Altura de línea: 42px.
Estilo de fuente: Audaz. Debido a que sus usuarios verán su sitio web en un dispositivo más pequeño, la negrita es suficiente para que sus encabezados no se muestren con demasiada dureza en una pantalla más pequeña, pero aún se destaquen entre sus otros estilos de fuente.
Subtítulos (para títulos de servicio)
Tamaño de fuente: 24px. Altura de línea: 36px.
Estilo de fuente: Medio.
Texto de párrafo (su texto principal)
Tamaño de fuente: 16px. Altura de línea: 24px.
Estilo de fuente: Luz. Una idea similar a tener encabezados en negrita en dispositivos móviles, light solo asegurará que el texto del párrafo siga siendo fácil y claro de leer y que no sea demasiado duro para la vista.
Texto de enlace (para hipervínculos en su texto de párrafo – esto probablemente será de un color diferente también)
Tamaño de fuente: 16px. Altura de línea: 24px.
Estilo de fuente: Normal. Contrastará muy bien con el texto del cuerpo ligero para que aún se enfatice, pero no tanto como para que parezca fuera de lugar.
Consejo útil: Para líneas de texto más largas, intente limitar el número de caracteres a 40-60 caracteres. Esto hace que sea más fácil de leer y digerir. Según el Grupo Nielsen Norman, las longitudes de línea más cortas generalmente son más fáciles de leer y más fáciles de usar.
Errores comunes que deben evitarse
Usar demasiadas fuentes: Quédese con una o dos fuentes para mantener la coherencia y la legibilidad.
Elegir fuentes demasiado decorativas: Evite las fuentes que sean difíciles de leer o demasiado estilizadas para su audiencia.
Ignorar la legibilidad: Asegúrese de que su fuente sea fácil de leer en todos los dispositivos y tamaños de pantalla. Un estudio de Adobe descubrió que el 68% de los consumidores cree que una empresa con una fuente legible es más profesional.
Contraste pobre: Elija colores de fuente que se destaquen contra su fondo para una mejor visibilidad.
Inconsistencia en la marca: Asegúrese de que sus fuentes se alineen con las guías de su marca en todas las plataformas.
No verificar la licencia de la fuente: Verifique que la licencia de la fuente permita el uso comercial en su sitio web.
Tamaños de fuente y alturas de línea inapropiados: Use tamaños de fuente y alturas de línea apropiados para mejorar la legibilidad.
Descuidar la accesibilidad: Seleccione fuentes que sean accesibles para personas con discapacidad visual. Las Pautas de Accesibilidad al Contenido Web (WCAG, por sus siglas en inglés) recomiendan una relación de contraste de al menos 4.5:1 para el texto normal.
No probar en diferentes dispositivos: Siempre pruebe cómo se ve su fuente en dispositivos móviles, tabletas y computadoras de escritorio. La investigación de Statista muestra que los dispositivos móviles representan aproximadamente el 54,8% del tráfico global de sitios web.
Omitir actualizaciones: Actualice regularmente sus fuentes para mantenerse al día con las tendencias de diseño mientras mantiene la consistencia de la marca.
Opiniones de expertos sobre la elección del tipo de letra adecuado
Jane Mitchell, diseñadora de UI / UX: "Elegir la fuente correcta para un sitio web de servicios para el hogar es como sentar las bases de una casa. Una fuente simple y limpia garantiza que la interfaz de usuario sea accesible y fácil de navegar. Los clientes que cambiaron a fuentes sans-serif simples como Arial o Helvetica informaron una caída del 15% en las tasas de rebote y una mayor retención de usuarios. Es un pequeño cambio con un gran impacto en la experiencia del usuario.”
Michael Carter, Especialista en Branding: "Las fuentes son una herramienta de branding sutil pero poderosa. Para los sitios web de servicios para el hogar, una fuente simple puede comunicar confiabilidad y profesionalismo. Una fuente compleja o excesivamente decorativa puede parecer elegante, pero puede confundir a los clientes potenciales. La estandarización de las opciones de fuentes impulsó el reconocimiento de la marca en más del 20% para algunas empresas.”
Laura Thompson, Consultora de Accesibilidad Digital: "La accesibilidad debería ser una prioridad para cualquier sitio web. Las fuentes simples desempeñan un papel crucial para hacer que el contenido sea accesible, incluso para los usuarios con discapacidad visual. Fuentes como Verdana y Tahoma mejoran la legibilidad y la inclusión. Los sitios web que priorizan la accesibilidad no solo cumplen con los estándares legales, sino que también experimentan una mayor satisfacción del usuario y un alcance de audiencia más amplio hasta en un 30%.”
10 min 
