Typo & web

Pour une lisibilité optimale de la typographie sur internet

Si le web a toujours été un média de texte, les moyens de contrôle typographique dont nous disposons aujourd’hui pour concevoir une page n’ont plus grand-chose à voir avec les outils d’hier.

À l’heure où le langage CSS repousse sans cesse les limites de la mise en page et où l’on peut désormais utiliser sur le web n’importe quel caractère, ou presque, il est important de ne pas perdre de vue l’une des principales problématiques typographiques : la lisibilité du contenu.

Mais qu’est-ce que la lisibilité ? Comment le support écran influence-t-il notre lecture ? Pourquoi et comment les systèmes d’exploitation et les navigateurs modifient-ils le rendu des caractères ? Quelles sont les caractéristiques d’une fonte optimisée pour la lecture sur écran ? Comment tester la lisibilité d’un contenu web ?

Cet ouvrage aborde toutes ces questions, entre autres, sans négliger l’héritage typographique de l’impression sur papier. Il s’adresse ainsi à tous ceux qui souhaitent entrer dans le domaine passionnant de la typographie numérique, outil essentiel pour une bonne lisibilité des contenus web.

Un ouvrage indispensable pour maîtriser la création d’une page web parfaitement lisible, donc plus efficace.

Letters & the Web – For Optimal Readability of Typography on the Internet

If the Web has been a media of text from the start, the typographic means that are available to us today for designing a Web page have little to do with those used in the Web's early days.

At a time when CSS continually pushes Web page layout passed prior limits and when almost any character can be used, it is important to not lose sight of the main typographic issues: readable content.

But what exactly is readability? How does the screen influence the way we read? Why and how do operating systems and browsers change the way the characters appear? What are the characteristics of a font that optimizes its being read on the screen? How can the readability of Web content be tested?

This book covers all these questions, and many more, without neglecting the rich typographical heritage of printed paper. It is written for all those who wish to delve into the fascinating area of digital typography, an essential tool for creating clear Web content.

This is an indispensable asset for mastering easy to read, and therefore efficient Web page creation.

Tipografía y web: optimizar la legibilidad en Internet

Si bien la web ha sido siempre un medio de texto, hoy disponemos de modos de controlar la tipografía al diseñar una página que no tienen gran cosa que ver con las herramientas de ayer.

Actualmente, cuando el lenguaje CSS extiende constantemente los límites de la maquetación y se puede utilizar prácticamente cualquier tipo en la web, es importante no perder de vista que una de las principales problemáticas tipográficas es la legibilidad del contenido.

Pero, ¿qué es la legibilidad? ¿Qué influencia tiene el soporte pantalla en la lectura? ¿Cómo y por qué los sistemas de explotación y los navegadores modifican el aspecto de los caracteres? ¿Cuáles son las características de una fuente óptima para la lectura en pantalla? ¿Cómo comprobar la legibilidad de un contenido web?

Esta obra aborda todas esas cuestiones y otras, sin dejar de lado la herencia tipográfica de la impresión en papel. También se dirige a quienes tengan curiosidad por entrar en el apasionado mundo de la tipografía digital, herramienta esencial para lograr una buena legibilidad de los contenidos web.

Una obra indispensable para crear una página web perfectamente legible y, por ende, más eficaz.

Avant-propos
Sommaire
Introduction

1.      A propos de lisibilité

a.      Qu’entend on par lisibilité ?
i.      Définition
ii.     L’importance du contexte

b.      Le processus de lecture : comment lit-on ?
i.      Une lecture saccadée
ii.     Reconnaissance des formes

c.      Les caractéristiques de la lisibilité sur écran
i.      Le pixel comme unité de base
ii.     Une grande diversité

2.      Les facteurs de lisibilité sur le web

a.      Le lecteur et son environnement
i.      Connaître sa cible
ii.     On lit le mieux ce qu’on lit le plus

b.      Le choix des caractères
i.      La distinction entre titrage et labeur
1.      Caractère de titrage
2.      Caractères de labeur

ii.     L’importance du dessin des caractères
1.      Les contres-formes
2.      La hauteur d’x
3.      Ascendantes et descendantes

iii.    L’optimisation des polices pour l’écran
1.      Le hinting
2.      Le Kerning
3.      Exemples de polices optimisées

c.      Le rendu des polices sur le web
i.      Selon l’OS
1.      Affichage des polices sur Mac
2.      Affichage des polices sur Windows

ii.     Selon les navigateurs
1.      Firefox - Chrome - Safari - Opera - IE6
2.      IE7 et IE8
3.      IE9 et FF4

3.      La puissance des CSS au service de la lisibilité

a.      Le choix de polices appropriées
i.      Une font-stack cohérente
ii.     Des polices optimisées pour le web

b.      Le couple : corps de texte / hauteur de ligne
i.      Optimiser le confort de lecture
ii.     Les échelles typographiques

c.      L’alignement du texte
i.      La grille horizontale
ii.     La question de la justification

d.      L’espace
i.      Letter-spacing
ii.     Margin & padding

e.      Quelques exemples à la loupe
i.      Trent Walton
ii.     Information Architect
iii.    The Design Cubicle
iv.     Design Made in Germany #5
v.      John Tangerine

Conclusion
Bibliographie
Index

Pages annexes

○       Lisibilité des polices Georgia et Verdana : comparatif
○       Lisibilité des polices du Google Font Directory : comparatif
○       Lisibilité des polices websafe : comparatif
○       Quelques exemples de webfont particulièrement lisibles
○       Les différents formats de fontes
○       Utilisation de la propriété font-face
○       Liste de références utiles

 

 

image Alsacreations.com Rédigé le Mardi 21 août 2012