Para un sitio web profesional, elija una fuente de texto muy legible y, como máximo, una segunda familia para darle carácter a los títulos. Un sans-serif simple es adecuado para la mayoría de los sitios; un serif puede reforzar una imagen editorial, premium o patrimonial.
Guía escrita por SiteQuiVend, especialista en la creación y rediseño de sitios web y tiendas Shopify. Información actualizada en agosto de 2026.
¿Cómo reconocer una fuente profesional?
El profesionalismo proviene de un sistema tipográfico consistente. Antes de elegir un nombre conocido, evalúe las condiciones reales de uso.
Legibilidad
Las letras deben permanecer distintas en cuerpos pequeños: observe en particular la "i", "l", "I", los números y los acentos. Pruebe párrafos reales, no solo la marca.
Consistencia con el posicionamiento
Una geometría nítida puede evocar tecnología o modernidad; una serifa contrastante puede sugerir publicación o alta gama. El efecto debe respaldar la oferta sin caricaturizarla.
Familia suficientemente completa
Compruebe las grasas realmente disponibles, la cursiva, el acento francés, el símbolo del euro y los idiomas de los mercados objetivo. Una variante engrosada artificialmente rara vez da un resultado limpio.
Licencia y disponibilidad
Una fuente comercial requiere una licencia compatible con la web. En Shopify, las opciones disponibles dependen del tema; una fuente personalizada puede requerir integración técnica.
Serif, sans-serif, display: ¿qué familia elegir?
| Familia | Uso recomendado | Efecto frecuente | Punto de vigilancia |
|---|---|---|---|
| Sans-serif | Cuerpos, menús, botones, interfaces | Claro, moderno, directo | Algunas geométricas son frías o apretadas en los párrafos |
| Serif | Títulos, editoriales, marcas premium | Elegante, cultural, establecido | Los finos contrastes pierden nitidez en la pantalla chica |
| Pantalla | Ganchos muy cortos | Distintivo, expresivo | Evite párrafos, navegación y formularios |
| Minivan | Código, datos o detalles técnicos | Preciso, técnico | Cansado como fuente principal en un sitio comercial |
| Sistema | Sitios rápidos e interfaces sobrias | Familiar, eficiente | La renderización varía según el sistema operativo |
En la mayoría de proyectos, un sans-serif para el cuerpo es suficiente. Agregue una segunda familia sólo si crea una jerarquía útil. Multiplicar fuentes no enriquece el diseño: fragmenta la página.
¿qué asociaciones de fuentes debo utilizar en la práctica?
Estas combinaciones son instrucciones para probar, no recetas. Su disponibilidad depende de su tema, licencia y método de alojamiento.
Sobrio y versátil
Inter para títulos y texto. Los tamaños y grasas crean jerarquía sin multiplicar archivos. Esta solución es adecuada para servicios, SaaS y tiendas contemporáneas.
Moderno y accesible
Manrope por los títulos, Source Sans 3 por el cuerpo. El contraste sigue siendo discreto, con carácter en los ganchos y una lectura cómoda.
Premium y editorial
Playfair Display para títulos, Inter o Lato para el cuerpo. El serif aporta carácter; el sans-serif preserva la legibilidad. Reserva Playfair para textos cortos.
Familiar y comercial
Montserrat por los títulos, Open Sans por el cuerpo. Esta conocida asociación es clara. Su personalidad provendrá principalmente de colores, imágenes y diseños.
system-ui, -apple-system, "Segoe UI", sans-serif. Shopify recomienda considerar las fuentes del sistema, ya presentes en el dispositivo, para evitar descargas que podrían ralentizar la tienda.Tamaños, grasas y espaciado: la fuente no es suficiente
La tipografía profesional se basa más en la jerarquía que en el apellido. Aquí hay valores iniciales para adaptarse al diseño de fuente real.
Texto común
Comience alrededor de 16 px o 1 rem, con una altura de línea de 1,5 a 1,7. Una fuente visualmente pequeña puede requerir más.
Títulos
Cree espacios claros entre niveles. En dispositivos móviles, una escala fluida evita palabras cortadas y bloques demasiado altos.
Grasas
Son suficientes dos o tres pesos: regular para el texto, semi negrita para las referencias, fuerte para los títulos.
Ancho de lectura
Evite los párrafos que recorren toda la pantalla grande. Una línea moderada facilita pasar a la siguiente.
Las recomendaciones de accesibilidad de Shopify indican un tamaño corporal mínimo de 16 px y recuerdan que dos fuentes del mismo tamaño pueden parecer diferentes. El W3C también requiere que el contenido admita la ampliación del texto sin pérdida ni superposición.
¿Cómo preservar la velocidad y la accesibilidad?
Limitar archivos
Cargue sólo las familias, pesos, estilos y caracteres utilizados. La fuente de un logotipo en las imágenes no es necesaria en todas partes.
Elija un formato web
Para una integración personalizada, generalmente elija WOFF2 y proporcione una familia de ayuda cercana.
Evite el texto invisible
font-display comprueba la sustitución de la policía de urgencias. La elección entre swap, fallback o optional depende del compromiso visual y de rendimiento.
Prueba contenido real
Controla acentos, precios, botones, formularios y traducciones, luego nuevas líneas a 375 px y con zoom.
En Shopify, se ajusta la tipografía general Tienda online → Temas → Editar tema → Configuración del tema → Tipografía. Las fuentes disponibles las determina el desarrollador del tema. Duplique el tema antes de un cambio importante y también controle la página de pago, que tiene su propia configuración.
Referencias útiles: shopify configuración tipográfica, accesibilidad de los temas y buenas prácticas de rendimiento web.
Errores tipográficos que dan un aspecto amateur
Demasiadas familias diferentes
Tres o cuatro fuentes competidoras nos impiden comprender la jerarquía. Comience con una sola familia y luego justifique cada adición.
Una fuente decorativa para el cuerpo
La escritura a mano, estrecha o muy contrastante, puede funcionar en un gancho, pero se cansa rápidamente en una descripción, preguntas frecuentes o forma.
Contrastes demasiado débiles
Una grasa fina en gris claro sobre fondo blanco luce elegante en un modelo, pero resulta difícil de leer en una pantalla brillante o para una persona con discapacidad visual.
Cambie sin comprobar el tema completo
Una nueva fuente cambia el ancho de los botones, la altura de la tarjeta y las nuevas líneas. Inspeccionar casa, colecciones, productos, carrito de compras, formularios y móvil.
Si su tipografía es solo uno de los muchos signos de un diseño antiguo, compruébelo también señales de que una tienda Shopify carece de profesionalismo y la guía para actualiza una antigua tienda Shopify.
¿qué servicio SiteQuiVend debería elegir?
Tres recomendaciones se centraron en la claridad, la confianza y la experiencia del sitio. Este primer diagnóstico no reemplaza una auditoría completa.
3 solicitudes simples dentro del límite de una hora, anunciándose la primera respuesta dentro de 48 a 72 horas hábiles. La viabilidad depende del tema y alcance.
5 páginas o modelos clave, hasta 10 productos y 3 colecciones, con un plazo indicativo de 5 a 7 días hábiles después de la recepción de los elementos necesarios.
Las licencias, la integración de archivos personalizados, el desarrollo complejo y las intervenciones fuera del paquete se calculan por separado.
Lista de verificación antes de validar las fuentes de su sitio
Los 12 controles esenciales
- Una o dos familias como máximo.
- Hay acentos y símbolos disponibles.
- La licencia permite el uso web.
- El cuerpo permanece cómodo alrededor de 16 px o más.
- Los niveles de título son distintos.
- Las grasas no reemplazan la jerarquía.
- Los botones siguen siendo legibles y bastante anchos.
- El contraste es suficiente en cada fondo.
- Los párrafos no son excesivamente amplios.
- No se cargan archivos ni grasas innecesarios.
- El sitio opera con una fuerza policial de respaldo.
- Se han verificado hogar, producto, carrito de compras y móvil.
Preguntas frecuentes: Elegir fuentes de un sitio profesional
¿Cuál es la mejor fuente para un sitio profesional?
Ninguno es universal. Inter, Manrope, Source Sans 3, Open Sans o una pila de sistemas son bases legibles para adaptarse a la marca y el tema.
¿Cuántas fuentes debes usar en un sitio?
Una familia completa suele ser suficiente. Dos funcionan si uno estructura los títulos y el otro facilita el cuerpo. Más allá de eso, la consistencia se vuelve complicada.
¿es profesional una fuente serif?
Sí, especialmente para un universo editorial o premium. Elija un dibujo legible y reserve formas finas para textos bastante grandes.
¿Qué tamaño de fuente usar en el móvil?
Para el cuerpo, 16 px o 1 rem es un punto de partida seguro. Adaptarlo a la altura visual de la fuente.
¿las fuentes de Google ralentizan un sitio?
Cualquier fuente web agrega archivos potenciales. El impacto depende del alojamiento, las grasas, los subconjuntos y la visualización.
¿puedes agregar una fuente personalizada en Shopify?
Sí, dependiendo del tema y la licencia. Una fuente que falta en el selector puede requerir archivos y modificaciones técnicas.
¿deberías utilizar la misma fuente en el pago de Shopify?
Es deseable la coherencia en las opciones disponibles. El editor de pagos le permite ajustar los títulos y el cuerpo.
¿Puede cambiar de fuente ser suficiente para modernizar un sitio?
A veces. Si los colores, espacios, componentes y patrones son inconsistentes, la fuente por sí sola no será suficiente.
