Texto pouco legível em diferentes fundos de imagem

30

Eu vim aqui procurando um pouco de ajuda ou conselhos de design sobre como eu poderia melhorar o seguinte:

Como o título diz, estou exibindo um banner de site com vários textos exibidos em imagens diferentes como pano de fundo. Agora, como a maioria das imagens é escura, defini a cor da fonte como branca. Mas, mesmo assim, parte do texto não é muito legível em algumas imagens como:

padrão

Como estou trabalhando com CSS, tentei diferentes opções, como:

Adicionando sombras de texto:

com sombra de texto

CSS:

text-shadow: 3px 3px 0px #000;

Também tentei, criando uma caixa semitransparente ao redor do texto:

com fundo semi-transparente

Demo

Sinto a caixa que parece fora do lugar.

Eu criei um violino para quem conhece CSS. Caso contrário, não hesite em me aconselhar com base apenas na sua imaginação.

PS: Você também pode aconselhar sobre o uso de uma fonte diferente, se isso a ajudar a se destacar melhor.

website-design color text images css AyB
fonte
4
Às vezes, um brilho externo preto suave em seu texto (sombra em todas as direções) pode ser suficiente para dar mais contraste sem parecer que você colocou algo por trás.
John
@ John Pensei também em brilho, mas sem ter muito efeito de brilho, o problema do texto não legível permanece e, como estou trabalhando em um site corporativo, decidi atacá-lo, pois isso pareceria pouco profissional. Obrigado pela sugestão!
AyB
2
Deveria ter enfatizado o quão sutil eu estava falando. Como 20-30% e propagação ampla, onde você dificilmente notaria. Se parece com um brilho, ou você pode ver uma transição - está muito escuro. Use apenas o suficiente para fazer com que a imagem ao redor desapareça para um tom um pouco mais escuro, onde ela encontra as letras.
John
@ John Hmm parece interessante, vou tentar também.
AyB

Respostas:

22

Como alternativa às já excelentes respostas, que tal adicionar uma div preta com 50% de opacidade atrás do texto?

insira a descrição da imagem aqui

Isso permitiria que a fonte funcionasse basicamente em qualquer imagem também.

div {
    position:absolute;
    top:250px;
    left:140px;
    width:500px;
    height:50px;
    background-color:black;
    z-index:0;
    opacity:0.5;
}

EXEMPLO

SaturnsEye
fonte
@ICanHasCheezburger Sem problemas! Enfrento muito o mesmo problema ao trabalhar com sites, como imagens de banner, e achei a maneira mais agradável de contorná-lo, pois funciona bem na maioria das vezes.
SaturnsEye
17

Sugiro deixar a fonte em negrito (apenas uma alteração de peso, não a fonte em si) e re-especificar a sombra para que ela defina todas as bordas das letras:

Exemplo 1

font-family: Raleway;
font-weight:900;
text-shadow: 0px 0px 3px #000;

Você pode até combinar mais de uma sombra de texto para criar um contorno definido e um desfoque:

Exemplo 2

text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;
Andrew Leach
fonte
Obrigado pelo seu tempo! Planejei usar o text-shadowfornecido por você junto com a solução SaturnsEye.
AyB
@ Ican Eu não fiz uma caixa porque você disse que não. "Também tentei, criando uma caixa semitransparente ao redor do texto. Sinto que a caixa parece fora de lugar." Mas o seu site, a sua chamada ...
Andrew Leach
É verdade que, mas depois de ver a solução da SaturnsEye, percebi que ela parecia boa quando o tamanho e a cor foram alterados. Desculpe pela escolha errada das palavras. Talvez eu deva explicar melhor da próxima vez.
AyB
3

Dê um fundo transparente preto e um pouco de preenchimento

cor de fundo: rgba (0,0,0,0,5);

estofamento: 0.5em;

Simplesmente brinque um pouco com esses números, mas deve fornecer um resultado útil.

Philip Feldmann
fonte
Obrigado pelo seu tempo! Percebi que se você tem um caso em que o elemento interno precisa ter uma opacidade diferente no exterior, a opacitypropriedade não ajuda nesse caso, enquanto a configuração da opacidade na background-colorpropriedade faz o trabalho. Como aqui
AyB 08/04