Los colores se llevan toda la atención cuando un club arma su página web. Alguien pone la camiseta frente a la pantalla, la comisión directiva discute el tono exacto de bordó, y las fuentes quedan con lo que traía la plantilla.
Es una oportunidad perdida. La tipografía está en cada página, en cada título, en cada lista de partidos y en cada botón. Las fuentes correctas hacen que un sitio se sienta como tu club antes de que alguien lea una palabra. Las incorrectas lo hacen parecer una plantilla o, peor aún, lo hacen verse distinto en la pantalla de cada visitante.
Esta guía explica por qué la fuente que elegiste a veces no es la que ven tus visitantes, cómo elegir una combinación que le quede bien a un club, cómo hacer eco de tu logotipo sin copiarlo, qué tamaños funcionan en un celular y qué revisar antes de subir una fuente propia.
La fuente que elegiste no siempre es la que ven
Una página web no lleva sus fuentes adentro. Nombra una fuente, y el navegador del visitante tiene que encontrarla. Si el sitio web sirve el archivo de la fuente, todo el mundo la ve. Si la página solo la nombra, el navegador la busca en el propio dispositivo del visitante y, si no está instalada, la reemplaza por otra sin avisar.
Por eso el sitio de un club puede verse bien en la laptop del tesorero, que casualmente tiene la fuente instalada por un curso de diseño, y verse sin gracia en todos los celulares de la cancha. Nadie lo nota hasta que alguien compara capturas de pantalla.
Así que la primera regla es simple: elige entre las fuentes que tu sitio web realmente sirve. Una buena plataforma para clubes solo ofrecerá fuentes que puede entregar a cada visitante, o marcará con claridad las que no puede.
Elige dos fuentes, no cinco
La mayoría de los buenos sitios de clubes usan dos fuentes: una para los títulos y otra para todo lo demás. Algunos usan una sola fuente en dos grosores. Casi ninguno necesita tres.
- La fuente de los títulos aporta la personalidad. Puede ser gruesa, condensada, un poco inusual. Solo tiene que leerse bien en tamaños grandes.
- La fuente del texto transmite la información: horarios de entrenamiento, cuotas, el formulario de inscripción. Tiene que ser sencilla, abierta y fácil de leer en tamaños pequeños en un celular.
Las fuentes de exhibición altas y condensadas se ven muy bien en un banner principal y cansan en un párrafo. Resérvalas para los títulos y deja que una fuente sencilla haga el trabajo de lectura.
Combinaciones que le quedan bien a un club
Estas combinaciones usan fuentes de licencia abierta muy difundidas, y cada una va con un tipo de club distinto:
- Títulos en Oswald con texto en Open Sans. Condensada y deportiva arriba, amigable abajo. Una opción segura para fútbol, básquet y la mayoría de los deportes de equipo.
- Títulos en Bebas Neue con texto en Inter. Títulos todo en mayúsculas con aire de marcador, sobre una fuente de texto muy legible. Mantén los títulos cortos, porque Bebas Neue no tiene minúsculas.
- Títulos en Montserrat con texto en Source Sans 3. Limpia y moderna, funciona para casi cualquier club.
- Títulos en Playfair Display con texto en Lato. Más tradicional: le queda bien a un club de remo, golf, bochas o tenis con una larga historia.
- Títulos en Roboto Slab con texto en Roboto. Sólida y práctica, con un aire deportivo algo clásico gracias a sus remates rectangulares.
- Títulos en Merriweather con texto en Nunito. Cálida y cercana, buena para clubes comunitarios, juveniles y sociales.
Si tienes dudas, elige primero la fuente del texto. Una fuente de texto que se lea bien en un celular importa más que el título perfecto.
Haz eco de tu logotipo, no lo copies
Es tentador usar la tipografía del logotipo en todo el sitio. Muchas veces no se puede: las fuentes de los logotipos suelen ser comerciales, las compró una sola vez quien diseñó el escudo, y la licencia rara vez cubre un sitio web. Aun cuando la cubre, una fuente diseñada para un escudo suele funcionar mal en los párrafos.
Es mejor hacer eco del carácter del logotipo. Si el escudo usa una mayúscula gruesa y condensada, elige una fuente de títulos condensada. Si usa una serif tradicional, elige una fuente de títulos con serif. Los visitantes perciben el parecido de familia, no las letras exactas. Nuestra guía para diseñar el logotipo de un club trata el logotipo en sí.
Tamaños, espaciado y la prueba del celular
Las fuentes son solo la mitad de cómo se ve un texto. La otra mitad es el tamaño y el espacio.
- Texto de al menos 16 píxeles. Cualquier cosa más pequeña cuesta leerla en un celular bajo el sol.
- Títulos que se adaptan a la pantalla. Un título que se ve bien en una laptop puede ocupar cuatro líneas en un celular. Definir un tamaño mínimo y uno máximo, para que los títulos se achiquen de forma gradual en pantallas pequeñas, lo resuelve sin tener diseños separados para celular y escritorio.
- Espacio uniforme entre secciones. Elige un solo espaciado para todo el sitio en lugar de agregar huecos página por página. Un espaciado ajustado le queda bien a un sitio cargado de noticias; uno más amplio, a un sitio con fotos grandes.
- Tarjetas uniformes. Las tarjetas de eventos, noticias y contacto deberían compartir un mismo estilo de borde y sombra, para que el sitio se lea como un solo diseño.
Después, haz la prueba del celular. Abre el sitio en el celular más barato de la comisión directiva, al aire libre, y lee los horarios de entrenamiento. Si tienes que entrecerrar los ojos, agranda el texto. La guía de páginas web de clubes accesibles trata con más detalle el contraste y los tamaños legibles.
Usar la fuente propia de tu club
Algunos clubes tienen una fuente realmente suya: una tipografía que el club encargó o una que se compró para la marca. Usarla en la página web puede valer la pena. Revisa tres cosas primero.
- La licencia. Una licencia de fuente de escritorio te permite usarla en documentos e impresos. Por lo general no te permite poner el archivo de la fuente en un sitio web, donde cada visitante lo descarga. Busca una licencia "web" o "webfont", o pregúntale a la fundición tipográfica. Si la fuente vino con el logotipo, pregúntale al diseñador qué se compró.
- El formato del archivo. Los sitios web usan archivos WOFF2. Si tienes archivos TTF u OTF, tendrás que convertirlos, y la licencia también tiene que permitirlo.
- Los grosores. Necesitas un archivo separado para cada grosor que uses, normalmente regular y negrita. Sin un archivo en negrita, el navegador simula la negrita engrosando la regular, y se ve borroneada.
Si alguna de las tres es un problema, elige en su lugar la fuente de licencia abierta más parecida. Nadie en la cantina va a notar la diferencia, y nadie le va a mandar al club una factura por la licencia.
Revísalo en todas partes antes de publicarlo
Un cambio de fuente afecta a todas las páginas a la vez, así que míralo bien antes de publicar. Revisa una página con texto largo, una lista de partidos, un formulario y una página llena de botones, no solo el banner principal de la página de inicio. Revisa la vista en celular. Revisa los títulos con el título de página más largo que tengas. Si tu plataforma puede mostrarte todos los tipos de sección con el nuevo estilo antes de guardar, úsala.
Cómo funciona en ClubHelix
El editor de temas ofrece unas veinte familias tipográficas de licencia abierta, incluidas todas las fuentes mencionadas en las combinaciones de arriba, además de las fuentes del sistema. Cada una se sirve desde nuestros propios servidores, así que cada visitante ve la fuente que elegiste. Predeterminada del tema, al principio de la lista, devuelve un campo a la fuente estándar.
En el plan Pro, puedes subir las fuentes propias de tu club como archivos WOFF2, de hasta 500 KB cada uno, un archivo por grosor. Antes de subirla, confirmas que el club tiene licencia para usar la fuente en un sitio web. Si tu organización pasa a un plan inferior, las fuentes subidas se conservan pero no se usan, y vuelven cuando regresas a Pro.
El mismo tema define el espacio entre secciones, la sombra y el borde de las tarjetas, y los tamaños mínimo y máximo de los títulos y del texto, para que se adapten entre un celular y una computadora de escritorio. La pestaña Guía de estilo muestra todos los tipos de sección que puedes agregar a una página con el tema que estás editando, incluidos los cambios que todavía no guardaste. La página de temas e identidad visual explica todo lo que controla el tema, y los precios muestran qué incluye cada plan. Para estilos más allá del tema, consulta nuestra guía de CSS personalizado para páginas web de clubes.
Preguntas frecuentes
¿Por qué la fuente de nuestra página web se ve distinta en mi celular?
Por lo general, porque el sitio nombra una fuente pero no la sirve, así que tu celular la reemplaza por una que tiene. Elige una fuente que el sitio web entregue por sí mismo y se verá igual en todos los dispositivos.
¿Cuántas fuentes debería usar la página web de un club?
Dos: una para los títulos y otra para el texto. Una sola fuente en dos grosores también funciona bien. Más de dos suele verse desordenado y hace más lenta la página.
¿Podemos usar la fuente del logotipo de nuestro club?
Solo si la licencia cubre el uso web, cosa que las licencias de escritorio normalmente no hacen. Si no lo cubre, elige para los títulos una fuente de licencia abierta con un aire parecido y mantén el logotipo como imagen.
¿Las fuentes alojadas admiten otros idiomas además del inglés?
Cubren el alfabeto latino, que incluye la mayoría de los idiomas de Europa occidental. Las fuentes alojadas vienen en estilos rectos, y el navegador dibuja las cursivas a partir del estilo recto.
¿Qué archivo necesitamos para subir nuestra propia fuente?
Un archivo WOFF2 por cada grosor que quieras usar, como regular y negrita, y una licencia que permita usarla en un sitio web. Convierte primero los archivos TTF u OTF a WOFF2.
¿Quieres que la página web de tu club se parezca a tu club? Empieza gratis con ClubHelix y elige tus fuentes esta misma noche.
