Quando se trata de personalizar o seu site, a cor da fonte muitas vezes é negligenciada. Geralmente, os proprietários de sites deixam a cor padrão da fonte como preto ou qualquer que seja seu estilo do tema definido para o corpo e cor do texto do cabeçalho.
Entretanto, é uma boa ideia mudar a cor da fonte HTML em seu site por várias razões. Mudar a cor da fonte HTML pode parecer assustador, mas é bastante simples. Há várias maneiras de mudar a cor da fonte em seu site.
Neste artigo, mostraremos diferentes maneiras de mudar a cor das fontes do seu site e discutiremos o motivo pelo qual essa mudança pode ser relevante para você.
Confira nosso guia em vídeo para mudar a cor da fonte HTML
Por que mudar a cor da fonte HTML?
Você gostaria de mudar a cor da fonte porque fazer isso pode ajudar a melhorar a legibilidade e acessibilidade do seu site. Por exemplo, se o seu site usa um esquema de cores mais escuro, deixar a cor da fonte preta dificultaria a leitura do texto no seu site.
Outra razão pela qual você gostaria de considerar mudar a cor da fonte é se você usará uma cor mais escura da paleta de cores da sua marca. Esta é mais uma oportunidade para reforçar à sua marca. Ela constrói a consistência da marca e garante que o texto em todos os seus canais de marketing tenha a mesma aparência.
Agora que isso foi esclarecido, vamos ver como você pode definir e alterar a cor da fonte no HTML.
Formas de definir uma cor
Há várias maneiras de definir cores no web design, incluindo nome, valores RGB, códigos hexadecimais e valores HSL. Vamos dar uma olhada em como eles funcionam.
Nome da cor
Os nomes de cores são a maneira mais fácil de definir uma cor em seus estilos CSS. O nome da cor se refere ao nome específico para a cor HTML. Atualmente, existem 140 nomes de cores suportados, e você pode usar qualquer uma dessas cores em seus estilos. Por exemplo, você pode usar “blue” para definir a cor de um elemento individual para azul.
Entretanto, o lado negativo dessa abordagem é que nem todos os nomes de cores são suportados. Em outras palavras, se você usar uma cor que não está na lista de cores suportadas, você não será capaz de usá-la em seu design pelo nome da cor.
Valores RGB e RGBA
A seguir, nós temos os valores RGB e RGBA. O RGB significa Vermelho, Verde e Azul. Ele define a cor misturando os valores vermelho, verde e azul, de forma similar a como você misturaria uma cor em uma paleta real.
O valor RGB se parece com isso: RGB(153,0,255). O primeiro número especifica a entrada da cor vermelha, o segundo especifica a entrada da cor verde, e o terceiro especifica o azul.
O valor de cada cor entrada pode variar entre 0 e 255, onde 0 significa que a cor não está presente e 255 significa que a cor em particular está em sua intensidade máxima.
O valor do RGBA acrescenta mais um valor à mistura, e esse é o valor alfa que representa a opacidade. Ele varia de 0 (não transparente) a 1 (totalmente transparente).
Valor HEX
Os códigos de cores hexadecimais funcionam de forma similar aos códigos RGB. Eles consistem de números de 0 a 9 e letras de A a F. O código hexadecimal é parecido com este: #800080. As duas primeiras letras especificam a intensidade da cor vermelha, os dois números do meio especificam a intensidade da cor verde e os dois últimos definem a intensidade da cor azul.
Valores de HSL e HSLA
Outra maneira de definir cores em HTML é usar valores HSL. HSL significa tonalidade, saturação e leveza.
A matiz usa graus de 0 a 360. Em uma roda de cor padrão, o vermelho está em torno de 0/360, o verde está em 120, e o azul está em 240.
A saturação usa porcentagens para definir o quão saturada está a cor. 0 representa o preto e branco, e 100 representa a cor completa.
Finalmente, a leveza usa porcentagens semelhantes à saturação. Neste caso, 0% representa o preto e 100% representa o branco.
Por exemplo, a cor roxa que temos usado ao longo deste artigo ficaria assim na HSL: hsl(276, 100%, 50%).
A HSL, assim como a RGB, suporta opacidade. Nesse caso, você usaria o valor HSLA onde A significa alfa sendo definido em um número de 0 a 1. Se quiséssemos baixar a opacidade do exemplo roxo, usaríamos este código: hsl(276, 100%, 50%, .85) .
Agora que você sabe como definir cores, vamos olhar para diferentes maneiras de mudar a cor da fonte HTML.
O antigo: Tag <font>
Antes da introdução do HTML5 e do estabelecimento do padrão de codificação, era possível alterar a cor da fonte usando as tags de fonte. Mais especificamente, você usaria a tag de fonte com o atributo color para definir a cor do texto. A cor era especificada tanto pelo seu nome quanto pelo seu código hexadecimal.
Aqui está um exemplo de como este código ficou com código de cores hexadecimais:
<font color="#800080">Este texto está roxo.</font>E é assim que você poderia definir a cor do texto para roxo usando o nome da cor.
<font color="purple">Este texto está roxo.</font> Entretanto, a tag <font> é depreciada em HTML5 e não é mais usada. Mudar a cor da fonte é uma decisão de design, e design não é o propósito principal do HTML. Portanto, faz sentido que as tags <font> não sejam mais suportadas em HTML5.
Então se a tag <font> não é mais suportada, como você muda a cor da fonte HTML? A resposta é em Cascading Style Sheets ou CSS.
O novo: Estilos CSS
Para mudar a cor da fonte HTML com CSS, você usará a propriedade de cor CSS emparelhada com o seletor apropriado. CSS permite que você use nomes de cores, RGB, hexadecimal, e valores HSL para especificar a cor. Há três maneiras de usar CSS para mudar a cor da fonte.
CSS Inline
O CSS Inline é adicionado diretamente ao seu arquivo HTML. Você usará a tag HTML tal como <p> e então a estilizará com a propriedade de cor CSS assim:
<p style="color: purple">Este é um parágrafo roxo.</p>Se você quiser usar um valor hexadecimal, seu código será parecido com este:
<p style="color:#800080">Este é um parágrafo roxo.</p>Se você vai usar o valor RGB, você vai escrevê-lo assim:
<p style="color:RGB(153,0,255)">Este é um parágrafo roxo.</p>Finalmente, usando os valores da HSL, você usaria este código:
<p style="color:hsl(276, 100%, 50%)">Este é um parágrafo roxo.</p>Os exemplos acima mostram como mudar a cor de um parágrafo em seu site. Mas você não está limitado apenas aos parágrafos. Você pode mudar a cor da fonte de seus cabeçalhos, bem como os links.
Por exemplo, a substituição da tag <p> acima do <h2> mudará a cor do texto daquele cabeçalho, enquanto a substituição pela tag <a> mudará a cor daquele link. Você também pode usar o elemento <span> para colorir qualquer quantidade de texto.
Se você quiser mudar a cor de fundo do parágrafo inteiro ou de um cabeçalho, é muito semelhante a como você mudaria a cor da fonte. Você tem que usar o atributo background-color e usar ou o nome da cor, hexadecimal, RGB, ou valores HSL para definir a cor. Aqui está um exemplo:
<p style="background-color: purple">CSS embutido
O CSS embutido está dentro das tags <style> e colocado entre as tags do cabeçalho do seu documento HTML.
O código terá este aspecto se você quiser usar o nome da cor:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: purple;
}
</style>
</head>O código acima mudará a cor de cada parágrafo da página para roxo. Similar ao método CSS em linha, você pode usar seletores diferentes para mudar a cor da fonte dos seus cabeçalhos e links.
Se você quiser usar o código hexadecimal, aqui está como o código ficaria:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: #800080;
}
</style>
</head>O exemplo abaixo usa os valores RBGA para que você possa ver um exemplo de ajuste da opacidade:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: RGB(153,0,255,0.75),
}
</style>
</head>E o código HSL ficaria assim:
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: hsl(276, 100%, 50%),
}
</style>
</head>CSS externo
Finalmente, você pode usar CSS externo para mudar a cor da fonte em seu site. CSS externo é CSS colocado em um arquivo separado da folha de estilo (stylesheet), geralmente chamado style.css ou stylesheet.css.
Esta folha de estilo é responsável por todos os estilos em seu site e específica as cores e tamanhos das fontes, margens, padrões, famílias de fontes, cores de fundo, e muito mais. Em resumo, a folha de estilos (stylesheet) é responsável pela aparência visual do seu site.
Para mudar a cor da fonte com CSS externo, você usaria seletores para estilizar as partes de HTML que você deseja. Por exemplo, este código mudará todo o corpo do texto do seu site:
body {color: purple;}Lembre-se, você pode usar os valores RGB, hexadecimais e HSL e não apenas os nomes das cores para mudar a cor da fonte. Se você quiser editar a folha de estilo, é recomendável fazer isso em um editor de código.
Inline, Embutido, ou Externo?
Então agora você sabe como você pode usar o CSS para mudar a cor da fonte. Mas qual método você deve usar?
Se você usar o código CSS inline, você o adicionará diretamente ao seu arquivo HTML. Geralmente falando, este método é adequado para correções rápidas. Se você quiser mudar a cor de um parágrafo ou cabeçalho específico em uma única página, este método é a maneira mais rápida e menos complicada de fazer isso.
Entretanto, estilos inline podem fazer o tamanho do seu arquivo HTML maior. Quanto maior for seu arquivo HTML, mais tempo levará para que sua página web seja carregada. Além disso, o CSS inline pode fazer seu HTML ficar confuso. Como tal, o método inline de usar CSS para mudar a cor da fonte HTML é geralmente desencorajado.
O CSS embutido é colocado entre as tags <head> e dentro da tag <style>. Como o CSS inline, ele é bom para correções rápidas e sobreposição aos estilos especificados em uma folha de estilo externa.
Uma diferença notável entre os estilos inline e os estilos incorporados é que os estilos incorporados se aplicam a todas as páginas que carregam as tags head, enquanto os estilos inline se aplicam apenas à página específica em que estão presentes, geralmente visando um elemento específico dessa página.
O último método, CSS externo, usa uma folha de estilo dedicada para definir seus estilos visuais. Geralmente falando, é melhor usar uma folha de estilos externa para manter todos os seus estilos em um único lugar, de onde eles são fáceis de editar. Isso também separa apresentação e design, assim o código é fácil de gerenciar e manter.
Tenha em mente que os estilos inline e embutidos podem substituir os estilos definidos na folha de estilos externa.
Tags de fontes ou estilos CSS: Prós e contras
Os dois métodos primários para mudar as cores da fonte HTML são usar a tag de fonte ou estilos CSS. Ambos os métodos têm seus prós e contras.
Prós e contras de tag da fonte HTML
A tag de fonte HTML é fácil de usar, o que é uma vantagem. Em geral, o CSS é mais complicado e leva mais tempo para ser aprendido do que simplesmente digitar <font color="purple">. Se você possui um site antigo que não usa HTML5, a tag de fonte é um método viável para mudar a cor da fonte.
Embora a tag de fonte seja fácil de usar, você não deve usá-la se o seu site usa HTML. Como mencionado anteriormente, a tag de fonte foi descontinuada no HTML5. O uso de código descontinuado deve ser evitado, pois os navegadores podem deixar de suportá-lo a qualquer momento. Isso pode causar a quebra do seu site, fazendo com que ele não funcione corretamente ou, pior ainda, não seja exibido para seus visitantes.
Prós e contras do CSS
O CSS, assim como a tag da fonte, tem seus prós e contras. A vantagem mais significativa do uso do CSS é que ele é a maneira correta de mudar a cor da fonte e especificar todos os outros estilos para o seu site.
Como mencionado anteriormente, ele separa a apresentação do projeto, tornando seu código mais fácil de gerenciar e manter.
Do lado negativo, CSS e HTML5 podem levar tempo para aprender e escrever corretamente em comparação com a antiga maneira de escrever código.
Tenha em mente que com o CSS, você tem maneiras diferentes de mudar a cor da fonte, e cada um desses métodos tem seu próprio conjunto de prós e contras, como discutido anteriormente.
Dicas para mudar a cor da fonte HTML
Agora que você sabe como mudar a cor da fonte HTML, aqui estão algumas dicas que o ajudarão.
Use o Color Picker
Ao invés de escolher cores aleatoriamente, use o color pickers para escolher as cores certas. O benefício de um selecionador de cores é que ele lhe dará o nome da cor e os valores hexadecimais, RGB e HSL corretos que você precisa usar em seu código.
Verifique o contraste
Texto escuro com fundo escuro assim como texto claro com fundo claro não funcionam bem juntos. Eles tornarão o texto em seu site difícil de ler. Entretanto, você pode usar um verificador de contraste para garantir que as cores do seu site estejam acessíveis e que o texto seja fácil de ler.
Encontre a cor usando o método Inspecionar
Se você vê uma cor que você gosta em um site, você pode inspecionar o código para obter o valor hexadecimal, RGB ou HSL da cor. No Chrome, tudo que você tem que fazer é apontar o cursor para a parte da página que você quer inspecionar, clicar com o botão direito do mouse e selecionar Inspecionar. Isto abrirá o painel de inspeção de código, onde você pode ver o código HTML de um site e os estilos correspondentes.
Resumo
Mudar a cor da fonte HTML pode ajudar a melhorar a legibilidade e acessibilidade do seu site. Também pode ajudar a estabelecer consistência de marca nos estilos do seu site.
Neste guia, você aprendeu sobre quatro maneiras diferentes de mudar a cor da fonte HTML: com nomes de cores, códigos hexadecimais, RGB, e valores HSL.
Também abordamos como você pode mudar a cor da fonte com CSS inline, embutido e externo e usar a tag da fonte e os prós e contras de cada método. Até agora, você já deve ter um bom entendimento de qual método você deve usar para mudar a cor da fonte HTML, então a única coisa a fazer agora é implementar estas dicas no seu site.
Qual é a sua opinião sobre mudar a cor da fonte com CSS e a tag de fonte? Compartilhe sua opinião conosco na seção de comentários!
Deixe um comentário