Comment mettre en valeur votre écriture pour qu'elle brille : 3 astuces de style CSS

Votre écriture est la pièce maîtresse de votre blog.

Le contenu est roi, n'est-ce pas ?

C'est ce qui attire les gens et les incite à lire votre blog.

Mais ce qui est tout aussi important, c'est la façon dont vous présentez réellement votre écriture. Visuellement, c'est.

Votre contenu est peut-être génial, mais s'il est difficile à lire pour quelqu'un, vous risquez de perdre plus de lecteurs que vous ne le pensez.

Écoutez, je ne suis pas un écrivain de formation, mais je suis un concepteur de sites Web et je sais ce qui a l'air bien. Et ce qui a l'air bien n'est généralement pas tant une question de décoration et de goût, mais plutôt ce qui fonctionne et ce qui rend les choses faciles à lire et à comprendre.

J'ai étudié pendant des années les différentes façons d'afficher du contenu sous forme numérique. J'aimerais donc vous montrer quelques moyens simples et rapides de vous assurer que votre contenu s'affiche bien dans vos articles de blog du point de vue d'un concepteur Web.

Il existe plusieurs façons d'apporter des modifications rapides au style de votre blog en utilisant un peu de CSS (feuilles de style en cascade) afin que vous, l'écrivain, puissiez présenter votre contenu et le rendre aussi facile que possible pour que vos lecteurs en profitent.

Je vais vous donner quelques codes de balayage CSS que vous pouvez ajouter à votre feuille de style personnalisée et modifier à votre guise. Suivez les instructions pour modifier le CSS de votre blog si vous ne savez pas comment accéder à la feuille de style personnalisée de votre blog.

Trois astuces pour styliser votre contenu afin de mettre en valeur votre écriture

1. Mettez en valeur vos paragraphes

Pour vous assurer que vos paragraphes sont faciles à lire, voici quelques conseils à garder à l'esprit. Nous allons styliser la balise p (paragraphe) ici ensemble.

• Sélectionnez une police agréable à regarder. Visez une police serif ou sans serif, pas une police manuscrite.

Choisissez un poids pas trop fin. Certaines polices très fines ne sont pas très belles dans certains navigateurs et systèmes d'exploitation (c'est-à-dire mac ou PC), alors demandez aux gens de les vérifier pour vous et de vous donner un coup de pouce.

En même temps, choisissez une police pas trop épaisse. Vous voulez qu'il ait suffisamment de contraste avec tout texte en gras.

Lorsque vous choisissez une police, assurez-vous d'utiliser une police système, une police que vous avez téléchargée dans les fichiers de votre blog ou une police Google. Je suggère d'utiliser une police Google car elle est gratuite, la plus variée et la plus facile à utiliser. Pour plus de détails, découvrez comment utiliser des polices sympas sur votre blog.

Lorsque vous avez sélectionné votre police, vous accédez à votre feuille de style personnalisée et ajoutez ce code :

<pré>
p {
font-family : INSÉRER LE NOM DE LA POLICE ;
}
</pre>

• Utilisez une taille de police facile à lire sur n'importe quelle taille d'écran. Vérifiez votre blog sur un téléphone et assurez-vous que le texte n'est pas trop petit pour les yeux fatigués ou âgés.

Une bonne taille pour les paragraphes est généralement de 14 à 16 pixels. Toutes les polices ne s'affichent pas de la même manière dans les mêmes tailles, alors jouez avec elles pour voir ce qui vous convient le mieux.

<pré>
p {
font-family : INSÉRER LE NOM DE LA POLICE ;
taille de police : 16 px ;
}
</pre>

• Utilisez des hauteurs de ligne appropriées (en tête). Des hauteurs de ligne appropriées contribuent également à la lisibilité, car elles donnent de l'espace à vos paragraphes. Une bonne hauteur de ligne est de 1,5, soit 1,5 fois la taille du texte (une hauteur de ligne de 2 correspondrait à un double interligne).

<pré>
p {
font-family : INSÉRER LE NOM DE LA POLICE ;
taille de police : 16 px ;
hauteur de ligne : 1,5 ;
}
</pre>

• Évitez le texte noir pur sur blanc. C'est dur pour les yeux. Optez plutôt pour un gris foncé (j'aime bien #333333) pour votre exemplaire afin de diminuer un peu le contraste.

<pré>
p {
font-family : INSÉRER LE NOM DE LA POLICE ;
taille de police : 16 px ;
hauteur de ligne : 1,5 ;
couleur : #333333 ;
}
</pre>

• Évitez d'aligner les paragraphes au centre. Le centrage de votre corps de texte semble amateur et le rend plus difficile à lire. Pourquoi? Chaque fois que votre œil se déplace vers une nouvelle ligne, il doit lutter pour trouver le début de la suivante car il n'est jamais au même endroit. aligner ou justifier vos paragraphes réguliers. Le texte justifié est espacé de sorte que les côtés gauche et droit du paragraphe aient un bord droit.

<pré>
p {
font-family : INSÉRER LE NOM DE LA POLICE ;
taille de police : 16 px ;
hauteur de ligne : 1,5 ;
couleur : #333333 ;
text-align : justifier ;
}
</pre>

