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.

H1
Título 1
42px
Lato Black, Entrelinha: 56, Espaçamento entre caracteres: 40
H2
Título 2
38px
Lato Black, Entrelinha: 44, Espaçamento entre caracteres: 40
H3
Título 3
34px
Lato Black, Entrelinha: 38, Espaçamento entre caracteres: 40
H4
Título 4
24px
Lato Black, Entrelinha: 28, Espaçamento entre caracteres: 40
H5
Título 5
24px
Lato Bold, Entrelinha: 28, Espaçamento entre caracteres: 20
H6
Título 6
22px
Lato Bold Italic , Entrelinha: 26, Espaçamento entre caracteres: 20
Código
Ocultar Código
  • 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
Lead 1
22px
Lato Bold Italic, Entrelinha: 26
Lead 2
22px
Lato Bold, Entrelinha: 26
Lead 3
18px
Lato Bold, Entrelinha: 22
Lead 4
16px
Lato Bold, Entrelinha: 20
Destaque
18px
Karma, Entrelinha: 24
Parágrafo
16px
Karma Light, Entrelinha: 22
Código
Ocultar Código
  • 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
MENU / MENU LATERAL
14px
Lato Bold, Entrelinha: 24
SUB-MENUS
12px
Lato Bold, Entrelinha: 18
OUTROS MENUS
12px
Lato Regular, Entrelinha: 18
Link de texto
18px
Karma Medium, Entrelinha: 24
TEXTO DO BOTÃO
13px
Lato Regular, Entrelinha: 22
Navegação estrutural (breadcrumbs)
13px
Lato Regular, Entrelinha: 22
Código
Ocultar Código
  • 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;
}