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:

Muestra de la prueba de fuente progresiva

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!

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 ...

Una Respuesta a “WordPress Inclusivo 13: Proporción Áurea y tamaño de fuente en CSS”

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>