Creado con ♥️ por: Bohdan Shila

Versión: 1.1

Para sugerencias de mejora: [email protected]

Usa este framework para configurar los tamaños de fuentes de tu web para que se comporten de forma fluida y responsive en cualquier tamaño de pantalla.

✅ Compatible con cualquier CMS y constructor visual

✅ Instala y configura en 2 minutos

Indice

Novedades

1.1 - 05/03/2024

Añadidas las variables de CSS para asignar tamaños de texto por CSS

Cómo usar

Sigue las instrucciones de abajo o mira el tutorial en video para seguirlo paso a paso.

Aviso: los ejemplos puestos en el documento se basan en WordPress pero puedes usar este framework en cualquier otro CMS.

Tutorial

https://www.loom.com/share/ba6d670629ea4055a561fed53be990c9

1️⃣ Crea una página de pruebas

Te recomiendo crear una página que contenga todos los tamaños de textos posibles (h1, h2…) para configurar y testear los tamaños de fuentes.

Puedes usar este HTML para las pruebas.

<h1>H1: Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<h2>H2: Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<h3>H3: Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<h4>H4: Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
<h5>H5: Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
<h6>H6: Lorem ipsum dolor sit amet, consectetur adipiscing elit</h6>

<br><hr><br>

<p class="p-xl"><b>P-XL:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p-l"><b>P-L:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><b>P:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p-s"><b>P-S:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p-xs"><b>P-XS:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

2️⃣ Copia este CSS

/*Base font size*/
html {
	font-size: 62.5%;
}

body {
	font-size: 1.6rem;
}

/*** Personalizar a partir de aquí ***/

/*Altura de linea*/
h1, .h1 { line-height: 1.1; }
h2, .h2 { line-height: 1.15; }
h3, .h3 { line-height: 1.2; }
h4, .h4 { line-height: 1.25; }
h5, .h5 { line-height: 1.3; }
h6, .h6 { line-height: 1.35; }

/*Tamaños de fuentes*/
:root {
	
	/*Anchos de pantalla mínimo y máximo cuando las fuentes empiezan a reducirse. Indicar en píxeles pero sin unidad*/
	--screenMin: 480;
	--screenMax: 1600;
	
	/*Los tamaños de textos se indican en REMs en base a 10px. Por ejemplo, 2.5 equivale a 25px.*/

  /*Encabezados*/  

 --hScale: 1.5;
  
--h1-max: 6;
--h1-min: calc(var(--h1-max) / var(--hScale));
  
--h2-max: 5;
--h2-min: calc(var(--h2-max) / var(--hScale));

--h3-max: 4;
--h3-min: calc(var(--h3-max) / var(--hScale)); 

--h4-max: 3;
--h4-min: calc(var(--h4-max) / var(--hScale)); 

--h5-max: 2.5;
--h5-min: calc(var(--h5-max) / var(--hScale));

--h6-max: 2;
--h6-min: calc(var(--h6-max) / var(--hScale)); 
	

	/*Texto de cuerpo*/

--bodyScale: 1.25;

--p-xl-max: 2.4;
--p-xl-min: calc(var(--p-xl-max) / var(--bodyScale));

--p-l-max: 2.2;
--p-l-min: calc(var(--p-l-max) / var(--bodyScale));

--body-max: 1.8;
--body-min: calc(var(--body-max) / var(--bodyScale));

--p-s-max: 1.6;
--p-s-min: calc(var(--p-s-max) / var(--bodyScale));

--p-xs-max: 1.4;
--p-xs-min: calc(var(--p-xs-max) / var(--bodyScale));
		
}

/*No modificar nada a partir de esta linea*/

:root {
  --fluidFromCalc: calc(var(--screenMax) / 10 * 1rem);
  --fluidToCalc: calc(var(--screenMin) / 10 * 1rem);
}

:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, body, .p, .p-xl, .p-l, .p-s, .p-xs) {
  --from: calc(var(--max) * 1rem);
  --to: calc(var(--min) * 1rem);
  --fluid: calc(var(--to) + (var(--max) - var(--min)) * ((100vw - var(--fluidToCalc)) / ((var(--screenMax) / 10) - (var(--screenMin) / 10))));
  font-size: clamp(var(--to), var(--fluid), var(--from));
}

/* Headings */
h1, .h1 { --max: var(--h1-max); --min: var(--h1-min); }
h2, .h2 { --max: var(--h2-max); --min: var(--h2-min); }
h3, .h3 { --max: var(--h3-max); --min: var(--h3-min); }
h4, .h4 { --max: var(--h4-max); --min: var(--h4-min); }
h5, .h5 { --max: var(--h5-max); --min: var(--h5-min); }
h6, .h6 { --max: var(--h6-max); --min: var(--h6-min); }

