1.4Tipografía, colores, márgenes y espaciado
Lo esencial en 30 segundos
- Tipografía: fuente, tamaño, grosor, interlineado — legibilidad primero.
- Espaciado: margen (espacio externo) y padding (espacio interno); el aire hace legible la página.
- Coherencia: definir colores y fuentes globales evita la incoherencia y los retoques sin fin.
Hilo conductor — Nadia cuida el resultado
El contenido está, pero todo está apretado y los colores chocan. Nadia da aire a la página: más espacio (paddings), una tipografía legible, dos colores de marca. Sobre todo, entiende que es mejor fijar estas decisiones globalmente una vez, en lugar de repetirlas elemento por elemento.
Continúa 1.3 — de "funciona" a "está cuidado".
1. Tipografía, colores, espaciado
La tipografía (fuente, tamaño, grosor, interlineado, espaciado de letras) se ajusta en la pestaña Estilo: prioridad a la legibilidad (tamaño suficiente, interlineado cómodo). Los colores (texto, fondo, bordes) deben respetar un contraste suficiente. Los espaciados — márgenes (externo) y paddings (interno), en la pestaña Avanzado — dan aire: una página apretada cansa, una página aireada respira.
Nadia aumenta los paddings de los contenedores, elige una fuente legible y dos colores (un rosa de marca, un gris oscuro para el texto).
2. Coherencia y ajustes globales
Repetir los mismos ajustes en cada elemento es una pérdida de tiempo y una fuente de incoherencia. La buena práctica: definir los colores y fuentes globales del sitio (en los ajustes del sitio / Site Settings) y reutilizarlos en todas partes. Cambiar el color de marca se hace entonces una vez, y todo se actualiza.
Es el principio de un diseño coherente y mantenible — profundizaremos en los ajustes globales en el nivel 2.
🔎 Ejemplo concreto — Airear y armonizar (caso Nadia)
Tipografía: fuente legible, interlineado 1.6.
Colores: rosa de marca (#b4005a) + gris oscuro para el texto.
Espaciados: padding de secciones 40px, márgenes entre bloques.
Global: colores/fuente definidos en los ajustes del sitio.
→ Cambiar el color de marca = 1 ajuste, todo se actualiza.Resultado: un resultado cuidado y coherente.
Lección: ajustar globalmente evita los retoques sin fin.
Vocabulario de la sección
- Tipografía
- Fuente, tamaño, grosor, interlineado, espaciado de letras de un texto.
Ejemplo sencillo: una fuente legible, interlineado cómodo para los párrafos.
Lo que no es: apilar 4 fuentes distintas "para variar".
Reflejo: legibilidad primero; 1 o 2 fuentes bastan.
- Colores
- Color del texto, del fondo, de los bordes, de los iconos (pestaña Estilo).
Ejemplo sencillo: rosa de marca + gris oscuro legible para el texto.
Lo que no es: texto claro sobre fondo claro (contraste insuficiente).
Reflejo: comprobar el contraste texto/fondo.
- Margen / padding
- Margen = espacio externo alrededor de un elemento; padding = espacio interno (pestaña Avanzado).
Ejemplo sencillo: padding en un botón (aire alrededor del texto), margen entre dos bloques.
Lo que no es: pegar los elementos sin aire.
Reflejo: interno = padding; externo = margen.
- Contraste
- Diferencia de luminosidad entre texto y fondo, para la legibilidad y la accesibilidad.
Ejemplo sencillo: texto gris oscuro sobre fondo blanco.
Lo que no es: gris claro sobre blanco, ilegible al sol o para algunos ojos.
Reflejo: un texto debe leerse sin esfuerzo.
- Ajustes globales (Site Settings)
- Colores y fuentes definidos una vez para todo el sitio y reutilizados en todas partes.
Ejemplo sencillo: cambiar el color de marca actualiza todo el sitio.
Lo que no es: ajustar el color elemento por elemento.
Reflejo: definir globalmente lo que se repite.
En la práctica — Estilizar con limpieza una página
- Elige una fuente legible y un interlineado cómodo para los párrafos.
- Define dos colores (uno de marca, uno para el texto) con buen contraste.
- Añade aire: paddings de los contenedores, márgenes entre bloques.
- Ve a los ajustes del sitio y fija colores y fuentes globales.
Guion listo para decir — justificar la sobriedad al cliente (20 s)
"Uso dos colores y una tipografía legibles, con aire entre los elementos. Es intencionado: un sitio sobrio inspira confianza y se lee con facilidad, sobre todo en el móvil. Y como todo está ajustado globalmente, si cambia de idea sobre el color, lo ajustamos en todas partes en un instante."
Vender la sobriedad como una elección de confianza y legibilidad.
Plantilla para copiar y pegar — guía de estilo rápida
FUENTE (títulos): _______________
FUENTE (texto): _______________ INTERLINEADO: ____
COLOR DE MARCA: #_______ COLOR DE TEXTO: #_______
CONTRASTE COMPROBADO: sí / no
PADDING DE SECCIONES: ____ px MÁRGENES ENTRE BLOQUES: ____ px
DEFINIDO EN GLOBAL (Site Settings): sí / noEscaparate sobrio
2 colores, 1-2 fuentes, mucho aire: resultado profesional y tranquilizador.
Marca fuerte
Color de marca en los botones y acentos, texto neutro legible.
Móvil
Tamaño de fuente suficiente e interlineado generoso para leer con el pulgar.
Accesibilidad
Contraste texto/fondo suficiente: legible al sol y para todos.
✓ Buenas prácticas
- Limitar colores y fuentes, elegirlos coherentes.
- Dar aire (paddings, márgenes).
- Definir colores y fuentes en global para la mantenibilidad.
✗ Errores frecuentes
- Multiplicar fuentes y colores.
- Olvidar el contraste (texto poco legible).
- Ajustar cada elemento a mano en vez de en global.
Puntos clave
- Tipografía legible, contraste suficiente.
- Margen (externo) y padding (interno) para airear.
- Pocos colores/fuentes, pero coherentes.
- Ajustes globales = coherencia y cambios de una vez.
Reto 48h — aplica mañana
En una página, fija 2 colores y 1-2 fuentes en los ajustes del sitio, comprueba el contraste texto/fondo, y airea con paddings. Luego cambia el color de marca en global y observa. 20 minutos.
- Elijo una tipografía legible y contrastada.
- Aireo con márgenes y paddings.
- Defino colores/fuentes en global.
Preguntas frecuentes
¿Cuántos colores y fuentes usar?
Pocos: 2 a 3 colores y 1 a 2 fuentes bastan para un resultado profesional y coherente. La sobrecarga perjudica la legibilidad y la confianza.
¿Qué diferencia hay entre margen y padding?
El margen es el espacio externo alrededor de un elemento; el padding, el espacio interno entre el borde del elemento y su contenido. Ambos se ajustan en la pestaña Avanzado.
¿Por qué definir los colores en global?
Por la coherencia y la mantenibilidad: definidos una vez en los ajustes del sitio, se reutilizan en todas partes y se modifican en un solo lugar.
Nadia quiere poder cambiar el color de marca en todas partes de una sola vez si el cliente duda. ¿Qué hace?