Guía de estilos web

Esta página sirve como guía de estilos web y define las tipografías a usar. Algunas mediadas están en unidades rem, y para entenderlo es necesario saber que 1rem es igual al tamaño de fuente base establecido en el cuerpo de la página web, en este caso 16px. Establecer los tamaños de este modo permite escalar toda la tipografía de la web con un simple cambio en el tamaño de fuente establecido en el cuerpo de la página. Las unidades em son en función del tamaño de fuente del elemento, en vez del tamaño fuente base. Un elemento con un tamaño de fuente de 24px tendrá ese mismo valor como 1em, y 2 em equivaldrán a 48px.

La mayoría de los tamaños y alturas de línea están establecidos en base al Golden Ratio, un principio de diseño para conseguir diseños balanceados y proporcionales que resulten estéticamente placenteros. Esto puede ya no ser así se se han aplicado cambios.

Encabezado (H1)

  • Fuente Monument Extended. 
  • Tamaño 2,625rem (1,6rem en smartphone)
  • Peso 900
  • Altura de línea 1,2em
  • Capitalización: Mayúsculas

Encabezado (H2)

  • Fuente Monument Extended. 
  • Tamaño 2,375rem (1,4rem en smartphone)
  • Peso 900
  • Altura de línea 1,2em
  • Capitalización: Mayúsculas

Encabezado (H3)

  • Fuente Monument Extended. 
  • Tamaño 1,625rem (1,3rem en smartphone)
  • Peso 900
  • Altura de línea 1,2em
  • Capitalización: Mayúsculas

Encabezado (H4)

  • Fuente Monument Extended. 
  • Tamaño 1,25rem (1,2rem en smartphone)
  • Peso 700
  • Altura de línea 1,2em
  • Capitalización: Mayúsculas
Encabezado (H5)
  • Fuente Monument Extended. 
  • Tamaño 1rem
  • Peso 700
  • Altura de línea 1,2em
  • Capitalización: Mayúsculas
Encabezado (H6)
  • Fuente Monument Extended. 
  • Tamaño 0,813rem
  • Peso 400
  • Altura de línea 1,2em
  • Capitalización: Mayúsculas

Párrafos de texto (p) y textos normales (span)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus commodo ex. Etiam in interdum turpis. Duis et nunc dictum, rutrum mauris in, vehicula dui. Suspendisse lacus libero, fringilla tempor felis a, ornare mattis leo.

Donec magna odio, dignissim vel euismod non, rutrum sed est. Pellentesque in malesuada odio. In tristique non metus eu fringilla. Curabitur vulputate interdum posuere. Proin tempus turpis vitae libero venenatis, in condimentum nulla porta. Nunc eu est et neque fringilla pellentesque vel id elit.

  • Fuente Monument Grotesk
  • Tamaño 1rem (16px)
  • Peso 400
  • Altura de línea 27px

Botones

  • Fuente Monument Extended. 
  • Peso 700
  • Altura de línea 1,5em
  • Capitalización: Mayúsculas