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

Link desta Pagina

Compartilhe essa Página

28 comentários:

  1. 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

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

    ResponderExcluir
  3. 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

    ResponderExcluir
  4. 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 />

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

    ResponderExcluir
  6. 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!

    ResponderExcluir
  7. 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:

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

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

    ResponderExcluir
  10. 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?

    ResponderExcluir
  11. 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

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

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

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

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

    ResponderExcluir
  16. 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!

    ResponderExcluir
  17. tente colocar a linha

    .post{line-height:200%}

    depois ajuste o valor 200

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

    ResponderExcluir
  19. 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?

    ResponderExcluir
  20. 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

    ResponderExcluir
  21. 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?

    ResponderExcluir
  22. tente criar o estilo

    .post h2{padding-bottom:10px}

    se não der certo teste com h1 e h3

    ResponderExcluir
  23. 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?

    ResponderExcluir
  24. 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.

    ResponderExcluir
  25. 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.

    ResponderExcluir
  26. 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

    ResponderExcluir