Cómo elegir las fuentes adecuadas para su sitio web

La marca de su tienda en línea está compuesta por muchos componentes diferentes; Desde los colores y el logotipo hasta el idioma que utiliza, así como la calidad de su servicio para el cliente. Y, por supuesto, las fuentes son una gran parte. Las fuentes que usa en su sitio sirven en gran medida para establecer el sentido de su marca: profesional, extraño, serio, divertido, etc. También juegan un papel muy importante en dar una excelente experiencia a sus visitantes, incluidos aquellos con visión. Deficiencias. Pero, ¿cómo eliges las fuentes correctas y cómo las usas de la mejor manera posible?
Una introducción a las fuentes y fuentes para dar un paso atrás por un momento. Probablemente esté familiarizado con las fuentes como Times New Roman, Helvetica y Muy Docamat Comic Sans. Pero, ¿qué son exactamente? Bueno, un tipo de letra es una representación digital del texto que contiene varios estilos diferentes. Por ejemplo, Helvetica tiene 36 opciones diferentes que incluyen:
Helvetica Light (versión delgada)
Helvetica oblicua (versión con cursiva)
Helvetica Bold (versión en negrita)
Helvetica Black (una versión aún más gruesa y audaz)
Helvetica condensado (una versión de letras que están más cerca)
Helvetica redondeado (una versión con letras redondeadas)
Una fuente es muy específica, con pesos y estilos precisos. Entonces, Helveticica Bold es una fuente, mientras que Helvetic es una fuente. Para el propósito de este artículo, usaremos los términos “fuente” y “fuente” indistintamente.
Hay cuatro tipos principales de fuentes de los que puede elegir y combinar y coincidir para crear la sensación adecuada para su sitio. Las fuentes serif incluyen dibujos adicionales agregados a ciertas letras, mientras que las fuentes sans serif omiten esas líneas. Puede ver a continuación un ejemplo de letras con y sin serif: en general, las fuentes serif son más tradicionales y son una excelente manera de emitir conocimiento y confianza. También pueden ser más fáciles de leer, porque la serie ayuda a definir cada letra individualmente. Las fuentes sans serif están limpias y pueden sentirse más accesibles que sus homólogos. Todavía son simples y fáciles de leer en grandes cuerpos de texto.

Las fuentes escritas a mano se parecen mucho a la escritura a mano y a veces están muy decoradas. Algunos son mucho más fáciles de leer que otros y varían mucho con estilo. Aquí hay unos ejemplos:
Como puede ver, uno es muy elegante, mientras que el otro se ve mucho más amigable. Las fuentes de exhibición son increíblemente diferentes e incluyen lo que se pueda considerar decorativo. Varían mucho en términos de apariencia y sensación, pero generalmente se usan solo para títulos. Aquí hay tres ejemplos diferentes de fuentes de pantalla:

Estos tres no se parecen demasiado, ¿no? Pero soy una excelente manera de establecer la sensación de marca.

Cómo elegir e implementar bien las fuentes correctas, ahora que hemos establecido los elementos básicos, veamos algunos consejos útiles para elegir las fuentes adecuadas para su tienda en línea. 1. Considere la legibilidad que debe leerse todo el punto del texto, por lo que la legibilidad debe considerarse primero al elegir una fuente. Después de todo, si los visitantes no pueden leer su mensaje de texto, no pueden averiguar sus productos o su negocio, ¡y mucho menos hacer una compra! El texto de su cuerpo casi siempre debe ser una fuente serif o sans serif, ya que facilitan la lectura de párrafos o grandes bloques de texto para los visitantes. Guarde las fuentes de pantalla y script para valores e, incluso entonces, asegúrese de que puedan entenderse fácilmente. Hay tres consideraciones de espaciado principales:
KERNING: El espacio entre dos letras. La abrazadera correcta asegura que cada palabra sea individualmente legible y que una palabra no se vea como dos.
Interfaz: la distancia entre dos filas de texto. El líder correcto hace que los párrafos de texto sean mucho más fáciles de leer.
Seguimiento: controla el espacio de letras en palabras en su conjunto, en lugar de personajes individuales. Entonces, en lugar de ajustar solo el espacio entre “T” y “H” en la palabra “esto”, ajustaría la distancia entre las cuatro letras simultáneamente.
Aquí hay una ilustración de los tres:
Idealmente, la distancia entre filas y letras facilitará la lectura de las personas, especialmente en forma de párrafo. No te preocupes; ¡Encontrar más sobre esto puede ser divertido! Hay algunos juegos geniales en línea que te dan práctica. 2. Piense en la identidad de la marca La identidad de su marca es lo que lo diferencia. Es la personalidad de su negocio. Y las fuentes que elija son un componente que muestra esa personalidad a los clientes potenciales y existentes. Entonces, ¿qué sentimiento quieres invocar en tu sitio? ¿Divertido y extraño? Profesional y confiable? Sofisticado y elegante? Echemos un vistazo a cómo algunos sitios usan fuentes para representar su marca. Scratch Pet Food tiene una marca súper amigable y sus fuentes reflejan esto. Utilizo un serif extra audaz para títulos y un sans más fácil para el texto.
FLWR es un estudio de diseño floral y, debido a que diseñan para eventos especiales como bodas, es lógico que sus fuentes sean elegantes y hermosas. Combine un serif moderno y un alero delgado para un aspecto personalizado que coincida con sus ramos.

