Como mostrar sua escrita para que ela brilhe: 3 truques de estilo CSS

Sua escrita é a peça central do seu blog.

O conteúdo é rei certo?

É o que atrai as pessoas e as mantém lendo seu blog.

Mas o que também é importante é como você realmente mostra sua escrita. Visualmente, isso é.

Seu conteúdo pode ser ótimo, mas se for difícil para alguém ler, você pode estar perdendo mais leitores do que imagina.

Olha, eu não sou um escritor treinado, mas sou um web designer e sei o que parece ser bom. E o que geralmente parece bom não é tanto sobre decoração e bom gosto, mas mais sobre o que funciona e o que torna as coisas fáceis de ler e entender.

Eu estudei por anos as várias maneiras de exibir conteúdo em formato digital, então gostaria de mostrar algumas maneiras rápidas e fáceis de garantir que seu conteúdo seja exibido bem em seus posts do blog do ponto de vista de um web designer.

Existem algumas maneiras de fazer ajustes rápidos no estilo do seu blog usando um pouco de CSS (Cascading Style Sheets) para que você, o escritor, possa mostrar seu conteúdo e facilitar ao máximo que seus leitores o apreciem.

Vou dar-lhe alguns códigos de furto CSS que você pode adicionar à sua folha de estilo personalizada e editar ao seu gosto. Siga as instruções sobre como editar o CSS em seu blog se não tiver certeza de como acessar a folha de estilos personalizada do seu blog.

Três truques para estilizar seu conteúdo para mostrar sua escrita

1. Melhore seus parágrafos

Para garantir que seus parágrafos sejam fáceis de ler, aqui estão algumas dicas a serem lembradas. Vamos estilizar a tag p (parágrafo) aqui juntos.

• Selecione uma fonte que seja agradável aos olhos. Aponte para uma fonte com serifa ou sem serifa, não uma manuscrita.

Escolha um peso que não seja muito fino. Algumas fontes muito finas não parecem muito boas em certos navegadores e sistemas operacionais (ou seja, mac ou PC), então peça às pessoas que verifiquem para você e dêem um polegar para cima.

Ao mesmo tempo, escolha uma fonte que não seja muito grossa. Você quer que ele tenha contraste suficiente com qualquer texto em negrito.

Ao escolher uma fonte, verifique se você está usando uma fonte do sistema, uma fonte que você enviou para os arquivos do seu blog ou uma fonte do Google. Sugiro usar uma fonte do Google porque são gratuitas, têm mais variedade e são as mais fáceis de usar. Para mais detalhes, confira como usar fontes legais em seu blog.

Depois de selecionar sua fonte, você irá para sua folha de estilos personalizada e adicionará este código:

<pré>
p{
font-family: INSERIR NOME DA FONTE;
}
</pre>

• Use um tamanho de fonte que seja fácil de ler em qualquer tela de tamanho. Verifique seu blog em um telefone e certifique-se de que o texto não seja muito pequeno para olhos cansados ​​ou idosos.

Um bom tamanho para parágrafos é geralmente de 14 a 16px. Nem todas as fontes são exibidas da mesma forma nos mesmos tamanhos, então brinque com elas para ver qual fica melhor.

<pré>
p{
font-family: INSERIR NOME DA FONTE;
tamanho da fonte: 16px;
}
</pre>

• Use alturas de linha adequadas (entrevista). Alturas de linha adequadas também ajudam na legibilidade porque dão espaço para seus parágrafos. Uma boa altura de linha é 1,5, ou seja, 1,5 vezes o tamanho do texto (uma altura de linha de 2 teria espaçamento duplo).

<pré>
p{
font-family: INSERIR NOME DA FONTE;
tamanho da fonte: 16px;
altura da linha: 1,5;
}
</pre>

