Altere o tamanho e a cor do texto.

Torne uma frase de apresentação maior, ponha uma citação na cor da sua marca ou um título a branco sobre uma fotografia escura. Com Font size e Font color no painel Style, muda todo o texto de um elemento. Para parte de um texto, use antes a barra de ferramentas do editor de texto. Para tamanhos e cores partilhados por todas as páginas, use o seu tema.

O vídeo segue a receita abaixo: transforma uma frase numa apresentação com tamanho maior e cor da marca.

Antes de começar

• Abra a página no DXPR Builder; apontar para um elemento mostra a barra de controlos com More. Novo no construtor? Veja Crie a sua primeira página.
• Save no diálogo mantém uma alteração no editor. Save na barra de ferramentas do construtor por cima do conteúdo guarda a página e mostra "Saved field".
• Use o painel Style para um elemento: um parágrafo de apresentação, uma citação, um título sobre uma fotografia.
• Use o editor de texto para parte de um texto e para a estrutura. Faça de um título um verdadeiro título com Heading 2 ou Heading 3, não uma linha Normal maior. Os leitores de ecrã e os motores de pesquisa leem o nível, não o tamanho.
• Use a lista Styles do editor para estilos de texto de marca. O seu webmaster define-os em General Settings > Text Editor > Custom styles (/admin/dxpr_studio/dxpr_builder/settings).
• Use o seu tema para o tipo de letra do corpo, tamanhos de títulos e cores de ligações.

Receita: uma frase de apresentação na cor da sua marca

1. Adicione um elemento Text e escreva uma ou duas frases como texto Normal.
2. Paire o cursor sobre ele, clique em More e depois em Settings.
3. Abra o painel Style e arraste Font size para 20. O texto cresce enquanto arrasta.
4. Abra Font color e escolha a cor da sua marca nas amostras, ou escreva o código, como #1a4d8f, no campo de cor.
5. Clique em Save no diálogo. Com 20 px a frase conta como texto normal, por isso precisa de um contraste de 4,5 para 1. Introduza o seu código de cor e a cor de fundo num verificador de contraste; uma página branca é #ffffff.
6. Clique em Save na barra de ferramentas.

O que vê

A frase cresce para 20 px e fica com a cor da sua marca. Títulos e ligações dentro do mesmo elemento Text ficam com essa cor também, mas os títulos mantêm o próprio tamanho.

Como funcionam as definições

Font size

Font size vai de 0 a 100 px, e 0 mantém o tamanho do seu tema. O valor é o mesmo em todos os tamanhos de ecrã: uma linha de 48 px no computador também tem 48 px no telemóvel.

O tamanho vai para o elemento, e o texto que tem tamanho próprio mantém-no. Os títulos costumam ter, porque o Bootstrap os dimensiona a partir do tamanho base da página. O texto que dimensionou com a ferramenta de tamanho de letra do editor também mantém o tamanho.

Font color

O seletor mostra a paleta do seu tema como amostras, quando o seu site tem uma. Também tem um cursor de opacidade e um campo onde escreve um código de cor, como #1a4d8f. Clear no seletor devolve o texto à cor do tema.

Num elemento de conteúdo como Text, Card ou Alert, a cor chega a tudo dentro, títulos e ligações incluídos. Numa Section só chega ao texto sem cor própria. Títulos e ligações com cor do tema mantêm-na aí.

As classes de cor Bootstrap estão marcadas como !important, por isso vencem Font color. Um exemplo é a amostra Primary text color em HTML classes. Outro é um estilo de editor como Primary Brand Text em parte do texto.

Num Button, a cor vai para o próprio botão e substitui a cor de hover do tema. Defina Font color em Hover style também.

Hover

O painel Hover style tem o seu próprio Font color e Font size. Um tamanho maior ao pairar o cursor empurra o conteúdo à volta, por isso uma mudança de cor costuma ser a escolha mais calma.

Contraste

Para texto que a maioria das pessoas consegue ler, as regras WCAG 2 no nível AA pedem este contraste:

Sobre uma fotografia, meça contra a parte mais clara atrás do texto. Teste o seu par de cores com um verificador de contraste, como o verificador de contraste WebAIM.

Se não o vir

• O título dentro do texto não cresceu. O título tem tamanho próprio do seu tema. Escolha outro nível de título no editor de texto, ou use a ferramenta de tamanho de letra.
• Ligações e títulos mantêm a cor. Numa Section, o texto com cor própria do tema mantém-na. Defina Font color no elemento Text.
• Font color não faz nada. Uma classe de cor como Primary text color ou White text em HTML classes ganha. Remova a amostra.
• Parte do texto mantém outra cor. Um estilo de editor nessa parte, como Primary Brand Text, ganha. Remova o estilo no editor de texto.
• Font size não faz nada num contador. Circle counter e Number counter têm o seu próprio Font size. Use esse.
• Uma cor de amostra já não condiz com a marca. Uma amostra copia a cor quando a escolhe. Depois de uma mudança de paleta, escolha de novo a amostra.
• A cor da marca chumba na verificação de contraste. Escolha um tom mais escuro. Ou torne o texto com pelo menos 24 px, para se aplicar a meta de 3 para 1.
• O texto é difícil de ler sobre uma fotografia. O contraste é demasiado baixo. Escureça a fotografia com um gradiente, como mostra a página de Backgrounds.
• O botão perdeu a cor de texto de hover. A sua Font color substitui a cor de hover do tema. Defina Font color em Hover style também.

E a seguir?

• Ligue a secções e reutilize estilos com classes: reutilize um estilo de texto através de uma classe em vez de o definir em cada elemento.