Use uma variedade de configurações para personalizar o texto do seu site.
Você pode ajustar o estilo da fonte, a cor, o tamanho, o espaçamento do texto e muito mais nos estilos de site. O estilo controla a tipografia (design de fontes) para dar personalidade e elegância às palavras. A maioria das mudanças no estilo afeta esse tipo de texto em todo o site.
Este guia analisa as diferentes formas de ajustar o estilo do texto do seu site.
Dica: para saber mais sobre a formatação do texto, incluindo definir o tipo de texto, criar listas e usar negrito e itálico, confira Formatação do texto.
Assista a este vídeo
Estilizar texto
O estilo do texto do site depende da versão do site.
Para ajustar o estilo do texto, use os painéis de fontes e de cores em estilos de site para fixar as fontes e as cores em todo o site; ou as personalize em uma seção específica.
Para mais informações, acesse Alterar fontes e Alterar cores.
Para ajustar o estilo do texto, use os estilos do site para escolher as fontes e as cores. Para padronizar o visual, os ajustes dos estilos do site afetam todos os textos com um formato específico.
Por exemplo: é possível mudar a fonte de todos os cabeçalhos ou de todo o corpo de texto de uma vez só. Cada template dá opções um pouco diferentes na edição do estilo do texto. Para saber mais sobre como isso funciona, leia Como alterar fontes.
Use as seções abaixo para ver as etapas específicas para cada opção de estilo.
Cor
A forma de alterar a cor do texto depende da versão do site.
É possível alterar a cor de um grupo de textos nos estilos de site, como Parágrafo (pequeno) ou Links do título. Para alterar a cor de um grupo de textos:
- Abra os estilos do site e clique em Cores.
- Abra o tema de cores da seção que você deseja editar.
- Clique no ajuste de cor que corresponde ao grupo de textos a ser editado e escolha uma nova cor.
Veja etapas detalhadas em Alteração de cores.
Cor do bloco de texto
No bloco de texto, você pode alterar a cor do texto selecionado. Altere as cores de palavras específicas para destacá-las; ou deixe cada letra com uma cor diferente. Para personalizar as cores do texto:
- Clique em Editar na página ou no item com o bloco de texto; em seguida, clique dentro do bloco de texto.
- Realce o texto desejado. Pode ser uma única letra, uma única palavra ou várias palavras.
- Na barra de ferramentas do texto, clique no ícone de cor e escolha uma nova cor. Clique em Esquema para escolher uma cor do esquema de cores geral o site; ou clique em Personalizar para usar o seletor de cores.
- Clique em Salvar para salvar as alterações e continuar editando ou clique em Sair e depois em Salvar para fechar o editor.
Lembre-se:
- A alteração das cores do texto na barra de ferramentas do bloco de texto afeta todas as cores de texto definidas nos estilos do site. Após alterar as cores do texto na barra de ferramentas do bloco de texto, se você alterar a cor desse mesmo grupo de textos nos estilos do site, as alterações nas cores feitas na barra de ferramentas do bloco de texto não mudarão.
- As alterações no tema de cores de uma seção afeta todas as cores do texto e deixa o texto de acordo com as configurações de cores desse tema. Para restaurar as cores de texto personalizadas no bloco de texto, você precisará reaplicá-las manualmente.
- Se você alterar o tema de cores de uma seção e, em seguida, voltar para o tema de cores anterior, as cores personalizadas serão afetadas. Você precisará reaplicá-las manualmente.
- O ícone de cor só aparece nos blocos de texto e não aparece em outras barras de ferramentas de texto.
Nos estilos do site, selecione o ajuste de cores correspondente ao grupo de textos a ser editado. Veja etapas detalhadas em Alteração das cores.
Fonte
Nos estilos do site, clique no grupo de textos a ser editado e escolha uma nova fonte. Confira as etapas detalhadas em Alteração das fontes.
Espaçamento entre as letras
A maneira como você altera o espaçamento entre letras depende da versãodo site.
Para alterar o espaçamento entre letras:
- Ao editar uma página, clique no ícone do pincel e depois em Fontes.
- Em Estilos gerais das fontes, clique no tipo de texto a ser editado: Títulos, Parágrafos, Botões ou Diversos.
- Use o controle deslizante Espaçamento entre letras para ajustar o espaçamento ou insira um novo valor para em.
- Clique em Salvar para salvar as alterações e continuar editando; ou clique em Sair e depois em Salvar para fechar o editor.
Nos estilos do site, clique no ajuste Espaçamento entre letras para alterar o espaço entre as letras.
Para levar em conta quando definir o espaçamento entre letras:
- Valores negativos podem causar sobreposição de caracteres. Deixe o espaçamento em no mínimo 0 px para evitar problemas no layout da versão móvel.
- Se as alterações no espaçamento não aparecerem na versão móvel, veja se o espaçamento está em px em vez de em. Nos templates das famílias Bedford e Pacific, o cabeçalho tem um espaçamento máximo na versão móvel.
Altura da Linha
A maneira como você altera a altura da linha depende da versãodo site.
Para alterar a altura da linha:
- Ao editar uma página, clique no ícone do pincel e depois em Fontes.
- Em Estilos gerais das fontes, clique no tipo de texto a ser editado: Títulos, Parágrafos, Botões ou Diversos.
- Use o controle Altura da linha para mudar o espaçamento; ou dê um novo valor para em.
- As alterações permanecerão enquanto você edita outro conteúdo da página. Clique em Salvar para salvar as alterações e continuar editando; ou clique em Sair e depois em Salvar para fechar o editor.
Nos estilos do site, use o ajuste Altura da linha para alterar o espaço entre as linhas.
Nota: Uma altura de linha de 0em pode sobrepor o texto, especialmente em dispositivos móveis.
Texto monoespacial ou código
O texto monoespaçado tem o mesmo espaço horizontal entre cada caractere. O nome do texto e como se ajusta o estilo dele dependem da versão do site.
O tamanho e a fonte do texto monoespaçado seguem o estilo de texto Diversos no painel "Fontes". Para ajustar o estilo de uma fonte, confira Alteração de fontes.
A cor do texto monoespaçado segue o ajuste Parágrafo (médio) no painel "Cores". Para alterar a cor da fonte, confira Alteração das cores.
O tamanho e a cor do texto do código seguem os ajustes do texto do corpo. Não é possível alterar o estilo da fonte.
Parágrafo ou texto normal
O conceito de texto principal do corpo e como se ajustam os estilos dele dependem da versão do site.
O tamanho e a fonte do texto do parágrafo seguem o estilo de texto Parágrafos no painel "Fontes".
O texto no site segue a paleta de cores geral do site. Para destacar uma seção do texto, ajuste o tema da cor da seção.
Quais ajustes de estilo vão alterar a fonte, o tamanho e a cor do corpo do texto do site dependem da família do modelo:
Template |
Fonte |
Tamanho |
Cor |
Adirondack |
Conteúdo principal > Texto |
Conteúdo principal > Texto |
Conteúdo principal > Cor do texto |
Avenue |
Tipografia > Texto do corpo |
Tipografia > Texto do corpo |
Cores > Cor do texto |
Aviator |
Tipografia > Fonte do texto |
Tipografia > Fonte do texto |
Cores > Texto |
Bedford |
Conteúdo principal > Fonte do texto da página |
Conteúdo principal > Fonte do texto da página |
Conteúdo principal > Cor da fonte do texto |
Brine |
Conteúdo: fontes > Texto do corpo |
Conteúdo: fontes > Texto do corpo |
Conteúdo: cores > Texto do corpo |
Farro |
Principal: dontes de conteúdo > Texto do corpo |
Principal: dontes de conteúdo > Texto do corpo |
Principal: cores do conteúdo > Texto do corpo |
Five |
Conteúdo principal > Texto do corpo |
Conteúdo principal > Texto do corpo |
Conteúdo principal > Cor do texto do corpo |
Flatiron |
Conteúdo principal > Texto |
Conteúdo principal > Texto |
Conteúdo principal > Cor do texto |
Forte |
Tipografia > Texto do corpo |
Tipografia > Texto do corpo |
Tipografia > Cor do texto do corpo |
Galapagos |
Em todo o site > Fonte do corpo |
Em todo o site > Fonte do corpo |
Em todo o site > Cor do texto do corpo |
Ishimoto |
Conteúdo principal > Texto |
Conteúdo principal > Tamanho do texto |
Conteúdo principal > Cor do texto do corpo |
Momentum |
Conteúdo principal > Texto do corpo |
Conteúdo principal > Texto do corpo |
Conteúdo principal > Cor do texto do corpo |
Montauk |
Tipografia > Texto do corpo |
Tipografia > Texto do corpo |
Cores > Cor do texto |
Native |
Conteúdo principal > Texto do corpo |
Conteúdo principal > Tamanho do texto do corpo |
Conteúdo principal > Cor do texto do corpo |
Pacific |
Conteúdo principal > Fonte do texto |
Conteúdo principal > Fonte do texto |
Conteúdo principal > Cor do texto |
Skye |
Fontes em todo o site > Corpo |
Fontes em todo o site > Corpo |
Cores do texto em todo o site > Cor do texto do corpo |
Supply |
Conteúdo principal > Fonte do corpo |
Conteúdo principal > Fonte do corpo |
Conteúdo principal > Cor do texto do corpo |
Tremont |
Fontes em todo o site > Fonte do corpo |
Fontes em todo o site > Fonte do corpo |
Cores das fontes em todo o site > Cor do corpo |
Wells |
Opções em todo o site > Texto |
Opções em todo o site > Tamanho do texto |
Opções em todo o site > Cor dos títulos |
Wexley |
Conteúdo principal > Fonte do texto do corpo |
Conteúdo principal > Fonte do texto do corpo |
Conteúdo principal > Cor do texto do corpo |
York |
Site: tipografia > Fonte do corpo |
Site: tipografia > Fonte do corpo |
Site: tipografia > Cor do texto do corpo |
Citação
No bloco de texto, o estilo da citação varia de acordo com a versão do site.
O estilo da citação segue a fonte e a cor desse tipo de texto.
Por exemplo, se o texto da citação for texto do Título 2, a citação terá a mesma fonte e tamanho que outros textos do Título 2 no site. A cor do texto da citação seguirá as cores dessa seção.
Dica: outra opção é usar um bloco de citação, que tem as próprias opções de estilo.
O estilo das citações varia de acordo com o template. Em alguns templates, por exemplo, a citação tem uma linha vertical à esquerda para adicionar uma separação visual.
Dica: outra opção é usar o bloco de citação. Em alguns templates, esse bloco tem opções de estilo próprias para destacar a citação.
Estilos de texto de citação
Veja como editar o estilo do texto da citação nestas famílias de templates. Em alguns templates, o texto segue o mesmo estilo do bloco de citação.
Família de template |
Fonte |
Cor |
Linha |
Adirondack |
Segue o corpo de texto |
Segue o corpo de texto |
Não |
Avenue |
Segue o corpo de texto |
Segue o corpo de texto |
Sim |
Aviator |
Ajuste da fonte da citação |
Ajuste do texto da citação |
Não |
Bedford |
Segue o corpo de texto |
Segue o corpo de texto |
Não |
Brine |
Segue o corpo de texto |
Segue o corpo de texto |
Sim |
Farro |
Segue o corpo de texto |
Segue o corpo de texto |
Sim |
Five |
Ajuste do bloco de citação |
Segue o corpo de texto |
Não |
Flatiron |
Ajuste da fonte da citação |
Ajuste da cor da citação |
Não |
Forte |
Segue o corpo de texto |
Segue o corpo de texto |
Não |
Galapagos |
Segue o corpo de texto |
Segue o corpo de texto |
Sim |
Ishimoto |
Segue o corpo de texto |
Segue o corpo de texto |
Sim |
Momentum |
Segue o corpo de texto |
Segue o corpo de texto |
Não |
Montauk |
Segue o corpo de texto |
Segue o corpo de texto |
Sim |
Native |
Ajustes da citação e do tamanho das citações |
Segue o corpo de texto |
Sim |
Pacific |
Segue o corpo de texto |
Segue o corpo de texto |
Sim |
Skye |
Segue o corpo de texto |
Segue o corpo de texto |
Sim |
Supply |
Segue o corpo de texto |
Segue o corpo de texto |
Sim |
Tremont |
Segue o corpo de texto |
Segue o corpo de texto |
Sim |
Wells |
Ajustes da citação e do tamanho da citação |
Segue o corpo de texto |
Não |
Wexley |
Ajuste da fonte da citação |
Segue o corpo de texto |
Não |
York |
Segue o corpo de texto |
Segue o corpo de texto |
Sim |
Tamanho
O processo para alterar o tamanho do texto depende da versão do site.
No painel "Fontes", clique num pacote de fontes para usar no site; em seguida, escolha um Tamanho-base. Os demais textos seguirão esse tamanho-base. Você também pode clicar em Atribuir estilos para fixar o tamanho da fonte numa área de texto específica.
Para ver as etapas completas, acesse Como alterar fontes.
Nos estilos do site, clique no ajuste Tamanho para fixar o tamanho da fonte. Você pode usar o controle ou digitar um valor para o tamanho dela.
Em alguns modelos, você pode definir os tamanhos máximo ou mínimo para fontes em tamanhos de tela diferentes. Veja mais informações em Dimensionamento de fontes.
Dica: todos os sites do Squarespace têm um design responsivo integrado, que otimiza os tamanhos de texto do site para cada tela.
Transformação do texto
Use a Transformação de Texto para aplicar o estilo de capitalização ao texto, incluindo:
- Capitalizar - Capitalize a Primeira Letra de Cada Palavra
- Maiúsculas - TUDO EM MAIÚSCULAS
- Minúsculas - tudo em minúsculas
Esse ajuste se aplica somente a determinados tipos de letra e grupos de texto.
A transformação de texto aparece em diversas áreas, dependendo da versão do site.
- Ao editar uma página, clique no ícone do pincel e depois em Fontes.
- Em Estilos gerais das fontes, clique no tipo de texto a ser alterado: Títulos, Parágrafos, Botões ou Diversos.
- Escolha uma opção de estilo no menu suspenso Transformação do texto.
- As alterações permanecerão enquanto você edita outro conteúdo da página. Clique em Salvar para salvar as alterações e continuar editando; ou clique em Sair e depois em Salvar para fechar o editor.
Nos estilos do site, use o menu suspenso Transformação do texto em um dos ajustes da fonte.
Peso
A maneira como você altera o peso do texto depende da versão do site.
- Ao editar uma página, clique no ícone do pincel e depois em Fontes.
- Em Estilos gerais das fontes, clique no tipo de texto a ser alterado: Títulos, Parágrafos, Botões ou Diversos.
- Escolha uma opção de peso no menu suspenso Peso.
- As alterações permanecerão enquanto você edita outro conteúdo da página. Clique em Salvar para salvar as alterações e continuar editando; ou clique em Sair e depois em Salvar para fechar o editor.
Nos estilos do site, use o menu suspenso Peso em um dos ajustes da fonte para deixar o texto mais grosso ou mais fino.