• Evite texto em preto puro sobre branco. É difícil para os olhos. Em vez disso, opte por um cinza escuro (eu gosto do #333333) para sua cópia diminuir um pouco o contraste.

<pré>
p{
font-family: INSERIR NOME DA FONTE;
tamanho da fonte: 16px;
altura da linha: 1,5;
cor: #333333;
}
</pre>

• Evite alinhar parágrafos ao centro. Centralizar sua cópia do corpo parece amador e dificulta a leitura. Por quê? Cada vez que seu olho se move para uma nova linha, ele tem que se esforçar para encontrar o início da próxima porque nunca está no mesmo local.Reserve o alinhamento central para poemas, legendas ou pequenos pedaços de texto que chamam a atenção e opte pela esquerda alinhando ou justificando seus parágrafos regulares. O texto justificado é espaçado para que os lados esquerdo e direito do parágrafo tenham uma borda reta.

<pré>
p{
font-family: INSERIR NOME DA FONTE;
tamanho da fonte: 16px;
altura da linha: 1,5;
cor: #333333;
text-align: justificar;
}
</pre>

<pre>text-align: left; </pre> é o comportamento padrão e não precisa ser especificado, a menos que você precise substituir um estilo anterior.

• Por último, adicione espaço em branco. Você vai querer espaço em branco suficiente entre seus parágrafos para uma melhor legibilidade. Uma boa regra geral é adicionar uma margem abaixo de cada parágrafo igual ao dobro do tamanho da fonte.

<pré>
p{
font-family: INSERIR NOME DA FONTE;
tamanho da fonte: 16px;
altura da linha: 1,5;
cor: #333333;
text-align: justificar;
margem inferior: 32px;
}
</pre>

2. Usar hierarquia

Você usa hierarquia quando delineia suas postagens usando títulos e subtítulos.

Para criar uma hierarquia visual em suas postagens, estilize seus títulos e subtítulos para que seja fácil diferenciá-los. Aqui estão algumas dicas:

• Use a mesma fonte para todos os seus títulos em tamanhos variados.
• Use uma fonte que seja fácil de ler, como uma fonte com serifa ou sem serifa. Você pode optar por usar o mesmo tipo de letra da sua cópia do corpo em uma gramatura mais grossa ou pode escolher uma fonte diferente que contraste bem com a sua cópia do corpo.
• Defina os títulos e subtítulos para negrito ou peso mais alto.
• Use o Typecast para brincar com fontes, tamanhos e pesos variados para seus títulos e compará-los com o texto do parágrafo.

Aqui está um exemplo do que você pode criar para dimensionamento se seus parágrafos estiverem configurados para 16px no tamanho da fonte. Você então subiria a partir daí:

• h6 títulos = 16px (geralmente o mesmo tamanho do texto do parágrafo, mas em negrito e em sua própria linha)
• títulos h5 = 18px
• títulos h4 = 22px
• títulos h3 = 26px
• títulos h2 = 30px
• títulos h1 (os títulos dos seus posts) = 36px

Mais uma vez, brinque com o Typecast para ver o que fica melhor aos seus olhos. Depois de decidir as fontes e tamanhos que deseja usar para seus títulos, vá para sua folha de estilos personalizada e adicione este CSS para todos os seus títulos:

<pré>
h1, h2, h3, h4, h5, h6 {
font-family: INSERIR NOME DA FONTE;
tamanho da fonte: 36px;
intensidade da fonte: Negrito;
}
</pre>

Em seguida, você adicionará algumas substituições de CSS apenas para alterar os tamanhos de cada nível de título:

<pré>
h2 {
tamanho da fonte: 30px;
}

h3 {
tamanho da fonte: 26px;
}

h4 {
tamanho da fonte: 22px;
}

h5 {
tamanho da fonte: 18px;
}

h6 {
tamanho da fonte: 16px;
}
</pre>

3. Usar links

Não faça seus leitores pensarem! Seus links devem se parecer com links, o que significa que devem ser completamente óbvios de que são algo para ser clicado. Aqui estão algumas maneiras de fazer isso:

• Escolha uma cor para seus links que contraste com seu texto normal.
• Reserve uma cor apenas para seus links. Não use esta mesma cor para títulos, subtítulos, títulos de widgets da barra lateral ou qualquer outro texto.
• Você pode, no entanto, usar essa cor para botões, se desejar, porque eles também são elementos clicáveis.
• Não sublinhe o texto que não é um link, é confuso porque as pessoas geralmente assumem que o texto sublinhado é um link.

<pré>
uma {
cor: rosa;
decoração de texto: sublinhado;
}
</pre>

Estilize os vários estados de link para ajudar ainda mais seus leitores a distingui-los como links. Fazer com que eles mudem de aparência quando um usuário passa o mouse sobre eles dá uma indicação extra de que é um link ativo.

<pré>
a: pairar {
cor azul;
decoração de texto: nenhuma;
}
</pre>

Você também pode optar por estilizar seus links visitados de forma diferente para indicar aos usuários que eles já visitaram um determinado link.

<pré>
a:visitou {
cor azul;
}
</pre>

Para mostrar sua escrita para que ela brilhe, basta algumas edições simples

Estes são apenas alguns truques para mostrar sua escrita para torná-la fácil de ler e, portanto, ajudar seu conteúdo a se destacar!

De que outras maneiras você faz o layout das postagens do seu blog para torná-las facilmente legíveis para seus usuários?

Gostaria de saber mais sobre como você pode aproveitar o CSS para tornar seu blog mais atraente para seus leitores e realmente mostrar sua escrita? Impressionante! Então eu adoraria que você se juntasse a mim para um treinamento em vídeo gratuito sobre CSS. Começa em breve, então inscreva-se agora.

Imagem cortesia de Pixabay