Você pode tentar algumas técnicas e classes novas do CSS3
Primeiro vou começar com a técnica do Filter:Blur()
, pelo fato de ninguém ter mencionando ainda. (Não funciona no IE apenas Edge)
Aqui estão os resultados com o Filtro. Parece que algumas font-family
tem um resultado melhor ou pior, cabe a você avaliar se é a melhor técnica.
Repare no "e" no "t" e no "u" minúsculo como é nítido o resultado
Mais um exemplo com e sem o filtro em uma fonte com péssima renderização. O filter está no limite, ai vai do bom senso.
Os estilos de filtro precisam de aceleração de hardwares, mas parece que mesmo com o Blur acentuado consome muito pouco recurso na hora do render e o FPS é praticamente igual, no Chrome pelo menos...
Para que quiser fazer uns testes aqui está o Snipper do teste que fiz com filter:blur()
h1 {
font-size: 4.25rem;
font-family: cursive;
filter: blur(0.35px);
}
h1:nth-child(1) {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h1:nth-child(2){
font-family: 'Times New Roman', Times, serif;
}
h1:nth-child(3){
font-family: Courier New, Courier, monospace;
}
<h1>Texto Blur1</h1>
<h1>Texto Blur2</h1>
<h1>Texto Blur3</h1>
<h1>Texto Blur4</h1>
Técnicas já citadas e conhecidas.
Você pode colocar um text-shadow
muito suave, apenas para fazer um efeito de Smooth na font. Veja abaixo no caso coloquei na cor branca que é a cor da sua font.
text-shadow: 1px 1px 1px rgba(255,255,255,0.004);
O mesmo principio pode ser usado com -webkit-text-stroke
para todos os Browsers
-webkit-text-stroke: 0.45px rgba(255, 255, 255, 0.1);
Fonte de referência: https://caniuse.com/#search=-webkit-text-stroke
Também é possível usar algumas classes CSS
text-rendering: optimizeLegibility; /* não funciona no IE e Edge */
-webkit-font-smoothing: antialiased; /* apenas para Mac OS X/macOS */
-moz-osx-font-smoothing: grayscale; /* apenas para Mac OS X/macOS */
font-smooth: always; /* Non-standard */
optimizeLegibility:
O navegador prioriza legibilidade sobre a velocidade de renderização e precisão geométrica. Essa propriedade habilita o kerning e ligatures opcionais.
font-smoothing (Non-standard): Aplica um anti-aliasing no contorno da fonte
Fonte para vc dar uma pesquisada: https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-rendering
Font-smoothing: https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth