A versão curta
- Os efeitos de texto são tratamentos aplicados às letras, como contornos, linhas interiores, extrusão, ecos deslocados, desacerto de impressão e brilhos.
- Os efeitos funcionam melhor em poucas palavras grandes, num peso carregado, onde dão carácter sem tornar o texto mais difícil de ler.
- Os efeitos parecem datados quando são aplicados na força máxima a todas as linhas, empilhados uns sobre os outros ou usados para remediar letra fraca.
- O texto em contorno precisa de um tipo de letra espesso e simples e de um fundo calmo, porque as letras perdem a sua forma sólida.
- Escolhe um efeito por design e liga as suas cores à paleta do fundo, para que pareça desenhado e não acrescentado.
Nesta página
Os efeitos de texto são tratamentos aplicados às letras, como um contorno, uma linha interior, uma extrusão 3D, um eco deslocado, um desacerto de impressão ou um brilho suave. Não parecem datados quando se cumprem três regras: usa um efeito por design, aplica-o a poucas palavras grandes num peso carregado e vai buscar as suas cores ao fundo e não a uma predefinição. Os efeitos falham quando são empilhados, espalhados por todas as linhas ou usados para salvar letra que não estava a funcionar.
Este guia trata das principais famílias de efeitos, de quando cada uma serve a uma mensagem, de como as manter legíveis e de como construir algumas em CSS. Se ainda não escolheste o tipo de letra, começa por fontes de destaque, porque a maioria dos efeitos precisa de letras grandes e robustas para funcionar.
Os principais tipos de efeitos de texto
A maioria dos tratamentos de letras pertence a um punhado de famílias. Cada uma traz as suas próprias associações, e é por isso que escolher uma é na verdade escolher um tom de voz.
| Efeito | Que aspeto tem | Tom que define | Risco para a legibilidade |
|---|---|---|---|
| Contorno | Letras desenhadas só com traços | Arejado, moderno, editorial | Alto em fundos agitados |
| Linha interior | Uma linha fina dentro de cada traço | Letreiros vintage, ofício, desporto | Baixo em tamanhos grandes |
| Extrusão | Letras com profundidade 3D | Retro, brincalhão, ruidoso | Moderado |
| Duplo ou eco | Uma cópia deslocada ou um rasto por trás | Movimento, música, energia | Moderado |
| Recorte | Letras cortadas e desviadas | Tensão, moda, tecnologia | Moderado |
| Riso | Camadas de cor desacertadas, textura de impressão | Impressão independente, zines, calor | Baixo se o desacerto for pequeno |
| Halo ou brilho | Luz suave à volta das letras | Noite, néon, luxo calmo | Baixo em fundos escuros |
Quando um efeito de texto ajuda e quando prejudica
Um efeito ajuda quando transporta um sentido que as palavras não conseguem levar sozinhas. Um eco por trás de Alto fá-lo vibrar. Uma extrusão num quadro de menu retro situa-o no tempo. Um brilho num cartaz de um evento noturno sugere a sala. Quando o efeito não diz nada, torna-se decoração, e a decoração envelhece depressa.
Uma palavra grande é onde um efeito merece o seu lugar: há pouco para ler e muito para sentir.
Num cartaz de evento, o efeito pertence só ao título. Datas e pormenores ficam simples.
Evita
- Um efeito no título e no texto corrido
- Contorno mais sombra mais brilho numa só palavra
- Cores por omissão, como uma sombra preta em tudo
- Fontes finas ou leves debaixo de efeitos pesados
- Efeitos usados para tornar emocionante um texto fraco
Faz
- Um efeito, nas poucas palavras maiores
- Um tratamento por design, usado com convicção
- Cores do efeito tiradas da paleta do fundo
- Letras pesadas e simples, que sobrevivem ao efeito
- Texto que funciona sem mais, e depois um efeito que lhe dá tom
Como tornar legível o texto em contorno
O texto em contorno é o efeito com mais probabilidade de falhar, porque retira a forma sólida que torna as letras fáceis de reconhecer. Usa-o numa sem serifas pesada ou numa egípcia de formas abertas, em tamanhos grandes, sobre um fundo calmo. Define o traço com espessura suficiente para se ler como uma linha e não como um fio: cerca de 2 a 4 por cento do tamanho da fonte é um bom começo.
Um padrão fiável junta uma palavra sólida a uma palavra em contorno, como Sessões sólida e de verão em contorno. A palavra sólida ancora a leitura; o contorno dá ritmo. Evita por completo pôr texto pequeno em contorno, e verifica-o num telemóvel, onde os traços finos são os primeiros a desaparecer.
/* Outline: a stroke, no fill. */
.outline {
color: transparent;
-webkit-text-stroke: 0.03em #f5f0ff;
}
/* Extrude: stacked shadows, each 1px further. */
.extrude {
color: #fde8d0;
text-shadow:
1px 1px 0 #d9485f,
2px 2px 0 #d9485f,
3px 3px 0 #b83250,
4px 4px 0 #b83250,
5px 5px 0 #8f2442,
6px 6px 0 #8f2442;
}
/* Echo: one offset copy in a palette colour. */
.echo {
color: #ffffff;
text-shadow: 0.06em 0.06em 0 #7c3aed;
}
/* Halo: a soft glow for dark grounds. */
.halo {
color: #fff7ed;
text-shadow: 0 0 0.25em rgb(251 146 60 / 0.55),
0 0 0.8em rgb(244 114 182 / 0.35);
}-webkit-text-stroke funciona em todos os principais navegadores apesar do prefixo. As sombras em em acompanham o tamanho do texto.Escolher cores para efeitos de texto
Os efeitos parecem acrescentados quando as suas cores vêm do nada. Parecem desenhados quando vêm do fundo. Vai buscar a cor lateral da extrusão à parte mais escura do gradiente, o eco à sua cor mais saturada e o brilho à mais clara. O efeito lê-se então como luz e material da mesma cena.
Mantém a face da letra com contraste alto em relação à base e deixa o efeito ficar entre as duas em luminosidade. Assim, o efeito dá profundidade sem tirar contraste às letras. Para as regras de contraste de base, vê contraste de cor.
Efeitos de texto na Gradiently
O Studio da Gradiently inclui oito tratamentos de Letras: Contorno, Interior, Recorte, Extrusão, Duplo, Rasto, Riso e Halo. Um Mark também sabe onde estão as palavras: a sua região mais calma vai para trás delas, e a Tinta automática escolhe letra clara ou escura por linha a partir da paleta do próprio Mark, o que dá a uma palavra tratada uma base estável onde assentar. As mesmas regras continuam a aplicar-se: um tratamento, poucas palavras, uma letra pesada.
Uma única frase tratada sobre um campo calmo mostra a contenção a fazer o trabalho.
Para saberes mais sobre como fazer a letra ler-se em fundos coloridos, lê texto sobre um gradiente; para efeitos feitos com o próprio gradiente, vê texto com gradiente em CSS.
Perguntas frequentes
Que efeitos de texto parecem modernos?
Os contidos: um contorno espesso ao lado de uma palavra sólida, um pequeno eco deslocado, um desacerto riso subtil ou um brilho suave sobre uma base escura, cada um usado numa ou duas palavras grandes.
Como faço texto em contorno em CSS?
Define a cor do texto como transparente e junta -webkit-text-stroke com uma largura e uma cor, como -webkit-text-stroke: 0.03em #ffffff. Funciona em todos os principais navegadores.
Como faço um efeito de texto 3D?
Empilha várias camadas de text-shadow, cada uma deslocada mais um píxel na mesma direção, a escurecer para trás. Vai buscar as cores ao teu fundo, para que a profundidade pareça iluminada pela mesma luz.
Os efeitos de texto prejudicam a legibilidade?
Podem prejudicar. Reserva os efeitos para palavras grandes e pesadas, um efeito por design, e confirma que a face da letra continua com forte contraste em relação ao fundo.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
