Comment optimiser sa typographie, étude de cas

Bonjour!

Vous avez vu la leçon sur la typographie? Moi aussi et je suis restée sur ma faim. Une fois qu’on a nos données avec Type Scale on mets ça où?

J’utilise le thème Evolve et j’ai trouvé ça:

C’est bien j’ai quelque choix de police, pas beaucoup, et je peux jouer avec la taille, mais pour la longueur de ligne je suis bien embêter. Y a surement des limites à grossir la police si on ne veut pas avoir un look « livre pour enfant ».

Vous pouvez voir ce que ça donne sur www.memoiresdavalon.org section blog, c’est plutôt facile à lire mais les lignes demeurent trop longues.

Alors, je continue à grossir ma police ou j’essaie de diminuer la longueur avec du code ou qqc comme ça…

Caroline

Salut Caro!

Bon, pour être capable de faire ce que tu veux, tu devras ajouter du CSS sur ton site web.

Si j’étais toi j’essaierais avec ça:

@media (min-width: 992px) {
	.single-post #content {
	    margin: 3% 10%;
	}
}

La première ligne sert à dire qu’on veut appliquer le style uniquement lorsque la largeur de ta fenêtre est supérieur à 992px, le breaking point de ton thème. Cette valeur varie selon le thème, ce n’est pas universel!

Ensuite, je vais dire que sur les .single-post (les articles simples) dans la section #content, on veut avoir 3% de marges en haut et en bas, puis 10% de marges à gauche et à droite.

Essaie avec ça et revient moi :slight_smile:

C’est fait! J’ai copier le code dans la section custom css.
Je vous mets un avant/après question de suivre les modifications.

Avant

Après

C’est déjà beaucoup mieux! Maintenant qu’on a la taille de police et une longueur de ligne pas pire… L’espace entre les paragraphes et les interlignes? Ils sont bons où pas? Ça se calcule pas avec Type Scale!

Non, mais on l’as-tu écouter la leçon ou pas hein? :blush:

Caroline

Haha oui tu es une bonne élève :slight_smile:

L’espace entre les paragraphe doit être entre 50% et 100% de la taille de ta police. Si on veut mettre ça à 80%, on peut utiliser l’unité “em”. Ça donnerait ça pour ton site:

.single-post #content p {
    margin: 0 0 0.8em;
}

Ta heuteure de lighe est à 1.5, donc c’est très bien! Well done! :clap:

J’ai ajouté et voici ce que ça donne:

Rendue-là, je trouve la différence subtile, comparé à quand les marges ont été ajustées.

Mettons je change de thème, il est possible de reprendre exactement ces bouts de code en changeant les chiffres pour refléter la valeur nécessaire avec le nouveau thème, c’est bien ça? Super pratique comme info!

Caroline

Le changement est subtil parce qu’il n’a pas fonctionné ^^. Utilise ton inspecteur d’élément comme on a vu dans la leçon sur le CSS quand tu veux vérifier les propriétés d’un élément!

J’ignore vraiment ce qui s’est passé parce que quand j’ajoute ce que je t’ai donné dans ma console, ça fonctionne pour moi. Et quand je regarde tes paragraphe, je ne suis pas capable de trouver aucune trace du code que je t’ai donné :confused:

Hello, hello,
Moi je n’ai pas compris comment changer la police de mon blog pour le faire une fois pour toute et non pas à chaque article, où renseigner cela sur Wordpress? Merci

Salut! Si je me souviens bien, tu n’utilises pas Thrive Themes hein?

La typographie est spécifique à ton thème, il faut donc aller dans les options de ton thème pour changer cette valeur.

Souvent, tu peux changer la police à partir de là:

Merci Olivier, mon thème déconne depuis la dernière mise à jour et me renvoie vers google analytics en cliquant ici… Je vais attendre la prochaine mise à jour. Je donnerai des nouvelles après ! Merci

Bon, j’ai reviser la leçon sur le CSS et j’ai trouvé ce bout de code:

P {
Margin: 0 0 30px;
}

La valeur originale était 0 0 10px

Une fois copier dans Custom CSS ça donne:

Ce n’est pas en % mais à l’oeil ça semble pas si mal. Il est possible d’ajuster en jouant avec le px. Je ne saurais pas dire pourquoi le script que tu m’as donné ne fonctionne pas, mais ceci semble une bonne alternative. J’ai vérifié sur les autres billets et la nouvelle valeur semble s’appliquer à tout les posts, pas juste celui-là.

Caroline

“En théorie” il faudrait avoir entre 11 et 22px (50 à 100% de la police de corps). Mais je trouve ça bien aussi avec 30! En tout cas, clairement mieux qu’avec 10!

L’idée avec les EM, c’est qu’on ait pas a refaire tout l’espacement si jamais on décide de changer de taille de police! L’utilisateur lui ne voit pas de différence alors ce n’est pas grave du tout :slight_smile:

Ce sujet a été automatiquement fermé après 14 jours. Aucune réponse n’est permise dorénavant.