OrigenArts / Diseño Gráfico / Headings.less – Estilizando Tus Encabezados Con Ritmo

Headings.less – Estilizando Tus Encabezados Con Ritmo

¿Cómo estilizar los encabezados de mi sitio web con cierto ritmo? Conoce Headings.less y hazlo de manera sencilla.

Styling Your Captions With Rhythm

El día de hoy estoy lanzando un proyecto en el que he estado trabajando y que forma parte de otro proyecto más grande en el que ando. Si te dedicas al diseño y desarrollo web, espero esto sea de tu interes y le encuantres utilidad.

¿Cómo dar estilo a los encabezados de un sitio web?

Esa fué la pregunta que originó este proyecto que denominé headings.less.

En ocasiones sucede que estas diseñando o haciendo el código CSS de un sitio web que usará intensivamente etiquetas h1, h2, h3, h4, h5, h6; como en el caso de un blog para cierto negocio, el de alguna empresa o tu sitio personal… Y llegas a la parte en la que te preguntas ¿Cómo defino el tamaño de la tipografía de los encabezados?

Aquí es donde headings.less entra, y es que usando algo de matemáticas básicas en el diseño, aplicamos la secuencia de Fibbonacci de diferentes formas y a conveniencia*, para realizar la tarea de definir el tamaño de cada uno de los encabezados h1-h6, que como sabemos, tienen una jerarquía inherente.

Te invito a que le heches un vistazo a la página del proyecto que hice para resolver este pequeño asunto, cheques otras características que aporta y te diviertas en ello. Además si no conoces ciertas herramientas empieces a utilizarlas desde ya.

Visita la página del proyecto:

Headings.less →

¿Qué necesitas para aplicar esto en tus proyectos?

  • Conocer la sintaxis de Less CSS (super fácil y muy útil)
  • Si a caso conocer que es Github
  • Algo básico de inglés, ya que lo publiqué en este idioma ;)

Deja tus comentarios, dudas y todo lo que quieras más abajo.

One Response

Leave Your Thoughts

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

(+) Add Website URL

This site's anti-spam requires Javascript; enable it and refresh this page to continue.

NoScript Users: Whitelist the domain services.wpspamhammer.com and refresh.

Sites That Link to this Post

  1. Bitacoras.com