El sitio corporativo de Ryanair es, bueno, corporativo, y sus fuentes reflejan esto. Eligieron versiones de la misma fuente simple y profesional para títulos y texto del cuerpo. Es profesional, sin parecer obstruido.

¿Ves cómo estas tres compañías usan fuentes para transmitir la sensación de que quieren que las personas se asocien con su marca? Usted puede hacer lo mismo. Ni siquiera tienes miedo de jugar con las fuentes hasta que encuentres el aspecto perfecto. 3. Respete solo unas pocas fuentes Aunque puede ser tentador incorporar todas las grandes fuentes que puede encontrar en su sitio, querrá quedarse solo unas pocas. De lo contrario, su tienda puede parecer desconectada en todas partes y puede crear una experiencia inquietante para los visitantes. Al elegir fuentes, asociarlas en diferentes escenarios para ver si funciona bien juntos. Puedes elegir una fuente para títulos y otra para el texto. También puede usar variaciones en una fuente, como Bold o Superior, para distinguir el texto sin alejarse de la misma familia de fuentes. Utilizo una versión en negrita, en letras mayúsculas, para títulos y una versión más fácil para el texto. Pero para agregar aún más personalidad, ocasionalmente usan una fuente de guión que imita el caramelo incluido en sus productos. Este script, cuando se usa con moderación, es efectivo para resaltar conceptos importantes y hacer que su sitio se sienta auténtico y único.

Scrollino, una tienda que vende productos para niños, utiliza una fuente súper accesible y alegre para sus títulos. Lo combina con un sans limpio y simple para el texto del cuerpo para una atmósfera legible y divertida.

4. Elija el tamaño de fuente correcto es importante que su texto sea lo suficientemente grande como para leer los visitantes del sitio, incluidos aquellos con impedimentos visuales.En general, 16px es el tamaño mínimo que debe usar, aunque puede variar según la fuente.Por ejemplo, algunas fuentes son más difíciles de leer cuando son más pequeñas.Si es posible, solicite a las personas reales que revisen su texto y vea si es fácil de leer.Y asegúrese de revisarlo en dispositivos de todos los tipos de DESKTOPS, tabletas y teléfonos móviles.Herramientas como Screenfly simplifican este proceso.
Heggerty, una empresa que ofrece un plan de estudios y otros recursos para los maestros, utiliza dimensiones agradables de grandes fuentes. Aunque no son tan grandes como para hacerse cargo del diseño, son simples y fáciles de leer en todos los dispositivos. 5. Considere la accesibilidad al hacer un sitio web asequible, haga que sea fácil de usar para cada visitante, incluidas las personas que tienen deficiencias físicas o mentales. Hay una variedad de cosas que puede hacer para mejorar la accesibilidad de su tienda en línea, incluida la optimización del uso de fuentes. Una de estas cosas es asegurarse de que su texto sea lo suficientemente grande como para ser leído y no demasiado complicado, como se discutió anteriormente. Pero quieres considerar el contraste de color. Debe asegurarse de que su texto sea fácil de leer, independientemente del fondo sobre el cual sea, ya sea un color, modelo o imagen sólidos. La relación de contraste varía de 1: 1 (blanco en blanco) a 21: 1 (negro sobre blanco). La relación de contraste que está buscando con el texto es de aproximadamente 7: 1 para el texto y 4.5: 1 para títulos. Puede usar la herramienta de accesibilidad de onda para analizar su sitio en busca de relaciones de contraste de color, así como otros factores de accesibilidad.

Track 7 Brewing hace una excelente tarea de contraste de color en fondos oscuros.En su página inicial, uso un texto blanco brillante o naranja, para que se destacen de la imagen oscura detrás de ella.6. Evite todas las letras mayúsculas en los párrafos, aunque todos los mayúsculas pueden ser excelentes para hacer una declaración, pueden ser muy difíciles de leer en los cuerpos de texto.Nuestro cerebro simplemente encuentra problemas para procesar el texto en forma de párrafo, lo que hace que la lectura sea más lenta y difícil.


