Test Typographie


Test de typographie

Un test pour moi, et bien entendu, pour vous, si vous êtes comme moi, à ne pas trop savoir ce qu'est la typographie même si on se doute que ça a un rapport avec les lettres d'un texte ainsi que les accents, la ponctuation et les chiffres.

Cette page de test n'est pas un tutoriel puisque en écrivant et en faisant des tests, je découvre le rendu en même temps que vous.

Ce que j'attends de la typographie

Et bien, j'aimerais maîtriser la taille des lettres facilement pour mes articles ainsi que la couleur et l'espacement des mots. J'ai lu sur d'autres sites web que ce que j'essaye de décrire avait des mots spécifiques que je n'utilise pas pour le moment. Dans tous les éditeurs de texte, j'avais remarqué qu'on pouvait changer la taille de la police d'écriture et je ne m'en suis jamais servis pour l'instant, de peur de faire plus de mal que de bien à mes textes.

L'éditeur que j'ai en face des yeux ne me propose pas grand chose pour jouer sur le texte.



Dans cet éditeur, il n'y a qu'un outil de formatage pour jouer avec la taille des lettres. Il me propose (en partant du plus grand au plus petit)

  • la taille normale, la taille citation, la taille code et 5 niveaux de titre.

C'est bien de le savoir, mais moi, ce n'est pas ce que je veux faire.

Je viens de remarquer dans cet éditeur, une icône baguette magique qui permet pas mal de choses voyons cela!


Utilisation de la baguette magique

Utilisation des propriétés CSS qu'offre cette baguette magique.

On lis des noms bizarres !

Je vais essayer d'écrire des petites phrases en utilisant chaque possibilité, ou mieux, comme texte, je reprendrai les mots dans l'ordre de haut en bas, et on verra ce que ça donne !

  1. Test Typographie
  2. Label Primary
  3. Label Primary Round
  4. Label Primary Radius
  5. Label Secondary
  6. Label Secondary Round
  7. Label Secondary Radius
  8. Label Success
  9. Label Success Round
  10. Label Success Radius
  11. Label Warning
  12. Label Warning Round
  13. Label Warning Radius
  14. Label Alert
  15. Label Alert Round
  16. Label Alert Radius
  17. Small text
  18. Keystrokes
  19. Supprimer le style

Une fois qu'on à ça, on fait quoi ?

Je viens d'utiliser un Label qui écrit tout petit et qui m'enferme dans un bouton dont le Label a été choisis. Mais, moi, je n'aime pas cette écriture minuscule.

Il faut que je maîtrise tous ces Labels à la noix!

J'ai besoin d'une taille plus grande et le formatage en titre de niveau 4 vient de prendre le dessus sur les Labels de départ.

Tout ça, c'est bien joli mais ça ne me convient pas, trop de couleurs inutiles, trop de style clownesque. Il va falloir que j'aille chercher ailleurs, le véritable moyen de choisir une typographie adaptée à mes besoins et j'ai une petite idée..

Les paramètres du thème Fundamental

C'est dans les paramètres du thème Fundamental themes que je dois me diriger et j'en parle en partie dans le menu des tutoriels.

Lorsqu'on achète un thème, on ne se procure pas qu'un thème qui nous plait au sujet des couleurs, le thème est fournit avec un certain nombres d'options toutes écrites en anglais et pas bien compréhensible pour nous les français.

On me propose de choisir entre tels et tels dispositions en cochant des boutons radio, savoir si je veux que ce soit à gauche, au centre, à droite..! Mais, il faudrait déjà comprendre les termes employés.


Google Fonts

Voilà ce que j'en ai compris de ces paramétrages en anglais.

J'ai donc le moyen, grâce à mon thème qui le prévoit, de choisir une police d'écriture qui me convienne.

Pour cela, il existe une longue liste déroulante de A à Z de noms de polices. Pour ce test, j'ai choisis la police : " Libre Baskerville" avec à chaque fois, à droite, un choix nommé : Select font variant" ou un réglage normal est de 400 alors qu'un Bold est de 700.

A noter que sur l'image du dessus, je n'ai pas pu prendre l'ensemble de la copie d'écran car il y avait une barre de défilement. Ne vous inquiétez-pas, voila ci-dessous le reste de la copie d'écran.

Moi qui n'y connais encore pas grand chose en matière de typographie, vous pouvez vous rendre compte que j'ai presque tout validé avec cette police, la Libre Baskerville, j'arrive à lire, vous aussi j'imagine !

Je l'ai adopté pour le corps et presque tout les titres de niveaux H.

Lorsque je m'intéresse à un sujet, il est évident que je recherche sur mon moteur de recherche ce sujet, et que je lis les autres sites web. Pour typographie, j'ai fais pareil, j'ai lu de bons sites web.

Pour les différentes polices, j'ai fais idem. J'ai saisis : " les plus belles polices Google Fonts" et j'ai lu, et je me suis lancé dans ce tuto.

Les spécialistes disent qu'il ne faut pas utiliser plus de 2 polices différentes. Pour le moment, j'ai écouté et je n'en ai choisis qu'une seule ne sachant encore pas trop, pour quel type spécifique, il faudrait que je mette 2 polices différentes.


Rectificatif sur mon éditeur

L'éditeur n'était pas complet jusqu'à présent. Je fais amende honorable. Je viens de remarquer que je n'avais pas coché toutes les cases de l'outil. Il y a tellement de paramètres à vérifier sous concrete5, et surtout, tellement d'apport de nouveaux outils, lors de l'amélioration des versions, que l'on ne pense pas forcément à tout revérifier.

Donc, cet éditeur c'est enrichi de nouvelles fonctionnalités et notamment de moyens de jouer avec la police de caractère ainsi que d'adapter les couleurs.

Voyez vous-même la nouvelle capture d'écran ci-dessous.


La capture d'écran des paramètres de l'éditeur


Voila ce qu'il y avait à dire sur le sujet de la typographie a employer pour nos articles dans nos sites web. Encore que il ne faut pas mélanger la typographie et les polices et pour cela, si vous voulez de la lecture supplémentaire pour mieux comprendre, je vous mets quelques liens intéressant, ainsi qu'un PDF à télécharger.


Un PDF décrivant des règles typographiques

Liens utiles :

All for Design

davidl.fr

un blog une fille

Google Fonts

Combiner des polices


Chargement de la conversation