<pre>text-align : gauche ; </pre> est le comportement par défaut et n'a pas besoin d'être spécifié sauf si vous avez besoin de remplacer un style précédent.

• Enfin, ajoutez un espace blanc. Vous aurez besoin d'un espace blanc suffisant entre vos paragraphes pour une lisibilité optimale. Une bonne règle de base consiste à ajouter une marge sous chaque paragraphe égale à environ le double de la taille de votre police.

<pré>
p {
font-family : INSÉRER LE NOM DE LA POLICE ;
taille de police : 16 px ;
hauteur de ligne : 1,5 ;
couleur : #333333 ;
text-align : justifier ;
marge inférieure : 32px ;
}
</pre>

2. Utiliser la hiérarchie

Vous utilisez la hiérarchie lorsque vous décrivez vos messages en utilisant des titres et des sous-titres.

Pour créer une hiérarchie visuelle dans vos publications, stylisez vos titres et sous-titres afin qu'il soit facile de les différencier. Voici quelques conseils :

• Utilisez la même police pour tous vos titres dans différentes tailles.
• Utilisez une police facile à lire, comme une police serif ou sans serif. Vous pouvez choisir d'utiliser la même police de caractères que votre corps de texte dans un poids plus épais ou vous pouvez choisir une police de caractères différente qui contraste joliment avec votre corps de texte.
• Définissez les titres et les sous-titres en gras ou en gras.
• Utilisez Typecast pour jouer avec différentes polices, tailles et poids pour vos titres et les comparer au texte de votre paragraphe.

Voici un exemple de ce que vous pouvez proposer pour le dimensionnement si vos paragraphes sont définis sur 16 pixels de taille de police. Vous monteriez alors à partir de là :

• en-têtes h6 = 16px (généralement de la même taille que le texte du paragraphe, mais en gras et sur leur propre ligne)
• titres h5 = 18px
• titres h4 = 22px
• titres h3 = 26px
• titres h2 = 30px
• en-têtes h1 (titres de vos articles de blog) = 36px

Encore une fois, jouez avec Typecast pour voir ce qui vous convient le mieux. Une fois que vous avez décidé des polices et des tailles que vous souhaitez utiliser pour vos titres, vous devez accéder à votre feuille de style personnalisée et ajouter ce CSS pour tous vos titres :

<pré>
h1, h2, h3, h4, h5, h6 {
font-family : INSÉRER LE NOM DE LA POLICE ;
taille de police : 36 px ;
font-weight : gras ;
}
</pre>

Ensuite, vous ajouterez quelques remplacements CSS juste pour changer les tailles pour chaque niveau de titre :

<pré>
h2 {
taille de police : 30 px ;
}

h3 {
taille de police : 26 px ;
}

h4 {
taille de police : 22 px ;
}

h5 {
taille de police : 18 px ;
}

h6 {
taille de police : 16 px ;
}
</pre>

3. Utiliser les liens

Ne faites pas réfléchir vos lecteurs ! Vos liens doivent ressembler à des liens, ce qui signifie qu'ils doivent être tout à fait évidents qu'il faut cliquer dessus. Voici quelques façons de procéder :

• Choisissez une couleur pour vos liens qui contraste avec votre texte habituel.
• Réservez une couleur juste pour vos liens. N'utilisez pas cette même couleur pour les titres, les sous-titres, les titres des widgets de la barre latérale ou tout autre texte.
• Vous pouvez cependant utiliser cette couleur pour les boutons si vous le souhaitez car ce sont aussi des éléments cliquables.
• Ne soulignez pas le texte qui n'est pas un lien, c'est déroutant car les gens supposent généralement que le texte souligné est un lien.

<pré>
une {
Couleur rose;
décoration de texte : souligné ;
}
</pre>

Donnez un style aux différents états de lien pour aider davantage vos lecteurs à les distinguer en tant que liens. Les faire changer d'apparence lorsqu'un utilisateur les survole donne une indication supplémentaire qu'il s'agit d'un lien actif.

<pré>
un: survolez {
Couleur bleue;
décoration de texte : aucune ;
}
</pre>

Vous pouvez également choisir de donner un style différent à vos liens visités pour indiquer aux utilisateurs qu'ils ont déjà visité un certain lien.

<pré>
un : visité {
Couleur bleue;
}
</pre>

Pour mettre en valeur votre écriture afin qu'elle brille, il suffit de quelques modifications simples

Ce ne sont là que quelques astuces pour mettre en valeur vos écrits afin de les rendre faciles à lire et ainsi aider votre contenu à se démarquer !

De quelles autres façons disposez-vous les articles de votre blog pour les rendre facilement lisibles pour vos utilisateurs ?

Souhaitez-vous en savoir plus sur la façon dont vous pouvez tirer parti du CSS pour rendre votre blog plus attrayant pour vos lecteurs et vraiment mettre en valeur votre écriture ? Impressionnant! Alors j'aimerais que vous me rejoigniez pour une formation vidéo gratuite sur CSS. Ça commence bientôt alors inscrivez-vous maintenant.

Image reproduite avec l'aimable autorisation de Pixabay