Entonces, si desea usar todas las letras mayúsculas, úsela con moderación y solo en títulos. Esto se desvía: todas las letras mayúsculas son muy efectivas para hacer puntos y llamar la atención sobre su sitio, pero lo evita en los párrafos. ¿Pero las fuentes seguras para la web? Los navegadores juegan y cargan diferentes fuentes en la web. Las fuentes seguras para la web son las que se ven geniales y se cargan correctamente en cada navegador y en cada dispositivo. Y, aunque no necesariamente tiene que omitir las excelentes fuentes personalizadas que ha elegido para su marca, desea agregar opciones web seguras a su pila de fuentes: la colección de fuentes que usa en su sitio. Esto establece, en esencia, una Fuente de respaldo para su tienda y le brinda control total sobre cómo se muestra el texto si, por alguna razón, su fuente personalizada no se cargará para un visitante. Por ejemplo, puede decirle a los navegadores que usen PlayFair si su fuente personalizada no está disponible, Georgia si PlayFair no es una opción y una fuente predeterminada serif si ninguno de ellos funciona. Kinsta ofrece algunos consejos excelentes para agregar fuentes de repuesto seguras a su sitio web donde puede encontrar fuentes para su sitio, entonces, ¿cómo encuentra excelentes fuentes para su tienda en línea? El primer paso es asegurarse de que tenga derechos legales para usar cualquier opción que elija. Algunos son gratuitos para todos los fines, otros son premium para todos los fines y otros son gratuitos para uso personal. Tómese el tiempo para comprender cómo funciona la licencia para sus fuentes. Aquí hay algunos recursos excelentes para fuentes para sitios web:
Google Fonts: Google Fonts tiene una enorme biblioteca de fuentes disponibles, que son gratuitas para uso personal y comercial. También puede usar sus herramientas para obtener una vista previa de las fuentes en acción. Su bolso: muchos temas de WordPress incluyen bibliotecas de fuentes, a veces de fuentes como Google Fonts, que puede usar en su sitio web.

Mercado creativo: un mercado en línea para activos digitales, Creative Market ofrece algunas fuentes verdaderamente hermosas y únicas en una variedad de estilos.

Font Squirrel: este recurso ordene las fuentes por categorías y le permite obtener una vista previa. Pero tenga cuidado, algunas opciones son solo para uso personal, así que asegúrese de saber qué tipo descarga.

Fuentes de Adobe: estas son fuentes de alta calidad disponibles para empresas que tienen licencias creativas en la nube.
Cómo cambiar la fuente en su sitio web de WooCommerce ahora que ha elegido sus fuentes, es hora de aplicarlas en su sitio. Hay tres formas principales de hacer esto: 1. Use su tema como mencionamos anteriormente, muchos temas incluyen una biblioteca de fuentes. Algunos le permiten aplicar esas fuentes a su sitio en su propio panel de configuración. O puede configurar esas fuentes usando el personalizador de WordPress:
En el tablero de WordPress, acceda a la apariencia → Personalización.
Haga clic en la opción Fonturi.
Abra el menú desplegable para cada tipo de títulos de texto, fuente básica, etc. – y seleccione una fuente. Cada vez que cambie las fuentes, se actualizará la vista previa de su sitio, por lo que puede probar cómo se verá antes de aplicarlo.
En el personalizador, también puede ajustar las opciones para el estilo de fuente (en negrita, en cursiva, etc.) y el tamaño. 2. Use un complemento si su tema no incluye fuentes o no ofrece las fuentes que desea usar, la siguiente opción más simple es usar un complemento. Hay una variedad de opciones disponibles, pero si desea usar una fuente de Google, entonces WP Google Fonts es excelente. Proporciona acceso a toda la biblioteca de Google Fonts, luego le permite aplicar fuentes individuales en diferentes áreas de su sitio, como encabezados, párrafos y listas. Si desea usar una fuente personalizada por otro lado, pruebe las fuentes del complemento. Le permite cargar sus propias fuentes e incluso integrarse con temas populares y creadores de páginas para una configuración más simple. 3. Use el código personalizado Si está familiarizado con el código, tiene otras dos opciones: fuentes de host en su propio sitio y use el código para aplicarlos a las áreas de texto
Cargar fuentes de una fuente de terceros (como Google Fonts) y ponerlas en la cola
Para obtener más detalles e instrucciones, consulte este artículo en Kinsta. ¡Sea creativo, pero no olvide que es mejor divertirse con sus fuentes! Sea creativo con su marca y elija las opciones que mejor representen los sentimientos de su empresa. Pero al mismo tiempo, recuerde que el camino a menudo es simple. Elija fuentes fáciles de leer que no se vuelvan demasiado complicadas usando cuatro o cinco opciones diferentes. Su audiencia debería ser su prioridad.