Commentaires sur : Lisibilité des sites web, font-size : 100% – 16px http://all-for-design.com/web-design/lisibilite-des-sites-web-font-size-100-16px Webdesign, Graphisme & inspiration... Sun, 22 Apr 2012 19:58:41 +0200 http://wordpress.org/?v=abc hourly 1 Par : CedricSoubrie http://all-for-design.com/web-design/lisibilite-des-sites-web-font-size-100-16px#comment-418 CedricSoubrie Sat, 25 Jun 2011 23:51:44 +0000 http://all-for-design.com/?p=1353#comment-418 Merci beaucoup pour ces conseils. J'ai essayé de faire ce que je pouvais avec ma maitrise de css. Tu me diras ce que tu en penses (sortie prévu d'ici ~10 jours) Merci beaucoup pour ces conseils. J’ai essayé de faire ce que je pouvais avec ma maitrise de css. Tu me diras ce que tu en penses (sortie prévu d’ici ~10 jours)

]]> Par : Aure http://all-for-design.com/web-design/lisibilite-des-sites-web-font-size-100-16px#comment-414 Aure Mon, 20 Jun 2011 08:02:39 +0000 http://all-for-design.com/?p=1353#comment-414 Hello cedric, J'ai l'impression qu'une durée de lecture de 25-35min sur un Iphone doit être assez fatiguante. Autant sur un Ipad il n'y a pas de pb mais sur un Iphone c'est plus difficile. Pour compenser cela il faudra vraiment mettre le paquet sur le confort de lecture : hauteur d'x / interlignage et éviter les sources de polution visuelle. Focus sur le contenu ! Si tu prends Palatino tu peux essayer un couple 15/22 (approximativement 45 signes par ligne dans ton cas) voir 16/24 (texte plus lisible mais plus de retour à la ligne donc potentiellement + fatiguant pour le lecteur). Je ne me prononcerais pas sur la propriété css hyphens que je ne connais pas assez mais en général on préfère ne pas justifier le texte pour éviter les pb... Fer à gauche tout simplement. Pour ce qui me concerne je ne modifie pas l'interlettrage pour les bas de casse (laissons cela aux typographes qui ont déjà pensé à tout) mais l'augmente parfois (souvent même) pour les capitales. Concernant l'app Ipad j'aurais peut-être augmenté un peu (très légèrement) l'interlignage et augmenté l'espace entre les sous-sections pour mieux dégager les différentes parties. Les sous-titres me semble un petit trop collés aux paragraphes qui les précèdent. J'aurais également laissé les valeurs d'interlettrage à 0 pour les paragraphes. Sauf erreur de ma part (ce qui est tt à fait possible) on dirait que tu as augmenté cette valeur, j'ai l'impression qu'il y a bcp d'espace entre les lettres mais je me trompe peut-être. Bon courage pour le dev Hello cedric,

J’ai l’impression qu’une durée de lecture de 25-35min sur un Iphone doit être assez fatiguante. Autant sur un Ipad il n’y a pas de pb mais sur un Iphone c’est plus difficile.

Pour compenser cela il faudra vraiment mettre le paquet sur le confort de lecture : hauteur d’x / interlignage et éviter les sources de polution visuelle. Focus sur le contenu !

Si tu prends Palatino tu peux essayer un couple 15/22 (approximativement 45 signes par ligne dans ton cas) voir 16/24 (texte plus lisible mais plus de retour à la ligne donc potentiellement + fatiguant pour le lecteur).

Je ne me prononcerais pas sur la propriété css hyphens que je ne connais pas assez mais en général on préfère ne pas justifier le texte pour éviter les pb… Fer à gauche tout simplement.

Pour ce qui me concerne je ne modifie pas l’interlettrage pour les bas de casse (laissons cela aux typographes qui ont déjà pensé à tout) mais l’augmente parfois (souvent même) pour les capitales.

Concernant l’app Ipad j’aurais peut-être augmenté un peu (très légèrement) l’interlignage et augmenté l’espace entre les sous-sections pour mieux dégager les différentes parties. Les sous-titres me semble un petit trop collés aux paragraphes qui les précèdent.
J’aurais également laissé les valeurs d’interlettrage à 0 pour les paragraphes. Sauf erreur de ma part (ce qui est tt à fait possible) on dirait que tu as augmenté cette valeur, j’ai l’impression qu’il y a bcp d’espace entre les lettres mais je me trompe peut-être.

