Styles
Typography

Typography

La tipografía que debes usar para diseñar cualquier componentes o página en InfoJobs es la Proxima Nova en sus variantes Regular y Bold. En esta página podrás ver cómo debes aplicarla y como se comporta en función al contenido al que acompaña.

Estilos

Aplica estilos a la tipogragía según el uso que le quieras dar. Usa los estilos con criterio y ten en cuenta que nunca debes usar el color DayBlue en los headings.

  • Sobre fondos claros los títulos son DarkSilk, los parrafos pueden ser Softscript, Midscript, Darksilk y para los links usaremos Dayblue subrayado.
  • Sobre fondos neutros los títulos son DarkSilk, los parrafos pueden ser Softscript, Midscript, Darksilk y para los links usaremos Dayblue subrayado.
  • En fondos negativos se usa el color blanco, tanto para el texto, como para títulos o links, los links igualmente iran subrayados.

Font size y line height

Hay dos nomenclaturas para las textos que has de usar en la web: headings y body. Los headings son los títulos que debes usar para encabezamientos. El tamaño más pequeño de un heading es de 18dp y el mayor de 36dp. Reserva el uso de los tamaños mayores para titulares de gran impacto. En función al tamaño de la tipografía el line-height que debes aplicar al texto también deberá ser mayor.

El texto body debes usarlo para párrafos y cualquier otra pieza que no sea un título. El tamaño base que debes usar es de 16dp. Limita al máximo el uso de tamaños menores.

Cuando diseñes para móvil usa las equivalencias que se muestran en la tabla. El responsive se hace mediante media queries a 480px de ancho y por tanto para medidas mayores consideramos que la tipografía usa los mismos tamaños que en Desktop.

Headings.
Bodys.

Márgenes verticales

Antes de empezar a crear una página recuerda que estás diseñando para la web pero que lo haces usando Photoshop. Por este motivo, y para que el aspecto de los bloques de texto se acerque lo máximo posible a cómo se verán en un navegador web, debes tener en cuenta algunas consideraciones.

Tanto en web como en tus mockups siempre debes respetar un márgen vertical de 10dp entre los elementos de un mismo párrafo, ya sea entre heading y body o entre dos bloques de texto dentro del body. Entre dos párrafos diferentes debes dejar siempre un márgen vertical de 40dp.

Estos márgenes verticales debes calcularlos desde los ascenders y descenders de la fuente, y no desde el base line.

  • font-size
  • 10dp
  • 40dp
Construcción de textos.

Suma del line-height

Los navegadores web suman el line-height del texto a los márgenes verticales, por lo que la distancia entre bloques de texto es mayor en la web que en los mockups. Para solucionarlo debes dejar 3dp extra por la parte superior e inferior de cada bloque de texto, a excepción de cuando este abra o cierre contenido.

De este modo harás diseños más precisos y se pareceran más al resultado final una vez maquetados.

  • font-size
  • 10dp
  • 20dp
Ejemplo de construcción de texto en un card.