Espaço entre linhas, letras e palavras

Dependendo do tamanho do texto, cor e tamanho das letras e do fundo da pagina fica um pouco difícil e cansativo ler. Uma opção para facilitar a leitura do blog é aumentar o espaço entre as linhas ou a distancia entre as letras e palavras. Isso é feito através do estilo CSS, o código é:

line-height: 30px; letter-spacing: 2px; word-spacing: 3px;

Na primeira linha se preferir em vez de usar 30 px pode usar o valor em %, isso controla o espaço entre uma linha e outra.

personalizar espaçamento entre as linhas do blog

A segunda linha é o espaçamento entre as letras, o valor está 2px(pixel), você pode colocar o valor que desejar ou usar percentagem (%). A ultima linha o numero 3px faz um espaço entre as palavras, que também pode ser alterado ao seu critério. A melhor maneira de ajustar esses espaçamentos é fazendo testes então coloque isso no código do seu blog e altere os valores até ficar satisfeito com a nova aparência do seu blog.

Veja outras dicas de formatação para seu blog:
Como Formatar o Texto do Blog
Formatação Especial nos Textos das Postagens
Dar Destaque em uma Parte do Texto (blockquote)

Coloque isso junto com o código do que você deseja alterar, pode ser no body, main, sidebar ou qualquer outra parte do estilo CSS do seu site ou blog. No Blogspot isso é feito através da pagina editar html

Link desta página

20 Comentários:

Gold1688 disse...: Ola Fabiano, eu mais uma vez incomodando. Bom, no blog que criamos, e estamos ajeitando aos poucos com ajudas como a sua, verifiquei que o espacamento entre um post e o outro é muito grande. E tem mais, a distancia entre um gadget e o outro é grande tambem. Aqui entendi como editar a distancia entre linhas, palavras e letras, mas como editar a distancia do que eu mencionei?
Verifique o Blog que criamos:
http://clubepinguimbr.blogspot.com/
Muito grato; 22 de janeiro de 2009 22:55
Fabiano Roberto disse...: provavelmente esse espaço que você fala está em padding ou margin, procure por isso no CSS das postagens, sidebar e diminua os valores.; 23 de janeiro de 2009 10:32
Gold1688 disse...: Obrigado pela atencao.; 23 de janeiro de 2009 19:26
César disse...: Fabiano,
Não nos conhecemos ainda, mas montei meu blog hoje e gostaria de saber como faço para dar espaço nas linhas dos textos.
Quando salvo a publicação há separação de linhas, porém não consigo deixar uma linha vazia.
Para isso, terei que mexer sempre na HTML ou posso configurar a página para isso sempre?

Dê uma olhada no meu blog para entender melhor: benditopapiro.blogspot.com

Um abraço!
César; 1 de março de 2009 19:42
Fabiano Roberto disse...: para pular a maioria das vezes só clicar enter duas vezes já resolve, mas senão der certo assim, coloque isso aqui onde quer deixar uma linha vazia

<p> </p>

ou então

<br />; 1 de março de 2009 20:11
César Tarifa disse...: Valeu Fabiano!
Deu certo!
Adicionei o seu blog na minha lista de blogs amigos!
Um abraço!
César; 1 de março de 2009 21:28
Denise Scherer disse...: Oi,Fabiano, tua ajuda valeu muito ..
No início, tava editando e um simples enter, já espaçava.
Nos últimso não conseguia. Fica todo texto junto.
mas digitei o que falaste e deu certo.
Obrigada!; 20 de julho de 2009 09:00
ҒσfυЖα © disse...: por favor poderia me ajudar,estou construindo um blog,e estou meio perdida,e que eu achei a primeira linha da sua explicação line-height: mais 2 e a 3 ñ acho de jeito algum,poderia me ensinar onde acho letter-spacing: e word-spacing:; 13 de outubro de 2010 11:33
JOÃO BATISTA GOMES disse...: ola amigo, não consigo achar esse codigo no html do meu blog,poderia me ajudar?obrigado!; 29 de outubro de 2010 13:50
Zaraki Scofild disse...: como sempre vc me ajuda pra caramba com seus tutoriais ,são bem claros e explicativos valeu; 30 de maio de 2011 17:49
Storm_TR disse...: Olá @Fabiano Roberto eu estou a desenvolver um template e a um bug que gostaria que me ajuda-se a corrigir, nos posts o texto têm espaçamento entre palavras e gostava de conseguir tirar ja usei o word-spacing: 0px; mas não funcina.
Consegue resolver o problema?; 29 de junho de 2011 17:13
Fabiano Roberto disse...: Storm_TR; 29 de junho de 2011 17:33
Fabiano Roberto disse...: Storm_TR
veja se não tem espaçamento entre as letras: letter-spacing: 0px;

mas se colocou o word-spacing: 0px; e continua com espaço deve ter esse código em outro trecho do seu html...

use o ctrl F e procure no seu html por letter-spacing e também: word-spacing e se achar com outros valores apague ou altere para 0; 29 de junho de 2011 17:35
Storm_TR disse...: Eu já tinha feito isso mas também não funcionou.
O problema só costuma acontecer quando coloco uma imagem ao lado do texto.; 3 de julho de 2011 18:51
Fabiano Roberto disse...: esse código de espaço entre linhas não leva em consideração as imagens...; 3 de julho de 2011 23:52
ŦØRçΛ ßIЄßЄR✔ disse...: tem código para gadgets? Quero deixar o gadget mais para baixo.; 13 de dezembro de 2011 18:56
Fabiano Roberto disse...: @ŦØRçΛ ßIЄßЄR✔ se for algum gadget especifico veja aqui: Personalizar gadgets do Blog

depois use no codigo margin-top:20px; e ajuste o valor

se for para todos os gadgets pode colocar no html do seu blog

.widget{margin-top:20px}; 14 de dezembro de 2011 15:28
Cuidados e Vaidades disse...: Oi Fabiano tudo bem, me dá um help, eu ja testei o códico Line-height em quase tudo mas não consegui afastar as linhas do meu blog. Só deu certo na primeira página a que fica estatica a que vem com a matéria não dá certo. Por favor olha o link

http://cuidadosevaidades.blogspot.com/2012/01/compras-internacionais-feelunique-bed.html

Uma linha esta muito colada na outra, o que vc acha que eu faço? Nos comentarios eu já ajustei.
Beijos e muito sucesso sempre, obrigada!; 27 de fevereiro de 2012 15:50
Fabiano Roberto disse...: tente colocar a linha

.post{line-height:200%}

depois ajuste o valor 200; 27 de fevereiro de 2012 23:02
Cuidados e Vaidades disse...: Muito obrigada, tentei igual vc falou mas só deu certo quando eu coloquei no .post-body. Beijos; 28 de fevereiro de 2012 14:35

Melhores Dicas para Blogueiros

Espaço entre linhas, letras e palavras

20 Comentários:

Postar um comentário