Theme WordPress Inclusivo 13: Proporción Áurea y tamaño de fuente en CSS

Llegó el momento de empezar a definir aspectos de nuestra hoja de estilos, empecemos por las tipografías.

En caso de que hayas contratado un diseñador profesional, te ha debido proporcionar una completa guía de estilos, en caso contrario he aquí como lo suelo hacer.

Proporción Áurea

Antes de continuar unos apuntes, mis nociones de diseño son básicas, vengo del mundo de la programación pero a lo largo de los años he adquirido algún que otro "truquillo de mago".

Uno de estos trucos es el uso de la proporción áurea en el diseño de webs, y más concretamente, en la generación estética y legible de las proporciones entre los dierentes elementos de la web como encabezados o textos.

La báse teórica tras la generación de los rectángulos y su encaje en arte y pintura tiene ya muchos años a sus espadas, en el diseño para web, y en concreto con tipograías digitales, por razones evidentes, no tantos.

Apicación práctica: Tamaños de Fuente Áureos

Vengo usando la base de cálculo de Foundation hace ya algunos años, dado que en este caso no lo usaremos, voy a crear un "port" de dicha configuración pero calculando la proporción áurea, que nos sirva como base ahora, y en el futuro.

Usando el artículo que referenciaba más arriba he llegado al siguiente código para el cálculo de l tamaño de fuentes respecto de un tamaño base definido manualemnte:

:root {
  --fuenteTextoSize: 2rem;

  /* Calculos Niveles Proporcion Aurea */
  --fi: 1.6; /* Redondeamos la proporcion á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);
}

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

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

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

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

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

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

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

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

En esencia he convertido las formulas a calculos css lo mejor que he sabido (¡si detectas algún error, por favor házmelo saber!) y aplicado esos multiplicadores a cada tipo de encabezado en orden descendente. El resultado de este código es similar al siguiente:

Lo genial de este método, es que puedes definir el tamaño de fuente e tu web, sin necesidad de ver, y será legible visualmente hablando. Un paso en pos del sueño de diseñar webs a ciegas.

En el siguiente capítulo abordaremosel ¡interlineado completamente dinámico basado también en la proporción áurea!

Referencias Bibliográficas

No se requiere ninguna

  • Artículo publicado: 10/06/2020
  • Artículo actualizado: 30/09/2022 (Versión 22.272.1723)
Bruce Lee dice Be generous my friend!
Bruce Lee dice Be generous my friend!

Bruce Needs YOU...

Ayúdame a mantener el proyecto aportando a través de Paypal.

Me gustaría cubrir los gastos de la propia web, con vuestra inestimable ayuda, el mayor tiempo posible.

Es algo totalmente voluntario, ahora bien, dile tu a Bruce que no vas a aportar, que yo no me atrevo xD ...

¡Gracias por estar ahí!


Quizá te interese leer más sobre Wordpress Inclusivo

One Response to “Theme WordPress Inclusivo 13: Proporción Áurea y tamaño de fuente en CSS”

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>