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.
Veja aqui um tutorial mais atualizado sobre:
Espaçamento entre Linhas, Letras ou Palavras usando CSS/HTML
Nele você encontrará dicas mais detalhadas sobre colocar ou retirar espaços entre as linhas ou letras do seu site ou blog.

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. Recomendamos que faça um backup do seu template sempre que for editar o html assim poderá voltar ao seu modelo atual com facilidade caso não goste das mudanças que fez.

como usar letter-spacing e word-spacing

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
Related Posts with Thumbnails
Espaço entre linhas, letras e palavras
4/ 5
Oleh

28 Comentários

22 de janeiro de 2009 22:55 delete

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

Reply
23 de janeiro de 2009 10:32 delete

provavelmente esse espaço que você fala está em padding ou margin, procure por isso no CSS das postagens, sidebar e diminua os valores.

Reply
César
1 de março de 2009 19:42 delete

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

Reply
1 de março de 2009 20:11 delete

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>&nbsp;</p>

ou então

<br />

Reply
1 de março de 2009 21:28 delete

Valeu Fabiano!
Deu certo!
Adicionei o seu blog na minha lista de blogs amigos!
Um abraço!
César

Reply
20 de julho de 2009 09:00 delete

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!

Reply
13 de outubro de 2010 11:33 delete

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:

Reply
29 de outubro de 2010 13:50 delete

ola amigo, não consigo achar esse codigo no html do meu blog,poderia me ajudar?obrigado!

Reply
30 de maio de 2011 17:49 delete

como sempre vc me ajuda pra caramba com seus tutoriais ,são bem claros e explicativos valeu

Reply
29 de junho de 2011 17:13 delete

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?

Reply
29 de junho de 2011 17:35 delete

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

Reply
3 de julho de 2011 18:51 delete

Eu já tinha feito isso mas também não funcionou.
O problema só costuma acontecer quando coloco uma imagem ao lado do texto.

Reply
3 de julho de 2011 23:52 delete

esse código de espaço entre linhas não leva em consideração as imagens...

Reply
13 de dezembro de 2011 18:56 delete

tem código para gadgets? Quero deixar o gadget mais para baixo.

Reply
14 de dezembro de 2011 15:28 delete

@ŦØ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}

Reply
27 de fevereiro de 2012 15:50 delete

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!

Reply
27 de fevereiro de 2012 23:02 delete

tente colocar a linha

.post{line-height:200%}

depois ajuste o valor 200

Reply
28 de fevereiro de 2012 14:35 delete

Muito obrigada, tentei igual vc falou mas só deu certo quando eu coloquei no .post-body. Beijos

Reply
23 de agosto de 2012 14:51 delete

bom eu criei um blog a poco tempo aki esta o link
http://www.gtaultimateninja.blogspot.com.br/ o problema e q o titulo do post quebra a linha bem antes do tamanho final do post eu queria saber como eu faso para caber mais letras em uma linha so. Queria dechar o mesmo espaso das palavras so que como eu posso aumentar ali para ficar do tamanho do body do post?

Reply
23 de agosto de 2012 18:04 delete

MeNeZeS.Jr entre no seu html e procure por:

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
padding:10px 183px 0;
font-size:16px;

apague a linha padding:10px 183px 0;

e coloque essa no lugar:
padding-top:10px;padding-left:183px;

do jeito que está lá está dando margem de 183 do lado esquerdo e direito

Reply
Anônimo
2 de março de 2013 16:57 delete

Fabiano... Como deixar um espaço maior entre o título das postagens e o primeiro parágrafo, ou seja dar um espaço maior entre postagem e título?

Reply
3 de março de 2013 14:17 delete

tente criar o estilo

.post h2{padding-bottom:10px}

se não der certo teste com h1 e h3

Reply
8 de maio de 2013 07:19 delete

Fabiano...
Tenho duas imagens dentro de um gadget e quero deixá-las juntinhas...
Explico:
Quando queremos um espaço entre as linhas dentro das postagens, damos um menor,barra,be,erre,maior e, quando queremos aproximar as linhas, tem como fazê-lo?

Reply
8 de maio de 2013 08:52 delete

Ná.Stos. esse espaço entre as imagens deve ser algum estilo CSS. Pode ser margin ou padding. Isso deve estar no seu html em algum código assim:

img {padding:...... }

mas isso varia muito conforme o template por isso use o ctrl F para achar os estilos img (provavelmente tem mais de um) e faça testes alterando o valor para 0px.

preste atenção onde altera os códigos caso seja preciso desfazer a mudança e veja se isso não prejudica o layout do seu blog porque isso altera todas as imagens do blog.

Reply
8 de maio de 2013 09:32 delete

Encontrei o código e alterei de muitas formas, mas não surtiu o efeito desejado. Esse código altera realmente todas as imagens do blog, principalmente na horizontal, porém não é isso que preciso sabendo que o blog é somente para fotos...
Me diga se é possível aproximar os gadgets, ou seja, fazer o gadget de cima aproximar mais do gadget de baixo.

Reply
8 de maio de 2013 10:24 delete

as duas imagens estão no mesmo gadget ou são 2 gadgets de imagem?

se forem dois gadgets tente colocar o estilo:
.widget{margin:0px}

mas novamente isso vai alterar todos os gadgets

Reply