7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Design Theory

Améliorer la mise en pages avec le rythme vertical

Scroll to top
Read Time: 9 mins
This post is part of a series called Design School for Developers.
Typography Basics for Developers
All About Grid Systems

French (Français) translation by Henri Lotin (you can also view the original English article)

Connaître tous les tenants et aboutissants de l’aspect technique de la typographie est bien. Cela vous donnera une solide base quand vous cherchez des fontes ou des polices et vous aidera à comprendre un peu plus l’art lui-même de la typographie. Vous réaliserez bientôt à quel point il faut travailler dur pour obtenir la bonne typographie à tout moment, et pas seulement sur le web.

Un des aspects les plus importants de la typographie sur le web est le rythme vertical - et cela peut aussi être l'un des plus difficiles à faire correctement, car il faut souvent beaucoup de temps et d’expérimentation. Il y a plusieurs façons de parvenir à un bon rythme vertical dans une page, même si certaines peuvent se résument à simplement ce qui semble correct pour vous à l’écran.


Qu'est-ce que le rythme vertical ?

Le rythme est...

un motif solide, régulier, répété de mouvement ou de son

et plus cohérent et familier est un rythme, meilleur et plus stable, il devient.

Nous pouvons appliquer cela sur le web avec le terme « rythme vertical » - dans la culture occidentale, comme nous lisons de gauche à droite et de haut en bas, nous voulons essayer de garder un rythme visuel conforme au contenu sur notre page. Garder notre rythme vertical uniforme signifie que nous pouvons créer une expérience visuelle plus relaxante, évoquant un sentiment de familiarité à nos utilisateurs, supprimant des obstacles visuels et rendant le contenu beaucoup plus lisible.

Créer un bon rythme vertical sur un design de site web peut être difficile. Le but est de créer une relation harmonieuse entre tout le contenu (y compris les images et texte) sur votre site web.

Par exemple, comment l’espacement entre les paragraphes apparaît (est-ce trop grand ou trop petit ?), combien vous est-il facile de lire ? Il y a beaucoup de questions à poser et la plupart vont se résumer à : à quel point il est facile de lire (même en scannant rapidement partout) le contenu de votre site Web. Même les moindres petits changements qui font une meilleure expérience de lecture sur votre site Internet feront une énorme différence pour vos utilisateurs.


Qu'est-ce qui définit le bon rythme vertical ?

Alors maintenant, nous savons ce qu'est le rythme vertical, nous avons besoin d’apprendre un peu plus sur ce qui fait un bon rythme vertical. La clé ici est la lisibilité.

vertical-rhythm-goodvertical-rhythm-goodvertical-rhythm-good
vertical-rhythm-poorvertical-rhythm-poorvertical-rhythm-poor

Lorsque vous travaillez avec la typographie sur le web, les deux choses importantes auxquelles vous voulez faire attention sont les tailles de police et les hauteurs de ligne. Bien qu’il y a tellement d’autres choses qui vont de pair avec ces deux choses, ce sont vos deux éléments clés pour créer un meilleur rythme vertical sur votre design de page. Si vos tailles de polices ne s’emboîtent pas bien - en ayant des titres de taille massive et des corps de texte de paragraphe de taille ridiculement minuscule, par exemple - alors cela va rendre le contenu encore plus difficile à lire ou à parcourir rapidement. De même, si votre contenu a une hauteur de ligne qui rend le texte difficile à lire - ou étant espacées trop proches ou étant trop éloignées - qui décourageront vos utilisateurs, quand vous voulez vous engager avec eux.


Créer un bon rythme vertical

Créer un bon rythme vertical dans vos design demande beaucoup de pratique, mais aussi beaucoup de théorie et parfois des mathématiques.

Tout d’abord, vous devez commencer à chercher une ligne de base (également connue sous le nom de grille de référence). Une ligne de base est la hauteur de ligne standard sur laquelle vous basez votre rythme vertical - et de là, vous pouvez commencer à utiliser cette référence pour gérer vos interlignes pour toutes les autres polices et autres contenus dans votre design.

Trent Walton's website is a brilliant example of good vertical rhythm in design.Trent Walton's website is a brilliant example of good vertical rhythm in design.Trent Walton's website is a brilliant example of good vertical rhythm in design.
Le site web de Trent Walton est un brillant exemple de bon rythme vertical dans le design.

Lorsque vous travaillez avec une ligbe de base, c’est une bonne idée d’aller avec l'interlignage les plus couramment utilisé ou la taille de la police principale dans votre design. Le plus simple exemple auquel je peux penser est de penser à votre taille de police principale de base comme 100 % (ce qui équivaut à 16px dans la plupart des navigateurs). Si vous avez un interligne de 1 alors votre interligne sera également de 16px. Cependant, les interlignes sont généralement préférables réglés entre 1,4 - 1,6 fois la taille de votre police (visuellement, cela semble juste fonctionner avec la plupart des polices - ne prenez pas cela comme une règle, jouez simplement avec elle). Si nous considérons avoir un interligne correct au milieu de de tout ça, de 1,5, notre interligne sera 24 px - et c’est ça notre chiffre de ligne de base. D’ici sur, nous veulent s’assurer que tous les éléments de contenu et typographiques sur notre conception correspondent ou ajoutent à ce chiffre de 24 px.

Une autre chose importante à mesurer c'est nos marges. Un moyen très facile de maintenir notre rythme en phase consiste à utiliser ce nombre magie (24 px) pour nos marges.

