Mostrando postagens com marcador css. Mostrar todas as postagens
Mostrando postagens com marcador css. Mostrar todas as postagens

Entrelinhas e espaçamento de letra com CSS

Recursos com processos fáceis que estão sendo muito usados no web design são os espaçamentos entre letras e o espaçamento entre linhas (entrelinhas).

Dando espaço às linhas
Usamos a propriedade line-height seguida do valor para determinar as entrelinhas; seja o valor positivo (espaço maior) ou negativo (espaço menor).
Lembrando que o navegador aplica 100% de espaçamento entre as linhas.

 - Espaço maior entre linhas
Segue o código:

     p {line-height:8px;}
Neste código estamos determinando por CSS que no meu documento, meu texto dentro da sintaxe P deverá ter 8 pixels de espaçamento entre suas linhas.

 - Espaço menor entre linhas
Segue o código:
     p {line-height:2px;}
Neste código estamos determinando por CSS que no meu documento, meu texto dentro da sintaxe P deverá ter 2 pixels negativos de espaçamento entre suas linhas.

Importante lembrar que o valor padrão é 100% (aplicado pelos browsers) de espaçamento, sendo uma dica válida ao querer duas vezes o tamanho padrão a utilização de 200% e à metade, 50%.

Dando espaço às letras
Para trabalharmos com o espaçamento entre letras usamos a propriedade letter-spacing seguida do valor, seja ele positivo (espaço maior) ou negativo (espaço menor).

Espaço maior entre letras
Segue o código:
     h1 {letter-spacing:10px;}
Neste código estamos determinando por CSS que no meu documento, meu título H1 deverá ter 10 pixels de espaçamento entre as letras.

 - Espaço menor entre letras
Segue o código:
      h1 {letter-spacing:-5px;}
Neste código estamos determinando por CSS que no meu documento, meu título H1 deverá ter 5 pixels negativos de espaçamento entre as letras.

Lembrando que você pode definir todas essas medidas em px, %, em, cm, in, entre outros que definem comprimentos no CSS, podendo ser até simplesmente números.

Fonte personalizada ou própria no seu site

Graças à nova versão do CSS, o CSS3, é possível desenvolver um projeto HTML com fonte personalizada, diferente ou até própria a determinando na folha de estilo utilizando a nova propriedade do CSS, o font-face. Também saberemos se é possível ou não determinar anti-alias (ou antisserrilhamento) na fonte e renderizar seus formatos para cada navegador.

Senti que falei como se o @font-face fosse uma "NOVA PROPRIEDADE DO WEB DESIGN". Mas a verdade é que ela existe desde 2007 e os navegadores/browsers só foram ter suporte para a propriedade bem depois disso, impedindo não só que designers utilizem a propriedade, mas sigam um padrão limitado de fontes. E quem é web designer sabe o que é ter que recorrer às imagens e/ou ao sIFR (Rich Accessible Typography for the Masses): técnica válida que utiliza Flash, Javascript e CSS, porém pesada e para mim, descartada.

Extensões
{Pois muitas vezes formatos são específicos.}
Algumas das mais usadas: .ttf: (TrueType) — .otf (OpenType) — .svg e .svgz (Scalable Vector Graphics) — .eot (Embed OpenType).

@font-face

{ Use tipografias em seu site que não estão instaladas no computador do visitante.}
Já pode abrir um novo documento CSS. No exemplo abaixo, o qual recomendo colar na sua folha de estilo para entender melhor, fica clara a utilização da propriedade. Vou utilizar o formato padrão, .ttf. Veja:

@font-face {
     font-family: Autodidatt;
     src: url(http://exemplo.com/fontes/Autodidatt.ttf);
 }


Agora vamos entender:

@font-face é o nome da propriedade; font-family define o nome da fonte; o atributo src (resource) aponta o endereço URL (src: url..) para o arquivo da fonte, que está entre parenteses: (http://exemplo.com/fontes/Autodidatt.ttf).

Lembrando que o nome da fonte pode ser o que você quiser.
Para utilizar essa fonte em nosso arquivo HTML, não há nada de novo. O HTML continua básico. Um exemplo, usando a fonte do código que foi usado no primeiro exemplo:
    h1 { font-family: Autodidatt, Arial; }
No caso, estou usando a minha fonte (Autodidatt) em um texto dentro de h1. E caso não funcionar — que é o caso dos usuários do Internet Explorer — ele vai exibir o texto em Arial, ou também para quando o sistema ou o navegador não ler o formato da fonte, mas isso tem solução (ao contrário dos usuários do IE). Só continuar lendo.

Acessibilidade
{Até para usar uma diferente tipografia a acessibilidade é necessária. Renderizaremos os formatos das fontes para todos os navegadores e sistemas.}
 Depois de entendermos o font-face e finalizarmos o nosso código, devemos renderizar a fonte pois nem todos navegadores lêem o mesmo formato de letra que o seu.

O código é simples:
    src: local('☺'), url('http://exemplo.com/fontes/Autodidatt.woff') format('woff'), url('http://exemplo.com/fontes/Autodidatt.ttf') format('truetype'), url('http://exemplo.com/fontes/Autodidatt.svg') format('svg');
Quem sabe ler vai entender o código. Ele só está lendo os formatos e executando as páginas, lendo todas e vendo o que vai "dar na telha". Você pode editar os códigos, adicionando novos formatos, tornando-o mais acessível.

O anti-alias é possível no CSS?
{ De uma vez por todas, o que já fez muitos voltarem a recorrer às imagens.}
Definitivamente, não. Nem "anti-aliasing", nem "font smoothing". Visitei fóruns, li artigos, me perdi ao responder para muitos, até para mim mesma. MAS, também utilizando o CSS3, achei uma solução que dá pelo menos uma "aparência" de antiserrilhamento não totalmente válida.
Usando a propriedade text-shadow consegui disfarçar o serrilhamento de uma página HTML em que eu utilizava o font-face. Segue o código pronto para inserir na folha de estilo:

    text-shadow: 0 0 1px rgba(0,0,0,0.3);

Pode-se alterar para uma cor mais cabível para a página, já que a cor não vai ser válida para todos documentos HTML do mundo. Preferi utilizar rgba(0,0,0,0.3) mas pode ser alterada para HEX sem problemas.

Segue abaixo os códigos. Os campos em vermelho indicam o que é para alterar.

Código da tipografia personalizada:

@font-face {
     font-family: NOME DA FONTE;
src: local('☺'), url('LINK DA FONTE EM .WOFF') format('woff'), url('LINK DA FONTE EM .TTF') format('truetype'), url('LINK DA FONTE EM .SVG') format('svg');

}


Código pra usar a tipografia personalizada com aparência de anti-alias:

h1 {
     font-family: NOME DA FONTE; text-shadow: 0 0 1px rgba(0,0,0,0.3);
 }