Tipografia
Tipografia
Títulos e Cabeçalhos
De forma a uniformizar e criar coerência em todo o template, são disponibilizados um conjunto de estilos tipográficos para web, tendo em conta boas práticas de leitura.
- HTML
- CSS
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
h1{
font-size: 48px !important; /*48px ou 42px?*/
line-height: 56px !important;
font-family: 'latoblack' !important;
letter-spacing: 0.04em !important;
}
h2{
font-size: 38px !important;
line-height: 44px !important;
font-family: 'latoblack' !important;
letter-spacing: 0.04em !important;
}
h3{
font-size: 34px !important;
line-height: 38px !important;
font-family: 'latoblack' !important;
letter-spacing: 0.04em !important;
}
h4{
font-size: 24px !important;
line-height: 28px !important;
font-family: 'latoblack' !important;
letter-spacing: 0.04em !important;
}
h5{
font-size: 24px !important;
line-height: 28px !important;
font-family: 'latobold' !important;
letter-spacing: 0.02em !important;
}
h6{
font-size: 22px !important;
line-height: 26px !important;
font-family: 'latobold_italic' !important;
letter-spacing: 0.02em !important;
}
Corpo de texto
- HTML
- CSS
<div class="lead1">Lead 1</div>
<div class="lead2">Lead 2</div>
<div class="lead3">Lead3</div>
<div class="lead4">Lead 4</div>
<div class="featured1">Destaque consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet </div>
<div class="featured2">Parágrafo Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</div>
.lead1{
font-size: 22px !important;
font-family: 'latobold_italic' !important;
line-height: 26px !important;
}
.lead2{
font-size: 22px !important;
font-family: 'latobold' !important;
line-height: 26px !important;
}
.lead3{
font-size: 18px !important;
font-family: 'latobold' !important;
line-height: 24px !important;
}
.lead4{
font-size: 16px !important;
font-family: 'latobold' !important;
line-height: 22px !important;
}
.featured1{
font-family: "latolight";
font-size: 26px;
line-height: 32px;
}
.featured2{
font-family: "latolight";
font-size: 22px;
line-height:28px;
}
Outros elementos
- HTML
- CSS
<span class="menu-lateral">MENU / MENU LATERAL</span>
<span class="sub-menus">SUB-MENUS</span>
<span class="other-menus">OUTROS MENUS</span>
<span class="text-link">Link de texto</span>
<span class="text-button">TEXTO DO BOTÃO</span>
<span class="navigation">Navegação estrutural (breadcrumbs)</span>
.menu-lateral{
font-family: "latobold";
font-size: 14px;
line-height: 24px;
}
.sub-menus{
font-family: "latobold";
font-size: 12px;
line-height: 18px;
}
.other-menus{
font-family: "latoregular";
font-size: 12px;
line-height: 18px;
}
.text-link{
font-family: "karmamedium";
font-size: 18px;
line-height: 24px;
}
.text-button{
font-family: "latoregular";
font-size: 13px;
line-height: 22px;
}
.navigation{
font-family: "latoregular";
font-size: 13px;
line-height: 22px;
}
Este website utiliza cookies. Ao continuar a navegação está a aceitar a sua utilização.
Caso pretenda saber mais, consulte a nossa política de privacidade.