Archives des tags : interlignage

Pas encore de description pour le tag interlignage. Suggérez à l'administrateur du site de d'y remédier.
HTML & CSS

940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid

940.css est un système de grille de mise en page CSS qui résulte de la fusion des frameworks 960 Grid System, Blueprint CSS et The Simpler Grid dont il reprend les meilleures idées. Il est composé de 24 colonnes de 20 pixels séparées par une gouttière de 20 pixels (adaptation de la technique évoquée dans l’article Calculer une grille de mise en page « typo » avec le nombre d’Or). Soit un interlignage de 20 pixels pour une taille de caractère de 13 pixels en utilisant : font-size: 13px; line-height: 1.539. →

Design & Graphisme

Webdesign, lisibilité, typographie et rédaction web

Une grande partie des notions relatives à la lisibilité des contenus sur les écrans date des débuts du web. Dès 1997, Jakob Nielsen déclarait que la lecture sur écran était 25% plus lente que sur le papier. Depuis cette époque, la technologie n’a cessé d’évoluer et la qualité des écrans et des polices de caractères va dans le bon sens. Il est temps de se poser des questions sur la lisibilité des caractères, le sens de lecture d’une page, les valeurs optimales pour le corps des textes et leurs interlignages, le nombre de fontes que l’on peut utiliser dans une page, et la rédaction pour le web. →

Design & Graphisme

Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)

La résolution des périphériques mobiles comme les téléphones mobiles, les Smartphones (iPhone, Android) et les tablettes tactiles (iPad) est généralement de l’ordre de 240 x 320, 320 x 480 ou 480 x 640 pixels. Après avoir décortiqué la création d’une grille de mise en page adaptée à la résolution moyenne des écrans de bureau et des Netbooks, je vous propose de suivre un autre exemple d’application de ce concept de grille modulaire dont la particularité est que la colonne de base est égale à la largeur de la gouttière. →

Design & Graphisme

Calculer une grille de mise en page « typo » avec le nombre d’Or

Le calcul d’une grille de mise en page modulaire avec le nombre d’Or est une bonne occasion pour mettre en pratique le manifeste pour un interlignage minimum syndical et les cinq règles pour améliorer l’affichage de vos textes. L’objectif est de déterminer une taille de police de caractère et une largeur de colonnes d’après un interlignage «idéal». Après l’aperçu d’une méthode pour créer des gabarits destinés à l’imprimé, j’expliquerai comment utiliser l’interlignage pour concevoir des grilles adaptées à une résolution inférieure ou égale à 1 024 pixels de large. J’ai choisi un interlignage compatible avec le ratio du nombre d’Or typographique (1,5) et du nombre d’Or Classique (1,618). Toutefois, le concept de cette grille fonctionne très bien avec d’autres valeurs. J’ai mis des exemples de grilles réalisées avec Illustrator sous la forme d’un GIF animé (désolé). →

Design & Graphisme

Grille de mise en page, « zoning » et gabarit avec Adobe InDesign

Après les croquis réalisés plus ou moins rapidement sur un coin de table face au client ou de retour à l’atelier, il est parfois nécessaire de passer à une phase plus industrielle afin de réaliser les maquettes « fil de fer » de la Home et des pages intérieures. Illustrator et Fireworks ont beaucoup d’atouts pour faire les Wireframes d’une page Web, mais InDesign n’est pas en reste. Il permet de mettre en place une grille dès la création d’un nouveau document. Dans la suite de cet article, nous verrons comment créer un colonage compatible avec votre framework CSS préféré et utiliser les gabarits InDesign pour les différentes déclinaisons des pages de votre site Internet. →

Typographie

Manifeste pour un interlignage minimum syndical pour les blogs !

Un spectre hante le web : le spectre de l’interlignage par défaut des navigateurs. Trop de blogs et de sites web se contentent du minimum syndical pour gérer l’interlignage. Par défaut, les navigateurs web proposent 120% de la taille de la police. Ce qui est dramatiquement insuffisant au regard de la faible résolution du texte à l’écran, alors qu’il suffit d’ajouter une ligne de déclaration CSS à la balise `html` ou `body` pour permettre à vos lecteurs de passer du déchiffrage laborieux à la lecture pleine et entière. Essayez, vous serez surpris de voir à quel point vos pages web auront gagné en lisibilité. →