Heading:

< h1>< /h1> 28px / 34px 

Encabezar adecuadamente. Nunca usar más de un H1 en una vista. Es el titulo del capítulo de cada vista página o experiencia.

Title:

< h2>< /h2> 21px / 25px 

Se usa h2 para definir el título de una pagina, vista o experiencia.

Section:

< h3>< /h3> 18px / 2px 

Define el subtitulo de una experiencia debido a su tamaño y jerarquía puede usarse tambien cómo link que mejora la conversión.

Subsection:

< h4>< /h4> 16px / 18px 

Es el mejor para definir una nueva subvención en una misma página o vista.

Body bold:

< p class=“bold”>< /p> 18px / 34px 

Se usa para hacer énfasis una sección o un texto. Palabras clave y métricas en un dashboard funcionan muy bien con Body bold. No es bueno usar mucho Bold en un diseño pues lo recarga visualmente. Menos es más.

Body:

< p>< /p> 18px / 34px 

El cuerpo de contenido ocupa el 50% de la interfaz de un producto, usar una fuente única (Open Sans) permite claridad en la lectura y limpieza visual.

Botón:

< a>< /a> 18px / 34px 

Los botones suelen tener mayor altura de línea (ver sección Botones) para tener mejor legibilidad en su contenedor. Hay tres niveles de prioridad de botones, es bueno conservar el mismo tamaño y estilo de fuente en todos ellos (con un grosor medium).

Meta:

< p class="small">< /p> 14px / 24px 

Se usa para generar contraste o darle mensajes no intrusos al usuario, en sub-labels, input fields o mensajes de retroalimentación a acciones.

Headers

h1, h2, h3, h4, h5, h6
font-family: Encode Sans Semi Expanded 700

h1 
font-size: 28px;
line-height: 34px;

h2
font-size: 21px;
line-height: 25px;

h3
font-size: 18px;
line-height: 22px;

h4 
font-size: 28px;
line-height: 34px;

big-tit

/* Large screens (1405px upwards) *
@media only screen and ( min-width: 1405px ) {
.big-tit {
line-height: 4.4rem;
font-size: 4.4rem;
display: inline;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin: 0;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
}
/* Laptops and desktops (1100-1405px) */
@media only screen and ( min-width: 1100px ) and ( max-width: 1405px) {
.big-tit {
line-height: 4.4rem;
font-size: 4.4rem;
display: inline;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin: 0;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
}
/* Tablets in landscape mode (981-1100px) */
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {
.big-tit {
line-height: 3.4rem;
font-size: 3.4rem;
display: inline;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin: 0;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
}
/* Tablets in portrait mode (768-980px) */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
.big-tit {
line-height: 3.4rem;
font-size: 3.4rem;
display: inline;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin: 0;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
}
/* Smartphones in landscape mode (480-768px) */
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
.big-tit {< line-height: 2.4rem; font-size: 2.4rem; display: inline; -webkit-margin-before: 0; -webkit-margin-after: 0; margin: 0; margin-inline-start: 0px; margin-inline-end: 0px; } } /* Smartphones in portrait mode (0-479px) */ @media only screen and ( max-width: 479px ) { .big-tit { line-height: 2.4rem; font-size: 2.4rem; display: inline; -webkit-margin-before: 0; -webkit-margin-after: 0; margin: 0; margin-inline-start: 0px; margin-inline-end: 0px; } }

Body

body
font-family: Open Sans

p 
font-size: 18px;
font-weight: 400;
line-height: 34px;
letter-spacing: 0.26px;

codigo de anuncio
font-family: Roboto Mono (500)
font-size: 14px
line-height: normal

metadata
font-family: Open Sans
font-size: 14px
line-height: normal

p
font-family: Open Sans
font-size: 18px;
font-weight: 400;
line-height: 34px;
letter-spacing: 0.26px;

p info
font-family: Open Sans
font-size: 14px
line-height: normal