/* Body */
body, .p { --max: var(--body-max); --min: var(--body-min); }
.p-xl { --max: var(--p-xl-max); --min: var(--p-xl-min); }
.p-l { --max: var(--p-l-max); --min: var(--p-l-min); }
.p-s { --max: var(--p-s-max); --min: var(--p-s-min); }
.p-xs { --max: var(--p-xs-max); --min: var(--p-xs-min); }

/*Variables*/

:root {
    /* h1 */
    --h1To: calc(var(--h1-min) * 1rem);
    --h1: clamp(var(--h1To),
        calc(var(--h1To) + (var(--h1-max) - var(--h1-min)) * ((100vw - var(--fluidToCalc)) / ((var(--screenMax) / 10) - (var(--screenMin) / 10)))),
        calc(var(--h1-max) * 1rem)
    );

    /* h2 */
    --h2To: calc(var(--h2-min) * 1rem);
    --h2: clamp(var(--h2To),
        calc(var(--h2To) + (var(--h2-max) - var(--h2-min)) * ((100vw - var(--fluidToCalc)) / ((var(--screenMax) / 10) - (var(--screenMin) / 10)))),
        calc(var(--h2-max) * 1rem)
    );

    /* h3 */
    --h3To: calc(var(--h3-min) * 1rem);
    --h3: clamp(var(--h3To),
        calc(var(--h3To) + (var(--h3-max) - var(--h3-min)) * ((100vw - var(--fluidToCalc)) / ((var(--screenMax) / 10) - (var(--screenMin) / 10)))),
        calc(var(--h3-max) * 1rem)
    );

    /* h4 */
    --h4To: calc(var(--h4-min) * 1rem);
    --h4: clamp(var(--h4To),
        calc(var(--h4To) + (var(--h4-max) - var(--h4-min)) * ((100vw - var(--fluidToCalc)) / ((var(--screenMax) / 10) - (var(--screenMin) / 10)))),
        calc(var(--h4-max) * 1rem)
    );

    /* h5 */
    --h5To: calc(var(--h5-min) * 1rem);
    --h5: clamp(var(--h5To),
        calc(var(--h5To) + (var(--h5-max) - var(--h5-min)) * ((100vw - var(--fluidToCalc)) / ((var(--screenMax) / 10) - (var(--screenMin) / 10)))),
        calc(var(--h5-max) * 1rem)
    );

    /* h6 */
    --h6To: calc(var(--h6-min) * 1rem);
    --h6: clamp(var(--h6To),
        calc(var(--h6To) + (var(--h6-max) - var(--h6-min)) * ((100vw - var(--fluidToCalc)) / ((var(--screenMax) / 10) - (var(--screenMin) / 10)))),
        calc(var(--h6-max) * 1rem)
    );

    /* body */
    --bodyTo: calc(var(--body-min) * 1rem);
    --body: clamp(var(--bodyTo),
        calc(var(--bodyTo) + (var(--body-max) - var(--body-min)) * ((100vw - var(--fluidToCalc)) / ((var(--screenMax) / 10) - (var(--screenMin) / 10)))),
        calc(var(--body-max) * 1rem)
    );

    /*p-xl */
    --p-xlTo: calc(var(--p-xl-min) * 1rem);
    --p-xl: clamp(var(--p-xlTo),
        calc(var(--p-xlTo) + (var(--p-xl-max) - var(--p-xl-min)) * ((100vw - var(--fluidToCalc)) / ((var(--screenMax) / 10) - (var(--screenMin) / 10)))),
        calc(var(--p-xl-max) * 1rem)
    );

    /* p-l */
    --p-lTo: calc(var(--p-l-min) * 1rem);
    --p-l: clamp(var(--p-lTo),
        calc(var(--p-lTo) + (var(--p-l-max) - var(--p-l-min)) * ((100vw - var(--fluidToCalc)) / ((var(--screenMax) / 10) - (var(--screenMin) / 10)))),
        calc(var(--p-l-max) * 1rem)
    );

    /* p-s */
    --p-sTo: calc(var(--p-s-min) * 1rem);
    --p-s: clamp(var(--p-sTo),
        calc(var(--p-sTo) + (var(--p-s-max) - var(--p-s-min)) * ((100vw - var(--fluidToCalc)) / ((var(--screenMax) / 10) - (var(--screenMin) / 10)))),
        calc(var(--p-s-max) * 1rem)
    );

    /* p-xs */
    --p-xsTo: calc(var(--p-xs-min) * 1rem);
    --p-xs: clamp(var(--p-xsTo),
        calc(var(--p-xsTo) + (var(--p-xs-max) - var(--p-xs-min)) * ((100vw - var(--fluidToCalc)) / ((var(--screenMax) / 10) - (var(--screenMin) / 10)))),
        calc(var(--p-xs-max) * 1rem)
    );
}

3️⃣ Inserta el CSS en la web