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

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.

Nenhum comentário:

Postar um comentário