Esconder o texto das imagens (image replacement)

Olá Flávio! Utilizar a fonte com total transparência ou colocar visibility: hidden não é recomendado pois é necessário tomar muito mais cuidado com o layout, pois o elemento continua lá, apenas não está mais visível.

Outra alternativa também é font-size: 0. Mas também não é recomendado pois muitos browsers não suportam essa prática, tem que ter um font-size mínimo, especialmente no mobile e o usuário também pode mudar o font-size do browser.

Outra opção seria utilizar o display: none , mas também não é recomendado porque é ruim para SEO e para acessibilidade, justamente os dois pontos para os quais a gente gostaria de ter o texto alternativo.

Hoje a melhor prática mesmo é o text-indent. Quando aprendi essa técnica fiquei com a sensação de estar fazendo uma "gambiarra", mas não é. Gambiarra é quando existe o jeito certo de fazer e você faz de outro jeito porque é mais cômodo. Como o melhor jeito de fazer o image-replacement é mesmo através do text-indent, isso não é visto como "gambiarra" e sim como técnica!

Abraços e sucesso nos estudos!

Oii Flávio!

Haha sim, o image replacement também me deixa com um sentimento de estar fazendo gambiarra, porém até então é que o que todos costumam fazer (até as grande aplicações web).

A ideia da cor transparente é muito boa, eu também tive essa sacada uma vez, o único defeito dela é que navegadores antigos não suportam a função rgba, causando alguns problemas de compatibilidade. Porém o Can I Use já nos diz que é seguro seu uso.

Outra coisa que fica estranho usando a fonte transparente é quando a pessoa seleciona o texto do site, vai evidenciar que tem um texto transparente ali.

Bom sabendo desses pontos, eu particularmente gosto de poder usar a cor transparente, só tem que testar certinho que ficar bem em todos os navegadores que você vai dar suporte.

Espero ter ajudado!! Bom curso!