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.

¡Compártelo!

Ayudame a difundir este contenido a todo aquel que pueda sacarle partido, difundelo en redes, cuéntaselo a tus amigos, coméntalo en la cola del supermercado, además de aportar, ¡seguro que conoces a gente interesante y acabas uniéndose al bando rebelde!

Sígueme en Redes

Acelera mi progreso de la materia que te interesa.

El calendario y ritmo de publicaciones actualmente responde a mis necesidades de estudio y desarrollo de proyectos personales, si quieres invertir en que acelere alguna materia concreta, te ofrezco una posibilidad:

Puedes donar en mi paypal (paypal at metsuke.com), indicando la materia, por cada 25 euros donados, priorizaré un capítulo de la materia que me indiques que ya tenga escrito para que salga el proximo dia viable y disponible de lunes a viernes (en orden de llegada y a un post diario).

En caso de que el capítulo aún no exista, centraré mi atención en escribirlos y publicarlos con prioridad, pero no puedo prometer inmediatez.

De nuevo priorizaré las donaciones por orden de llegada pero cuando coincidan varias, iré rotando cada dia una para evitar la monopolización de mi foco de tareas.

Me reservo el fin de semana para priorizar lo que considere pertinente en el caso de que haya cola de entrega. Si te gusta el proyecto, ¡es un buen modo de apoyarme!

¿Te interesan mis servicios a título personal?

Puedo ofrecerte una amplia gama de productos y servicios en accesibilidad a través de mis partners, aunque quizá prefieras que lo haga yo personalmente…

En ese caso, puedes contactarme en mi correo r.carrillo@metsuke.com y cuéntame que necesitas, si lo que leo me gusta, te pongo en contacto con el comercial de mi empresa de consultoría.

Si quieres que sea yo expresamente quien te atienda, puedes indicármelo y llegamos a un acuerdo.

Advierto que esta última posibilidad te saldrá bastante más cara que hablar con mi equipo, pero si es lo que deseas, a tu disposición.

Un Abrazo.

Sobre las traducciones

Por el momento me he visto obligado a detener la traducción del contenido, apenas doy abasto a escribirlo (que es mi objetivo, ya que son mis apuntes de estudio), por lo que no parece tener sentido mantener activas unas traducciones que no doy abasto a crear.

En caso de que más adelante el flujo de caja me lo permita, es mi intención contratar servicios de traducción y editores que realicen la tarea, pero por ahora lo dejo desactivado.


Quizá te interese leer más sobre Wordpress Inclusivo

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>