Configuración de fuente

Familia de fuentes

Puntos:
define la tipografía usada. Afecta directamente la impresión del botón y la coherencia de marca.

Qué cambia este ajuste:
con el mismo texto, la sensación de confianza o cercanía cambia según la fuente.

Consejo de ajuste:
para evitar disonancias, empieza con una familia compatible con la tipografía principal del sitio.

Elementos de configuración

• Lista de fuentes (Predeterminado / System / Fuente del tema): selecciona la fuente y ajusta tono de marca y legibilidad.
• Peso (100 a 900): ajusta grosor y jerarquía de información. Compatible con ajuste por dispositivo.
• Editar fuente: abre el panel de configuración detallada de fuente.

también puedes ajustar familia y peso en Hover por separado.

Límite de layout shift en Hover:
cambiar el peso en Hover puede alterar el ancho del texto y provocar saltos de layout. Para evitarlo, fija Ancho / Alto del botón o reduce el salto de peso (por ejemplo, de 400 a 500).

Tamaño de fuente

Puntos:
define el tamaño del texto. Es una configuración clave para legibilidad y CTR.

Qué cambia este ajuste:
si en SP es demasiado pequeño, baja la comprensión del CTA.

Consejo de ajuste:
tras ajustar en PC, revisa SP y sube un nivel o reduce líneas si hace falta.

Elementos de configuración

• Preajuste (Predeterminado / Tema / Personalizado): aplica rápidamente un tamaño base.
• Tamaño personalizado: define tamaño con valor numérico directo.
• Unidad (px / em / rem / vw): define comportamiento fijo o fluido.
• Responsivo: habilita ajustes por dispositivo.
• Editar tamaño de fuente: abre el editor detallado del tamaño.

em y rem son relativos al tamaño base del navegador/tema. vw es útil para diseño fluido, pero conviene validar mínimos y máximos para evitar tamaños extremos. El tamaño en Hover también puede ajustarse.

Altura de línea

Puntos:
define el interlineado en texto de varias líneas.

Qué cambia este ajuste:
si está demasiado cerrado, baja la velocidad de lectura; si está muy abierto, se pierde cohesión.

Consejo de ajuste:
usa 1.2 a 1.6 como referencia y abre un poco más cuando hay más texto.

Elementos de configuración

• Preajuste (Predeterminado / Tight / Normal / Loose): aplica ajustes rápidos de legibilidad.
• Altura de línea personalizada: define interlineado con valor numérico.
• Unidad (none / px / em / rem / %): elige ratio o valor fijo.
• Responsivo: habilita ajustes por dispositivo.

con unidad none (ej. 1.5), se calcula como multiplicador del tamaño de fuente. Es recomendable en responsive porque mantiene proporción cuando cambia el tamaño. Valor predeterminado: 1.2.

Control por variables CSS:
line-height y letter-spacing se gestionan internamente por variables CSS (--line-height-pc, --letter-spacing-pc, etc.), lo que evita conflictos con elementos internos como microtexto y subtexto.

Espaciado entre letras

Puntos:
define la separación entre caracteres. Sirve para ajustar matiz visual, elegancia y legibilidad.

Qué cambia este ajuste:
el cambio visual es grande; ajustes excesivos pueden dificultar lectura.

Consejo de ajuste:
en textos latinos suele funcionar bien empezar con ajustes sutiles y comprobar en móvil.

Elementos de configuración

• Preajuste (Tight / Normal / Wide): ajusta rápidamente densidad de texto.
• Valor personalizado: ajuste fino manual.
• Unidad (px / em / rem / %): define método fijo o relativo (predeterminado: em).
• Responsivo: habilita ajustes por dispositivo.

con em, el espaciado depende del tamaño de fuente. Ejemplo: 0.05em equivale al 5% del tamaño de fuente. También puedes usar valores negativos, pero revisa legibilidad.