Tipografia com Bootstrap

Dando sequência à série de ferramentas do Bootstrap, depois de falar dos containers e grids no último texto, vamos partir agora para a tipografia.

Com a tipografia muito pode ser feito, e um forte estímulo para seu uso provém de seu estreito link entre o design gráfico e o objetivo em se dar uma ordem estrutural para uma web page.

No texto de hoje vamos focar em alguns elementos tipográficos de uma aplicação web, os quais servirão como base para algumas análises e exemplos das ferramentas disponibilizada pelo Bootstrap, incluindo:

  • Cabeçalhos;
  • Listas;
  • Utilitários de texto;

Cabeçalhos

Todos os cabeçalhos disponíveis em html podem ser usados, desde o <h1> até <h6>.

Cada um representando um tamanho de fonte distinto, do maior para o menor respectivamente do <h1> para o <h6>, como representados na tabela abaixo.

 

ComandoTamanho da fonte
Header 1Bootstrap heading h1
Header 2Bootstrap heading h2
Header 3Bootstrap heading h3
Header 4Bootstrap heading h4
Header 5Bootstrap heading h5
Header 6Bootstrap heading h6

Obs:. Os tamanhos de fontes estão em tamanhos ilustrativos apenas para referência, ou seja, não representam necessariamente o tamanho exato utilizado no framework.

 

Em linhas de código

<h1>h1. Cabeçalho Bootstrap</h1>
<h2>h2. Cabeçalho Bootstrap</h2>
<h3>h3. Cabeçalho Bootstrap</h3>
<h4>h4. Cabeçalho Bootstrap</h4>
<h5>h5. Cabeçalho Bootstrap</h5>
<h6>h6. Cabeçalho Bootstrap</h6>

Lembrando que antes de definir os cabeçalhos, é importante definir um container para a estrutura, como já foi analisado no texto 6 da série (anterior a este).

 

Listas

Ao falar de listas podemos começar por uma “ul”, que é uma lista não ordenada, e dentro dela as “li”, que são as listas ordenadas. Temos dois tipos de lista, o unstyled, que também vai dentro da estrutura de grid, e o inline.

O tipo unstyled, ocorre quando se coloca um list-style none, ou seja, ele remove os pontuadores de tópicos que antecedem o texto, normalmente com formato de bolinhas ou números em sequência. Já o list inline, tem a função de deixar a lista ordenada em linha.

 

Em linhas de código

<ul class = “list-unstyled”>

<li>…</li>

</ul>

 

<ul class = “list-inline”>

<li>…</li>

</ul>

 

Utilitários de texto

Altere alinhamento de texto, transforme, estilos, espessura e cor com os utilitários de texto e utilitários de cores.

 

Tamanhos de texto

Temos também componentes para tamanho de texto, upper case, lower case e o capitalize, ou seja, essa ferramenta pode definir o texto em letra maiúscula, minúscula ou apenas deixar a primeira letra maiúscula, respectivamente.

Tudo isto dentro da estrutura do grid.

 

Em linhas de código

<pclass = “text-lowercase”> Texto pequeno. </p>

<pclass = “text-uppercase”> Texto maiúsculo. </p>

<pclass = “text-capitalize”> Primeira letra maiúscula. </p>

 

Alinhamento

Outro elemento utilitário de texto é o alinhamento de seu bloco de citação, sendo eles: alinhamentos à esquerda, justificado, à direita, ao centro e sem texto envoltório.

Neste texto sem texto envoltório (nowrap), que é provavelmente o menos conhecido, vale lembrar que em situação normal o texto fica bloqueado pela camada pai, ou seja, ele deve respeitar os limites pré-definidos.

Mas quando ele é definido como nowrap, seria exatamente o oposto, ou seja, ele fica “rebelde” e passa a não respeitar estes limites definidos, fazendo com que no texto não ocorra quebra e portanto permanecerá todo inline.  

 

Em linhas de código

<pclass = “text-left”> texto alinhado à esquerda. </p>

<pclass = “center-text”> Centro de texto alinhado. </p>

<pclass = “text-right”> texto alinhado à direita. </p>

<pclass = “text.justify”> Texto justificado. </p>

<pclass = “text.nowrap”> Sem texto envoltório. </p>

 

Nesta parte é importante lembrar da estrutura do grid, ou seja, definir  colunas e linhas antes de qualquer coisa, além de adicionar o parâmetro referente ao tamanho da tela do dispositivo sendo utilizado.

 

Tipografia responsiva e concluindo

O Bootstrap em questão de tipografia, oferece as ferramentas apresentadas e diversas outras, tudo para atender à um mercado dinâmico e que se renova de uma maneira cada vez mais rápida.

Outro aspecto importante, é bom lembrar da característica responsiva tão presente nas funcionalidades do framework, que não é diferente na tipografia.

A Tipografia responsiva se refere a escala de textos e componentes, simplesmente ajustando a font-size dos elementos raízes usando várias media queries. Lembrando que o Bootstrap não faz isso por você,  apesar de ser algo bem simples.

Nos próximos artigos, vamos abordar questões de tratamento de imagem, seu uso prático e principais componentes. Acompanhe e não perca os próximos conteúdos!  

 

E aí? Curtiu o artigo? Então deixe seu comentário!

This site uses Akismet to reduce spam. Learn how your comment data is processed.