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!

¡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

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>