Share
Peut-être la question typographique la plus évidente entre les mains d'un concepteur est-elle: "quels types de caractères dois-je utiliser?" La deuxième question, qui mérite rarement l’attention qu’elle mérite, est «à quelle taille dois-je définir mon type? Établir une échelle modulaire est le meilleur moyen de déterminer les tailles typographiques. En fait, cela peut vous aider à disposer des mesures et des proportions sur l’ensemble de votre mise en page..
Au cours de cette session, nous avons examiné la hiérarchie. comment la taille et d'autres facteurs peuvent influencer la relation visuelle des éléments typographiques. Nous avons également récemment étudié le rythme vertical, la cohérence visuelle de l'espacement et les éléments d'une page. Nous avons ensuite la question de la définition d’une grille de ligne de base, qui est liée à l’établissement du rythme vertical. Nous avons même parlé d'utiliser les ems comme unité de mesure, deux fois en réalité. Tous ces aspects de la typographie sont liés par la présence fondamentale de Taille, Alors, comment décidez-vous de la taille de vos éléments typographiques??
Le terme échelle modulaire fait référence à une série de valeurs harmonieuses. Étant une échelle, chaque valeur est un facteur des autres et cela pourrait ressembler à ceci:
En appliquant cette échelle à des CSS typographiques de base, nous pourrions obtenir:
h1 taille de police: 36px h2 taille de police: 24px h3 taille de police: 18px h4 taille de police: 14px p taille de police: 11px petit taille de police: 9px
Vous pouvez reconnaître ces valeurs comme faisant partie de la gamme modulaire classique, illustrée par Robert Bringhust dans Les éléments de style typographique..
Une gamme modulaire, comme une gamme musicale, est un ensemble prédéfini de proportions harmonieuses.
Robert Bringhurst
En adhérant à cette échelle et en définissant vos divers éléments typographiques sur les valeurs indiquées, ils prendront une beauté inhérente; proportions qui ont fonctionné pour les concepteurs typographiques pendant des siècles.
C'est vrai, des siècles.
En réalité, l’établissement d’une échelle typographique trouve son origine aussi bien dans un besoin pratique que dans un jugement esthétique. Dans les temps grisants de la composition des métaux de fonderie, lorsque chaque forme de lettre était moulée sous forme de bloc métallique (il était appelé une sorte), il était peu pratique, trop coûteux, de fabriquer et de stocker des jeux de caractères entiers de chaque caractère, dans tous les poids, tailles.
Les typographes ont donc choisi, au fil du temps, une gamme de tailles utilisable qui fonctionnaient harmonieusement.
Mettons en place une échelle simple à utiliser dans nos propres projets.
Nous devons commencer quelque part, nous allons donc commencer par un nombre de base significatif; notre taille de police de base. J'ai l'habitude de commencer par tout ce que le navigateur dicte comme défaut, nous allons donc utiliser 16px comme base. Tim Brown recommande de commencer par la taille de police à laquelle la police de caractères est la plus clairement affichée - la plupart du temps, elle sera de 16 pixels pour les polices conçues pour le Web..
(Désolé, c’était la seule citation à laquelle je pouvais penser rapport.)
Nous devons donc maintenant établir un ratio, une valeur par laquelle nous multiplierons et diviserons de manière exponentielle notre valeur de base. Ce ratio peut être ce que vous voulez; si vous avez une échelle qui contient une beauté spécifique dans vos yeux, c'est bien.
Vous pouvez, par exemple, choisir la section d'or 1: 1.61803398875. Ce rapport a ses racines dans le tissu même du monde qui nous entoure et a été utilisé par les designers et les architectes pour structurer l'harmonie esthétique depuis… pour toujours..
Pour illustrer facilement ce qui se passe, nous allons utiliser 1: 2 (la comédie musicale parmi vous, qui n'est pas moi par ailleurs, reconnaîtra qu'il s'agit d'une octave). À partir de 16 ans, on obtient ce qui suit:
16 * 2 = 32 32 * 2 = 64 64 * 2 = 128
Et cela peut continuer de façon exponentielle. Pour établir notre échelle vers le bas, nous divisons:
16/2 = 8 8/2 = 4 4/2 = 2
Cela nous donne les prémices de notre échelle:
que nous pouvons appliquer à notre CSS typographique simple comme suit:
h1 taille de la police: 256 pixels h2 taille de la police: 128 pixels h3 taille de la police: 64 pixels h4 taille de la police: 32 pixels p taille de la police: 16 pixels petite taille de la police: 8 pixels
Excellent travail jusqu'à présent!
Cette échelle est assez extrême. Cela fonctionne, mais pour les mesures sur une page Web, c'est assez impitoyable. Pour nous permettre plus de flexibilité, donnons-nous plus d'options en ajoutant une seconde dimension à l'échelle, un processus décrit par Tim Brown dans son article A List Apart, une typographie plus significative..
Choisissez un autre numéro. N'importe quel nombre, pourvu qu'il ait une signification pour votre conception. Nous avons déjà utilisé 16 parce que c'est notre taille de police de base, alors complimentons-nous en ajoutant 95, la largeur d'une colonne que je vais utiliser dans cette présentation fictive de 1 140 pixels de large.
Pointe: Il se peut que de nombreux aspects de votre conception aient une signification; mesures et dimensions qui résonnent tout au long de la mise en page. Expérimentez avec les valeurs que vous choisissez, vous serez peut-être surpris de savoir quelles proportions ressentir droite.En appliquant le rapport de 1: 2 à 95, on obtient l’échelle suivante:
11,875 / 2 = 5,938 23,75 / 2 = 11,875 47,5 / 2 = 23,75 95/2 = 47,5 95 * 1 = 95 95 * 2 = 190 190 * 2 = 380 380 * 2 = 760
Nous avons donc maintenant deux échelles, toutes deux basées sur le même rapport, qui coexistent donc assez bien:
En fait, nous pouvons les combiner, pour nous donner une échelle comme celle-ci:
760.000 512.000 380.000 256.000 190.000 128.000 95.000 64.000 47.500 32.000 23.750 16.000 11.875 8.000 5.938 4.000 2.969 2.000 1.485
Cela comble les lacunes pour nous, ce qui rend notre échelle beaucoup plus complète.
Nous avons déjà mentionné comment nous pouvons appliquer notre échelle à des éléments typographiques de base, alors mettons à jour cette.
h1 taille de la police: 64 pixels h2 taille de la police: 47,5 pixels h3 taille de la police: 32 pixels h4 taille de la police: 23,75 pixels p taille de la police: 16 pixels petit taille de la police: 8 pixels
On y va, pas si intense. Notre échelle peut également se prêter à d’autres caractéristiques typographiques, telles que la hauteur de ligne et donc toute la grille de la ligne de base:
p taille de la police: 16px; hauteur de ligne: 23.75px; marge: 0 0 16px 0;
Et nous pouvons améliorer tout cela en utilisant également ems, en rendant les relations et les proportions plus claires:
corps taille de la police: 100%; p taille de la police: 1em; hauteur de ligne: 1,484; marge: 0 0 1em 0;
Si vous avez des difficultés avec les calculs à ce stade, passez à l'échelle modulaire de Tim Brown. Sa calculatrice vous enverra automatiquement les valeurs pixel et em..
Pour référence, voici à quoi ressemble notre échelle en termes de EMS (en d'autres termes, par rapport à la taille de la police de base):
64 47.5 32 23.75 16 11.875 8 5.938 4 2.969 2 1.484 1 0.742 0.5 0.371 0.25 0.186 0.125 0.093
Après avoir abordé les éléments de types de base de notre page, concentrons-nous sur une structure. Une simple pile de douze colonnes se pose facilement:
.colonne-1 largeur: 95px; * .column-2 width: 190px; * .column-3 width: 285px; .column-4 width: 380px; * .column-5 width: 475px; .column-6 width: 570px; .column-7 width: 665px; .column-8 width: 760px; * .column-9 width: 855px; .column-10 width: 950px; .column-11 width: 1045px; .column-12 width: 1140px; / * dans une grille de fluide, celles-ci seraient converties en% valeurs * /
Vous reconnaîtrez les valeurs suivies d'un astérisque dans notre échelle modulaire.
Chaque colonne devra également flotter. De plus, pour former les gouttières, nous pouvons ajouter un peu de remplissage à chacune des 1em (16px, qui figure également dans notre échelle.)
/ * applique un modèle de mise en forme de boîte naturelle à tous les éléments * / *, *: before, *: after -moz-box-sizing: border-box; -webkit-box-dimensionnement: border-box; taille de la boîte: boîte-frontière; .column float: left; rembourrage: 0 1em;
Très vite, nous avons jeté les bases d’une grille solide et d’une typographie reposant sur une échelle harmonieuse..
La combinaison des grilles avec la typographie peut être une entreprise complexe. Calculer l'harmonie peut sembler très peu intuitif parfois! Une fois que vous avez commencé avec quelques bases de base, vous constaterez que vous ne pouvez pas mettre en page une page Web sans une certaine signification pour les relations sur vos pages..
Ce que nous avons fait jusqu’à présent est un bon début, mais il reste encore beaucoup à faire et beaucoup d’ajustements. La grille de la ligne de base, par exemple, peut être un peu difficile à construire à partir de ce point, de sorte que certaines des valeurs initiales risquent de ne pas fonctionner. De plus, nous voudrions probablement que notre grille soit flexible, afin que les colonnes ne conservent pas les valeurs fixes que nous avons utilisées à l'origine. Pour cette raison, vous constaterez peut-être que nos valeurs horizontales ne fonctionnent pas toujours avec nos mesures verticales..
Il existe des échelles et des grilles établies, testées et testées à travers les âges. Pourquoi ne pas essayer d’appliquer certaines d’entre elles à votre propre travail? Avez-vous déjà appliqué une échelle modulaire volontaire à votre travail? Si non, comment décidez-vous de votre taille typographique? Y at-il des problèmes spécifiques que vous rencontrez avec des échelles? Écoutons vos pensées dans les commentaires!
Accentsconagua