Guia de aprendizado
Design responsívo: textos
Textos são uma parte importante dos websites, pois eles apresentam informações que descrevem a natureza e objetivo do conteúdo apresentado por um website. A formatação de textos deve, esteticamente, possuir clareza visual. Assim, espera-se que títulos e subtítulos possuam um destaque visual que seja maior do que o de parágrafos com textos simples.
Atenção:
A tag <p></p> foi estilizada pelo framework Sketch para ter, por padrão, tamanho de fonte e preenchimento de 16px para ambas as propriedades.
Textos: tamanhos de fonte
O framework Sketch fornece 11 tamanhos de fonte diferentes. A tabela abaixo apresenta as classes responsáveis por formatar o tamanho de fonte para textos.
| Classe | Tamanho de fonte |
|---|---|
| text-size-tiny | 8px |
| text-size-smaller | 10px |
| text-size-x-small | 12px |
| text-size-small | 14px |
| text-size-normal | 16px |
| text-size-medium | 18px |
| text-size-large | 24px |
| text-size-x-large | 36px |
| text-size-largest | 48px |
| text-size-jumbo | 64px |
| text-size-x-jumbo | 72px |
Vejamos alguns exemplos de aplicação com parágrafos cujos textos possuem tamanhos distintos:
<p class="text-size-tiny"> texto com tamanho de fonte 8px</p><p class="text-size-smaller"> texto com tamanho de fonte 10px</p><p class="text-size-x-small"> texto com tamanho de fonte 12px</p><p class="text-size-small"> texto com tamanho de fonte 14px</p><p class="text-size-normal"> texto com tamanho de fonte 16px</p><p class="text-size-medium"> texto com tamanho de fonte 18px</p><p class="text-size-large"> texto com tamanho de fonte 24px</p><p class="text-size-x-large"> texto com tamanho de fonte 32px</p><p class="text-size-largest"> texto com tamanho de fonte 48px</p><p class="text-size-jumbo"> texto com tamanho de fonte 64px</p><p class="text-size-x-jumbo"> texto com tamanho de fonte 72px</p>Esse código irá resultar no seguinte conteúdo:
texto com tamanho de fonte 8px
texto com tamanho de fonte 10px
texto com tamanho de fonte 12px
texto com tamanho de fonte 14px
texto com tamanho de fonte 16px
texto com tamanho de fonte 18px
texto com tamanho de fonte 24px
texto com tamanho de fonte 32px
texto com tamanho de fonte 48px
texto com tamanho de fonte 64px
texto com tamanho de fonte 72px
Dica:
Elementos filhos herdam o estilo de formatação de elementos pais, assim você pode criar blocos de conteúdo cujos elementos filhos possam herdar sua formatação. Veja o exemplo abaixo:
<div class="row small-border-frame border-color-silver"> <div class="col-6 col-s-6 no-border medium-border-right dashed-border border-color-green bg-color-mint-cream text-size-x-small"> <p> Esse primeiro parágrafo possui tamanho de fonte 12px </p> <p> Esse segundo parágrafo possui tamanho de fonte 12px </p> <p> Esse terceiro parágrafo possui tamanho de fonte 12px </p> </div> <div class="col-6 col-s-6 text-size-small"> <p> Esse primeiro parágrafo possui tamanho de fonte 14px </p> </div></div>Esse código irá resultar no seguinte conteúdo:
Esse primeiro parágrafo possui tamanho de fonte 12px
Esse segundo parágrafo possui tamanho de fonte 12px
Esse terceiro parágrafo possui tamanho de fonte 12px
Esse primeiro parágrafo possui tamanho de fonte 14px
Textos: alinhamento
As seguintes classes possibilitam alinhar textos:
| Classe | Alinhamento |
|---|---|
| text-left | alinhamento à esquerda |
| text-center | texto centralizado |
| text-right | alinhamento à direita |
| text-justify | texto justificado |
Veja o exemplo abaixo:
<div class="panel small-border-frame border-color-silver"> <p class="text-left"> texto alinhado à esquerda </p></div><div class="panel small-border-frame border-color-silver"> <p class="text-center"> texto centralizado </p></div><div class="panel small-border-frame border-color-silver"> <p class="text-right"> texto alinhado à direita </p></div><div class="panel small-border-frame border-color-silver"> <p class="text-left"> texto justificado </p></div>Esse código irá resultar no seguinte conteúdo:
texto alinhado à esquerda
texto centralizado
texto alinhado à direita
texto justificado
Textos: indentação
Indentação é o recuoespaçamento que se aplica ao início de um parágrafo. A tabela abaixo apresenta as classes que o framework Sketch disponibiliza para formatar a indentação dos parágrafos.
| Classe | Comprimento da indentação |
|---|---|
| small-indent | 16px |
| indent | 32px |
| medium-indent | 48px |
| large-indent | 64px |
Passemos ao exemplo abaixo:
<div class="panel small-border-frame border-color-silver"> <p class="small-indent"> Parágrafo com indentação de 16px </p></div><div class="panel small-border-frame border-color-silver"> <p class="indent"> Parágrafo com indentação de 32px </p></div><div class="panel small-border-frame border-color-silver"> <p class="medium-indent"> Parágrafo com indentação de 48px </p></div><div class="panel small-border-frame border-color-silver"> <p class="large-indent"> Parágrafo com indentação de 64px </p></div>Esse código irá resultar no seguinte conteúdo:
Parágrafo com indentação de 16px
Parágrafo com indentação de 32px
Parágrafo com indentação de 48px
Parágrafo com indentação de 64px
Textos: decoração
A decoração é um estilo de formatação que possibilita deixar o texto sublinhado (inferior ou superiormente) ou riscado. A tabela abaixo apresenta as classes disponíveis pelo framework para atribuir decoração aos textos:
| Classe | Descrição da decoração |
|---|---|
| no-decoration | sem decoração |
| text-underline | texto sublinhado inferiormente |
| text-overline | texto sublinhado superiormente |
| text-strike | texto riscado |
Prossigamos ao exemplo abaixo:
<div class="panel small-border-frame border-color-silver"> <p class="text-underline"> Texto sublinhado inferiormente </p></div><div class="panel small-border-frame border-color-silver"> <p class="text-overline"> Texto sublinhado superiormente </p></div><div class="panel small-border-frame border-color-silver"> <p class="text-strike"> Texto riscado </p></div>Esse código irá resultar no seguinte conteúdo:
Texto sublinhado inferiormente
Texto sublinhado superiormente
Texto riscado
Textos: transformação
Transformações permitem colocar todos os caractéres dos textos em um determinado estado. A tabela abaixo apresenta as transformações de textos oferecidas pelo framework Sketch:
| Classe | Descrição da transformação |
|---|---|
| text-uppercase | todas as letras maiúsculas |
| text-lowercase | todas as letras minúsculas |
| text-capitalize | apenas as primeiras letras das palavras será maiúscula |
| text-cap-first-word | apenas a primeira letra da primeira palavra de um parágrafo será maiúscula |
| text-small-caps | transforma todas as letras em maiúsculas, mas letras não iniciais são apresentadas com fonte em tamanho menor. |
Vamos dar uma olhada no exemplo abaixo:
<div class="panel small-border-frame border-color-silver"> <p class="text-uppercase"> esse parágrafo está sendo utilizado para testar classes </p></div><div class="panel small-border-frame border-color-silver"> <p class="text-lowercase"> ESSE PARÁGRAFO ESTÁ SENDO UTILIZADO PARA TESTAR CLASSES </p></div><div class="panel small-border-frame border-color-silver"> <p class="text-capitalize"> esse parágrafo está sendo utilizado para testar classes </p></div><div class="panel small-border-frame border-color-silver"> <p class="text-cap-first-word"> esse parágrafo está sendo utilizado para testar classes </p></div><div class="panel small-border-frame border-color-silver"> <p class="text-small-caps"> Esse parágrafo está sendo utilizado para testar classes </p></div>Esse código irá resultar no seguinte conteúdo:
esse parágrafo está sendo utilizado para testar classes
ESSE PARÁGRAFO ESTÁ SENDO UTILIZADO PARA TESTAR CLASSES
esse parágrafo está sendo utilizado para testar classes
esse parágrafo está sendo utilizado para testar classes
Esse parágrafo está sendo utilizado para testar classes
Textos: espaçamento
Quando publicamos textos em documentos HTML é importante considerar também o espaçamento que cada linha de um parágrafo terá a fim de garantir maior legibilidade ao conteúdo aprensentado. A tabela abaixo apresenta as classes responsáveis por aplicar espaçamentos às linhas de um texto:
| Classe | Espaçamento |
|---|---|
| medium-line-height | 24px |
| large-line-height | 32px |
Apresentemos o seguinte exemplo abaixo:
<div class="panel small-border-frame border-color-silver"> <p class="medium-line-height"> Esse paragrafo apresenta um texto com quebra de linha<br/> para demonstrar o espaçamento de 24px. Assim, cada quebra linha<br/> irá ajudar na concepção desse exemplo. </p></div><div class="panel small-border-frame border-color-silver"> <p class="large-line-height"> Esse paragrafo apresenta um texto com quebra de linha<br/> para demonstrar o espaçamento de 32px. Assim, cada quebra linha<br/> irá ajudar na concepção desse exemplo. </p></div>Esse código irá resultar no seguinte conteúdo:
Esse paragrafo apresenta um texto com quebra de linha
para demonstrar o espaçamento de 24px. Assim, cada quebra linha
irá ajudar na concepção desse exemplo.
Esse paragrafo apresenta um texto com quebra de linha
para demonstrar o espaçamento de 32px. Assim, cada quebra linha
irá ajudar na concepção desse exemplo.
Textos: estilos e negrito
O estilo de uma fonte denota se o texto formatado estará em itálico ou obliquo. Adicionalmente, o negrito dá ênfase ao texto pondo o contorno de seus caractéres em maior espessura. A tabela abaixo apresenta as classes fornecedas pelo framework para aplicar tais formatações.
| Classe | Descrição |
|---|---|
| text-italic | texto em itálico |
| text-oblique | texto em obliquo |
| text-bold | texto em negrito |
Observe o exemplo abaixo:
<div class="panel small-border-frame border-color-silver"> <p class="text-italic"> Texto formatado com estilo itálico. </p></div><div class="panel small-border-frame border-color-silver"> <p class="text-oblique"> Texto formatado com estilo obliquo. </p></div><div class="panel small-border-frame border-color-silver"> <p class="text-bold"> Texto formatado com negrito. </p></div>Esse código irá resultar no seguinte conteúdo:
Texto formatado com estilo itálico.
Texto formatado com estilo obliquo.
Texto formatado com negrito.
Textos: contornos e sombras
O framework Sketch também facilita a aplicação de contorno e sombra aos textos. A tabela abaixo apresenta as classes disponíveis para aplicar contorno e sombra aos textos.
| Classe | Descrição |
|---|---|
| text-contour | contorno preto de 1px de espessura |
| text-shadow | sombra de cor preta com 5px de espessura |
| text-wide-shadow | sombra de cor preta com 10px de espessura |
| text-white-contour | contorno branco de 1px de espessura |
| text-white-shadow | sombra de cor branca com 5px de espessura |
| text-wide-white-shadow | sombra de cor branca com 10px de espessura |
Observe o exemplo abaixo:
<div class="panel small-border-frame border-color-silver"> <p class="text-contour text-color-cyan text-bold"> Texto com contorno preto de 1px de espessura. </p></div><div class="panel small-border-frame border-color-silver"> <p class="text-shadow text-bold"> Texto com sombra de cor preta de 5px de espessura. </p></div><div class="panel small-border-frame border-color-silver"> <p class="text-wide-shadow text-color-red text-bold"> Texto com sombra de cor preta de 10px de espessura. </p></div><div class="panel small-border-frame border-color-silver bg-color-black"> <p class="text-white-contour text-color-dark-magenta text-bold"> Texto com contorno branco de 1px de espessura. </p></div><div class="panel small-border-frame border-color-silver bg-color-black"> <p class="text-white-shadow text-color-lime text-bold"> Texto com sombra de cor branca de 5px de espessura. </p></div><div class="panel small-border-frame border-color-silver bg-color-black"> <p class="text-wide-white-shadow text-color-white text-bold"> Texto com sombra de cor branca de 10px de espessura. </p></div>Esse código irá resultar no seguinte conteúdo:
Texto com contorno preto de 1px de espessura.
Texto com sombra de cor preta de 5px de espessura.
Texto com sombra de cor preta de 10px de espessura.
Texto com contorno branco de 1px de espessura.
Texto com sombra de cor branca de 5px de espessura.
Texto com sombra de cor branca de 10px de espessura.
Textos: contadores de parágrafos
O framework Sketch possibilita agregar contadores de parágrafos em textos por meio da classe text-section. Observe o exemplo abaixo:
<div class="container small-padding small-border-frame border-color-silver text-section"> <p> Primeiro parágrafo com texto meramente ilustrativo. </p> <p> Segundo parágrafo com texto meramente ilustrativo. </p> <p> Terceiro parágrafo com texto meramente ilustrativo. </p></div>Esse código irá resultar no seguinte conteúdo:
Primeiro parágrafo com texto meramente ilustrativo.
Segundo parágrafo com texto meramente ilustrativo.
Terceiro parágrafo com texto meramente ilustrativo.