Archives du mot-clé Règles typographiques

Créer une grille de mise en page

S’il vous arrive régulièrement de mettre en page des brochures, des affiches ou même des sites Web, vous êtes très probablement familier avec les grilles de mise en page.

Si vous ne l’êtes pas, vous allez vite le devenir. Les grilles de mise en page sont un atout majeur (voire essentiel) pour achever un travail de mise en page de manière parfaitement structurée et ordonnée.

Plusieurs types de grilles existent ; en passant par les simples grilles basées sur la règle d’or (ou la règle des tiers) jusqu’aux grilles modulaires complexes. Ces dernières sont difficiles à mettre en place, car un certain calcul mathématique s’impose. Heureusement, il existe de nombreux outils pour vous aider à y parvenir.

Dans cet article, je vous présenterai Gridelicious, un outil en ligne fait en Javascript qui vous permet de calculer simplement et facilement des chiffres bien pratiques, vous allez vite vous en apercevoir…

Gridelicious est, il faut le spécifier, une alternative gratuite et moins complète de Grid Calculator. Grid Calculator vous permet d’aller un peu plus loin dans vos calculs, et de le faire de manière plus fluide (un logiciel est toujours plus aisé et pratique qu’une application Web), mais comme ils demandent un sacré prix (45 $), les plus démunis d’entre nous se contenteront aisément de Gridelicious, qui a vu le jour justement grâce à quelqu’un qui s’est indigné contre le prix de Grid Calculator.

Pour l’exemple, nous utiliserons un format bien standard : Lettre US, et nous utiliserons InDesign, bien que le principe soit certainement applicable à plusieurs autres applications professionelles de mise en page. Ces directives vous permetteront de créer facilement une mise en page « modulable »; il est possible d’aller plus loin évidemment, mais c’est un bon début. Au fait, les noms des menus InDesign sont donnés en français, mais si vous avez une version anglaise et que vous trouvez pas, parlez-en dans les commentaires de cet article, on trouvera bien pour vous. Il peut s’avérer commode également de mettre ses unités de règles en points pour l’exercice (ou en mm selon ce que vous utilisez), ainsi que d’activer le magnétisme des grilles.

  1. Créez donc un nouveau document dans InDesign, de 8,5″ x 11″ (Lettre US, mais libre à vous amis français de mettre du A4 et d’entrer les valeurs en conséquence lorsque le moment sera venu). Mettre toutes les marges à 0 pour un peu de propreté durant l’exercice.
  2. Créez une boîte de texte, mettez-y du texte bidon (Lorem Ipsum avec des outils comme celui-ci). Paramétrez au passage la fonte, la taille et surtout l’interligne que vous désirez. Cette étape est important car l’interligne est la pierre angulaire de tout le calcul.
  3. Du côté de Gridelicious, choisissez d’abord Inches à Page Measurement Units.
  4. Entrez 8.5 et 11 à Width et Height (sous la section Page size).
  5. Disons que je choisis 14 pts comme interligne. On l’inscrit dans la case Desired Leading, juste dessous.
  6. Surprise, y’a des champs qui s’auto-remplissent avec des valeurs tout ce qu’il y a de bizarres, dont 2 plutôt importants :
    Correct Leading (13.895 pt) : Ceci est votre valeur d’interligne corrigée pour que le calcul fonctionne. C’est le chiffre-clé.
    Baselines
    (57) : Ceci est le nombre de lignes de bases dans le document, pour cet interligne corrigé.
  7. De retour dans InDesign, armé de vos chiffres, faites InDesign > Préférences > Grilles…
  8. Sous Grille de ligne de base, mettre :
    Début 0
    Relative àHaut de page
    Pas : 13.895 pt (Correct Leading)
  9. Sous Grille du document, à horizontalement et verticalement, mettre :
    Pas : 13.895 pt
    Subdivisions : 1
  10. Faire OK, puis afficher la grille si vous n’en voyez aucune : Affichage > Grille et repères > Afficher la grille du document.
    Wow, une belle grille toute bien ajustée! C’est pas tout, il faut aussi déterminer la hauteur d’f. La hauteur d’f va vous aider à aligner parfaitement vos images avec la typographie. Vraiment, c’est génial, et on va foutre des repères partout pour ça, ça vaut le coup!
  11. Si vous avez créé un style de paragraphe pour votre texte bidon, modifiez-le afin d’avoir la bonne interligne corrigée, c’est-à-dire 13.895 pt dans notre exemple. Si vous n’aviez pas créé de style, faites-le sur le champs.
  12. Dans l’onglet Retrait et espacement du style, choisissez Toutes les lignes à Aligner sur la grille. Ceci force la typographie à l’aligner parfaitement sur votre belle grille toute neuve.
  13. Placez une boîte de texte en partant du bord du haut de la page, dans lequel vous tapez un f minuscule (avec le style de paragraphe précédemment paramétré). Votre f minuscule devrait maintenant être parfaitement aligné sur la ligne du bas de la grille.
  14. Pour obtenir une mesure tout ce qu’il y a d’exact, transformez votre lettre f en vecteurs : Texte > Vectoriser (avec la boîte de texte sélectionnée). Voilà donc le f devenu une forme vectorielle.
  15. Créez un nouveau calque appelé Hauteur f, plus en zoomant sur la lettre, descendez précisément un guide pour l’aligner parfaitement sur le dessus de la lettre f.
  16. Avec le guide toujours sélectionné, faites Édition > Exécuter et répéter et entrez ces valeurs :
    Nombre de répétitions : 57 (la valeur Images de tout à l’heure)
    Décalage vertical13.895 pt (Correct Leading)
  17. Cliquez sur OK (vous pouvez voir un aperçu juste avant pour être sûr que les guides couvrent la surface du document).
    Grille et hauteur d'f
  18. Voilà, vous avez une joli grille facile à utiliser, vous pouvez maintenant ajuster vos marges et colonnes selon votre bon goût. En passant, il est préférable d’aligner la marge du haut avec l’un des repères d’hauteur d’f.
    Alignement de texte et d'images

