WordPress Inclusivo 14: Interlineado en tipografías con proporción Áurea.

Continuamos el proceso que iniciamos en el capítulo anterior sobre el tamaño de fuente con progresión áurea.

En esta ocasión centramos nuestra atención en tratar de sintetizar de forma programática interlineado y obtención de unas medidas de tamaño estándar basadas en estas proporciones que servirán después para diseñar.

Interlineado

He pasado algunas horas leyendo el documento que muestra la base matemática de todo esto, y comprendo la base matemática pero no veo forma sencilla por ahora de trasladarlo al 100% de precisión a css.

Por ello me he basado en la tabla final para tratar de obtener un ratio proporcional para cada uno de los tamaños de fuente y así crear esta primera versión sistematizada.

He llegao a unas constantes de proporción que aplicadas a cada nivel de tamaño, nos da el equivalente para ese rango de tamaño.

Es un método inexacto pero suficientemente bueno por ahora para equilibrar en primer versión un interlineado progresivo razonable. El código resultante es el siguiente:

(...)

--fuenteTextoSize: 2rem;

/* Calculos Niveles Proporción Áurea */
--fi: 1.6;  /* Redondeamos la proporción áurea */
--fiA: calc(var(--fi) * var(--fi));
--fiB: calc(var(--fiA) / 3 * 2.5);
--fiC: var(--fi);
--fiD: calc(var(--fiA) / 2 );
--fiE: 1; /* Base Size */
--fiF: calc(var(--fiA) / 3);

--muA: 1.447;
--muB: 1.486;
--muC: 1.517;
--muD: 1.565;
--muE: 1.667;
--muF: 1.786;

(...)

* {
  font-family: var(--fuenteTextos);
  font-size: var(--fuenteTextoSize);
  line-height: calc(var(--fuenteTextoSize)*var(--muE));
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--fuenteSecundaria);
  margin:0;
}

h1 {
  font-size: calc(var(--fuenteTextoSize) * var(--fiA));
  line-height: calc(var(--fuenteTextoSize) * var(--fiA) * var(--muA));
}

h2 {
  font-size: calc(var(--fuenteTextoSize) * var(--fiB));
  line-height: calc(var(--fuenteTextoSize) * var(--fiB) * var(--muB));
}

h3 {
  font-size: calc(var(--fuenteTextoSize) * var(--fiC));
  line-height: calc(var(--fuenteTextoSize) * var(--fiC) * var(--muC));
}

h4 {
  font-size: calc(var(--fuenteTextoSize) * var(--fiD));
  line-height: calc(var(--fuenteTextoSize) * var(--fiD) * var(--muD));
}

h5 {
  font-size: calc(var(--fuenteTextoSize) * var(--fiE));
  line-height: calc(var(--fuenteTextoSize) * var(--fiE) * var(--muE));
}

h6 {
  font-size: calc(var(--fuenteTextoSize) * var(--fiF));
  line-height: calc(var(--fuenteTextoSize) * var(--fiF) * var(--muF));
}

(...)

En futuras iteraciones, si las posibilidades de css lo permiten, iré mejorando la implementación.

Espaciado

En el caso del “espaciado” general seguimos las instrucciones para implementar una serie de variables que servirán posteriormente para crear distancias proporcionales al contenido circundante.

El código es el siguiente:

(...)
--exA: calc(var(--fuenteTextoSize) * var(--fi));
--exB: calc(var(--fuenteTextoSize) * var(--muB));
--exC: calc(var(--fuenteTextoSize) * var (--muC) / var(--fi));
--exD: calc(var(--fuenteTextoSize) * var /--muD) / var(--fi) * var(--fi));
--exE: calc(var(--fuenteTextoSize) * var(--nuE) / var(--fi) * var(--fi) * var(--fi));
--exF: calc(var(--fuenteTextoSize) * var (--muF) / var(--fi) * var(--fi) * var(--fi) * var(--fi));
(...)

En esta ocasión no lo vamos a usar, pero en futuros capítulos sí, concretamente en el próximo incorporaremos un segundo tipo de fuente para diferencia encabezados del resto del texto.

Y ya de paso, haremos una mejora a la estructura de este código css, pues se hace difícil de manejar con tanto cálculos, me gustaria dejar esos calculos dentro del bloque de variables.

Si te planteas donar en estos tiempos, usa ese dinero para ayudar a tu alrededor.

No voy a negar que este proyecto en realidad me cuesta dinero, y dada mi capacidad adquisitiva, el porcentaje no es pequeño.

PERO, en esta crisis te pido que si piensas en donarme algo, lo evalúes y uses el dinero para ayudar a alguien de tu entorno inmediato.

Seguro que hay alguien que necesita algunos alimentos, científicos que neceistan fondos para investigar el COVID-19

En estos tiempos te pido que les des prioridad.

Si aún así tu posición te permite hacer ambas cosas, te agradezco de antemano tu aportación. ¡Ánimo que de esta salimos juntos!

Representacion en 8x8 Pixels del concepto "Coronavirus" usando una corona amarilla y un 19 rojo debajo

¿Te gusta lo que hago?

En ese caso, puedes ayudarme con los costes de servidor, de dominios, y apoyame para que pueda seguir trabajando en esta dirección.

Recuerda ¡esta donación es completamente voluntaria!

Puedes donar la cantidad que quieras a través de mi página en Paypal.me, si te resulta más cómodo.

Ayudame a entender mejor qué creaciones pueden ser de mayor valor para vosotros, indicandolo en el comentario de paypal.

Gracias de todo corazón.

¿Quieres saber cual es mi plan con los miles de millones de los pozos de petroleo?

Quizá te interese ...

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>