J’ai été un grand fan de single-direction margins depuis que Harry Roberts a suggéré cela dans un article à la mi-2012, où les marges que nous appliquons à tous les éléments de type bloc sont placés dans un seul sens (c’est à dire : en bas des éléments). Il en va de même lorsque nous designons aussi, alors que 24 px est notre « nombre magique » - et le nombre dont tout devrait être des multiples, ou au moins se rapportent à - nous pouvons ajouter une marge inférieure de 24 px à tous nos éléments de niveau bloc (ou 1.5rem, si vous le souhaitez - toutefois si vous souhaitez ajouter ce code dans votre CSS, c'est très bien !). Cela nous permet de conserver notre rythme vertical bien fluide et fait que tous nos éléments restent en ligne avec la ligne de base que nous avons créée.

Les images dans votre design

Une petite astuce, que j’ai trouvée lorsque je travaille avec des images dans mon design - et m’assurer qu’elles ne détraquent pas complètement notre ligne de base et notre rythme vertical - est de m’assurer que les hauteurs d'image correspondent à un multiple de notre nombre magique. Ainsi, par exemple, une image peut avoir une hauteur de 240px (10 x 24 px, notre nombre magique) avec une marge inférieure de 24 px. Ou nous pourrions même avoir une hauteur de 252px avec une marge inférieure de 12 px - tant que tout cela s'ajoute jusqu'à ce multiple de 24 px, nous devrions être OK.

Improvisez !

Alors qu’il est important de se rappeler votre nombre magique, vous pouvez encore et toujours en casser un peu - si quelque chose n’est pas tout à fait sentir à la hauteur de 1,5 ligne que vous avez définie, puis essayez autre chose - aussi longtemps que vous pouvez réaligner les autres valeurs de sorte qu’elle retombe dans la ligne de base et maintient ainsi votre rythme vertical en échec.

Par exemple, si vous choisissez de plutôt aller avec un interligne légèrement supérieur de 26 pixels (qui fonctionne à environ 1.625 fois la taille initiale de la police que nous avons eu de 16px), alors comme vos marges tiennent compte de cela, votre rythme vertical sera OK. Comme nous avons ajouté un supplément de deux pixels à l'interligne, nous devons réduire ces deux pixels de la marge inférieure de cet élément. Évidemment, si vous le pouvez, essayez et chercher des schémas dans votre design où cela pourrait se produire et architecturer votre CSS d’une manière qui reflète ce schéma - afin de créer une classe CSS modulaire pour les éléments qui ont ce schéma de design, comme vous le feriez avec n’importe quel projet que vous développez.


Outils pour construire le rythme vertical

Travailler pour créer un bon rythme vertical peut être difficile - mais heureusement, comme avec la plupart des techniques de design et de développement, il y a quelques bons outils pour nous aider. Je trouve ces outils en particulier supers pour pratiquer et comprendre visuellement plus d’infos sur la typographie sur une page.

Typecast App

Typecast est un incroyable outil pour les designers - non seulement il vous autorise à jouer avec des milliers de polices différentes ou des combinaisons de polices, mais il nous aide aussi en composition et en formant une ligne de base adéquate. Je trouve que je plonge toujours dans cela avant toute autre chose quand je commence à travailler la typographie dans mon design.

typecasttypecasttypecast

Modular Scale

L’échelle modulaire est une autre petite technique qui peut être exploitée ou utilisée dans le design avec la typographie - tel que décrit sur A List Apart

une échelle modulaire est une séquence de nombres qui se rapportent à un autre d’une manière signifiante.

Tim Brown

Ces chiffres peuvent être utilisés (par beaucoup d’expérimentation et d’échange-et-changement) dans vos créations, si vous le souhaitez. Ça vaut au moins un coup d’oeil et d'y aller - et peut vous aider à prendre des décisions plus éclairées sur des choses comme les largeurs des conteneurs, et comment ces autres nombres peuvent également jouer un rôle dans votre rythme vertical.

modular-scalemodular-scalemodular-scale

Basehold.it et Baseline.js

Si vous êtes un fan de design dans le navigateur, ou tout simplement voulez vous assurer que les lignes de base que vous avez conçues ailleurs suivent quand vous commencez à coder - puis à l’aide d’un de ces deux plugins, JavaScript vous aidera à vérifier comment votre ligne de base performe dans votre code. Le premier (Basehold.it), par Dan Eden et Michael Wright, vous fournit une surcouche JavaScript sur votre page Web, alors que Baseline.js par Dan Eden vous offre une façon de gérer les images sur votre page, si c'est nécessaire.

baseline-baseholdbaseline-baseholdbaseline-basehold

Devoirs

Pour ce devoir, je veux que vous vous amusiez simplement avec une grille de référence - que ce soit grâce à un essai de Typecast, ou en utilisant l’un des plugins JavaScript ci-dessus ou tout simplement en créant une grille de ligne de base dans Photoshop ou autre application graphique dépend totalement de vous. Une fois que vous avez votre grille de ligne de base, commencez à y appliquer les principes du présent article ; certains de vos contenus mis en place, et commencez à comprendre les échelles et les tailles de police que vous souhaitez utiliser.

Une fois que vous les avez mis en place, commencez à chercher comment tous cela fonctionne ensemble avec votre grille de ligne de base. Si vous n’avez jamais fait ça avant, ça peut demander un peu de travail pour comprendre ce qui se passe - mais c’est bien la peine de prendre le temps de comprendre exactement comment elles fonctionnent. Après cela, vous serez en mesure de commencer à intégrer un bon rythme vertical dans vos design de site web beaucoup plus facilement - et vos utilisateurs vous en seront reconnaissants !


Lectures supplémentaires

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.