Quels sont les ratios standard pour la typographie sur le Web?


25

Lors de la conception d'un site Web, j'essaie souvent de m'assurer que ma typographie est proportionnelle et cohérente. Cependant, je n'ai pas pu trouver d'articles ou de ressources définitifs sur les rapports et les tailles à utiliser. Plus précisément, quelles sont les pratiques recommandées ou standard pour:

  • Taille de police
  • Hauteur de la ligne
  • Largeur de ligne
  • Interligne

Veuillez considérer le texte du paragraphe et de l'en-tête dans vos réponses. De plus, toute étude sur l'efficacité de divers ratios ou paramètres serait très utile.

Réponses:


18

Les éléments du style typographique de Robert Bringhurst sont une référence complète et merveilleuse pour des choses comme ça. C'est long mais très précieux.

De nombreux concepteurs recommandent une grille de lignes standard pour qu'une ligne + un rembourrage tienne toujours dans, disons, 16 pixels. Donc, n'importe quoi de moins que cela aurait une hauteur de ligne de 16, tout ce qui est au-dessus de cela aurait une hauteur de ligne 32.

La longueur idéale d'une ligne de lecture de texte serait de 45 caractères pour certains et de 55 à 75 pour d'autres sources.

Il existe quelques moyennes courantes de sites Web ici: Modèles de conception typographique et meilleures pratiques


1

Je dirais commencer par le paragraphe à 16 pixels et utiliser la séquence de Fibonacci pour calculer le reste. Il semble que les principaux navigateurs utilisent cette logique. Au fil des ans (pour de futures recherches, en utilisant «Les éléments du style typographique: version 4.0» de Robert Bringhurst, Hartley et Marks), l'interligne a été réglé à 12 pt pour une police de 10 pt.

En convertissant 12pt en pixels, nous obtenons une police de base de 16px.

La plupart des feuilles de style par défaut des navigateurs utilisent 16 pixels pour leur texte de paragraphe, comme vous pouvez le vérifier vous-même sur le DOM ou en lisant les listes https://www.w3.org/TR/CSS21/sample.html et http: //. w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html

Le problème que nous avons aujourd'hui est précisément que nous parlons d'un nouveau type de typographie. La typographie Web actuelle qui doit s'adapter à différents appareils est complètement différente des concepts antérieurs tels que ceux représentés sur les éléments du style typographique de Robert Bringhurst. Malgré ce livre excellent, la réalité est que le concepteur moderne a besoin de code. Je considère généralement une matrice standard à partir des principales feuilles de style du navigateur en créant un squelette d'un fichier HTML avec les éléments de base h1, h2, h3, h4, h5, h6, paragraphe, pied de page. J'inspecte la feuille de style du navigateur pour comprendre la taille de la taille de pixel standard utilisée par la hauteur de ligne et la hiérarchie des en-têtes. Avant, la taille de la typographie Web était réglementée par le type mobile métal / bois, mais à partir de 1985, avec l'accord entre Adobe et Apple, les choses ont commencé à changer. Je considère qu'aujourd'hui, les principaux régulateurs des concepts de typographie sont Apple, Safari, Windows, avec Internet Explorer, Chrome, Firefox ... Vous devrez regarder leurs feuilles de style de navigateur pour adapter votre typographie à ce qui sera réellement rendu et dans différents appareils. Vous devriez toujours suivre les pratiques des éléments de style typographique de Robert Bringhurst, qui est un excellent livre, ou suivre le système de séquence de Fibonacci. Je me tiens généralement au courant des modifications apportées aux feuilles de style des navigateurs et je lis les spécifications w3 ici: Vous devriez toujours suivre les pratiques des éléments de style typographique de Robert Bringhurst, qui est un excellent livre, ou suivre le système de séquence de Fibonacci. Je me tiens généralement au courant des modifications apportées aux feuilles de style des navigateurs et je lis les spécifications w3 ici: Vous devriez toujours suivre les pratiques des éléments de style typographique de Robert Bringhurst, qui est un excellent livre, ou suivre le système de séquence de Fibonacci. Je me tiens généralement au courant des modifications apportées aux feuilles de style des navigateurs et je lis les spécifications w3 ici:https://www.w3.org/TR/html401/struct/global.html#h-7.5.5 Je pense cependant que le champ Design doit en tenir compte et je trouve que l'éducation à la pratique n'est pas mise à jour avec réalités actuelles. Vous pouvez également en savoir plus ici sur mon blog: https://road-to-resilience.blog/2019/11/21/the-typographic-thing/


Salut @EstelaG et bienvenue sur GD.SE! Nous avons des règles strictes pour le spam et les réponses dans les liens. Je détesterais que votre réponse soit signalée. Vous devez modifier votre question pour résumer les principaux points de l'article.
curieux
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.