Dicas CSS: Espaços para Facilitar a Leitura do Site/Blog
Veja Como dar espaço entre letras, palavras ou linhas com CSS e Facilite a Leitura no seu Site ou Blog. Além da Qualidade do Conteúdo do Site, outro fator importante para manter as pessoas na sua pagina é a facilidade de leitura, ou seja, ter um bom espaçamento entre as letras, palavras, espaço entre as linhas de texto pode ajudar as pessoas lerem e ficarem mais tempo no seu blog.
Vamos mostrar alguns exemplos de formatação com CSS para criar espaço no texto publicado alterando o HTML do blog ou site. Colocando esses códigos no estilo body {...}, ele terá efeito na pagina inteira e no caso do Blogger usando o estilo .post {...}, fará a formatação somente do texto das postagens.
Veja Como Formatar Texto do Blog
O código CSS: letter-spacing: 3px
Faz aumentar o espaço entre as letras das palavras, por isso pode dar a impressão que afasta um pouco as palavras, mas a verdade só aumentou o espaço da letras.
Enquanto o estilo: word-spacing: 5px;
Controla a distancia entre cada palavra, sem modificar o espaço entre os caracteres.
Existem outras medidas além de px (pixel) para definir essa largura, então sugiro que use a que melhor se adaptar ao seu blog, pois depende um pouco de como estão as medidas no seu template.
Aqui vamos modificar o espaço entre as linhas do texto, em vez de usar o enter para pular mais linhas, o correto é usar o CSS:
line-height:2
Da mesma forma que o anterior pode ser utilizado com varias unidades de medida do CSS, inclusive números decimais, por exemplo: line-height: 1.5
Além destes espaços é possível usar os Estilos CSS para personalizar praticamente tudo no seu site, por exemplo: criar bordas nas imagens, cores de links ou títulos e muito mais, por isso é recomendável aprender CSS para ter mais opções para personalizar seu site.
Leia também: Códigos CSS para Criar Efeitos no Blog
Além disso, use uma Fonte Segura para Web (são fontes web seguras aquelas que a maioria dos computadores e celulares tem), por exemplo:
Arial
Times New Roman
Helvética
Verdana
Calibri
Outras fontes podem apresentar diferenças entre os vários modelos de tela, navegadores, sistema operacional dos visitantes do seu site. Isto porque caso o computador ou celular não tiver a fonte ele fará uma substituição por uma fonte padrão e isso pode atrapalhar seu layout.
Naturalmente para fazer banners ou imagens para usar no blog você pode usar qualquer fonte e aplicar o efeito que desejar, pois neste caso o que será utilizado será uma imagem e não a fonte em especifico.
Veja também: Efeito Girar (Rotacionar) Imagens ao Passar o Mouse usando CSS
Claro é possível usar o Google Fonts para importar fontes, mas isso deixa o seu site um pouco mais lento. Então cabe a você decidir o que é melhor para seu site ou blog.
Vamos mostrar alguns exemplos de formatação com CSS para criar espaço no texto publicado alterando o HTML do blog ou site. Colocando esses códigos no estilo body {...}, ele terá efeito na pagina inteira e no caso do Blogger usando o estilo .post {...}, fará a formatação somente do texto das postagens.
Veja Como Formatar Texto do Blog
CSS: Espaço entre Letras e Palavras
O código CSS: letter-spacing: 3px
Faz aumentar o espaço entre as letras das palavras, por isso pode dar a impressão que afasta um pouco as palavras, mas a verdade só aumentou o espaço da letras.
Enquanto o estilo: word-spacing: 5px;
Controla a distancia entre cada palavra, sem modificar o espaço entre os caracteres.
Existem outras medidas além de px (pixel) para definir essa largura, então sugiro que use a que melhor se adaptar ao seu blog, pois depende um pouco de como estão as medidas no seu template.
Espaçamento entre as Linhas do Texto
Aqui vamos modificar o espaço entre as linhas do texto, em vez de usar o enter para pular mais linhas, o correto é usar o CSS:
line-height:2
Da mesma forma que o anterior pode ser utilizado com varias unidades de medida do CSS, inclusive números decimais, por exemplo: line-height: 1.5
Além destes espaços é possível usar os Estilos CSS para personalizar praticamente tudo no seu site, por exemplo: criar bordas nas imagens, cores de links ou títulos e muito mais, por isso é recomendável aprender CSS para ter mais opções para personalizar seu site.
Leia também: Códigos CSS para Criar Efeitos no Blog
Cores e Tamanhos de Fontes para Site/Blogs
Além disso, use uma Fonte Segura para Web (são fontes web seguras aquelas que a maioria dos computadores e celulares tem), por exemplo:
Arial
Times New Roman
Helvética
Verdana
Calibri
Outras fontes podem apresentar diferenças entre os vários modelos de tela, navegadores, sistema operacional dos visitantes do seu site. Isto porque caso o computador ou celular não tiver a fonte ele fará uma substituição por uma fonte padrão e isso pode atrapalhar seu layout.
Naturalmente para fazer banners ou imagens para usar no blog você pode usar qualquer fonte e aplicar o efeito que desejar, pois neste caso o que será utilizado será uma imagem e não a fonte em especifico.
Veja também: Efeito Girar (Rotacionar) Imagens ao Passar o Mouse usando CSS
Claro é possível usar o Google Fonts para importar fontes, mas isso deixa o seu site um pouco mais lento. Então cabe a você decidir o que é melhor para seu site ou blog.
Marcadores: Códigos, CSS, Dicas para Sites, Iniciantes, Personalizar, Template, WordPress