Bon courage pour le dev

]]> Par : CedricSoubrie http://all-for-design.com/web-design/lisibilite-des-sites-web-font-size-100-16px#comment-413 CedricSoubrie Sat, 18 Jun 2011 14:49:41 +0000 http://all-for-design.com/?p=1353#comment-413 Bonjour, Je travaille sur une appli sur iPad/iPhone qui permet de lire des articles d'histoire (25-35mn par article). J'aurais aimé avoir des conseils de typo pour ma version iPhone. J'ai une largeur de colonne de 300px (4.5cm) et j'hésite entre texte justifié ou texte aligné à gauche. Sachant que je peux avoir les césures (-webkit-hyphens: auto;) et que j'utilise la police Palatino. Mes questions seraient donc : quelle taille de police, césure ou pas, aligné ou pas, agrandir l'espace entre les lignes et entre les lettres ? J'y connais pas grand chose d'ou mes questions un peu bateau... (Si tu as un iPad l'application s'appelle Une Touche d'Histoire) Bonjour,

Je travaille sur une appli sur iPad/iPhone qui permet de lire des articles d’histoire (25-35mn par article).

J’aurais aimé avoir des conseils de typo pour ma version iPhone.
J’ai une largeur de colonne de 300px (4.5cm) et j’hésite entre texte justifié ou texte aligné à gauche. Sachant que je peux avoir les césures (-webkit-hyphens: auto;) et que j’utilise la police Palatino.

Mes questions seraient donc : quelle taille de police, césure ou pas, aligné ou pas, agrandir l’espace entre les lignes et entre les lettres ?
J’y connais pas grand chose d’ou mes questions un peu bateau…
(Si tu as un iPad l’application s’appelle Une Touche d’Histoire)

]]> Par : Aure http://all-for-design.com/web-design/lisibilite-des-sites-web-font-size-100-16px#comment-350 Aure Tue, 14 Dec 2010 15:01:56 +0000 http://all-for-design.com/?p=1353#comment-350 Hello @Monique, Merci d'être passée par ici ! Effectivement il n'y a pas que le contraste qui pose problème sur ce blog... La v2, en cours de réalisation, sera très différente mais bien plus en phase avec ma façon de concevoir le web aujourd'hui : focus sur le contenu ! Merci pour ton commentaire, content que cet article t'ai plu. A bientôt ! Hello @Monique,
Merci d’être passée par ici !
Effectivement il n’y a pas que le contraste qui pose problème sur ce blog… La v2, en cours de réalisation, sera très différente mais bien plus en phase avec ma façon de concevoir le web aujourd’hui : focus sur le contenu !
Merci pour ton commentaire, content que cet article t’ai plu.
A bientôt !

]]> Par : Monique http://all-for-design.com/web-design/lisibilite-des-sites-web-font-size-100-16px#comment-349 Monique Tue, 14 Dec 2010 14:50:19 +0000 http://all-for-design.com/?p=1353#comment-349 Bonjour, Je viens de relire cet article, et ses commentaires, avec beaucoup d'intérêt. Il y a aussi un autre point non négligeable pour la lisibilité d'une page Web : le choix des couleurs. le contraste entre les couleurs de fond et celles du texte est particulièrement important... et pour ce blog, mon impression est confirmée par l'extension WCAG Contrast checker https://addons.mozilla.org/fr/firefox/addon/7391/ le contraste n'est pas suffisant ;-) Amicalement, Monique .-= Dernier blog de Monique : <a href="http://blog.webatou.info/post/atelier-paris-web-handicaps-cognitifs" rel="nofollow">Atelier Paris-Web- les handicaps cognitifs</a> =-. Bonjour,

Je viens de relire cet article, et ses commentaires, avec beaucoup d’intérêt.

Il y a aussi un autre point non négligeable pour la lisibilité d’une page Web : le choix des couleurs. le contraste entre les couleurs de fond et celles du texte est particulièrement important… et pour ce blog, mon impression est confirmée par l’extension WCAG Contrast checker https://addons.mozilla.org/fr/firefox/addon/7391/ le contraste n’est pas suffisant ;-)

Amicalement,
Monique
.-= Dernier blog de Monique : Atelier Paris-Web- les handicaps cognitifs =-.

]]>