Correctement gérer une grille typographique

a marqué ce sujet comme résolu.

Bonjour à tous :)

En ce moment, je travaille sur le design d’un futur site web et je rencontre quelques difficultés avec le code CSS pour lesquels j’ai besoin d’être aidé. Je ne suis pas développeur web mais je connais suffisamment le HTML et les CSS pour obtenir un style qui me plait.

Ici, j’essaie d’obtenir un rhytme vertical exact pour le texte à l’aide d’une grille typographique. Mon texte de base possède les propriétés suivantes :

1
2
font-size: 20px;
line-height: 26px;

Quelques éléments sont un peu plus gros, mais la grille est respectée :

1
2
font-size: 26.66px;
line-height: 52px;

Normalement, toutes les lignes devraient être espacées d’une distance proportionnelle à 26 px. Si le texte de taille normale est affiché parfaitement, le gros texte est légèrement surélevé comme vous pouvez le voir sur cette capture d’écran :

Le code source :

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                font-size: 20px;
                line-height: 26px;
            }
            main {
                grid-area: content;
                align-self: start;
            }
            header {
                grid-area: header;
                height: 100%;
            }
            h1 {
                margin: 0;
                font-size: 26.66px;
                line-height: 52px;
                margin-bottom: 78px;
            }
            h2 {
                margin: 0;
                font-size: 20px;
                line-height: 26px;
                margin-top: 78px;
                margin-bottom: 52px;
            }
            p {
                margin: 0;
                margin-bottom: 26px;
            }
            p.lead {
                font-size: 26.66px;
                line-height: 52px;
            }
            header h1 img {
                height: 104px;
                display: block;
                margin: auto;
            }
            header h1 {
                text-align: center;
                font-size: 20px;
                line-height: 26px;
            }
            header h1 span {
                display: block;
            }
            header nav a {
                display: block;
                margin-bottom: 26px;
            }
            footer {
                grid-area: footer;
            }
            .container {
                display: grid;
                grid-template-columns: 200px 700px;
                grid-template-rows: auto auto;
                grid-template-areas: "header content" "footer footer";
                grid-column-gap: 52px;
                grid-row-gap: 52px;
                justify-content: center;
            }
            body {
                background: url("grid.png");
            }
            header, main, footer {
                outline: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <header>
                <h1>
                    <img src="target.png" alt="Logo">
                    <span>Xxxxxx</span>
                </h1>
                <nav>
                    <a href="">Home</a>
                    <a href="">Orreries</a>
                    <a href="">Purchase</a>
                    <a href="">Contact</a>
                    <a href="">Impressum</a>
                </nav>
            </header>
            <main>
                <h1>Test typographique</h1>
                <p class="lead">Cette page est destinée aux tests typographiques du nouveau thème du site internet.</p>
                <h2>Paragraphes</h2>
                <p>Is space before a paragraph equivalent to space after? Pretty much, though I prefer to rely on space after, and reserve space before for special circumstances. For instance, a block quotation may need space before and after to look vertically aligned.</p>
                <p>Is space before a paragraph equivalent to space after? Pretty much, though I prefer to rely on space after, and reserve space before for special circumstances. For instance, a block quotation may need space before and after to look vertically aligned.</p>
                <p>Is space before a paragraph equivalent to space after? Pretty much, though I prefer to rely on space after, and reserve space before for special circumstances. For instance, a block quotation may need space before and after to look vertically aligned.</p>
            </main>
            <footer>
                <p class="allsmallcaps">Copyright 2017 Xxxxxx<br>all rights reserved</p>
            </footer>
        </div>
    </body>
</html>

Vous constaterez que la police utilisée diffère mais le problème est visible pour toutes les polices. En revanche, chez moi la police par défaut ne compose plus le texte sur les lignes mais un peu en dessous :

Je souhaiterais donc que :

  1. la ligne de base du gros texte corresponde aux lignes rouges tracées. Ignorez le titre de la colonne de gauche : j’ai oublié la propriété line-height: 26px; et je ne voulais pas refaire les captures d’écran.
  2. Quelle que soit la police utilisée, les lignes de textes soient posées sur les lignes.

D’après un article de Zell Liew, Why is Vertical Rhythm an Important Typography Practice?, ce problème est une conséquence de la façon dont les CSS fonctionnent. Or, le framework Sassline semble y arriver (cliquer sur toggle grid). Je ne souhaite pas l’utiliser car il contient trop de choses inutiles pour moi, et je souhaite en apprendre d’avantage.

Le deuxième point est moins critique puisque l’interligne est tout de même conservé, mais je voudrais avoir quelque chose de propre.

Avez-vous une idée de la manière de procéder ?

+0 -0

Je ne veux pas, mais je me réserve le droit de changer de police de caractère et l’utilisateur peut très bien avoir réglé son navigateur pour utiliser uniquement la police par défaut (ou une autre). J’ai découvert le problème en retirant le code inutile du fichier sur lequel je travaille afin de présenter un code minimal pour le forum.

+0 -0

je me réserve le droit de changer de police de caractère

C’est à dire ? Dans quel cas par exemple ?

l’utilisateur peut très bien avoir réglé son navigateur pour utiliser uniquement la police par défaut (ou une autre).

Ouais, mais je pense que ce cas-là est rare, et bien qu’un site doit (je pense) rester utilisable pour les utilisateurs qui font ça, je pense que dans ce cas tu peux te permettre de ne pas faire attention des détails graphiques comme le rythme vertical.

La très grande majorité des sites web utilisent uniquement une ou deux polices personnalisées et sont conçus pour fonctionner avec leurs propres polices personnalisées. Tans pis pour ceux qui les changent eux mêmes.

+0 -0

Actuellement, j’utilise la police Kepler. Elle me plaît beaucoup et a toutes les fonctionnalités nécessaires. Cependant, il est possible que j’en trouve une meilleure ou une moins chère. De toute façon, elle n’est vendue nulle part avec une licence permettant de l’héberger sur son propre serveur. Je préfère rester dans la légalité même si je ne risque pas grand chose. Enfin, c’est vraiment un détail par rapport à mon problème d’alignement.

+0 -0

Tiens, je connaissait pas cette police OpenDyslexic. C’est intéressant.

(Note que je suis complètement le fait qu’un site reste utilisable avec une police modifiée par l’utilisateur hein, je pense juste que c’est normal de ne pas supporter des choses peu importantes comme le rythme vertical dans ces cas là)

Si on ajoute les malvoyants et les personnes âgées qui grossissent les polices, ça commence à faire du monde.

Dis-moi si j’ai tord mais pour moi, quelqu’un qui ne voit pas très bien va généralement grossir tout le site et pas juste la police. De nos jours, ça marche vraiment bien avec la plupart des sites. Comme ça, toutes les proportions du site (ainsi que le rythme vertical) sont préservés. J’avais en tout cas conseillé de faire ça à une personne de ma famille malvoyante et ça lui convenait bien.

+0 -0

La problématique de l’accessibilité soulevée par Gabbro est à prendre en compte. Les dyslexiques aussi ont le droit d’avoir une grille typographique ! Concernant le zoom, je viens de me rendre compte que ça engendre des problèmes (testé uniquement sur ordinateur).

@A312 : j’ai regardé dans cette direction et ça m’a conduit à découvrir qu’en fait le W3C n’utilise pas les mêmes définitions que les typographes en ce qui concerne la hauteur des lignes et l’alignement du texte. En fait, par défaut le texte est centré verticalement dans chaque ligne. Après un peu de lecture, le problème me semble inextricable s’il faut garder le même code pour toutes les polices. La solution semble être de faire des calculs avec la police choisie et de faire des micro-ajustements. J’espère vraiment me tromper.

+1 -0

Bon, j’ai abandonné le projet d’avoir la ligne de base du texte confondue avec les lignes de la grille.

L’autre problème qui se pose, c’est l’alignement des images par rapport à la grille. Redimensionner les fichiers à la bonne hauteur (proportionnelle à la hauteur de ligne) n’est pas viable sur les petits écrans où la largeur de l’image sera réduite de manière arbitraire, et donc la hauteur réelle ne sera plus la bonne. Il existe une bibliothèque Javascript qui permet de résoudre ce problème : baseline.js. Elle n’a pas besoin de dépendances (jQuery notamment) et peut s’intégrer directement dans le code HTML :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
...
<head>
    ...
    <script src="baseline.js"></script>
</head>
<body>
    ...
    <script>
        baseline("img", 26);
    </script>
</body>

Ici, je demande au script de faire en sorte que les images s’alignent sur une grille de 26 pixels. Or, absolument rien ne se passe. Je n’y connais rien en Javascript, donc savez-vous d’où le problème pourrait provenir ?

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte