El secreto para que tu web se vea ordenada y no aleatoria
Las webs creadas con AI casi se ven bien, pero fallan porque sus márgenes son aleatorios, con 13 píxeles en una sección y 27 en otra. Una escala uniforme soluciona esto al definir cada espacio y tamaño de texto. Eliges una unidad base de 4 u 8 píxeles, un texto base entre 16 y 18, y un ritmo de aumento entre 1.2, 1.25 o 1.333. El resultado son diez niveles de espaciado y ocho tamaños de texto, desde notas al pie hasta el título principal, todos visibles en pantalla. El código para copiar es un bloque :root con variables CSS en unidades rem. Todo se calcula en el navegador.
Es la unidad estándar en los sistemas de diseño modernos. Todos los espacios son múltiplos de cuatro, y eso crea una sensación de orden.
Es la proporción entre un tamaño de texto y el siguiente. Una proporción mayor crea un contraste más dramático entre los títulos y el texto normal.
La unidad rem depende del tamaño de fuente que el usuario configuró en su navegador. Si alguien amplía el texto por accesibilidad, toda la web crecerá en la misma proporción. Esto no ocurre con los píxeles. El cálculo base es de 16 píxeles por cada rem.
Debes pegarle el bloque de variables y pedirle explícitamente que cada espacio y tamaño de texto use solo esas variables. Sin esta instrucción, seguirá inventando valores.
El valor 1.25 sirve para la mayoría de webs. El 1.2 es mejor si hay mucho texto continuo, y el 1.333 es ideal para landing pages con títulos grandes. Con una base de 16, el título principal medirá 49 píxeles a un ritmo de 1.25 y 67 a un ritmo de 1.333.
Klix no se ha podido cargar
Prueba primero a recargar la página. Si acaba de salir una versión nueva, recargar lo soluciona al instante.
Si recargar no ha servido, puede que tu navegador sea demasiado antiguo. Klix ejecuta las herramientas en tu propio dispositivo y no en un servidor, así que necesita un navegador de 2022 o posterior. Qué hacer: actualiza Chrome o Firefox y vuelve a abrir klixtools.com.