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.

— 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

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