Baseline

Bonjour,

J'aimerais comprendre l'utilisation du rythme vertical, baseline.
Dans tout les exemples qui suivent, le rythme est aligné sur une grille vertical :
http://www.thegridsystem.org/
http://css-tricks.com/examples/TypographicGrid/

Pourtant, quand je regarde certains sites (alsacréations par exemple), il y a d’emblée une différence d'alignement sur la page d’accueil, surtout entre les "articles" et les "menus" de gauche ou droite.
exemple : css-tricks, smashing magazine, etc...

Non pas que je remette en question, mais j'aimerai comprendre, comment utiliser les rythmes, faut-il tout aligner (même line-height) ? mette des différences ? dans quels cas ?

Perso, j'utilise une font de 14px avec line-height de 20px. Certains textes plus gros font 16px, avec line-height de 20px aussi.

Merci d'avance pour vos explications
(je peux mieux expliquer si ce n'est pas clair)

Je ne pourrai absolument pas répondre dans la mesure ou je n'y connais rien du tout, mais la question est très intéressante. J'espère que les pro de la mise en forme pourront apporter un éclairage !

Sinon en tant que simple utilisateur, je trouve que changer de rythme vertical entre deux parties horizontales (ou l'inverse) permet de bien marquer la séparation entre ces deux parties, sans pour autant avoir besoin d'un espace ou d'un séparateur visuel... Donc j'aime bien.
Modifié par BlueScreenJunky (11 Feb 2013 - 11:42)

Oui moi aussi j'aime bien !

Mais j'aimerais connaître les modalités. On nous dit qu'il faut systématiquement aligner sur une même baseline, alors que la plupart des sites de références n'alignent pas forcément.
J'aimerai bien qu'on me conseil un article en ligne ou un livre...
C'est surtout une question de typographie, de mise en page.
Ne pas mettre tout au même niveau apporte plus de dynamisme, c'est moins monotone.
Mais comment ? Où ? A quel moment ?

Bonjour.

En mise en page, tu as souvent des impératifs contradictoires.

D’un côté, une hauteur de ligne unique dans tous les blocs de texte donnera une harmonie visuelle à ta page.

De l’autre, pour obtenir une bonne lisibilité de tes textes, la hauteur de ligne dépend de la taille des caractères. En print, par exemple, pour des polices de texte, la hauteur de ligne minimale pour permettre une bonne lisibilité doit être de 120% de la taille des caractères. Cette hauteur de ligne peut être plus importante… mais pas trop, car cela diminue alors la lisibilité. Personnellement, pour du texte, j’utilise une ligne-heigth de 140-150% de la taille des caractères.

Et pour des titres de plus grande taille, par contre, la hauteur de ligne doit être proportionnellement moindre que pour des lignes de texte, sinon, elle est trop importante. Pas simple.

Il n’y a donc pas de règle unique.

De plus, si tu veux respecter ton alignement, pour les titres, la hauteur cumulée de leur(s) lignes et de leur padding-top et padding-bottom doit être égale à un multiple de la baseline.

Enfin, ça dépend aussi de ton design. Si tes colonnes sont peu espacées, sur un fond coloré unique, sans séparation aucune (bordures, background) , en d’autres termes, si ta page apparaît comme un espace unique, la différence de ligne-height entre les textes de colonnes différentes sera visible et pourra apparaître comme disharmonieuse.

Par contre, si tes colonnes sont espacées, avec un background différent, des bordures, la différence de ligne-height de leurs textes ne sera plus perçue, ta page sera perçue comme contenant des espaces différents.

Un article en français sur le sujet : https://larlet.fr/david/biologeek/archives/20070819-l-importance-du-rythme-vertical-en-design-css/.

Bonne continuation.
Modifié par thierry (11 Feb 2013 - 16:53)

Merci pour l'article !
Très intéressant, c'est exactement ce que je cherchais, çà remet en question ce qu'on a l'habitude de lire par ci par là concernant le sujet.

J'en retient que cette méthode n'est pas aussi systématique que l'autre.
Beaucoup de paramètres à prendre en compte : la typo, le design global, et d'autres.
Pas de méthodes uniques donc, surtout du feeling.

Pas simple comme tu dis.

Bonjour,


Je m'intéresse aussi au choix d'une baseline et je trouve ton article Thierry très intéressant !

Pour comprendre simplement ce qu'est une baseline, vous pouvez aller sur http://www.dictionnaireduweb.com/definitions/baseline

Ps : le lien correspond plutôt pour des amateurs du sujet... mais remarque vous trouverez peut-être d'autres mots qui vous sont encore inconnu sur ce dictionnaire du Web

A+