Share
Il est bon d’apprendre tout sur les aspects techniques de la typographie. Cela vous donnera une base solide pour rechercher des polices de caractères et vous aidera à comprendre un peu plus l'art de la typographie. Vous vous rendrez vite compte à quel point il est difficile de taper du texte correctement, pas seulement sur le Web..
Le rythme vertical est l’un des aspects les plus importants de la typographie sur le Web. Il peut s’avérer aussi l’un des plus difficiles à comprendre, car cela prend souvent beaucoup de temps et d’expérimentation. Il existe de nombreuses façons d'obtenir un bon rythme vertical sur une page, même si certaines peuvent se résumer à ce que vous ressentez et vous convient à l'écran..
Le rythme est…
un mouvement ou un son puissant, régulier et répété
et plus le rythme est régulier et familier, plus il devient fort et fort.
Nous pouvons appliquer cela au Web avec le terme «rythme vertical» - dans la culture occidentale, nous lisons de gauche à droite et de haut en bas, nous voulons essayer de garder un rythme visuel cohérent pour le contenu de notre page. Garder notre rythme vertical cohérent signifie que nous pouvons créer une expérience plus relaxante visuellement, en suscitant un sentiment de familiarité avec nos utilisateurs, en supprimant les barrières visuelles et en rendant le contenu beaucoup plus lisible..
Il peut être difficile de créer un bon rythme vertical sur un site Web. L’objectif est de créer une relation harmonieuse entre tous les contenus (y compris les images et texte) sur votre site web.
Par exemple, à quoi ressemble l'espacement entre les paragraphes (est-il trop grand ou trop petit?), À quel point vous trouvez-vous facile à lire? Il y a beaucoup de questions à poser et la plupart d'entre elles vont dépendre de la facilité avec laquelle il est facile de lire (même rapidement de balayer) le contenu de votre site Web. Même les moindres changements permettant une meilleure expérience de lecture sur votre site Web feront une énorme différence pour vos utilisateurs..
Alors maintenant que nous savons ce qu'est un rythme vertical, nous devons en apprendre un peu plus sur ce qui fait un bon rythme vertical. La clé ici est la lisibilité.
Lorsque vous travaillez avec de la typographie sur le Web, vous devez prêter attention aux deux choses principales que sont la taille des polices et la hauteur des lignes. Bien qu'il y ait 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 la conception de votre page. Si vos tailles de police ne s'accordent pas bien - par exemple avec des tailles de titre massives et des tailles de texte de paragraphe ridiculement minuscules, cela rendra 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 - que ce soit en étant trop rapproché ou trop éloigné -, vos utilisateurs seront désactivés si vous souhaitez interagir avec eux..
Créer un bon rythme vertical dans vos conceptions demande beaucoup de pratique, mais aussi beaucoup de théorie, et parfois aussi de maths..
Tout d'abord, vous devez commencer par examiner une ligne de base (également appelée grille de ligne de base). Une ligne de base est la hauteur de ligne standard sur laquelle vous baserez votre rythme vertical. À partir de là, vous pourrez commencer à utiliser cette ligne de base pour vous aider à définir des hauteurs de ligne pour toutes les autres polices et le contenu de votre conception..
Le site Web de Trent Walton est un brillant exemple de bon rythme vertical dans la conception. Lorsque vous travaillez avec une ligne de base, il est judicieux d’utiliser la hauteur de ligne de la taille de police la plus utilisée ou principale dans votre conception. L'exemple le plus simple auquel je puisse penser est de penser à votre taille de police de base principale de 100% (ce qui équivaut à 16 px dans la plupart des navigateurs). Si vous avez une hauteur de ligne de 1, votre hauteur de ligne sera également de 16px. Cependant, il est généralement préférable de choisir une hauteur de ligne comprise entre 1,4 et 1,6 fois la taille de votre police (visuellement, cela semble fonctionner avec la plupart des polices - même si vous ne prenez pas cela comme règle, jouez simplement dessus). Si nous avons ensuite une hauteur de trait de 1,5, notre hauteur de trait sera de 24px - ce qui correspond à notre numéro de base. À partir de maintenant, nous voulons nous assurer que tout le contenu et les éléments typographiques de notre conception correspondent ou s'ajoutent à cette figure de 24 pixels..
Une autre chose importante à mesurer est nos marges. Un moyen très facile de garder notre rythme sous contrôle consiste à utiliser ce nombre magique (24px) pour nos marges.
Je suis un grand fan des marges unidirectionnelles depuis que Harry Roberts a suggéré cela dans un article de mi-2012, dans lequel les marges que nous appliquons à tous les éléments de niveau bloc sont placées dans une direction (c'est-à-dire: au bas des éléments ). La même chose peut être dite lors de la conception aussi, alors comme 24px est notre «nombre magique» - et le nombre que tout doit être multiple de, ou au moins lié à - nous pouvons ajouter une marge inférieure à tous nos niveaux de bloc éléments de 24px (ou 1.5rem, si vous préférez, mais vous voulez ajouter ce code dans votre CSS, c'est bien!). Cela nous aide à garder notre rythme vertical fluide et à aligner tous nos éléments sur la ligne de base que nous avons créée..
Un petit conseil que je trouve en travaillant avec des images dans ma conception - et en veillant à ce qu'elles ne fassent pas complètement basculer notre rythme de base et notre rythme vertical - est de nous assurer que les hauteurs d'images correspondent à un multiple de notre nombre magique. Ainsi, par exemple, une image peut avoir une hauteur de 240 pixels (10 x 24 pixels, notre nombre magique) avec une marge inférieure de 24 pixels. Ou nous pourrions même avoir une hauteur de 252 pixels avec une marge inférieure de 12 pixels - tant que tout se résume à ce multiple de 24 pixels, tout devrait bien se passer.
Bien qu'il soit important de vous souvenir de votre nombre magique, vous pouvez toujours le rompre légèrement - si quelque chose ne vous semble pas parfaitement correct à la hauteur de 1,5 ligne que vous avez définie, essayez autre chose - tant que vous pouvez réaligner l'autre. valeurs afin qu’il retombe dans la ligne de base et garde ainsi votre rythme vertical en échec.
Par exemple, si vous choisissez plutôt une hauteur de ligne légèrement supérieure de 26 pixels (ce qui correspond à environ 1,625 fois la taille de police originale de 16 pixels), alors tant que vos marges le reflètent, votre rythme vertical ira bien. Comme nous avons ajouté deux pixels supplémentaires à la hauteur de ligne, nous devons prendre ces deux pixels dans la marge inférieure de cet élément. Évidemment, si vous le pouvez, essayez de rechercher des modèles dans votre conception susceptibles de se produire et concevez votre CSS de manière à refléter ce modèle - créez donc une classe CSS modulaire pour les éléments comportant ce modèle, comme vous le feriez pour tout projet. vous développez.
Il peut être difficile de créer un bon rythme vertical, mais heureusement, comme pour la plupart des techniques de conception et de développement, il existe quelques bons outils pour nous aider. Je trouve ces outils particulièrement intéressants pour la pratique et la compréhension visuelle de la typographie sur une page..
Typecast est un outil formidable pour les concepteurs. Il vous permet non seulement de jouer avec des milliers de polices ou de combinaisons de polices différentes, mais également de nous aider à composer et à constituer une ligne de base appropriée. Je trouve que je plonge toujours dans ce sujet avant tout, quand je commence à regarder la typographie dans ma conception.
L'échelle modulaire est une autre petite technique qui peut être exploitée ou utilisée dans la conception avec la typographie - comme décrit sur A List Apart.
une échelle modulaire est une séquence de nombres qui se rapportent les uns aux autres de manière significative.
Tim Brown
Si vous le souhaitez, vous pouvez utiliser ces chiffres (par le biais de nombreuses expérimentations et échanges et modifications) dans vos conceptions. Cela vaut au moins un coup d'œil et un jeu - et cela peut vous aider à prendre des décisions plus éclairées concernant des éléments tels que la largeur des conteneurs et la manière dont ces autres chiffres peuvent également jouer un rôle dans votre rythme vertical..
Si vous êtes un amateur de conception dans le navigateur ou si vous souhaitez simplement vous assurer que les références que vous avez conçues ailleurs sont respectées lorsque vous commencez à coder, l'utilisation de l'un de ces deux plug-ins JavaScript vous aidera à vérifier l'état de votre référence. effectuer dans votre code. Le premier (Basehold.it), de Dan Eden et Michael Wright, fournit une superposition de JavaScript sur votre page Web, tandis que Baseline.js de Dan Eden vous fournit un moyen de gérer les images de votre page, le cas échéant..
Pour cette tâche, je veux que vous jouiez simplement avec une grille de base - que ce soit par un essai dans Typecast, en utilisant l'un des plug-ins JavaScript susmentionnés ou simplement par la création d'un contour de grille de base dans Photoshop ou une autre application graphique vous. Une fois que vous avez préparé une grille de base, commencez à y insérer les principes de cet article. mettez une partie de votre contenu en place et commencez à comprendre les échelles et les tailles de police que vous souhaitez utiliser.
Une fois que ceux-ci sont en place, commencez à regarder comment tous ces éléments sont liés à votre grille de base. Si vous ne l'avez jamais fait auparavant, cela vous demandera peut-être beaucoup de travail, mais il est bon de prendre le temps de comprendre exactement comment ils fonctionnent. Après cela, vous pourrez commencer à intégrer beaucoup plus facilement un bon rythme vertical dans la conception de votre site Web - et vos utilisateurs vous remercieront.!
Accentsconagua