Grille de rythme / ligne de base verticale dans la conception Web

J'ai récemment lu quelques articles sur l'importance d'un bon rythme vertical / l'utilisation d'une grille de base pour une bonne typographie dans la conception web. J'ai décidé d'essayer d'utiliser une grille de base, comme la grille 960 illustrée ci-dessous, comme image de fond pour un thème de conception Web / WordPress sur lequel je travaille actuellement.

Grille 960

Je trouve qu'il est très difficile de tout aligner correctement dans la grille. J'ai réussi à tout mettre dans la grille verticale à la taille de texte par défaut (16px), mais comme je commence à jouer avec la taille des en-têtes, ajouter des images, etc., les éléments ne restent pas toujours alignés correctement sur la grille.

Je voudrais savoir comment améliorer ma typographie en utilisant le rythme vertical. Quelqu'un a-t-il des conseils ou des techniques à utiliser?

— Santaji
source

Réponses:

La grille de base dans la conception Web est un casse-tête académique, mais surtout peu pratique d'un point de vue mathématique codé en dur. Étant donné que CSS n'a pas de concept de ligne de base pour le type, il est techniquement impossible d'obtenir des lignes de base pour correspondre.

Vous pouvez vous rapprocher de l'espacement des choses, mais vous vous retrouvez finalement avec quelque chose qui peut avoir du sens lorsque vous regardez les chiffres, mais qui est probablement désactivé visuellement et vous finissez par vous éloigner de la formule pour vous assurer que les choses semblent correctes.

Donc, en résumé, un rythme visuel est important, mais construisez-le à partir de vos tripes, pas de quelques équations qui vous rendront juste dingue à implémenter correctement sur le Web.

En passant, notez que le concept d'une grille de base vient du monde de la conception imprimée ... en particulier des mises en page multi-colonnes comme dans un journal où vous souhaitez que le type s'aligne de colonne en colonne de préférence. Pour faciliter la composition de ce type de publication, une grille de référence est logique et est relativement facile à mettre en œuvre dans le monde des applications DTP.

— DA01
source

Exactement - vous mélangez des pommes et des orangs-outans. C'est comme essayer d'obtenir la couverture d'un livre de poche pour lire une vidéo Flash. À moins que vous ne fassiez tout en tant qu'image et que votre site Web entier soit un JPG avec des images, cela ne se produira tout simplement pas.

— Lauren-Clear-Monica-Ipsum

Il n'est pas si difficile de faire correspondre CSS et HTML à la grille 960. Après tout, le codage est simplement mathématique. En plus de cela, tous les concepteurs de (par exemple) themeforest.net l'utilisent. Ce n'est pas aussi difficile que vous le dites. Et oui .... le concept de grille vient du monde de l'impression. Cependant, le système de grille 960 est converti pour le Web pour correspondre à une résolution minimale de 1024x768.

— Luuk

la grille 960 est principalement destinée à créer des grilles horizontales et quelque chose que je recommande fortement sur des sites de tailles même modérées. C'est un outil très utile. Cependant, nous parlons d'une ligne de base de type vertical. Oui, le codage est mathématique. Hélas, les navigateurs et la spécification CSS n'ont fait aucune adaptation particulière pour déterminer les lignes de base des lettres. Vous pouvez le faire avec vos calculs, mais vous êtes à la merci des navigateurs individuels, des systèmes d'exploitation, des polices installées et des préférences des utilisateurs, il n'est donc pas du tout `` simple calcul '' pour que l'aspect grille de type de base fonctionne.

— DA01

De plus, le design n'est pas toujours purement mathématique. En fait, ce sont rarement des mathématiques pures. Les mathématiques nous amènent à un point, mais au-delà, le jugement esthétique de l'œil doit se mettre en place. J'ai construit des sites en utilisant un système de grille de base à la fois pour moi et pour les autres concepteurs et le plus souvent, nous devons supprimer la grille de base à la fin pour qu'elle se sente bien. J'ai décidé qu'à cause de cela, c'est généralement un effort inutile pour faire fonctionner la grille de base car c'est généralement une chose arbitraire.

— DA01

Hmm, mon manque de lecture;) je n'ai pas remarqué qu'il ne s'agit que du rythme vertical. Je dois admettre que moi aussi je n'utilise pas vraiment les 960gs pour le rythme vertical. Uniquement pour horizontal. La seule chose que j'utilise verticalement est "le pli". Le reste je m'aligne (encore une fois verticalement) par "l'oeil".

— Luuk

Le rythme vertical n'est pas difficile à implémenter, surtout si vous commencez avec une réinitialisation CSS . Je suis tombé sur ce lien http://24ways.org/2006/compose-to-a-vertical-rhythm il y a quelque temps, et j'ai depuis utilisé la technique dans toutes mes créations.

Ce que j'ai trouvé, c'est qu'après avoir travaillé avec un ensemble "en conserve" de déclarations de type dans mon fichier CSS (h1 - h6, p, etc. - en particulier, la taille, la hauteur de ligne, les marges inférieures), il est très facile à déployer.

Voici une image d'arrière-plan qui m'a aidé à voir les choses un peu plus clairement ... surtout quand j'ai utilisé le rythme vert pour la première fois.

entrez la description de l'image ici

C'est peut-être difficile à voir, mais quand il est répété comme image de fond: vous verrez une grille 20x20.

HTH

Remarque: j'aime mieux la typographie des sites qui ont utilisé cette technique que ceux qui ne l'ont pas fait. Dans les deux cas cependant, il semble toujours y avoir un ou deux éléments qui doivent "tromper le système" pour avoir l'air "correct". J'ai également constaté que faire attention à la hauteur de ligne globale (disons 18 pixels pour une base de polices de 12 pixels) rend les marges et le rembourrage autour des images, des en-têtes graphiques et autres assez simples (18 pixels). Aussi ... l'envie de tout calculer disparaît ... vous commencerez à remarquer un "rythme vertical" sur la mise en page, et pourrez tirer le bon remplissage / marge / hauteur de ligne d'une très courte liste de valeurs dans ta tête.

— Dawson
source

Ce très bel article sur Smashing Magazine sur la ligne de base et le rythme vertical vous donne un aperçu de l'importance des lignes de base dans la conception Web et de la façon de les implémenter dans votre CSS. Il utilise la taille de police, la hauteur de ligne, le remplissage et la marge sur les éléments html par défaut pour que tout soit aligné avec votre grille de base.

Pour aider à tout faire correspondre à la grille, une image d'arrière-plan est très utile, comme le suggère Dawson.

J'ai suivi cette technique pour mes dernières créations, et je pense que cela en vaut vraiment la peine.

— Vincent
source