Dicas e truques de tipo (anteriormente, Smooth Web Type)

Eu uso isso na maioria dos meus sites para garantir que o tipo esteja apropriadamente kerned, suavizado e não seja ousado e engraçado ao passar por uma transição ou mudança de opacidade (você pode ver um exemplo dessa estranheza passando o mouse sobre os links aqui no Coderwall) . A maioria deles é CSS3 e muitos são apenas Webkit, então não posso recomendá-los completamente para o seu site ou aplicativo, mas experimente-os para se divertir.

1. Suavização de subpixel (e também suavização)

-webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;

Suaviza as bordas ásperas, mas faz com que o texto pareça mais espesso. Se você estiver trabalhando com um tipo que é pesado para começar, pode preferir usar o anti-alisado simples; rota. Observe que se você estiver trabalhando com antialiasing de subpixel e tiver animações, alterações de opacidade ou qualquer outra coisa que use a aceleração de hardware do navegador, ele mudará para antialiasing; durante a transição. Você pode definir esse elemento para suavização; para começar ou utilizar o método translate3d (# 4 abaixo).

2. Otimize a legibilidade (Kerning)

text-rendering: optimizeLegibility;

Alinha melhor cada personagem com seus irmãos. Para ajustes adicionais de espaçamento entre letras, você obterá o máximo de precisão usando ex em vez de em’s ou pior – pixels fracionários (que são imprevisíveis quanto ao suporte). -0,08ex a -0,045ex são alguns exemplos direto do meu CSS para que você possa ver como é delicado (ou como sou TOC).

3. Sombra de texto transparente

text-shadow: 0 0 0 rgba(0,0,0,0);

Isso não é super necessário, e você pode achar mais útil adicionar ao :: selection, mas garante que o texto não terá uma sombra quando destacado. Não use fora de :: selection se você usar qualquer sombra em outro lugar.

4. Interrompa as alterações de aliasing durante animações CSS3, alterações de opacidade e transições ()

-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

Aplicado a um elemento que anima ou de outra forma faz a transição, substituirá a tendência natural do navegador de usar a configuração de suavização de aceleração de hardware. Infelizmente, isso tem o efeito colateral de diluir todo o texto em uma página, mesmo que esteja profundamente enterrado no DOM, então você pode precisar ajustar o peso do seu tipo ou mudar totalmente para [-webkit-] suavização de fonte: suavização de suavização; .

5. Melhor suavização em elementos girados (tente ambos, escolha um)

-webkit-backface-visibility:hidden;
-webkit-transform-style: preserve-3d;

Portanto, isso não é para o tipo, mas se você for mexer com transições, pode acabar precisando. Eu só testei em um objeto girado simples, mas ambos parecem obter o mesmo efeito de suavizar melhor as arestas. Como as propriedades acima, aplicá-las a um elemento produzido diluiu todo o texto na página quando eu as usei.

6. Sugestões adicionais (também conhecidas como Windows ClearType)

Se você sabe que o elemento terá um fundo sólido, pode refinar ainda mais a aparência, adicionando uma ou duas sombras de texto que são ligeiramente mais claras do que a própria cor do texto.

7. Conselho Geral

Às vezes, apesar de colocar essas propriedades em html {} ou body {} , isso não afetará certos textos (admito que não prestei atenção à semelhança entre os elementos quando isso acontece). Em vez de colar tudo de novo, sugiro usar seu pré-processador favorito (Stylus / SCSS / LESS) para criar um mixin para que você possa chamá-lo quando precisar.

Se você não estiver usando um pré-processador, experimente um! Eu recomendo altamente Stylus (com Nib), Sass (com Compass ou Bourbon) ou LESS (não tenho certeza que tipo de conjuntos de mixin estão disponíveis aqui como um pacote, eu sempre usei apenas elementos.less para coisas genéricas, mas como o próprio LESS , não é tão poderoso quanto os pré-processadores mencionados acima e suas respectivas estruturas). Você pode escrever em qualquer um desses formatos usando LiveReload ($ 10) ou CodeKit ($ 25), que cuspirá o arquivo .css simples. Esses aplicativos também se orgulham de compilar HAML e Jade (para HTML), CoffeeScript (para JS), Slim (para Ruby) também.