--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/tipografia' title: 'Altere o tamanho e a cor do texto | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:13:34+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Altere o tamanho e a cor do texto' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:13:34+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/tipografia' articleSection: 'Estilizar os elementos' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/tipografia' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Início item: 'https://dxpr.com/pt-pt' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pt-pt --- [Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Estilizar os elementos](/pt-pt/hc/documentation/learn-dxpr-builder/element-settings) # Altere o tamanho e a cor do texto. Aprender DXPR BuilderCriar páginasEstilizar os elementos ## Neste guia Guias relacionados - [Ligue a secções e reutilize estilos com classes](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/css-personalizado) 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](/pt-pt/hc/documentacao/aprender-dxpr-builder/primeiros-passos/primeira-pagina). - **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: | Texto | Contraste com o fundo | |---|---| | Texto normal | pelo menos 4,5 para 1 | | Texto grande: 24 px (18 pt) ou mais, ou 19 px (14 pt) ou mais em negrito | pelo menos 3 para 1 | 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](https://webaim.org/resources/contrastchecker/). ## 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](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/fundo). - **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](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/css-personalizado): reutilize um estilo de texto através de uma classe em vez de o definir em cada elemento.