C’est tout pour l’instant, libre à vous d’aller plus loin, ce n’était qu’une introduction aux grilles de mise en page! Je remercie au passage mon pote de chez 3e Avenue qui m’a fait découvrir Grid Calculator.

Pour les plus feignants d’entres vous, je fournis même le fichier InDesign CS3 ayant servi à faire l’exemple :

Plugin Joomla! pour des espaces insécables dans le contenu

Voici un petit plugin pour Joomla 1.5.x qui permet de remplacer automatiquement les espaces sécables par des espaces insécables dans un article.

Ce plugin s’adresse surtout à ceux qui désirent pousser l’obsession (l’observation) des règles typographiques jusqu’au bout. Selon ces règles, plusieurs caractères ne doivent pas être coupés par un retour de ligne.

Note : Un article est en préparation pour spécifier les différents types de règles typographiques selon les pays (avec sources).

Le plugin place simplement l’entité HTML   à la place des espaces sécables pour les caractères concernés. Lors de la rédaction de votre article, vous devez tout de même écrire une espace normale, sans quoi le plugin prendra pour acquis que vous ne désirez pas mettre d’espace du tout.

Notez qu’au Québec, il ne faut pas insérer d’espace avant le point d’exclamation et le point d’interrogation; je les ai quand même inclus au cas où des cousins de la francophonie aimeraient se servir du plugin.

Vous pouvez constater ce plugin en action sur ce blog. Ce n’est rien de très compliqué, mais c’est quand même utile.

Signage Systems & Information graphics

Signage Systems & Information graphics

Il existe plusieurs livres sur le design de signalétique.

Parmi ceux-ci, l’un des meilleurs et des plus complets est certainement Signage Systems & Information graphics.

 

Une quantité impressionnante de sujets sont explorés dans ce bouquin de l’allemand Andreas Übele. Ce qui retient davantage notre attention : la typographie et les pictogrammes.

En effet, il s’agit là de deux armes essentielles à maîtriser parfaitement pour réussir un projet de signalétique. Signage Systems & Information graphics les couvre assez bien, surtout pour ce qui est de la typographie. Diverses excellentes fontes qui ont su faire leurs preuves à travers le temps sont présentées (ou rappelées), et comparées de façon très pertinente.

« Look at the lower-case ‘a’ in Akzidenz Grotesk Light : the curving base of the stem is too long, and the counter is too broad. This may be why Akzidenz is better suited to longer texts than Helvetica, as these details hold the letters together like serifs. »

L’accent est mis avec force sur le choix cohérent de la fonte selon l’application (« If in doubt, use Akzidenz Grotesk »).

Les notions de la grille sont aussi abordées (« Never ever work on signage without a grid! »).

La couleur, facteur très important dans cette branche du design graphique, est aussi abordée, de façon très complète, en décrivant les avantages et inconvénients de l’usage des couleurs les plus utilisées en signalisation.

En plus d’une révision de ces bases de la communication visuelle, de nombreuses précisions pour différents endroits d’affichage (aéroports, musées, écoles, bibliothèques, congrès, endroits publics, etc.), le tout très richement imagé avec des exemples à profusion, principalement des travaux allemands et européens. Finalement, la bibliographie est très intéressante à consulter car elle contient un bon paquet d’excellents ouvrages sur la typographie.

Plus d’informations sur le livre Signage Systems & Information graphics